Graphic set preview icons can now be specified
This commit is contained in:
parent
d41f7eaeed
commit
feb3f9c844
|
@ -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,
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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));
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
|
@ -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%;
|
||||||
|
|
Loading…
Reference in New Issue