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

Tilorswift json loader implemented.

This commit is contained in:
Mal 2020-01-29 00:21:53 +01:00
parent 6cf50f75e1
commit b989604a0e
8 changed files with 181 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/retro/RetroArchitecture.js
View File

@ -178,7 +178,7 @@ export default class RetroArchitecture
for (let y = 0; y < data.rows; y++) { for (let y = 0; y < data.rows; y++) {
for (let x = 0; x < data.columns; x++) { 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( architecture.matrix[y][x] = new RetroArchitectureTile(
data.matrix[y][x], data.matrix[y][x],
x * architecture.tileWidth, x * architecture.tileWidth,

20
levels/level.json
View File

@ -1,19 +1,19 @@
{ {
"tileset": "graphics/tileset-landscape01.jpg", "tileset": "/mr-crocs-adventures/graphics/tileset-landscape01.jpg",
"tiles": 8, "tiles": 8,
"scale": 3, "scale": 3,
"rows": 10, "rows": 10,
"columns": 17, "columns": 17,
"matrix": [ "matrix": [
[6 ,6 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,4 ,4 ], [6 ,6 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,4 ,4 ],
[6 ,6 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,4 ,4 ], [6 ,6 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,4 ,4 ],
[6 ,6 ,null ,null ,null ,null ,null ,null ,0 ,0 ,0 ,0 ,null ,null ,null ,4 ,4 ], [6 ,6 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,0 ,0 ,0 ,0 ,-1 ,-1 ,-1 ,4 ,4 ],
[6 ,6 ,2 ,null ,null ,null ,null ,0 ,4 ,4 ,4 ,4 ,0 ,null ,null ,4 ,4 ], [6 ,6 ,2 ,-1 ,-1 ,-1 ,-1 ,0 ,4 ,4 ,4 ,4 ,0 ,-1 ,-1 ,4 ,4 ],
[6 ,6 ,6 ,2 ,2 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,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 ,null ,null ,null ,null ,null ,null ,null ,null ,0 ,4 ,4 ], [5 ,5 ,5 ,5 ,5 ,1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,0 ,4 ,4 ],
[4 ,4 ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,null ,0 ,4 ,4 ,4 ], [4 ,4 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,-1 ,0 ,4 ,4 ,4 ],
[4 ,4 ,null ,null ,null ,null ,0 ,0 ,0 ,null ,null ,null ,0 ,4 ,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 ,null ,4 ,4 ,4 ,null ,null ,0 ,4 ,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 ] [4 ,4 ,4 ,4 ,4 ,0 ,4 ,4 ,4 ,0 ,0 ,4 ,4 ,4 ,4 ,4 ,4 ]
] ]
} }

11
tilorswift/index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tilorswift</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="module" src="js/module.js"></script>
</head>
<body>
</body>
</html>

33
tilorswift/js/Field.js Normal file
View File

@ -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;
}
}

64
tilorswift/js/Terrain.js Normal file
View File

@ -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;
}
}

29
tilorswift/js/Tileset.js Normal file
View File

@ -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;
}
}

13
tilorswift/js/module.js Normal file
View File

@ -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());
};

20
tilorswift/style.css Normal file
View File

@ -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;
}