merged and removed components

2018-11-19 22:07:46 +10:00
parent 0d439b3ef2 6907cf17e0
commit bd3ffdc123
28 changed files with 141 additions and 1096 deletions
@@ -0,0 +1,90 @@
+const Phaser = require('phaser');
+const fs = require('fs');
+
+class PhaserCombat extends Phaser.Scene {
+    constructor() {
+        super('combat');
+    }
+
+    preload() {
+        /* Static Images */
+        this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`);
+        this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`);
+
+        this.load.image('sky', 'http://labs.phaser.io/assets/skies/nebula.jpg');
+        this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png');
+        this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png');
+        this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png');
+        this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png');
+        this.load.image('white', 'http://labs.phaser.io/assets/particles/white.png');
+        this.load.image('yellow', 'http://labs.phaser.io/assets/particles/yellow.png');
+
+
+        /* Spritesheets */
+        this.load.spritesheet({
+            key: 'explosion',
+            url: 'http://labs.phaser.io/assets/sprites/explosion.png',
+            frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 },
+        });
+    }
+
+    create() {
+        this.add.image(400, 300, 'sky');// Background image
+        this.createPlayers();
+        this.createAnim();
+        this.cursors = this.input.keyboard.createCursorKeys();
+        this.combat = false;
+        this.registry.events.on('changedata', this.updateData, this);
+
+        this.input.keyboard.on('keydown_S', () => {
+            this.scene.switch('passives'); // Switch to battle scene
+        }, 0, this);
+    }
+
+    createPlayers() {
+        this.players = this.physics.add.staticGroup();
+        const img = this.players.create(100, 300, 'alk');
+        const imgTwo = this.players.create(500, 300, 'magmar');
+        img.setScale(0.5);
+        imgTwo.setScale(0.5);
+        this.playerOneHp = this.add.text(20, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
+        this.playerTwoHp = this.add.text(450, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
+    }
+
+    createAnim() {
+        const config = {
+            key: 'explodeAnimation',
+            frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }),
+            frameRate: 20,
+            repeat: 0,
+        };
+        this.anims.create(config);
+    }
+
+    explode(proj) {
+        this.proj.disableBody(true, true);
+        this.emitter.stop();
+        const sprite = this.add.sprite(proj.x, proj.y, 'explosion').play('explodeAnimation');
+        sprite.setScale(3);
+    }
+
+    updateData(parent, key, data) {
+        if (key === 'playerCryps') {
+            this.playerOneHp.text = (`${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`);
+            if (data.cryps[0].hp.base === 0) {
+                // this.PhaserCombat.skills('blast', 400, -150);
+                this.skills('wall', 'green', 400, -250);
+            }
+        }
+        if (key === 'enemyCryps') {
+            this.playerTwoHp.text = `${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`;
+            if (data.cryps[0].hp.base === 0) {
+                // this.PhaserCombat.skills('blast', 180, 150);
+                this.skills('wall', 'green', 180, 250);
+            }
+        }
+    }
+}
+PhaserCombat.prototype.skills = require('./phaser.skills.js');
+
+module.exports = PhaserCombat;
@@ -0,0 +1,141 @@
+// Skill function called by phaser combat
+const Phaser = require('phaser');
+
+function skills(skill, img, location, spd) {
+    if (this.combat) {
+        return;
+    }
+    this.combat = true;
+    const particles = this.add.particles(img);
+
+    switch (skill) {
+        case 'blast':
+            this.proj = this.physics.add.image(-100, 300, 'proj');
+            this.emitter = particles.createEmitter({
+                speed: 25,
+                scale: { start: 1, end: 0 },
+                blendMode: 'ADD',
+            });
+            this.emitter.startFollow(this.proj);
+            this.physics.add.overlap(this.proj, this.players, this.explode, null, this);
+            this.proj.x = location;
+            this.proj.setVelocity(spd, 0);
+            break;
+
+        case 'wall':
+            this.emitter = particles.createEmitter({
+                x: location,
+                y: { min: 200, max: 350 },
+                lifespan: 2000,
+                speedX: { min: spd, max: spd * 2 },
+                scale: { start: 0.4, end: 0 },
+                quantity: 4,
+                blendMode: 'ADD',
+            });
+            this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
+            break;
+
+        case 'spit':
+            if (location > 250) {
+                this.angleMin = 180;
+                this.angleMax = 220;
+            } else {
+                this.angleMin = 320;
+                this.angleMax = 360;
+            }
+            this.emitter = particles.createEmitter({
+                x: location,
+                y: 300,
+                lifespan: 2000,
+                angle: { min: this.angleMin, max: this.angleMax },
+                speed: spd * 2,
+                scale: { start: 0.4, end: 1 },
+                gravityY: 250,
+                quantity: 4,
+                blendMode: 'ADD',
+            });
+            this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
+            break;
+        case 'gravBomb':
+            this.well = particles.createGravityWell({
+                x: 150,
+                y: 150,
+                power: 4,
+                gravity: 500,
+            });
+            this.emitter = particles.createEmitter({
+                x: 150,
+                y: 150,
+                lifespan: 1500,
+                speed: 1000,
+                scale: { start: 0.7, end: 1 },
+                blendMode: 'ADD',
+            });
+            this.time.delayedCall(1000, () => {
+                this.emitter.stop();
+                this.well.active = false;
+            }, [], this);
+            break;
+        case 'gravBlast':
+            this.well = particles.createGravityWell({
+                x: 400,
+                y: 300,
+                power: 4,
+                gravity: 500,
+            });
+            this.emitter = particles.createEmitter({
+                x: 400,
+                y: 300,
+                lifespan: 2000,
+                speed: 1000,
+                scale: { start: 0.7, end: 1 },
+                blendMode: 'ADD',
+                bounds: {
+                    x: 0, y: 250, w: 450, h: 150,
+                },
+            });
+            this.time.delayedCall(1000, () => {
+                this.emitter.stop();
+                this.well.x = 100;
+            }, [], this);
+            this.time.delayedCall(3000, () => {
+                this.well.active = false;
+            }, [], this);
+            break;
+        case 'chargeBall':
+
+            this.emitter = particles.createEmitter({
+                x: -400,
+                y: -100,
+                lifespan: 1000,
+                moveToX: 450,
+                moveToY: 150,
+                scale: 0.75,
+                quantity: 4,
+                _frequency: 20,
+                blendMode: 'ADD',
+                emitZone: { source: new Phaser.Geom.Rectangle(0, 0, 1600, 700) },
+            });
+            this.emitter2 = particles.createEmitter({
+                radial: false,
+                x: { min: 450, max: 50, steps: 256 },
+                y: { min: 150, max: 300, steps: 256 },
+                lifespan: 1000,
+                speedX: { min: 200, max: 400 },
+                quantity: 4,
+                gravityY: 0,
+                scale: { start: 1.5, end: 0, ease: 'Power3' },
+                blendMode: 'ADD',
+                active: false,
+            });
+            this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
+            this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this);
+            this.time.delayedCall(3000, () => { this.emitter2.stop(); }, [], this);
+            break;
+        default:
+            break;
+    }
+}
+
+
+module.exports = skills;
@@ -0,0 +1,23 @@
+const Phaser = require('phaser');
+
+const ROW_WIDTH = 400;
+const ROW_HEIGHT = 200;
+const ROW_FILL = 0x888888;
+
+const TOP_MARGIN = 50;
+const ROW_MARGIN = 50;
+const TEXT_MARGIN = 24;
+
+
+class CrypInfo extends Phaser.GameObjects.Rectangle {
+    constructor(scene, cryp, i) {
+        const X_ORIGIN = 0;
+        const Y_ORIGIN = (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
+        super(scene, X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random());
+        this.setOrigin(0);
+        this.cryp = cryp;
+        scene.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
+        scene.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' })
+    }
+}
+module.exports = CrypInfo;
@@ -12,8 +12,6 @@ class CrypList extends Phaser.Scene {

        const cryps = this.registry.get('cryps');
        this.graphics = this.add.graphics();
-        this.graphics.originX = 0;
-        this.graphics.originY = 0;
        this.renderCryps(cryps);
        return true;
    }
@@ -32,11 +30,17 @@ class CrypList extends Phaser.Scene {
            crypRow(this, cryp, i);
        });

