added zombie texture and basic ki

Signed-off-by: Pascal Syma <pascal@syma.dev>

src/TextElement.js

@@ -6,7 +6,7 @@
 export default class TextElement {
     constructor(scene, item) {
         this.scene = scene;
-        this.text = scene.add.text(item.x, item.y, item.text.text, {
+        this.text = scene.add.text(Math.ceil(item.x), Math.ceil(item.y), item.text.text, {
             fontFamily: item.text.fontfamily || "Consolas",
             fontSize: item.text.pixelsize || 16,
             align: item.text.halign || "center",

src/assets/lvl1.json

@@ -845,15 +845,15 @@
             {
               "name": "velocity",
               "type": "int",
-              "value": 70
+              "value": 40
             }
           ],
           "rotation": 0,
           "type": "",
           "visible": true,
           "width": 0,
-          "x": 181.75,
+          "x": 143.75,
-          "y": 41.5
+          "y": 400.166666666667
         },
         {
           "height": 0,
@@ -2768,6 +2768,30 @@
           "width": 4800.67,
           "x": 5.66667,
           "y": 475.667
+        },
+        {
+          "height": 0,
+          "id": 131,
+          "name": "skelleton",
+          "point": true,
+          "properties": [
+            {
+              "name": "flipped",
+              "type": "bool",
+              "value": false
+            },
+            {
+              "name": "velocity",
+              "type": "int",
+              "value": 20
+            }
+          ],
+          "rotation": 0,
+          "type": "",
+          "visible": true,
+          "width": 0,
+          "x": 279.333333333333,
+          "y": 452
         }
       ],
       "opacity": 1,
@@ -2792,7 +2816,7 @@
     }
   ],
   "nextlayerid": 9,
-  "nextobjectid": 131,
+  "nextobjectid": 132,
   "orientation": "orthogonal",
   "renderorder": "right-down",
   "tiledversion": "1.4.1",

src/assets/lvl1.tmx

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<map version="1.4" tiledversion="1.4.1" orientation="orthogonal" renderorder="right-down" width="300" height="30" tilewidth="16" tileheight="16" infinite="0" nextlayerid="9" nextobjectid="131">
+<map version="1.4" tiledversion="1.4.1" orientation="orthogonal" renderorder="right-down" width="300" height="30" tilewidth="16" tileheight="16" infinite="0" nextlayerid="9" nextobjectid="132">
  <editorsettings>
   <export target="lvl1.json" format="json"/>
  </editorsettings>
@@ -243,9 +243,9 @@
    </properties>
    <point/>
   </object>
-  <object id="42" name="zombie" x="181.75" y="41.5">
+  <object id="42" name="zombie" x="143.75" y="400.167">
    <properties>
-    <property name="velocity" type="int" value="70"/>
+    <property name="velocity" type="int" value="40"/>
    </properties>
    <point/>
   </object>
@@ -803,6 +803,13 @@
     <property name="dmg" type="int" value="69"/>
    </properties>
   </object>
+  <object id="131" name="skelleton" x="279.333" y="452">
+   <properties>
+    <property name="flipped" type="bool" value="false"/>
+    <property name="velocity" type="int" value="20"/>
+   </properties>
+   <point/>
+  </object>
  </objectgroup>
  <layer id="8" name="Foreground" width="300" height="30">
   <data encoding="base64">

src/entities/Enemys/Bat.js

@@ -14,7 +14,6 @@ export default class Bat extends FlyingEnemy {
 
         this.dieAnimation = 'batDie';
 
-        this.body.setCollideWorldBounds(true);
         this.body.setBounceX(1);
         this.play('batIdle');
     }
@@ -23,11 +22,4 @@ export default class Bat extends FlyingEnemy {
         super.update(args)
         this.setFlipX(this.body.velocity.x > 0);
     }
-
-    die() {
-        if (this.body.velocity.x !== 0) {
-            this.body.velocity.x = 0;
-            super.die();
-        }
-    }
 }

src/entities/Enemys/DamageEntity.js

