Mal/mr-crocs-adventures
Mal/mr-crocs-adventures
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Tileset dialog for Tilorswift and fix for adding rows.

Browse Source
This commit is contained in:
Mal 2020-02-14 00:12:24 +01:00
parent 72589544bd
commit 04c3d0253b
19 changed files with 297 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
graphic-sets.json Normal file
View File

@ -0,0 +1,16 @@
[
{
"name": "Nature",
"tileset": "landscape01.jpg",
"tiles": 8,
"backgroundColor": "#6096ff",
"backgroundImage": null
},
{
"name": "Moon",
"tileset": "moon.jpg",
"tiles": 2,
"backgroundColor": "black",
"backgroundImage": null
}
]

BIN
graphics/background_earth.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 267 KiB

20
js/GraphicSet.js Normal file
View File

@ -0,0 +1,20 @@
let GraphicSet = [
{
name: 'Nature',
tileset: 'landscape01.jpg',
tiles: 8,
scale: 3,
backgroundColor: '#6096ff',
backgroundImage: null
},
{
name: 'Moon',
tileset: 'moon.jpg',
tiles: 2,
scale: 3,
backgroundColor: 'black',
backgroundImage: 'background_earth.jpg'
}
];
export default GraphicSet;

17
js/module.js
View File

@ -7,8 +7,8 @@ import FileLoader from "./FileLoader.js";
import Camera from "./Camera.js";
import Gisela from "./Gisela.js";
import Setting from "./Setting.js";
import InterfaceEvent from "./events/InterfaceEvent.js";
import FrameRateMeasurer from "./FrameRateMeasurer.js";
import GraphicSet from "./GraphicSet.js";
class ImageLoader
{
@ -160,7 +160,7 @@ const GRAVITY = 2;
let fps;
let frameDuration;
let levelJson = new FileLoader('levels/level01.json');
let levelJson = new FileLoader('levels/moon.json');
const LEVEL = JSON.parse(levelJson.getContent());
@ -180,7 +180,7 @@ let loader = new ImageLoader();
loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-right.png');
loader.addImage(Setting.GRAPHICS_LOCATION + 'mr-croc-walk-left.png');
loader.addImage(Setting.TILESET_LOCATION + 'landscape01.jpg');
loader.addImage(Setting.TILESET_LOCATION + GraphicSet[LEVEL.tileset].tileset);
loader.addImage(Setting.GRAPHICS_LOCATION + 'gisela-right.png');
new FrameRateMeasurer();
@ -191,6 +191,15 @@ window.addEventListener(
let canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.backgroundAttachment = 'fixed';
canvas.style.backgroundSize = 'cover';
canvas.style.backgroundPosition = 'center center';
if (GraphicSet[LEVEL.tileset].backgroundImage !== null) {
canvas.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[LEVEL.tileset].backgroundImage +'")';
}
canvas.style.backgroundColor = LEVEL.backgroundColor;
window.addEventListener(
'resize',
@ -212,7 +221,7 @@ window.addEventListener(
gisela = new Gisela();
architecture.setMovableToTargetPosition(gisela);
fps = 120; //event.frameRate;
fps = 120;
frameDuration = 1000 / fps;
window.requestAnimationFrame(MainLoop);
}

53
js/retro/RetroArchitecture.js
View File

@ -3,6 +3,8 @@ import RetroArchitectureTile from "./RetroArchitectureTile.js";
import GeometryRectCollection from "../geometry/GeometryRectCollection.js";
import GeometryPoint from "../geometry/GeometryPoint.js";
import GeometryRect from "../geometry/GeometryRect.js";
import GraphicSet from "../GraphicSet.js";
import Setting from "../Setting.js";
export default class RetroArchitecture
{
@ -10,6 +12,8 @@ export default class RetroArchitecture
{
this.tileset = tilesetSprite;
this.tiles = tiles;
this.backgroundColor = null;
this.backgroundImage = null;
this.rows = rows;
this.columns = columns;
this.matrix = [];
@ -37,6 +41,16 @@ export default class RetroArchitecture
}
}
setBackgroundColor(color)
{
this.backgroundColor = color;
}
setBackgroundImage(image)
{
this.backgroundImage = image;
}
getCollisionRects(rect)
{
let posX = Math.floor(rect.position.x / this.tileWidth) - 2;
@ -200,33 +214,46 @@ export default class RetroArchitecture
let field = this.matrix[y][x];
if (field !== null && field !== undefined) {
context.drawImage(
this.tileset.canvas,
field.tile * this.tileWidth,
0,
this.tileWidth,
this.tileHeight,
x * this.tileWidth - camera.position.x,
y * this.tileHeight - camera.position.y,
this.tileWidth,
this.tileHeight
);
this.drawField(context, x, y, camera, field);
}
}
}
}
drawField(context, x, y, camera, field)
{
context.drawImage(
this.tileset.canvas,
field.tile * this.tileWidth,
0,
this.tileWidth,
this.tileHeight,
x * this.tileWidth - camera.position.x,
y * this.tileHeight - camera.position.y,
this.tileWidth + 1,
this.tileHeight + 1
);
}
static createFromData(data)
{
let tileset = new RetroSprite(data.tileset, data.scale);
let graphicSet = GraphicSet[data.tileset];
console.log(data);
let tileset = new RetroSprite(
Setting.TILESET_LOCATION + graphicSet.tileset,
graphicSet.scale
);
let architecture = new RetroArchitecture(
tileset,
data.tiles,
graphicSet.tiles,
data.columns,
data.rows
);
architecture.setBackgroundColor(graphicSet.backgroundColor);
architecture.setBackgroundImage(graphicSet.backgroundImage);
architecture.startX = data.startX;
architecture.startY = data.startY;
architecture.targetX = data.targetX;

2
levels/level01.json
View File

File diff suppressed because one or more lines are too long

1
levels/moon.json Normal file
View File

@ -0,0 +1 @@
{"tileset":1,"rows":"20","columns":51,"startX":2,"startY":16,"targetX":49,"targetY":16,"backgroundColor":"black","matrix":[[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],[0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1],[1,1,-1,-1,0,0,0,0,0,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,0,0,0,0,-1,-1,-1,1],[1,1,0,0,1,1,1,1,1,1,1,0,0,-1,-1,-1,-1,-1,-1,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,-1,-1,-1,-1,-1,0,0,1,1,1,1,0,0,0,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]}

23
tilorswift/js/Terrain.js
View File

@ -1,6 +1,7 @@
import Field from "./Field.js";
import Tileset from "./Tileset.js";
import TilorswiftEvent from "./events/TilorswiftEvent.js";
import GraphicSet from "../../js/GraphicSet.js";
export default class Terrain
{
@ -15,6 +16,7 @@ export default class Terrain
this.targetTileX = undefined;
this.targetTileY = undefined;
this.backgroundColor = backgroundColor;
this.backgroundImage = undefined;
this.htmlElement = document.createElement('table');
this.brushTileIndex = 0;
@ -24,7 +26,6 @@ export default class Terrain
init()
{
this.htmlElement.id = 'level';
this.htmlElement.style.backgroundColor = this.backgroundColor;
this.htmlElement.style.width = this.tileset.getTileWidth() * this.tilesX + 'px';
this.htmlElement.style.height = this.tileset.getTileHeight() * this.tilesY + 'px';
@ -65,6 +66,8 @@ export default class Terrain
for (let q = 0; q < quantity; q++) {
this._insertRow(index);
this.tilesY++;
this.entranceTileY = this.entranceTileY === undefined ? undefined : this.entranceTileY + 1;
this.targetTileY = this.targetTileY === undefined ? undefined : this.targetTileY + 1;
}
this.htmlElement.style.height = this.tileset.getTileHeight() * this.tilesY + 'px';
@ -82,11 +85,18 @@ export default class Terrain
tr.appendChild(td);
}
console.log(index);
if (index === undefined || index >= this.tilesY - 1) {
this.fields.push(row);
this.htmlElement.appendChild(tr);
} else if (index === 0) {
this.fields = [row].concat(this.fields);
console.log(this.fields[0]);
this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]);
} else {
this.fields = this.fields.slice(0, index).concat(row).concat(this.fields.slice(index));
this.fields = this.fields.slice(0, index).concat([row]).concat(this.fields.slice(index));
console.log(this.fields[1]);
this.htmlElement.insertBefore(tr, this.htmlElement.childNodes[index]);
}
}
@ -96,6 +106,8 @@ export default class Terrain
for (let c = 0; c < quantity; c++) {
this._insertColumn(index);
this.tilesX++;
this.entranceTileX = this.entranceTileX === undefined ? undefined : this.entranceTileX + 1;
this.targetTileX = this.targetTileX === undefined ? undefined : this.targetTileX + 1;
}
this.htmlElement.style.width = this.tileset.getTileWidth() * this.tilesX + 'px';
@ -175,11 +187,10 @@ export default class Terrain
static createFromJson(terrainData)
{
let imageTileset = new Image();
imageTileset.src = terrainData.tileset;
let graphicSet = GraphicSet[terrainData.tileset];
let tileset = new Tileset(imageTileset, terrainData.tiles, terrainData.scale);
let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows, terrainData.backgroundColor);
let tileset = new Tileset(terrainData.tileset);
let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows, graphicSet.backgroundColor);
for (let y = 0; y < terrainData.rows; y++) {
for (let x = 0; x < terrainData.columns; x++) {

13
tilorswift/js/Tileset.js
View File

@ -1,10 +1,15 @@
import GraphicSet from "../../js/GraphicSet.js";
import Setting from "../../js/Setting.js";
export default class Tileset
{
constructor(image, tiles, scale = 1)
constructor(setId)
{
this.image = image;
this.tiles = tiles;
this.scale = scale;
this.setId = setId;
this.image = new Image();
this.image.src = Setting.TILESET_LOCATION + GraphicSet[this.setId].tileset;
this.tiles = GraphicSet[this.setId].tiles;
this.scale = GraphicSet[this.setId].scale;
}
getWidth()

8
tilorswift/js/Tilorswift.js
View File

@ -2,8 +2,11 @@ export default class Tilorswift
{
static getTerrainAsJson(terrain)
{
console.log('Save da shit.');
let matrix = [];
console.log(terrain.fields.length);
for (let y = 0; y < terrain.fields.length; y++) {
let row = [];
@ -15,16 +18,13 @@ export default class Tilorswift
}
let data = {
tileset: terrain.tileset.image.src,
tiles: terrain.tileset.tiles,
scale: terrain.tileset.scale,
tileset: terrain.tileset.setId,
rows: terrain.tilesY,
columns: terrain.tilesX,
startX: terrain.entranceTileX,
startY: terrain.entranceTileY,
targetX: terrain.targetTileX,
targetY: terrain.targetTileY,
backgroundColor: terrain.backgroundColor,
matrix: matrix,
};

64
tilorswift/js/dialog/Dialog.js
View File

@ -1,3 +1,7 @@
import GraphicSet from "../../../js/GraphicSet.js";
import Setting from "../../../js/Setting.js";
import TilorswiftTilesetSelectedEvent from "../events/TilorswiftTilesetSelectedEvent.js";
export default class Dialog
{
constructor()
@ -59,6 +63,66 @@ export default class Dialog
return htmlElementInput;
}
createTilesetSelector()
{
let htmlElement = document.createElement('div');
htmlElement.id = 'tileset-selector';
let htmlElementLabel = document.createElement('div');
htmlElementLabel.classList.add('dialog-label');
htmlElementLabel.innerText = 'Terrain';
let htmlAvatarElement = document.createElement('div');
htmlAvatarElement.id = 'tileset-avatar';
htmlAvatarElement.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + GraphicSet[0].tileset + '")';
let htmlListElement = document.createElement('div');
htmlListElement.id = 'tileset-list';
htmlElement.appendChild(htmlElementLabel);
htmlElement.appendChild(htmlAvatarElement);
htmlElement.appendChild(htmlListElement);
htmlAvatarElement.addEventListener(
'click',
() => {
htmlListElement.style.display = 'block';
}
);
GraphicSet.forEach(
(graphicSet, index) => {
let htmlTilesetElement = document.createElement('div');
htmlTilesetElement.classList.add('tileset');
let htmlThumbnail = document.createElement('div');
htmlThumbnail.classList.add('tileset-thumbnail');
htmlThumbnail.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + graphicSet.tileset + '")';
htmlTilesetElement.appendChild(htmlThumbnail);
let htmlTitleElement = document.createElement('div');
htmlTitleElement.classList.add('tileset-title');
htmlTitleElement.innerText = graphicSet.name;
htmlTilesetElement.appendChild(htmlTitleElement);
htmlTilesetElement.addEventListener(
'click',
() => {
htmlListElement.style.display = 'none';
htmlAvatarElement.style.backgroundImage = 'url("' + Setting.TILESET_LOCATION + GraphicSet[index].tileset + '")';
window.dispatchEvent(new TilorswiftTilesetSelectedEvent(index));
}
);
htmlListElement.appendChild(htmlTilesetElement);
}
);
this.inputAreaElement.appendChild(htmlElement);
return htmlElement;
}
setMessage(message)
{
this.messageElement.innerText = message;

4
tilorswift/js/dialog/DialogAddRows.js
View File

@ -18,11 +18,11 @@ export default class DialogAddRows extends Dialog
getPosition()
{
return this.inputPosition.value;
return parseInt(this.inputPosition.value);
}
getRowsCount()
{
return this.inputRows.value;
return parseInt(this.inputRows.value);
}
}

16
tilorswift/js/dialog/DialogNewTerrain.js
View File

@ -1,6 +1,6 @@
import Dialog from "./Dialog.js";
import TilorswiftNewTerrainEvent from "../events/TilorswiftNewTerrainEvent.js";
import Setting from "../../../js/Setting.js";
import TilorswiftEvent from "../events/TilorswiftEvent.js";
export default class DialogNewTerrain extends Dialog
{
@ -9,19 +9,29 @@ export default class DialogNewTerrain extends Dialog
this.setMessage('Neues Terrain erstellen');
this.inputRows = this.createInputNumber('Zeilen');
this.inputColumns = this.createInputNumber('Spalten');
this.inputTerrain = this.createTilesetSelector();
this.buttonCancel = this.createButton('Abbrechen');
this.buttonCreate = this.createButton('Erstellen');
this.terrainIndex = 0;
this.buttonCreate.addEventListener(
'click',
() => {
window.dispatchEvent(
new TilorswiftNewTerrainEvent(
Setting.TILESET_LOCATION + 'landscape01.jpg', /* TODO */
this.terrainIndex,
this.inputColumns.value,
this.inputRows.value
)
)
);
}
);
window.addEventListener(
TilorswiftEvent.TILESET_SELECTED,
(event) => {
this.terrainIndex = event.tilesetIndex;
console.log(event.tilesetIndex);
}
);
}

1
tilorswift/js/events/TilorswiftEvent.js
View File

@ -13,6 +13,7 @@ const TilorswiftEvent = {
ADD_COLUMNS_CLICKED: 'addColumnsClicked',
NEW_TERRAIN: 'newTerrain',
NEW_TERRAIN_CLICKED: 'newTerrainClicked',
TILESET_SELECTED: 'tilesetSelected',
};
export default TilorswiftEvent;

5
tilorswift/js/events/TilorswiftNewTerrainEvent.js
View File

@ -2,12 +2,11 @@ import TilorswiftEvent from "./TilorswiftEvent.js";
export default class TilorswiftNewTerrainEvent extends Event
{
constructor(tileset, tilesX, tilesY)
constructor(tilesetIndex, tilesX, tilesY)
{
super(TilorswiftEvent.NEW_TERRAIN);
this.tileset = tileset;
this.tilesetIndex = tilesetIndex;
this.tilesX = tilesX;
this.tilesY = tilesY;
this.backgroundColor = '#6096ff';
}
}

9
tilorswift/js/events/TilorswiftTilesetSelectedEvent.js Normal file
View File

@ -0,0 +1,9 @@
import TilorswiftEvent from "./TilorswiftEvent.js";
export default class TilorswiftTilesetSelectedEvent extends Event
{
constructor(tilesetIndex) {
super(TilorswiftEvent.TILESET_SELECTED);
this.tilesetIndex = tilesetIndex;
}
}

18
tilorswift/js/menu/TilesetPickerWidget.js
View File

@ -12,6 +12,8 @@ export default class TilesetPickerWidget extends Widget
this.brush = brush;
this.htmlElement = this.createElementPicker();
this.htmlElementSelector = this.createElementSelector();
this.htmlElement.appendChild(this.htmlElementSelector);
this.loadTileset();
window.addEventListener(
@ -27,12 +29,20 @@ export default class TilesetPickerWidget extends Widget
loadTileset()
{
this.htmlElement.appendChild(this.htmlElementSelector);
for (let t = 0; t < this.tileset.tiles; t++) {
let button = new ButtonTile(this.tileset, t);
this.htmlElementSelector.appendChild(button.getElement());
}
this.htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
}
reloadTileset(tileset)
{
this.tileset = tileset;
this.htmlElementSelector.innerHTML = '';
this.loadTileset();
}
createElementPicker()
@ -42,8 +52,6 @@ export default class TilesetPickerWidget extends Widget
htmlElement.style.width = this.tileset.getTileWidth() + 'px';
htmlElement.style.height = this.tileset.getTileHeight() + 'px';
htmlElement.style.backgroundSize = this.tileset.getTileWidth() + 'px ' + this.tileset.getTileHeight() + 'px';
htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")';
htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
return htmlElement;
}
@ -51,7 +59,7 @@ export default class TilesetPickerWidget extends Widget
createElementSelector()
{
let htmlElementSelector = document.createElement('div');
htmlElementSelector.id = 'tileset-selector';
htmlElementSelector.id = 'tileset-selector-widget';
htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px';

21
tilorswift/js/module.js
View File

@ -21,19 +21,29 @@ import TilorswiftAddColumnsClickedEvent from "./events/TilorswiftAddColumnsClick
import TilorswiftMenuNewTerrainClickedEvent from "./events/TilorswiftMenuNewTerrainClickedEvent.js";
import DialogNewTerrain from "./dialog/DialogNewTerrain.js";
import TargetPointWidget from "./menu/TargetPointWidget.js";
import GraphicSet from "../../js/GraphicSet.js";
import Setting from "../../js/Setting.js";
let loader = new FileLoader('../levels/level01.json');
let terrainData = JSON.parse(loader.getContent());
let image = new Image();
image.src = terrainData.tileset;
image.src = Setting.TILESET_LOCATION + GraphicSet[terrainData.tileset].tileset;
image.onload = function () {
let terrain = Terrain.createFromJson(terrainData);
if (GraphicSet[terrainData.tileset].backgroundImage !== null) {
document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[terrainData.tileset].backgroundImage + '")';
}
document.body.style.backgroundColor = GraphicSet[terrainData.tileset].backgroundColor;
let map = document.getElementById('map');
map.appendChild(terrain.getElement());
let brush = new Brush();
let tileset = new Tileset(image, 8, 3);
let tileset = new Tileset(terrainData.tileset);
let widgetBar = new WidgetBar('widget-bar');
let tilesetPicker = new TilesetPickerWidget(tileset, brush);
@ -148,9 +158,14 @@ image.onload = function () {
window.addEventListener(
TilorswiftEvent.NEW_TERRAIN,
(event) => {
terrain = new Terrain(tileset, event.tilesX, event.tilesY, event.backgroundColor);
let tileset = new Tileset(event.tilesetIndex);
terrain = new Terrain(tileset, event.tilesX, event.tilesY, GraphicSet[event.tilesetIndex].backgroundColor);
if (GraphicSet[event.tilesetIndex].backgroundImage !== null) {
document.body.style.backgroundImage = 'url("' + Setting.GRAPHICS_LOCATION + GraphicSet[event.tilesetIndex].backgroundImage + '")';
}
map.innerHTML = '';
map.appendChild(terrain.getElement());
tilesetPicker.reloadTileset(tileset);
}
);

58
tilorswift/style.css
View File

@ -8,6 +8,9 @@ body {
margin: 0;
overflow: hidden;
font-family: sans-serif;
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
#level {
@ -90,7 +93,6 @@ body {
right: 0;
bottom: 0;
overflow: scroll;
background-color: black;
}
#tileset-picker {
@ -104,7 +106,7 @@ body {
cursor: not-allowed;
}
#tileset-selector {
#tileset-selector-widget {
display: none;
position: absolute;
top: 0;
@ -112,11 +114,11 @@ body {
box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.5);
}
#tileset-picker:hover > #tileset-selector {
#tileset-picker:hover > #tileset-selector-widget {
display: block;
}
#tileset-picker.widget-disabled:hover > #tileset-selector {
#tileset-picker.widget-disabled:hover > #tileset-selector-widget {
display: none;
}
@ -242,6 +244,54 @@ body {
cursor: pointer;
}
#tileset-selector {
position: relative;
}
#tileset-avatar {
width: 96px;
height: 96px;
background-size: auto 100%;
cursor: pointer;
margin-bottom: 20px;
}
#tileset-list {
position: absolute;
top: 20px;
left: 116px;
display: none;
padding: 10px;
background-color: #cccccc;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.tileset {
display: table-row;
cursor: pointer;
}
.tileset:hover {
background-color: #5555cc;
}
.tileset-thumbnail {
display: table-cell;
width: 32px;
height: 32px;
background-size: auto 100%;
}
.tileset:hover > .tileset-thumbnail {
opacity: 0.5;
}
.tileset-title {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
/*
tr:hover > td > .selection {
opacity: 0.5;