arena: Migrated some images to sheets

src/ui/Preload.ts

@@ -36,20 +36,10 @@ module TS.SpaceTac.UI {
             this.loadSheet("battle/actionbar/button-menu.png", 79, 132);
             this.loadImage("battle/arena/background.png");
             this.loadImage("battle/arena/ap-indicator.png");
-            this.loadImage("battle/arena/ship-normal-enemy.png");
-            this.loadImage("battle/arena/ship-normal-own.png");
-            this.loadImage("battle/arena/ship-playing-enemy.png");
-            this.loadImage("battle/arena/ship-playing-own.png");
-            this.loadImage("battle/arena/ship-hull-base.png");
-            this.loadImage("battle/arena/ship-hull-full.png");
-            this.loadImage("battle/arena/ship-shield-base.png");
-            this.loadImage("battle/arena/ship-shield-full.png");
-            this.loadImage("battle/arena/ship-effect-good.png");
-            this.loadImage("battle/arena/ship-effect-bad.png");
-            this.loadImage("battle/arena/ship-power.png");
-            this.loadImage("battle/arena/stasis.png");
-            this.loadImage("battle/arena/target.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/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

@@ -57,30 +57,28 @@ module TS.SpaceTac.UI {
             this.add(this.sprite);
 
             // Add stasis effect
-            this.stasis = new Phaser.Image(this.game, 0, 0, "battle-arena-stasis");
+            this.stasis = new Phaser.Image(this.game, 0, 0, "battle-arena-ship-frames", 2);
             this.stasis.anchor.set(0.5, 0.5);
             this.stasis.visible = false;
             this.add(this.stasis);
 
             // Add target effect
-            this.target = new Phaser.Image(this.game, 0, 0, "battle-arena-target");
+            this.target = new Phaser.Image(this.game, 0, 0, "battle-arena-ship-frames", 5);
             this.target.anchor.set(0.5, 0.5);
             this.target.visible = false;
             this.add(this.target);
 
             // Add playing effect
-            this.frame = new Phaser.Image(this.game, 0, 0, `battle-arena-ship-normal-${this.enemy ? "enemy" : "own"}`, 0);
+            this.frame = new Phaser.Image(this.game, 0, 0, "battle-arena-ship-frames", this.enemy ? 0 : 1);
             this.frame.anchor.set(0.5, 0.5);
             this.add(this.frame);
 
             // HSP display
-            this.hull = new ValueBar(this.game, -59, -47, "battle-arena-ship-hull-base", true);
+            this.hull = ValueBar.newStyled(this.game, "battle-arena-gauges", -59, -47, true, 0);
-            this.hull.setBarImage("battle-arena-ship-hull-full", 3);
             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 = new ValueBar(this.game, 40, -47, "battle-arena-ship-shield-base", true);
+            this.shield = ValueBar.newStyled(this.game, "battle-arena-gauges", 40, -47, true, 2);
-            this.shield.setBarImage("battle-arena-ship-shield-full", 3);
             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);
@@ -201,7 +199,7 @@ module TS.SpaceTac.UI {
         // Set the playing state on this ship
         //  This will toggle the "playing" indicator
         setPlaying(playing: boolean) {
-            this.frame.loadTexture(`battle-arena-ship-${playing ? "playing" : "normal"}-${this.enemy ? "enemy" : "own"}`);
+            this.frame.frame = (playing ? 3 : 0) + (this.enemy ? 0 : 1);
         }
 
         /**
@@ -282,7 +280,7 @@ 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-ship-effect-${effect.isBeneficial() ? "good" : "bad"}`);
+                    let dot = new Phaser.Image(this.game, positions[index] - 40, -47, "battle-arena-small-indicators", effect.isBeneficial() ? 1 : 0);
                     this.active_effects_display.add(dot);
                 });
             }
@@ -297,7 +295,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-ship-power");
+                    let dot = new Phaser.Image(this.game, positions[index] - 40, 40, "battle-arena-small-indicators", 2);
                     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, owned ? "battle-arena-ship-normal-own" : "battle-arena-ship-normal-enemy");
+            this.player_indicator = new Phaser.Image(this.game, 42, 52, "battle-arena-ship-frames", owned ? 1 : 0);
             this.player_indicator.anchor.set(0.5, 0.5);
             this.player_indicator.angle = 90;
             this.addChild(this.player_indicator);

src/ui/common/ValueBar.ts

@@ -1,6 +1,6 @@
 module TS.SpaceTac.UI {
     // Bar to display a value (like a progress bar)
-    export class ValueBar extends Phaser.Sprite {
+    export class ValueBar extends Phaser.Image {
         // Vertical orientation
         vertical: boolean;
 
@@ -14,7 +14,7 @@ module TS.SpaceTac.UI {
         private proportional: number;
 
         // Sprite of internal bar (inside the background sprite)
-        private bar_sprite: Phaser.Sprite;
+        private bar_sprite: Phaser.Image;
         private bar_sprite_rect: Phaser.Rectangle;
         private bar_sprite_offset: number;
 
@@ -26,16 +26,16 @@ module TS.SpaceTac.UI {
         }
 
         // Create a quick styled bar
-        static newStyled(game: Phaser.Game, base_key: string, x: number, y: number, vertical: boolean = false): ValueBar {
+        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 + "-empty", vertical);
+            var result = new ValueBar(game, x, y, base_key, vertical, frame);
-            result.setBarImage(base_key + "-full");
+            result.setBarImage(base_key, 0, 0, frame + 1);
             return result;
         }
 
         // Build an value bar sprite
         //  background is the key to the image to use as background
-        constructor(game: Phaser.Game, x: number, y: number, background: string, vertical: boolean = false) {
+        constructor(game: Phaser.Game, x: number, y: number, background: string, vertical = false, frame = 0) {
-            super(game, x, y, background);
+            super(game, x, y, background, frame);
 
             this.vertical = vertical;
 
@@ -43,8 +43,8 @@ module TS.SpaceTac.UI {
         }
 
         // Set an image to use for the bar
-        setBarImage(key: string, offset_x: number = 0, offset_y: number = 0): void {
+        setBarImage(key: string, offset_x = 0, offset_y = 0, frame = 0): void {
-            this.bar_sprite = new Phaser.Sprite(this.game, offset_x, offset_y, key);
+            this.bar_sprite = new Phaser.Image(this.game, offset_x, offset_y, key, frame);
             this.bar_sprite_rect = new Phaser.Rectangle(0, 0, this.bar_sprite.width, this.bar_sprite.height);
             this.bar_sprite_offset = this.vertical ? offset_y : offset_x;
             this.addChild(this.bar_sprite);