+        this.input.on('gameobjectup', this.clickHandler, this);
+
        // seal the boxes in and stop rerendering them
        this.graphics.generateTexture();

        return true;
    }
+
+    clickHandler(pointer, crypBox) {
+        this.registry.set('activeCryp', crypBox.cryp);
+    }
 }

 module.exports = CrypList;
@@ -0,0 +1,55 @@
+const Phaser = require('phaser');
+
+const ROW_WIDTH = 400;
+const ROW_HEIGHT = 200;
+const ROW_FILL = 0x888888;
+
+const TOP_MARGIN = 50;
+const ROW_MARGIN = 50;
+const TEXT_MARGIN = 24;
+
+const xPos = i => 0;
+const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
+
+function crypSkill(scene, skill, i) {
+    scene.add.text(500, 500 + (TEXT_MARGIN * (i + 1)), skill.skill, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
+    return true;
+}
+
+
+class CrypPage extends Phaser.Scene {
+    constructor() {
+        super({ key: 'CrypPage', active: true });
+    }
+
+    create() {
+        this.registry.events.on('changedata', this.updateData, this);
+
+        const cryp = this.registry.get('activeCryp');
+        this.graphics = this.add.graphics();
+
+        this.renderCryp(cryp);
+        return true;
+    }
+
+    updateData(parent, key, data) {
+        if (key === 'activeCryp') {
+            return this.scene.restart();
+        }
+        return true;
+    }
+
+    renderCryp(cryp) {
+        if (!cryp) return true;
+
+        this.add.text(500, 500, cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
+
+        cryp.skills.forEach((skill, i) => crypSkill(this, skill, i));
+
+        // seal the boxes in and stop rerendering them
+        this.graphics.generateTexture();
+        return true;
+    }
+}
+
+module.exports = CrypPage;
@@ -15,12 +15,15 @@ function crypRow(list, cryp, i) {
    const X_ORIGIN = xPos(i);
    const Y_ORIGIN = yPos(i);

-    list.graphics.fillStyle(ROW_FILL * Math.random(), 1.0);
-    list.graphics.fillRect(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT);
+    const row = list.add.rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random())
+        .setInteractive()
+        .setOrigin(0);
+
+    row.cryp = cryp;
    list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
    list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });

    return true;
 }

