From b989604a0eb4c9559902523b344ce820578cf8a6 Mon Sep 17 00:00:00 2001 From: Mal Date: Wed, 29 Jan 2020 00:21:53 +0100 Subject: [PATCH] Tilorswift json loader implemented. --- js/retro/RetroArchitecture.js | 2 +- levels/level.json | 20 +++++------ tilorswift/index.html | 11 ++++++ tilorswift/js/Field.js | 33 ++++++++++++++++++ tilorswift/js/Terrain.js | 64 +++++++++++++++++++++++++++++++++++ tilorswift/js/Tileset.js | 29 ++++++++++++++++ tilorswift/js/module.js | 13 +++++++ tilorswift/style.css | 20 +++++++++++ 8 files changed, 181 insertions(+), 11 deletions(-) create mode 100644 tilorswift/index.html create mode 100644 tilorswift/js/Field.js create mode 100644 tilorswift/js/Terrain.js create mode 100644 tilorswift/js/Tileset.js create mode 100644 tilorswift/js/module.js create mode 100644 tilorswift/style.css diff --git a/js/retro/RetroArchitecture.js b/js/retro/RetroArchitecture.js index 6ae730e..057f0a8 100644 --- a/js/retro/RetroArchitecture.js +++ b/js/retro/RetroArchitecture.js @@ -178,7 +178,7 @@ export default class RetroArchitecture for (let y = 0; y < data.rows; y++) { for (let x = 0; x < data.columns; x++) { - if (data.matrix[y][x] !== null) { + if (data.matrix[y][x] > -1) { architecture.matrix[y][x] = new RetroArchitectureTile( data.matrix[y][x], x * architecture.tileWidth, diff --git a/levels/level.json b/levels/level.json index 7246516..2fc095e 100644 --- a/levels/level.json +++ b/levels/level.json @@ -1,19 +1,19 @@ { - "tileset": "graphics/tileset-landscape01.jpg", + "tileset": "/mr-crocs-adventures/graphics/tileset-landscape01.jpg", "tiles": 8, "scale": 3, "rows": 10, "columns": 17, "matrix": [ - [6 ,6 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,4 ,4 ], - [6 ,6 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,4 ,4 ], - [6 ,6 ,null ,null ,null ,null ,null ,null ,0 ,0 ,0 ,0 ,null ,null ,null ,4 ,4 ], - [6 ,6 ,2 ,null ,null ,null ,null ,0 ,4 ,4 ,4 ,4 ,0 ,null ,null ,4 ,4 ], - [6 ,6 ,6 ,2 ,2 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,4 ,4 ], - [5 ,5 ,5 ,5 ,5 ,1 ,null ,null ,null ,null ,null ,null ,null ,null ,0 ,4 ,4 ], - [4 ,4 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,0 ,4 ,4 ,4 ], - [4 ,4 ,null ,null ,null ,null ,0 ,0 ,0 ,null ,null ,null ,0 ,4 ,4 ,4 ,4 ], - [4 ,4 ,0 ,0 ,0 ,null ,4 ,4 ,4 ,null ,null ,0 ,4 ,4 ,4 ,4 ,4 ], + [6 ,6 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,4 ,4 ], + [6 ,6 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,4 ,4 ], + [6 ,6 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,0 ,0 ,0 ,0 ,-1 ,-1 ,-1 ,4 ,4 ], + [6 ,6 ,2 ,-1 ,-1 ,-1 ,-1 ,0 ,4 ,4 ,4 ,4 ,0 ,-1 ,-1 ,4 ,4 ], + [6 ,6 ,6 ,2 ,2 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,4 ,4 ], + [5 ,5 ,5 ,5 ,5 ,1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,0 ,4 ,4 ], + [4 ,4 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,0 ,4 ,4 ,4 ], + [4 ,4 ,-1 ,-1 ,-1 ,-1 ,0 ,0 ,0 ,-1 ,-1 ,-1 ,0 ,4 ,4 ,4 ,4 ], + [4 ,4 ,0 ,0 ,0 ,-1 ,4 ,4 ,4 ,-1 ,-1 ,0 ,4 ,4 ,4 ,4 ,4 ], [4 ,4 ,4 ,4 ,4 ,0 ,4 ,4 ,4 ,0 ,0 ,4 ,4 ,4 ,4 ,4 ,4 ] ] } \ No newline at end of file diff --git a/tilorswift/index.html b/tilorswift/index.html new file mode 100644 index 0000000..a338795 --- /dev/null +++ b/tilorswift/index.html @@ -0,0 +1,11 @@ + + + + + Tilorswift + + + + + + \ No newline at end of file diff --git a/tilorswift/js/Field.js b/tilorswift/js/Field.js new file mode 100644 index 0000000..1aadfe6 --- /dev/null +++ b/tilorswift/js/Field.js @@ -0,0 +1,33 @@ +export default class Field +{ + className = 'field'; + + constructor(tileset, index = 0) + { + this.tileset = tileset; + this.index = index; + this.htmlElement = document.createElement('td'); + this.init(); + } + + init() + { + this.htmlElement.classList.add(this.className); + this.htmlElement.style.width = String(this.tileset.getTileWidth()) + 'px'; + this.htmlElement.style.height = String(this.tileset.getTileHeight()) + 'px'; + this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileHeight() + 'px'; + this.htmlElement.style.backgroundImage = 'url("' + this.tileset.image.src + '")'; + this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px'; + } + + setIndex(index) + { + this.index = index; + this.htmlElement.style.backgroundPositionX = -this.index * this.tileset.getTileWidth() + 'px'; + } + + getElement() + { + return this.htmlElement; + } +} \ No newline at end of file diff --git a/tilorswift/js/Terrain.js b/tilorswift/js/Terrain.js new file mode 100644 index 0000000..c4fc135 --- /dev/null +++ b/tilorswift/js/Terrain.js @@ -0,0 +1,64 @@ +import Field from "./Field.js"; +import Tileset from "./Tileset.js"; + +export default class Terrain +{ + constructor(tileset, tilesX, tilesY) + { + this.tileset = tileset; + this.fields = []; + this.tilesX = tilesX; + this.tilesY = tilesY; + this.htmlElement = document.createElement('table'); + this.htmlElement.id = 'level'; + + this.init(); + } + + init() + { + for (let r = 0; r < this.tilesY; r++) { + let row = []; + let tr = document.createElement('tr'); + + for (let col = 0; col < this.tilesX; col++) { + let field = new Field(this.tileset); + let td = field.getElement(); + row.push(field); + tr.appendChild(td); + } + + this.fields.push(row); + this.htmlElement.appendChild(tr); + } + + } + + getElement() + { + return this.htmlElement; + } + + setFieldIndex(x, y, index) + { + this.fields[y][x].setIndex(index); + } + + static createFromJson(json) + { + let terrainData = JSON.parse(json); + let imageTileset = new Image(); + imageTileset.src = terrainData.tileset; + + let tileset = new Tileset(imageTileset, terrainData.tiles, terrainData.scale); + let terrain = new Terrain(tileset, terrainData.columns, terrainData.rows); + + for (let y = 0; y < terrainData.matrix.length; y++) { + for (let x = 0; x < terrainData.matrix[y].length; x++) { + terrain.setFieldIndex(x, y, terrainData.matrix[y][x]); + } + } + + return terrain; + } +} \ No newline at end of file diff --git a/tilorswift/js/Tileset.js b/tilorswift/js/Tileset.js new file mode 100644 index 0000000..324a7b1 --- /dev/null +++ b/tilorswift/js/Tileset.js @@ -0,0 +1,29 @@ +export default class Tileset +{ + constructor(image, tiles, scale = 1) + { + this.image = image; + this.tiles = tiles; + this.scale = scale; + } + + getWidth() + { + return this.image.width * this.scale; + } + + getHeight() + { + return this.image.height * this.scale; + } + + getTileWidth() + { + return this.image.width / this.tiles * this.scale; + } + + getTileHeight() + { + return this.image.height * this.scale; + } +} \ No newline at end of file diff --git a/tilorswift/js/module.js b/tilorswift/js/module.js new file mode 100644 index 0000000..e5a27b8 --- /dev/null +++ b/tilorswift/js/module.js @@ -0,0 +1,13 @@ +import Terrain from "./Terrain.js"; +import FileLoader from "../../js/FileLoader.js"; + +let image = new Image(); +image.src = '../graphics/tileset-landscape01.jpg'; +image.onload = function () { + console.log('Loaded'); + + let loader = new FileLoader('../levels/level.json'); + let terrain = Terrain.createFromJson(loader.getContent()); + + document.body.appendChild(terrain.getElement()); +}; diff --git a/tilorswift/style.css b/tilorswift/style.css new file mode 100644 index 0000000..8d299b3 --- /dev/null +++ b/tilorswift/style.css @@ -0,0 +1,20 @@ +body { + padding: 0; + margin: 0; + background-color: #6096ff; +} + +#level { + border-spacing: 0; + border-collapse: collapse; +} + +.row { +} + +.field { + border: 0; + padding: 0; + margin: 0; + background-repeat: no-repeat; +} \ No newline at end of file