Tileset dialog for Tilorswift and fix for adding rows.

js/GraphicSet.js

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

js/module.js

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

js/retro/RetroArchitecture.js

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