added items and pickup basic

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

src/assets/map.json

@@ -74,8 +74,8 @@
           "type": "90",
           "visible": true,
           "width": 0,
-          "x": 160.666666666667,
+          "x": 160.667,
-          "y": 69.3333333333333
+          "y": 69.3333
         },
         {
           "height": 0,
@@ -94,7 +94,7 @@
           "visible": true,
           "width": 0,
           "x": 396,
-          "y": 91.3333333333333
+          "y": 91.3333
         },
         {
           "height": 0,
@@ -112,8 +112,46 @@
           "type": "-50",
           "visible": true,
           "width": 0,
-          "x": 587.333333333333,
+          "x": 587.333,
-          "y": 46.6666666666667
+          "y": 46.6667
+        },
+        {
+          "height": 0,
+          "id": 7,
+          "name": "item",
+          "point": true,
+          "properties": [
+            {
+              "name": "texture",
+              "type": "string",
+              "value": "item_01"
+            }
+          ],
+          "rotation": 0,
+          "type": "",
+          "visible": true,
+          "width": 0,
+          "x": 136.666666666667,
+          "y": 174
+        },
+        {
+          "height": 0,
+          "id": 8,
+          "name": "item",
+          "point": true,
+          "properties": [
+            {
+              "name": "texture",
+              "type": "string",
+              "value": "item_02"
+            }
+          ],
+          "rotation": 0,
+          "type": "",
+          "visible": true,
+          "width": 0,
+          "x": 258,
+          "y": 200.666666666667
         }
       ],
       "opacity": 1,
@@ -137,7 +175,7 @@
     }
   ],
   "nextlayerid": 20,
-  "nextobjectid": 7,
+  "nextobjectid": 9,
   "orientation": "orthogonal",
   "renderorder": "right-down",
   "tiledversion": "1.2.5",

src/assets/map.tmx

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<map version="1.2" tiledversion="1.2.5" orientation="orthogonal" renderorder="right-down" width="48" height="17" tilewidth="16" tileheight="16" infinite="0" nextlayerid="20" nextobjectid="7">
+<map version="1.2" tiledversion="1.2.5" orientation="orthogonal" renderorder="right-down" width="48" height="17" tilewidth="16" tileheight="16" infinite="0" nextlayerid="20" nextobjectid="9">
  <tileset firstgid="1" name="tileset" tilewidth="16" tileheight="16" spacing="2" margin="1" tilecount="88" columns="8">
   <image source="tileset.png" trans="ff00ff" width="144" height="198"/>
   <tile id="0">
@@ -480,6 +480,18 @@
    </properties>
    <point/>
   </object>
+  <object id="7" name="item" x="136.667" y="174">
+   <properties>
+    <property name="texture" value="item_01"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="8" name="item" x="258" y="200.667">
+   <properties>
+    <property name="texture" value="item_02"/>
+   </properties>
+   <point/>
+  </object>
  </objectgroup>
  <layer id="19" name="Front" width="48" height="17">
   <data encoding="base64">

src/entities/Item.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2020. Pascal Syma <pascal@syma.dev>
+ * All rights reserved.
+ */
+
+import Entity from "./Entity";
+
+export default class Item extends Entity {
+
+    constructor(scene, obj) {
+        super(scene, obj.x, obj.y, obj.properties.filter(obj => obj.name === "texture")[0].value);
+        this.body.setAllowGravity(false);
+
+        this.setDisplaySize(16, 16);
+
+        this.setData('collectable', true);
+    }
+
+    canPickup() {
+        return this.getData('collectable');
+    }
+
+    pickup() {
+        this.setData('collectable', false);
+
+    }
+
+    drop() {
+        this.setData('collectable', true);
+
+    }
+
+}

src/entities/Player.js

