added entitys, enemys, bats and custom attack hitboxes for players

added map loading and one-way collision (needs to move to tiled attribute tho) Signed-off-by: Pascal Syma <pascal@syma.dev>
2020-05-20 11:13:21 +02:00
parent 4a22dbe657
commit a726db1306
22 changed files with 2166 additions and 30 deletions
@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2020. Pascal Syma <pascal@syma.dev>
+ * All rights reserved.
+ */
+
+import logoImg from "../../public/favicon.png";
+import map from "../assets/map.json";
+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 tiles from "../assets/tileset.png";
+import batFly from "../assets/BatFly.png";
+import batDie from "../assets/BatDie.png";
+
+export default class Preload extends Phaser.Scene {
+
+    constructor() {
+        super('Loading');
+    }
+
+    preload() {
+        this.loadingScreen();
+        this.load.image("logo", logoImg);
+        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*/});
+        this.load.spritesheet('charD', charD, {frameWidth: 79, frameHeight: 63/*, margin: 1, spacing: 2*/});
+        this.load.spritesheet('tiles', tiles, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
+        this.load.spritesheet('batFly', batFly, {frameWidth: 48, frameHeight: 32/*, margin: 1, spacing: 2*/});
+        this.load.spritesheet('batDie', batDie, {frameWidth: 48, frameHeight: 32/*, margin: 1, spacing: 2*/});
+        this.load.tilemapTiledJSON("map", map);
+    }
+
+    create() {
+        this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, 'logo').setOrigin(0.5, 0.5).setDisplaySize(this.cameras.main.centerX, this.cameras.main.centerX);
+        setTimeout(() => {
+            this.scene.start('Menu');
+        }, 2 * 1000)
+    }
+
+    loadingScreen() {
+        const progressBar = this.add.graphics();
+        const progressBox = this.add.graphics();
+        const width = this.cameras.main.width;
+        const height = this.cameras.main.height;
+
+        progressBox.fillStyle(0x222222, 0.8);
+        progressBox.fillRect(width / 4, height / 2 - 25, width / 2, 50);
+
+        const loadingText = this.make.text({
+            x: width / 2,
+            y: height / 2 - 25 - 20,
+            text: 'Loading...',
+            style: {
+                font: '20px monospace',
+                fill: '#ffffff'
+            }
+        });
+        loadingText.setOrigin(0.5, 1);
+
+        const percentText = this.make.text({
+            x: width / 2,
+            y: height / 2,
+            text: '0%',
+            style: {
+                font: '18px monospace',
+                fill: '#ffffff'
+            }
+        });
+        percentText.setOrigin(0.5, 0.5);
+
+        this.load.on('progress', (value) => {
+            percentText.setText(parseInt(value * 100) + '%');
+            progressBar.clear();
+            progressBar.fillStyle(0xffffff, 1);
+            progressBar.fillRect(width / 4 + 10, height / 2 - 25 + 10, (width / 2 - 20) * value, 50 - 20);
+        });
+
+        this.load.on('complete', () => {
+            progressBar.destroy();
+            progressBox.destroy();
+            loadingText.destroy();
+            percentText.destroy();
+
+        });
+    }
+
+}