-module.exports = crypRow;
+module.exports = crypRow;
@@ -1,6 +1,7 @@
 const Phaser = require('phaser');

 const CrypList = require('./cryp.list');
+const CrypPage = require('./cryp.page');
 const Menu = require('./menu');
 // const Passives = require('./passives');

@@ -22,6 +23,7 @@ function renderCryps(store) {
        scene: [
            Menu,
            CrypList,
+            CrypPage,
        ],
    };

@@ -7,29 +7,23 @@ const passiveDataEdge = require('./passive.data.edge');
 // Mouse click hold to move, Q + E to zoom in and out
 // Press 'A' to reset allocated passive nodes

-class Passives extends Phaser.Scene {
+class PhaserPassives extends Phaser.Scene {
+    constructor() {
+        super('passives');
+    }
+
    preload() {
        this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
-        this.load.image('background', 'http://labs.phaser.io/assets/skies/nebula.jpg');
    }

    create() {
-        this.background = this.add.image(0, 0, 'background');
-        this.background.setScale(5);
-        this.background.setInteractive();
        this.graphics = this.add.graphics();
-        this.nodeText = this.add.text(10000, 10000, 'grep', {
-            fontSize: '32px',
-            fontFamily: 'Arial',
-            color: '#ffffff',
-            backgroundColor: '#000000',
-        }).setPadding(32);
-
        this.passiveNodeData = passiveDataNode;
        this.passiveEdgeData = passiveDataEdge;
        this.addPassiveNodes();
+        this.addCameraControl();
+        this.addEvents();
        this.drawPassiveEdges();
-        this.addCanmeraControl();
    }

    addPassiveNodes() {
@@ -39,20 +33,32 @@ class Passives extends Phaser.Scene {
                new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
            ).setInteractive();
        });
+    }

