Browse Source

Replaced particle spritesheet with images

Michaël Lemaire 2 years ago
parent
commit
b35e9d47fa

BIN
data/stage3/image/intro/flash.png


BIN
data/stage3/image/intro/fleet.png


BIN
data/stage3/image/intro/star.png


BIN
graphics/layered/particles.xcf


BIN
out/images/common/particles.png


+ 0 - 3
src/ui/AssetLoading.ts

@@ -52,9 +52,6 @@ module TK.SpaceTac.UI {
             if (this.required >= AssetLoadingRange.MENU && AssetLoading.loaded < AssetLoadingRange.MENU) {
                 console.log("Loading menu assets");
                 this.load.pack("stage1", `assets/pack1.json?t=${Date.now()}`);
-
-                // TODO pack
-                this.loadSheet("common/particles.png", 32);
             }
 
             if (this.required >= AssetLoadingRange.BATTLE && AssetLoading.loaded < AssetLoadingRange.BATTLE) {

+ 4 - 4
src/ui/battle/ActionIcon.spec.ts

@@ -9,22 +9,22 @@ module TK.SpaceTac.UI.Specs {
             let ship = new Ship();
             let action = new BaseAction("something");
             let icon = new ActionIcon(bar, ship, action, 0);
-            check.same(icon.power_bg.visible, false, "initial state");
+            check.same(icon.power_container.visible, false, "initial state");
 
             icon.refresh();
-            check.same(icon.power_bg.visible, false, "no change");
+            check.same(icon.power_container.visible, false, "no change");
 
             let cost = 3;
             check.patch(action, "getPowerUsage", () => cost);
             icon.refresh();
             check.in("power cost = 3", check => {
-                check.equals(icon.power_bg.visible, true);
+                check.equals(icon.power_container.visible, true);
                 check.equals(icon.power_text.text, "3\n-");
             });
             cost = -2;
             icon.refresh();
             check.in("power cost = -2", check => {
-                check.equals(icon.power_bg.visible, true);
+                check.equals(icon.power_container.visible, true);
                 check.equals(icon.power_text.text, "2\n+");
             });
         })

+ 0 - 37
src/ui/common/ParticleBuilder.spec.ts

@@ -1,37 +0,0 @@
-module TK.SpaceTac.UI.Specs {
-    testing("ParticleBuilder", test => {
-        let testgame = setupEmptyView(test);
-
-        test.case("builds composed particles", check => {
-            let builder = new ParticleBuilder(testgame.view);
-            let particle = builder.build([
-                new ParticleConfig(ParticleShape.ROUND, ParticleColor.BLUE, 2, 1, 45, 10, -20),
-                new ParticleConfig(ParticleShape.DISK_HALO, ParticleColor.WHITE, 0.5, 1, 0, 5, 0)
-            ]);
-
-            check.equals(particle.length, 2);
-
-            let child = particle.list[0];
-            if (check.instance(child, Phaser.GameObjects.Image, "first particle is an image")) {
-                check.equals((<any>child.data).frame, 4);
-                check.equals((<any>child.data).key, "common-particles");
-                check.equals(child.scaleX, 2);
-                check.equals(child.scaleY, 2);
-                check.equals(child.x, 10);
-                check.equals(child.y, -20);
-                check.equals(child.angle, 45);
-            }
-
-            child = particle.list[1];
-            if (check.instance(child, Phaser.GameObjects.Image, "second particle is an image")) {
-                check.equals((<any>child.data).frame, 16);
-                check.equals((<any>child.data).key, "common-particles");
-                check.equals(child.scaleX, 0.5);
-                check.equals(child.scaleY, 0.5);
-                check.equals(child.x, 5);
-                check.equals(child.y, 0);
-                check.equals(child.angle, 0);
-            }
-        });
-    });
-}

+ 0 - 96
src/ui/common/ParticleBuilder.ts

@@ -1,96 +0,0 @@
-module TK.SpaceTac.UI {
-    /**
-     * Particle shapes
-     */
-    export enum ParticleShape {
-        ROUND = 0,
-        DISK_HALO = 1,
-        TRAIL = 2,
-        FLARE = 3
-    }
-
-    /**
-     * Particle colors
-     */
-    export enum ParticleColor {
-        WHITE = 0,
-        BLACK = 1,
-        GREY = 2,
-        RED = 3,
-        BLUE = 4,
-        YELLOW = 5,
-        GREEN = 6,
-        CYAN = 7,
-        MAGENTA = 8,
-        BROWN = 9,
-        VIOLET = 10,
-        MARINE = 11,
-        ORANGE = 12,
-        YELLOWISH = 13,
-        GREENISH = 14,
-        BLUEISH = 15,
-    }
-
-    /**
-     * Config for a single sub-particle
-     */
-    export class ParticleConfig {
-        shape: ParticleShape
-        color: ParticleColor
-        scale: number
-        alpha: number
-        angle: number
-        offsetx: number
-        offsety: number
-
-        constructor(shape = ParticleShape.ROUND, color = ParticleColor.WHITE, scale = 1, alpha = 1, angle = 0, offsetx = 0, offsety = 0) {
-            this.shape = shape;
-            this.color = color;
-            this.scale = scale;
-            this.alpha = alpha;
-            this.angle = angle;
-            this.offsetx = offsetx;
-            this.offsety = offsety;
-        }
-
-        /**
-         * Get a particle image for this config
-         */
-        getImage(view: BaseView): UIImage {
-            let frame = this.shape * 16 + this.color;
-            let result = view.add.image(0, 0, "common-particles", frame);
-            result.setDataEnabled();
-            (<any>result.data).frame = frame;
-            (<any>result.data).key = "common-particles";
-            result.setAngle(this.angle);
-            result.setAlpha(this.alpha);
-            result.setScale(this.scale);
-            result.setPosition(this.offsetx, this.offsety);
-            return result;
-        }
-    }
-
-    /**
-     * Builder of particles, composed of one or several sub particles
-     */
-    export class ParticleBuilder {
-        view: BaseView
-
-        constructor(view: BaseView) {
-            this.view = view;
-        }
-
-        /**
-         * Build a composed particle
-         */
-        build(configs: ParticleConfig[]): UIContainer {
-            let result = this.view.add.container(0, 0);
-
-            configs.forEach(config => {
-                result.add(config.getImage(this.view));
-            });
-
-            return result;
-        }
-    }
-}

+ 21 - 34
src/ui/intro/IntroSteps.ts

@@ -81,6 +81,7 @@ module TK.SpaceTac.UI {
                 let mheight = this.view.getMidHeight();
 
                 let builder = new UIBuilder(this.view, layer);
+                let random = RandomGenerator.global;
 
                 let galaxy = builder.container("galaxy", 0, 0, false);
                 galaxy.setPosition(mwidth, mheight);
@@ -93,28 +94,25 @@ module TK.SpaceTac.UI {
                     let back2 = builder.image("intro-galaxy2", 0, 0, true);
                     back2.setScale(1.5);
                     animations.addAnimation(back2, { rotation: Math.PI * 2 }, 300000, undefined, undefined, Infinity);
-                });
 
-                let random = RandomGenerator.global;
-                range(200).forEach(i => {
-                    let distance = (0.3 + random.random() * 0.7) * mheight;
-                    let angle = random.random() * Math.PI * 2;
-                    let power = 0.4 + random.random() * 0.6;
-
-                    let star = this.view.add.image(distance * Math.cos(angle), distance * Math.sin(angle),
-                        "common-particles", 16);
-                    star.setScale(0.15 + random.random() * 0.2);
-                    star.setAlpha(power * 0.5);
-                    this.view.tweens.add({
-                        targets: star,
-                        alpha: star.alpha + 0.5,
-                        duration: 200 + random.random() * 500,
-                        delay: 1000 + random.random() * 3000,
-                        yoyo: true,
-                        loop: Infinity,
-                        loopDelay: 2000 + random.random() * 5000
+                    range(200).forEach(() => {
+                        let distance = (0.3 + random.random() * 0.7) * mheight;
+                        let angle = random.random() * Math.PI * 2;
+                        let power = 0.4 + random.random() * 0.6;
+
+                        let star = builder.image("intro-star", distance * Math.cos(angle), distance * Math.sin(angle), true);
+                        star.setScale(0.15 + random.random() * 0.2);
+                        star.setAlpha(power * 0.5);
+                        this.view.tweens.add({
+                            targets: star,
+                            alpha: star.alpha + 0.5,
+                            duration: 200 + random.random() * 500,
+                            delay: 1000 + random.random() * 3000,
+                            yoyo: true,
+                            loop: Infinity,
+                            loopDelay: 2000 + random.random() * 5000
+                        });
                     });
-                    galaxy.add(star);
                 });
             }
         }
@@ -125,26 +123,15 @@ module TK.SpaceTac.UI {
         protected exitftl(): Function {
             return () => {
                 let layer = this.getLayer(1);
+                let builder = new UIBuilder(this.view, layer);
 
-                let builder = new ParticleBuilder(this.view);
-                let fleet = builder.build([
-                    new ParticleConfig(ParticleShape.TRAIL, ParticleColor.BLUEISH, 0.8, 1, 200),
-                    new ParticleConfig(ParticleShape.FLARE, ParticleColor.CYAN, 10, 0.2, -45)
-                ]);
-                fleet.setPosition(this.view.getMidWidth() + 1500, this.view.getMidHeight() - 750);
+                let fleet = builder.image("intro-fleet", this.view.getMidWidth() + 1500, this.view.getMidHeight() - 750, true);
                 this.view.animations.addAnimation(fleet, { x: this.view.getMidWidth(), y: this.view.getMidHeight() }, 5000, "Circ.easeOut");
                 this.view.animations.addAnimation(fleet, { alpha: 0, scaleX: 1.5, scaleY: 1.5 }, 500, "Cubic.easeOut", 3500);
 
-                let flash = this.view.add.container(this.view.getMidWidth() + 60, this.view.getMidHeight() - 30);
+                let flash = builder.image("intro-flash", this.view.getMidWidth() + 60, this.view.getMidHeight() - 30, true);
                 flash.setAlpha(0);
                 flash.setScale(0.1);
-                new UIBuilder(this.view).in(flash, builder => {
-                    let sub = this.view.add.image(0, 0, "common-particles", 15);
-                    flash.add(sub);
-                    sub = this.view.add.image(0, 0, "common-particles", 0);
-                    sub.setScale(0.5);
-                    flash.add(sub);
-                });
                 this.view.animations.addAnimation(flash, { alpha: 0.7, scaleX: 2.5, scaleY: 2.5 }, 300, "Quad.easeOut", 3500, undefined, true);
             }
         }