@@ -24,13 +24,28 @@ export default class Player extends Entity {
         this.attackHitbox = this.scene.add.group([
             this.attackA
         ]);
+
+        this.items = [];
+    }
+
+    pickup(item) {
+        if (this.items.length >= 1) {
+            this.items.shift().setPosition(this.x, this.y).drop();
+        }
+
+        console.log(item);
+
+        item.pickup();
+
+        this.items[0] = item;
+
     }
 
     update(...args) {
         if (this.scene.dieActive()) {
             this.pause = true;
             this.play('die', true)
-                .on('animationcomplete', () => {
+                .once('animationcomplete', () => {
                     this.setFrame(51);
                     this.scene.scene.pause();
                 })
@@ -63,11 +78,11 @@ export default class Player extends Entity {
             this.body.setOffset(4, 16);
         }
 
-        this.setData('speed', 100);
+        // this.setData('speed', 100);
 
         // animation
         if (this.anims.getCurrentKey().startsWith('attack_')) {
-            this.setData('speed', 50);
+            // this.setData('speed', 50);
         } else if (this.scene.keySpace.isDown) {
             // const nextAttack = [this.attackA].sort(() => 0.5 - Math.random())[0];
             // nextAttack.start();
@@ -86,5 +101,11 @@ export default class Player extends Entity {
         this.attackHitbox.getChildren().forEach(c => {
             c.update()
         });
+
+        this.items.forEach(i => i.setPosition(this.body.x, this.body.y - 16));
+
+        if (this.scene.keyAction1.isDown && this.items.length >= 1) {
+            this.items.shift().die();
+        }
     }
 }

src/scenes/Game.js

@@ -5,6 +5,7 @@
 
 import Player from "../entities/Player";
 import Bat from "../entities/Enemys/Bat";
+import Item from "../entities/Item";
 
 export default class Game extends Phaser.Scene {
 
@@ -145,16 +146,19 @@ export default class Game extends Phaser.Scene {
         const spawnPoint = map.findObject("Objects", obj => obj.name === "player");
 
         this.enemys = this.add.group();
+        this.items = this.add.group();
         this.player = new Player(this, spawnPoint, 'char');
 
-        const batSpawns = map.objects[0].objects.filter(obj => obj.name === "bat");
+        map.objects[0].objects.filter(obj => obj.name === "bat").forEach(s => {
-
-
-        batSpawns.forEach(s => {
             let bat = new Bat(this, s);
             bat.fly(s.type === "" ? 90 : parseInt(s.type));
             this.enemys.add(bat)
-        });
+        })
+
+        map.objects[0].objects.filter(obj => obj.name === "item").forEach(s => {
+            let item = new Item(this, s);
+            this.items.add(item)
+        })
 
 
         this.worldLayer.setCollisionByProperty({collides: true});
@@ -192,7 +196,17 @@ export default class Game extends Phaser.Scene {
         this.keyLeft = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
         this.keyRight = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);
         this.keyDown = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);
-        this.keyDie = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.C);
+        // this.keyDie = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.C);
+        this.keyPickup = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.C);
+        this.keyAction1 = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q);
+        this.keyAction2 = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E);
+
+        this.physics.add.overlap(this.player, this.items, (p, i) => {
+            if (this.keyPickup.isDown && i.canPickup()) {
+                p.pickup(i);
+                this.keyPickup.reset();
+            }
+        })
     }
 
     update(time, delta) {
@@ -204,7 +218,8 @@ export default class Game extends Phaser.Scene {
     }
 
     dieActive() {
-        return this.keyDie.isDown;
+        return false;
+        // return this.keyDie.isDown;
     }
 
     rightActive() {

src/scenes/Preload.js

@@ -12,6 +12,9 @@ import charD from "../assets/char_d/spritesheet.png";
 import tiles from "../assets/tileset.png";
 import batFly from "../assets/BatFly.png";
 import batDie from "../assets/BatDie.png";
+import item_01 from "../assets/items/itemshard_01.png";
+import item_02 from "../assets/items/itemshard_02.png";
+import item_03 from "../assets/items/itemshard_03.png";
 
 export default class Preload extends Phaser.Scene {
 
@@ -22,6 +25,9 @@ export default class Preload extends Phaser.Scene {
     preload() {
         this.loadingScreen();
         this.load.image("logo", logoImg);
+        this.load.image("item_01", item_01);
+        this.load.image("item_02", item_02);
+        this.load.image("item_03", item_03);
         this.load.spritesheet('charA', charA, {frameWidth: 79, frameHeight: 63/*, margin: 1, spacing: 2*/});
         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*/});