@@ -14,6 +14,7 @@ export default class DamageEntity extends Entity {
         this.alpha = 0;
         this.setDisplaySize(item.width, item.height);
 
+        this.setData('active', true);
         this.setData('dmg', item.properties.filter(obj => obj.name === 'dmg')[0].value);
     }
 }

src/entities/Enemys/Enemy.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2020. Pascal Syma <pascal@syma.dev>
+ * Copyright (c) 2020. Antonio Martinez Casadesus and Pascal Syma.
  * All rights reserved.
  */
 
@@ -12,6 +12,10 @@ export default class Enemy extends Entity {
 
         this.spawnPoint = spawnPoint;
         this.setActive(false)
+        this.setData('active', false);
+        this.body.setCollideWorldBounds(true);
+
+        this.body.setBounceX(1);
     }
 
     turnedActive() {
@@ -23,6 +27,7 @@ export default class Enemy extends Entity {
         if (!this.active && this.scene.cameras.main.worldView.x + this.scene.cameras.main.worldView.width >= this.x - this.width) {
             this.turnedActive();
             this.setActive(true)
+            this.setData('active', true);
         }
     }
 }

src/entities/Enemys/Skeleton.js

@@ -9,6 +9,16 @@ export default class Skeleton extends Enemy {
 
     constructor(scene, item) {
         super(scene, item, "skeleton_archer_style_A/idle/frame1");
+        this.setOrigin(0.5, 1).setScale(40 / 62);
+
+        this.body.setSize(31, 50, false);
+        this.body.setOffset(4, 2);
+        this.body.setBounceX(1);
+
+        this.setData('dmg', 0)
+
+        this.dieAnimation = 'skeleton_die';
+        this.hitAnimation = 'skeleton_hit';
     }
 
     turnedActive() {
@@ -17,4 +27,17 @@ export default class Skeleton extends Enemy {
         this.body.velocity.x = vel;
         this.play('skeleton_run');
     }
+
+
+    update(...args) {
+        super.update(...args);
+        if (this.body.velocity.x <= 0) {
+            this.setFlipX(true);
+            this.body.setOffset(31 - 4, 2);
+        } else {
+            this.setFlipX(false)
+            this.body.setOffset(4, 2);
+        }
+
+    }
 }

src/entities/Enemys/Zombie.js

@@ -9,13 +9,36 @@ export default class Zombie extends Enemy {
 
     constructor(scene, item) {
         super(scene, item, "zombie");
+        this.setOrigin(0.5, 1).setScale(32 / 43);
+
+        this.body.setSize(43, 43, false);
+        this.body.setOffset(4, 12);
+        this.body.setBounceX(1);
+
+        this.dieAnimation = 'zombie_die';
+        this.hitAnimation = 'zombie_hit';
     }
 
 
     turnedActive() {
         super.turnedActive();
-        const vel = this.spawnPoint.properties.filter(obj => obj.name === "velocity")[0].value;
+        let vel = this.spawnPoint.properties.filter(obj => obj.name === "velocity");
-        this.body.velocity.x = vel;
+        if (vel.leave > 0)
+            vel = vel[0].value;
+        else
+            vel = 40;
+
+        this.play("zombie_emerge")
+            .once('animationcomplete', () => {
+                this.body.velocity.x = vel;
+                this.play('zombie_walk');
+            });
+    }
+
+
+    update(...args) {
+        super.update(...args);
+        this.setFlipX(this.body.velocity.x <= 0);
 
     }
 }

src/entities/Entity.js

@@ -17,19 +17,26 @@ export default class Entity extends Phaser.GameObjects.Sprite {
     }
 
     hit(dmg) {
+        if (dmg <= 0)
+            return;
 
         if (this.hitCooldown)
             return;
 
         this.hitCooldown = true;
 
-        setTimeout(() => this.hitCooldown = false, 1000);
-
         this.setData('hp', this.getData('hp') - dmg);
         console.log(this, this.getData('hp'));
 
         // play hit animation
         const shouldDie = this.getData('hp') <= 0;
+        if (shouldDie) {
+            this.body.velocity.x = 0;
+            this.setData('active', false);
+        } else {
+            setTimeout(() => this.hitCooldown = false, 1000);
+        }
+
         if (this.hitAnimation !== null) {
             this.anims.stop();
             this.play(this.hitAnimation)
@@ -44,6 +51,7 @@ export default class Entity extends Phaser.GameObjects.Sprite {
 
     die() {
         if (this.dieAnimation !== null && this.active) {
+            this.setData('active', false);
             this.play(this.dieAnimation)
                 .once('animationcomplete', () => this.destroy());
         } else

src/scenes/Game.js

@@ -24,7 +24,7 @@ export default class Game extends Phaser.Scene {
                 default: 'arcade',
                 arcade: {
                     gravity: {y: 300},
-                    // debug: true
+                    debug: true
                 }
             }
         });
@@ -87,6 +87,58 @@ export default class Game extends Phaser.Scene {
             repeat: -1
         });
 
+        this.anims.create({
+            key: 'skeleton_hit',
+            frames: this.anims.generateFrameNames('skeleton', {
+                start: 1,
+                end: 11,
+                prefix: 'skeleton_archer_style_A/get_hit/frame'
+            }),
+            frameRate: 10
+        });
+
+        this.anims.create({
+            key: 'skeleton_die',
+            frames: this.anims.generateFrameNames('skeleton', {
+                start: 1,
+                end: 21,
+                prefix: 'skeleton_archer_style_A/die/frame'
+            }),
+            frameRate: 20
+        });
+
+        this.anims.create({
+            key: 'zombie_die',
+            frames: this.anims.generateFrameNumbers('zombie', {start: 128, end: 159}),
+            frameRate: 20,
+        });
+
+        this.anims.create({
+            key: 'zombie_emerge',
+            frames: this.anims.generateFrameNumbers('zombie', {start: 160, end: 179}),
+            frameRate: 10,
+        });
+
+        this.anims.create({
+            key: 'zombie_hit',
+            frames: this.anims.generateFrameNumbers('zombie', {start: 224, end: 231}),
+            frameRate: 10
+        });
+
+        this.anims.create({
+            key: 'zombie_idle',
+            frames: this.anims.generateFrameNumbers('zombie', {start: 256, end: 267}),
+            frameRate: 10,
+            repeat: -1
+        });
+
+        this.anims.create({
+            key: 'zombie_walk',
+            frames: this.anims.generateFrameNumbers('zombie', {start: 288, end: 300}),
+            frameRate: 10,
+            repeat: -1
+        });
+
         this.anims.create({
             key: 'run',
             frames: this.anims.generateFrameNumbers('char', {start: 154, end: 161}),
@@ -227,7 +279,8 @@ export default class Game extends Phaser.Scene {
         });
 
         this.physics.add.overlap(this.player, this.enemys, (p, e) => {
-            this.player.hit(e.getData('dmg'));
+            if (e.getData('active'))
+                this.player.hit(e.getData('dmg'));
         })
 
         this.physics.add.overlap(this.player, this.wins, (p, w) => {

src/scenes/Preload.js

@@ -12,6 +12,7 @@ import charA from "../assets/char_a/spritesheet.png";
 import charB from "../assets/char_b/spritesheet.png";
 import charC from "../assets/char_c/spritesheet.png";
 import charD from "../assets/char_d/spritesheet.png";
+import zombie from "../assets/zombie/zombie.png";
 import tiles from "../assets/newtiles.png";
 import menutiles from "../assets/menu.png";
 import buttontiles from "../assets/buttons.png";
@@ -37,6 +38,7 @@ export default class Preload extends Phaser.Scene {
         this.load.spritesheet('charB', charB, {frameWidth: 79, frameHeight: 63, margin: 1, spacing: 2});
         this.load.spritesheet('charC', charC, {frameWidth: 79, frameHeight: 63, margin: 1, spacing: 2});
         this.load.spritesheet('charD', charD, {frameWidth: 79, frameHeight: 63, margin: 1, spacing: 2});
+        this.load.spritesheet('zombie', zombie, {frameWidth: 43, frameHeight: 55, margin: 1, spacing: 2});
         this.load.spritesheet('tiles', tiles, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
         this.load.spritesheet('menutiles', menutiles, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
         this.load.spritesheet('buttontiles', buttontiles, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});