Final notes and 'blank tilemap' example source showing constant scaling of layer 1. (There aren't any examples of map scaling).

Author: pjbaron

docs/_phaser_tilemap_GL_progress.txt

@@ -211,6 +211,207 @@ I think that's it!  Time to clean it all up...
 
 
 
+Ok finally... here is the source for my modifications of the "blank tilemap" example which scales layer 1 constantly.
+
+
+
+
+// var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+
+function preload() {
+
+    game.load.image('ground_1x1', 'assets/tilemaps/tiles/ground_1x1.png');
+
+}
+
+var map;
+var layer1;
+var layer2;
+var layer3;
+
+var marker;
+var currentTile = 0;
+var currentLayer;
+
+var cursors;
+var showLayersKey;
+var layer1Key;
+var layer2Key;
+var layer3Key;
+
+var layer1Scale = new Phaser.Point(1, 1);
+var sx = 0.03;
+var sy = 0.02;
+
+
+function create() {
+
+    game.stage.backgroundColor = '#2d2d2d';
+
+    //  Creates a blank tilemap
+    map = game.add.tilemap();
+
+    //  Add a Tileset image to the map
+    map.addTilesetImage('ground_1x1');
+
+    //  Creates a new blank layer and sets the map dimensions.
+    //  In this case the map is 40x30 tiles in size and the tiles are 32x32 pixels in size.
+    layer1 = map.create('level1', 40, 30, 32, 32);
+    layer1.scrollFactorX = 0.5;
+    layer1.scrollFactorY = 0.5;
+
+    //  Resize the world
+    layer1.resizeWorld();
+
+    layer2 = map.createBlankLayer('level2', 40, 30, 32, 32);
+    layer2.scrollFactorX = 0.8;
+    layer2.scrollFactorY = 0.8;
+
+    layer3 = map.createBlankLayer('level3', 40, 30, 32, 32);
+
+    currentLayer = layer3;
+
+    //  Create our tile selector at the top of the screen
+    createTileSelector();
+
+    game.input.addMoveCallback(updateMarker, this);
+
+    cursors = game.input.keyboard.createCursorKeys();
+
+    showLayersKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
+    layer1Key = game.input.keyboard.addKey(Phaser.Keyboard.ONE);
+    layer2Key = game.input.keyboard.addKey(Phaser.Keyboard.TWO);
+    layer3Key = game.input.keyboard.addKey(Phaser.Keyboard.THREE);
+
+    showLayersKey.onDown.add(changeLayer, this);
+    layer1Key.onDown.add(changeLayer, this);
+    layer2Key.onDown.add(changeLayer, this);
+    layer3Key.onDown.add(changeLayer, this);
+
+    console.log(layer1.index);
+    console.log(layer2.index);
+    console.log(layer3.index);
+
+}
+
+function changeLayer(key) {
+
+    switch (key.keyCode)
+    {
+        case Phaser.Keyboard.SPACEBAR:
+            layer1.alpha = 1;
+            layer2.alpha = 1;
+            layer3.alpha = 1;
+            break;
+
+        case Phaser.Keyboard.ONE:
+            currentLayer = layer1;
+            layer1.alpha = 1;
+            layer2.alpha = 0.2;
+            layer3.alpha = 0.2;
+            break;
+
+        case Phaser.Keyboard.TWO:
+            currentLayer = layer2;
+            layer1.alpha = 0.2;
+            layer2.alpha = 1;
+            layer3.alpha = 0.2;
+            break;
+
+        case Phaser.Keyboard.THREE:
+            currentLayer = layer3;
+            layer1.alpha = 0.2;
+            layer2.alpha = 0.2;
+            layer3.alpha = 1;
+            break;
+    }
+
+}
+
+function pickTile(sprite, pointer) {
+
+    currentTile = game.math.snapToFloor(pointer.x, 32) / 32;
+
+}
+
+function updateMarker() {
+
+    marker.x = currentLayer.getTileX(game.input.activePointer.worldX) * 32;
+    marker.y = currentLayer.getTileY(game.input.activePointer.worldY) * 32;
+
+    if (game.input.mousePointer.isDown)
+    {
+        map.putTile(currentTile, currentLayer.getTileX(marker.x), currentLayer.getTileY(marker.y), currentLayer);
+        // map.fill(currentTile, currentLayer.getTileX(marker.x), currentLayer.getTileY(marker.y), 4, 4, currentLayer);
+    }
+
+}
+
+function update() {
+
+    if (cursors.left.isDown)
+    {
+        game.camera.x -= 4;
+    }
+    else if (cursors.right.isDown)
+    {
+        game.camera.x += 4;
+    }
+
+    if (cursors.up.isDown)
+    {
+        game.camera.y -= 4;
+    }
+    else if (cursors.down.isDown)
+    {
+        game.camera.y += 4;
+    }
+
+    // animate the layer1 scale constantly
+    layer1Scale.x += sx;
+    if ( layer1Scale.x < 0.5 || layer1Scale.x > 2.0 ) sx = -sx;
+    layer1Scale.y += sy;
+    if ( layer1Scale.y < 0.5 || layer1Scale.y > 2.0 ) sy = -sy;
+    layer1.scale.set( layer1Scale.x, layer1Scale.y );
+    layer1.updateTransform();
+}
+
+function render() {
+
+    game.debug.text('Current Layer: ' + currentLayer.name, 16, 550);
+    game.debug.text('1-3 Switch Layers. SPACE = Show All. Cursors = Move Camera', 16, 570);
+
+}
+
+function createTileSelector() {
+
+    //  Our tile selection window
+    var tileSelector = game.add.group();
+
+    var tileSelectorBackground = game.make.graphics();
+    tileSelectorBackground.beginFill(0x000000, 0.5);
+    tileSelectorBackground.drawRect(0, 0, 800, 34);
+    tileSelectorBackground.endFill();
+
+    tileSelector.add(tileSelectorBackground);
+
+    var tileStrip = tileSelector.create(1, 1, 'ground_1x1');
+    tileStrip.inputEnabled = true;
+    tileStrip.events.onInputDown.add(pickTile, this);
+
+    tileSelector.fixedToCamera = true;
+
+    //  Our painting marker
+    marker = game.add.graphics();
+    marker.lineStyle(2, 0x000000, 1);
+    marker.drawRect(0, 0, 32, 32);
+
+}
+
+
+