Added hero and move capabilities. Removed gravity as we do a 2d tile …

…world here.

index.html

@@ -21,7 +21,6 @@
     physics: {
         default: 'arcade',
         arcade: {
-            gravity: { y: 300 },
             debug: false
         }
     },
@@ -36,13 +35,67 @@
 
 function preload() {
     this.load.image('background', 'assets/background.png');
+    this.load.spritesheet('hero', 'assets/hero.png', { frameWidth: 16, frameHeight: 24 });
 }
 
 function create() {
     this.add.tileSprite(400, 300, 800, 600, 'background');
+    hero = this.physics.add.sprite(100, 450, 'hero');
+
+    this.anims.create({
+        key: 'down',
+        frames: this.anims.generateFrameNumbers('hero', { start: 0, end: 3 }),
+        frameRate: 10,
+        repeat: -1
+    });
+    this.anims.create({
+        key: 'right',
+        frames: this.anims.generateFrameNumbers('hero', { start: 4, end: 7 }),
+        frameRate: 10,
+        repeat: -1
+    });
+    this.anims.create({
+        key: 'up',
+        frames: this.anims.generateFrameNumbers('hero', { start: 8, end: 11 }),
+        frameRate: 10,
+        repeat: -1
+    });
+    this.anims.create({
+        key: 'left',
+        frames: this.anims.generateFrameNumbers('hero', { start: 12, end: 15 }),
+        frameRate: 10,
+        repeat: -1
+    });
+    this.anims.create({
+        key: 'nomove',
+        frames: [ { key: 'hero', frame: 2 } ],
+        frameRate: 20
+    });
+    cursors = this.input.keyboard.createCursorKeys();
 }
 
 function update() {
+    if (cursors.left.isDown) {
+        hero.setVelocityX(-160);
+        hero.setVelocityY(0);
+        hero.anims.play('left', true);
+    } else if (cursors.right.isDown) {
+        hero.setVelocityX(160);
+        hero.setVelocityY(0);
+        hero.anims.play('right', true);
+    } else if (cursors.up.isDown) {
+        hero.setVelocityY(-160);
+        hero.setVelocityX(0);
+        hero.anims.play('up', true);
+    } else if (cursors.down.isDown) {
+        hero.setVelocityY(160);
+        hero.setVelocityX(0);
+        hero.anims.play('down', true);
+    } else {
+        hero.setVelocityX(0);
+        hero.setVelocityY(0);
+        hero.anims.play('nomove', true);
+    }
 }
 
 </script>