Images to atlas (continued)

src/ui/BaseView.ts

@@ -184,6 +184,15 @@ module TS.SpaceTac.UI {
             return result;
         }
 
+        /**
+         * Update an image from an atlas name
+         */
+        changeImage(image: Phaser.Image, name: string): void {
+            let info = this.getImageInfo(name);
+            image.loadTexture(info.key);
+            image.frame = info.frame;
+        }
+
         /**
          * Get an image from atlases
          */

src/ui/Preload.ts

@@ -38,10 +38,6 @@ module TS.SpaceTac.UI {
             this.loadSheet("battle/actionbar/button-menu.png", 79, 132);
             this.loadImage("battle/arena/background.png");
             this.loadImage("battle/arena/blast.png");
-            this.loadSheet("battle/arena/gauges.png", 19, 93);
-            this.loadSheet("battle/arena/small-indicators.png", 10, 10);
-            this.loadSheet("battle/arena/indicators.png", 64, 64);
-            this.loadSheet("battle/arena/ship-frames.png", 70, 70);
             this.loadImage("battle/shiplist/background.png");
             this.loadImage("battle/shiplist/item-background.png");
             this.loadImage("battle/shiplist/damage.png");

src/ui/battle/ArenaShip.ts

@@ -60,22 +60,23 @@ module TS.SpaceTac.UI {
             this.add(this.sprite);
 
             // Add stasis effect
-            this.stasis = new Phaser.Image(this.game, 0, 0, "battle-arena-ship-frames", 2);
+            this.stasis = this.battleview.newImage("battle-hud-ship-stasis");
             this.stasis.anchor.set(0.5, 0.5);
             this.stasis.visible = false;
             this.add(this.stasis);
 
             // Add playing effect
-            this.frame = new Phaser.Image(this.game, 0, 0, "battle-arena-ship-frames", this.enemy ? 0 : 1);
+            this.frame = this.battleview.newImage("battle-hud-ship-enemy");
             this.frame.anchor.set(0.5, 0.5);
             this.add(this.frame);
+            this.setPlaying(false);
 
             // HSP display
-            this.hull = ValueBar.newStyled(this.game, "battle-arena-gauges", -59, -47, true, 0);
+            this.hull = ValueBar.newStyled(this.battleview, "battle-hud-ship-hull", -59, -47, true);
             this.hull.setValue(this.ship.getValue("hull"), this.ship.getAttribute("hull_capacity"));
             this.toggle_hull = this.battleview.animations.newVisibilityToggle(this.hull, 200, false);
             this.add(this.hull);
-            this.shield = ValueBar.newStyled(this.game, "battle-arena-gauges", 40, -47, true, 2);
+            this.shield = ValueBar.newStyled(this.battleview, "battle-hud-ship-shield", 40, -47, true);
             this.shield.setValue(this.ship.getValue("shield"), this.ship.getAttribute("shield_capacity"));
             this.toggle_shield = this.battleview.animations.newVisibilityToggle(this.shield, 200, false);
             this.add(this.shield);
@@ -208,7 +209,13 @@ module TS.SpaceTac.UI {
         // Set the playing state on this ship
         //  This will toggle the "playing" indicator
         setPlaying(playing: boolean) {
-            this.frame.frame = (playing ? 3 : 0) + (this.enemy ? 0 : 1);
+            let name = this.enemy ? "battle-hud-ship-enemy" : "battle-hud-ship-own";
+            if (playing) {
+                name += "-playing";
+            }
+            let info = this.battleview.getImageInfo(name);
+            this.frame.loadTexture(info.key);
+            this.frame.frame = info.frame;
         }
 
         /**
@@ -302,7 +309,8 @@ module TS.SpaceTac.UI {
                 let positions = UITools.evenlySpace(70, 10, count);
 
                 effects.forEach((effect, index) => {
-                    let dot = new Phaser.Image(this.game, positions[index] - 40, -47, "battle-arena-small-indicators", effect.isBeneficial() ? 1 : 0);
+                    let name = effect.isBeneficial() ? "battle-hud-ship-effect-good" : "battle-hud-ship-effect-bad";
+                    let dot = this.battleview.newImage(name, positions[index] - 40, -47);
                     this.active_effects_display.add(dot);
                 });
             }
@@ -317,7 +325,7 @@ module TS.SpaceTac.UI {
             if (power) {
                 let positions = UITools.evenlySpace(70, 10, power);
                 range(power).forEach(index => {
-                    let dot = new Phaser.Image(this.game, positions[index] - 40, 40, "battle-arena-small-indicators", 2);
+                    let dot = this.battleview.newImage("battle-hud-ship-power", positions[index] - 40, 40);
                     this.power.add(dot);
                 });
             }

src/ui/battle/ShipListItem.ts

@@ -26,7 +26,7 @@ module TS.SpaceTac.UI {
 
             this.ship = ship;
 
-            this.player_indicator = new Phaser.Image(this.game, 42, 52, "battle-arena-ship-frames", owned ? 1 : 0);
+            this.player_indicator = this.view.newImage(owned ? "battle-hud-ship-own" : "battle-hud-ship-enemy", 42, 52);
             this.player_indicator.anchor.set(0.5, 0.5);
             this.player_indicator.angle = 90;
             this.addChild(this.player_indicator);

src/ui/battle/Targetting.ts

@@ -42,7 +42,7 @@ module TS.SpaceTac.UI {
             this.move_ghost.anchor.set(0.5, 0.5);
             this.move_ghost.alpha = 0.8;
             this.move_ghost.visible = false;
-            this.fire_arrow = new Phaser.Image(view.game, 0, 0, "battle-arena-indicators", 0);
+            this.fire_arrow = new Phaser.Image(view.game, 0, 0, "battle-hud-simulator-ok");
             this.fire_arrow.anchor.set(1, 0.5);
             this.fire_arrow.visible = false;
             this.fire_impact = new Phaser.Group(view.game);
@@ -131,8 +131,9 @@ module TS.SpaceTac.UI {
             if (ships.length) {
                 this.fire_impact.removeAll(true);
                 ships.forEach(iship => {
-                    let frame = this.view.add.image(iship.arena_x, iship.arena_y, "battle-arena-ship-frames", 5, this.fire_impact);
-                    frame.anchor.set(0.5);
+                    let indicator = this.view.newImage("battle-hud-ship-impacted", iship.arena_x, iship.arena_y);
+                    indicator.anchor.set(0.5);
+                    this.fire_impact.add(indicator);
                 });
                 this.fire_impact.visible = true;
             } else {
@@ -158,7 +159,6 @@ module TS.SpaceTac.UI {
                         this.drawPart(part, simulation.complete, previous);
                         previous = part;
                     });
-                    this.fire_arrow.frame = simulation.complete ? 0 : 1;
 
                     let from = simulation.need_fire ? simulation.move_location : this.ship.location;
                     let angle = Math.atan2(this.target.y - from.y, this.target.x - from.x);
@@ -185,7 +185,7 @@ module TS.SpaceTac.UI {
 
                         this.fire_arrow.position.set(this.target.x, this.target.y);
                         this.fire_arrow.rotation = angle;
-                        this.fire_arrow.frame = simulation.complete ? 0 : 1;
+                        this.view.changeImage(this.fire_arrow, simulation.complete ? "battle-hud-simulator-ok" : "battle-hud-simulator-power");
                         this.fire_arrow.visible = true;
                     } else {
                         this.fire_blast.visible = false;
@@ -223,9 +223,7 @@ module TS.SpaceTac.UI {
                 this.ship = action.equipment.attached_to.ship;
                 this.action = action;
 
-                let info = this.view.getImageInfo(`ship-${this.ship.model.code}-sprite`);
-                this.move_ghost.loadTexture(info.key);
-                this.move_ghost.frame = info.frame;
+                this.view.changeImage(this.move_ghost, `ship-${this.ship.model.code}-sprite`);
                 this.move_ghost.scale.set(0.25);
             } else {
                 this.ship = null;

src/ui/common/ValueBar.spec.ts

@@ -3,7 +3,7 @@ module TS.SpaceTac.UI.Specs {
         let testgame = setupEmptyView();
 
         it("computes proportional value", function () {
-            var bar = ValueBar.newStandard(testgame.ui, 0, 0);
+            var bar = ValueBar.newStyled(testgame.baseview, "default", 0, 0);
 
             expect(bar.getProportionalValue()).toBe(0);
 

src/ui/common/ValueBar.ts

@@ -18,17 +18,14 @@ module TS.SpaceTac.UI {
         private bar_sprite_rect: Phaser.Rectangle;
         private bar_sprite_offset: number;
 
-        // Create a quick standard bar
-        static newStandard(game: Phaser.Game, x: number, y: number): ValueBar {
-            var result = new ValueBar(game, x, y, "common-standard-bar-background");
-            result.setBarImage("common-standard-bar-foreground", 5, 5);
-            return result;
-        }
-
         // Create a quick styled bar
-        static newStyled(game: Phaser.Game, base_key: string, x: number, y: number, vertical = false, frame = 0): ValueBar {
-            var result = new ValueBar(game, x, y, base_key, vertical, frame);
-            result.setBarImage(base_key, 0, 0, frame + 1);
+        static newStyled(view: BaseView, base_name: string, x: number, y: number, vertical = false): ValueBar {
+            let info = view.getImageInfo(base_name + "-empty");
+            let result = new ValueBar(view.game, x, y, info.key, vertical, info.frame);
+
+            info = view.getImageInfo(base_name + "-full");
+            result.setBarImage(info.key, 0, 0, info.frame);
+
             return result;
         }