+    addCameraControl() {
+        this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
+            camera: this.cameras.main,
+            zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
+            zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
+            acceleration: 0.005,
+            drag: 0.0005,
+            maxSpeed: 0.001,
+        });
+    }
+
+    addEvents() {
        this.input.on('pointerover', (pointer, gameObjects) => {
            if (gameObjects[0] instanceof PassiveNode) {
-                if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff);
-                this.nodeText.x = pointer.x + this.cameras.main.scrollX;
-                this.nodeText.y = pointer.y + this.cameras.main.scrollY;
-                this.nodeText.text = gameObjects[0].text;
-            } else {
-                this.nodeText.text = '';
+                if (!gameObjects[0].alloc) {
+                    gameObjects[0].setTint(0xff00ff);
+                }
+                this.displayPassiveText(gameObjects[0], pointer);
            }
        });
        this.input.on('pointerout', (pointer, gameObjects) => {
            if (gameObjects[0] instanceof PassiveNode) {
                if (!gameObjects[0].alloc) gameObjects[0].clearTint();
+                this.nodeText.destroy();
            }
        });
        this.input.on('pointerup', (pointer, gameObjects) => {
@@ -65,10 +71,20 @@ class Passives extends Phaser.Scene {
                }
            }
        });
-
+        this.input.on('pointermove', (pointer) => {
+            const zoomFactor = 2 / this.cameras.main.zoom;
+            if (this.pan) {
+                const points = pointer.getInterpolatedPosition(2);
+                this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x);
+                this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
+            }
+        }, this);
        this.input.keyboard.on('keydown_A', () => {
            this.updatePassives(); // Will update nodes from state
        }, 0, this);
+        this.input.keyboard.on('keydown_S', () => {
+            this.scene.switch('combat');
+        }, 0, this);
    }

    drawPassiveEdges() {
@@ -87,22 +103,18 @@ class Passives extends Phaser.Scene {
        });
    }

-    addCanmeraControl() {
-        this.input.on('pointermove', (pointer) => {
-            if (this.pan) {
-                const points = pointer.getInterpolatedPosition(2);
-                this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2;
-                this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2;
-            }
-        }, this);
-        this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
-            camera: this.cameras.main,
-            zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
-            zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
-            acceleration: 0.005,
-            drag: 0.0005,
-            maxSpeed: 0.001,
-        });
+    displayPassiveText(node, pointer) {
+        if (this.nodeText) this.nodeText.destroy();
+        this.nodeText = this.add.text(node.x, node.y, node.text, {
+            fontSize: '20px',
+            fontFamily: 'Arial',
+            color: '#ffffff',
+            backgroundColor: '#222222',
+        }).setPadding(32);
+        this.nodeText.setAlpha(0.8);
+        this.nodeText.setOrigin(pointer.x >= 600 ? 1 : 0, pointer.y >= 450 ? 1 : 0);
+        this.nodeText.setWordWrapWidth(450);
+        this.nodeText.setScale(1 / this.cameras.main.zoom);
    }

    updatePassives() {
@@ -123,4 +135,4 @@ class Passives extends Phaser.Scene {
    }
 }

-module.exports = Passives;
+module.exports = PhaserPassives;