Graphic set preview icons can now be specified

This commit is contained in:
Mal 2023-09-27 22:05:06 +02:00
parent d41f7eaeed
commit feb3f9c844
4 changed files with 17 additions and 6 deletions

View File

@ -8,6 +8,7 @@ let GraphicSet = [
backgroundImage: null, backgroundImage: null,
tilePreview: 5, tilePreview: 5,
primaryTiles: 8, primaryTiles: 8,
gravity: 2,
}, },
{ {
name: 'Moon', name: 'Moon',
@ -18,6 +19,7 @@ let GraphicSet = [
backgroundImage: 'background_earth.jpg', backgroundImage: 'background_earth.jpg',
tilePreview: 1, tilePreview: 1,
primaryTiles: 2, primaryTiles: 2,
gravity: 0.5,
}, },
{ {
name: 'Death Star', name: 'Death Star',
@ -26,8 +28,9 @@ let GraphicSet = [
scale: 1, scale: 1,
backgroundColor: '#171721', backgroundColor: '#171721',
backgroundImage: null, backgroundImage: null,
tilePreview: 1, tilePreview: 3,
primaryTiles: 6, primaryTiles: 6,
gravity: 2,
}, },
{ {
name: 'Nature 2.0', name: 'Nature 2.0',
@ -36,8 +39,9 @@ let GraphicSet = [
scale: 3, scale: 3,
backgroundColor: '#6096ff', backgroundColor: '#6096ff',
backgroundImage: null, backgroundImage: null,
tilePreview: 5, tilePreview: 46,
primaryTiles: 3, primaryTiles: 3,
gravity: 2,
} }
]; ];

View File

@ -175,7 +175,7 @@ export default class Tilorswift
{ {
this.tileset = new Tileset(tilesetIndex); this.tileset = new Tileset(tilesetIndex);
this.level.terrain = new Terrain(this.tileset, tilesX, tilesY, GraphicSet[tilesetIndex].backgroundColor); this.level.terrain = new Terrain(this.tileset, tilesX, tilesY, GraphicSet[tilesetIndex].backgroundColor);
this.level.setGravity(GraphicSet[tilesetIndex].gravity);
document.body.style.backgroundColor = this.level.getBackgroundColor(); document.body.style.backgroundColor = this.level.getBackgroundColor();
if (GraphicSet[tilesetIndex].backgroundImage !== null) { if (GraphicSet[tilesetIndex].backgroundImage !== null) {

View File

@ -100,7 +100,12 @@ export default class Dialog
let htmlThumbnail = document.createElement('div'); let htmlThumbnail = document.createElement('div');
htmlThumbnail.classList.add('tileset-thumbnail'); htmlThumbnail.classList.add('tileset-thumbnail');
htmlThumbnail.style.backgroundImage = 'url("../' + Setting.TILESET_LOCATION + graphicSet.tileset + '")';
const image = new Image();
image.src = '../' + Setting.TILESET_LOCATION + graphicSet.tileset;
htmlThumbnail.style.backgroundImage = 'url(' + image.src + ')';
htmlThumbnail.style.backgroundPositionX = -(image.width / graphicSet.tiles) * graphicSet.tilePreview + 'px';
htmlTilesetElement.appendChild(htmlThumbnail); htmlTilesetElement.appendChild(htmlThumbnail);
let htmlTitleElement = document.createElement('div'); let htmlTitleElement = document.createElement('div');
@ -112,7 +117,9 @@ export default class Dialog
'click', 'click',
() => { () => {
htmlListElement.style.display = 'none'; htmlListElement.style.display = 'none';
htmlAvatarElement.style.backgroundImage = 'url("../' + Setting.TILESET_LOCATION + GraphicSet[index].tileset + '")'; htmlAvatarElement.style.backgroundImage = 'url(' + image.src + ')';
htmlAvatarElement.style.backgroundPositionX = -96 * graphicSet.tilePreview + 'px';
window.dispatchEvent(new TilorswiftTilesetSelectedEvent(index)); window.dispatchEvent(new TilorswiftTilesetSelectedEvent(index));
} }
); );

View File

@ -294,7 +294,7 @@ input[type="file"] {
} }
.tileset-thumbnail { .tileset-thumbnail {
display: table-cell; display: block;
width: 32px; width: 32px;
height: 32px; height: 32px;
background-size: auto 100%; background-size: auto 100%;