diff --git a/TODO b/TODO index 4e6c4d3..b7a8ede 100644 --- a/TODO +++ b/TODO @@ -3,7 +3,6 @@ * Re-style cancel button and allow to cancel by clicking the action again * Add equipment and active effects on ship tooltip * Add effect description on action tooltip -* Flash ship icons that receive damage * Mobile: display tooltips on hold * Mobile: targetting in two times, using a draggable target indicator * Add a defeat screen (game over for now) diff --git a/graphics/ui/battle.svg b/graphics/ui/battle.svg index c21b0aa..be63249 100644 --- a/graphics/ui/battle.svg +++ b/graphics/ui/battle.svg @@ -375,6 +375,19 @@ stdDeviation="1.140475" id="feGaussianBlur10852" /> + + + + height="100%" + transform="translate(189.6814,40.305086)" /> @@ -610,7 +623,7 @@ y="0" inkscape:tiled-clone-of="#g4211" xlink:href="#g4211" - transform="translate(-4.0854365e-6,203.72117)" + transform="translate(189.6814,244.02626)" id="use4339" width="100%" height="100%" /> @@ -619,7 +632,7 @@ y="0" inkscape:tiled-clone-of="#g4211" xlink:href="#g4211" - transform="translate(-4.0854365e-6,305.58175)" + transform="translate(189.6814,345.88684)" id="use4341" width="100%" height="100%" /> @@ -628,7 +641,7 @@ y="0" inkscape:tiled-clone-of="#g4211" xlink:href="#g4211" - transform="translate(-4.0854365e-6,407.44233)" + transform="translate(189.6814,447.74742)" id="use4343" width="100%" height="100%" /> @@ -637,7 +650,7 @@ y="0" inkscape:tiled-clone-of="#g4211" xlink:href="#g4211" - transform="translate(-4.0854365e-6,509.30291)" + transform="translate(189.6814,549.608)" id="use4345" width="100%" height="100%" /> @@ -646,7 +659,7 @@ y="0" inkscape:tiled-clone-of="#g4211" xlink:href="#g4211" - transform="translate(-4.0854365e-6,611.1635)" + transform="translate(189.6814,651.46859)" id="use4347" width="100%" height="100%" /> @@ -655,7 +668,7 @@ y="0" inkscape:tiled-clone-of="#g4211" xlink:href="#g4211" - transform="translate(-4.0854365e-6,713.02408)" + transform="translate(189.6814,753.32917)" id="use4349" width="100%" height="100%" /> @@ -664,7 +677,7 @@ y="0" inkscape:tiled-clone-of="#g4211" xlink:href="#g4211" - transform="translate(-4.0854365e-6,814.88466)" + transform="translate(189.6814,855.18975)" id="use4351" width="100%" height="100%" /> @@ -676,7 +689,6 @@ style="display:inline"> @@ -747,6 +759,45 @@ x="0" /> + + + + + + diff --git a/out/assets/images/battle/shiplist-damage.png b/out/assets/images/battle/shiplist-damage.png new file mode 100644 index 0000000..0267393 Binary files /dev/null and b/out/assets/images/battle/shiplist-damage.png differ diff --git a/src/view/Preload.ts b/src/view/Preload.ts index dd16863..9ce3fb8 100644 --- a/src/view/Preload.ts +++ b/src/view/Preload.ts @@ -19,6 +19,7 @@ module SpaceTac.View { this.loadImage("battle/shiplist-background.png"); this.loadImage("battle/shiplist-own.png"); this.loadImage("battle/shiplist-enemy.png"); + this.loadImage("battle/shiplist-damage.png"); this.loadImage("battle/shiplist-energy-empty.png"); this.loadImage("battle/shiplist-energy-full.png"); this.loadImage("battle/shiplist-hull-empty.png"); diff --git a/src/view/battle/ArenaShip.ts b/src/view/battle/ArenaShip.ts index cca4885..a791f98 100644 --- a/src/view/battle/ArenaShip.ts +++ b/src/view/battle/ArenaShip.ts @@ -88,14 +88,14 @@ module SpaceTac.View { displayDamage(hull: number, shield: number) { if (hull > 0) { var hull_text = new Phaser.Text(this.game, -20, -20, Math.round(hull).toString(), - { font: "bold 16px Arial", align: "center", fill: "#ffbbbb" }); + { font: "bold 16pt Arial", align: "center", fill: "#ffbbbb" }); hull_text.anchor.set(0.5, 0.5); this.addChild(hull_text); this.animateDamageText(hull_text); } if (shield > 0) { var shield_text = new Phaser.Text(this.game, 20, -20, Math.round(shield).toString(), - { font: "bold 16px Arial", align: "center", fill: "#bbbbff" }); + { font: "bold 16pt Arial", align: "center", fill: "#bbbbff" }); shield_text.anchor.set(0.5, 0.5); this.addChild(shield_text); this.animateDamageText(shield_text); @@ -105,8 +105,8 @@ module SpaceTac.View { private animateDamageText(text: Phaser.Text) { text.alpha = 0; var tween = this.game.tweens.create(text); - tween.to({ alpha: 1 }, 100, Phaser.Easing.Circular.In, false, 500); - tween.to({ y: -50, alpha: 0 }, 800, Phaser.Easing.Circular.In, false, 200); + tween.to({ alpha: 1 }, 100, Phaser.Easing.Circular.In, false, 400); + tween.to({ y: -50, alpha: 0 }, 1000, Phaser.Easing.Circular.In, false, 1000); tween.onComplete.addOnce(() => { text.destroy(); }); diff --git a/src/view/battle/LogProcessor.ts b/src/view/battle/LogProcessor.ts index af31ea8..e774b19 100644 --- a/src/view/battle/LogProcessor.ts +++ b/src/view/battle/LogProcessor.ts @@ -83,6 +83,10 @@ module SpaceTac.View { if (sprite) { sprite.displayDamage(event.hull, event.shield); } + var item = this.view.ship_list.findItem(event.ship); + if (item) { + item.setDamageHit(); + } } // Ship moved diff --git a/src/view/battle/ShipListItem.ts b/src/view/battle/ShipListItem.ts index f9ce3f9..0d6d723 100644 --- a/src/view/battle/ShipListItem.ts +++ b/src/view/battle/ShipListItem.ts @@ -16,6 +16,9 @@ module SpaceTac.View { // Portrait layer_portrait: Phaser.Image; + // Damage flashing indicator + layer_damage: Phaser.Image; + // Hover indicator layer_hover: Phaser.Image; @@ -36,13 +39,15 @@ module SpaceTac.View { list.battleview.cursorOffShip(ship); }); - this.layer_portrait = new Phaser.Image(this.game, 76, 76, "ship-" + ship.model + "-portrait", 0); - this.layer_portrait.position.set(8, 8); + this.layer_portrait = new Phaser.Image(this.game, 8, 8, "ship-" + ship.model + "-portrait", 0); this.layer_portrait.scale.set(0.3, 0.3); this.addChild(this.layer_portrait); - this.layer_hover = new Phaser.Image(this.game, 30, 30, "battle-arena-ship-hover", 0); - this.layer_hover.position.set(5, 5); + this.layer_damage = new Phaser.Image(this.game, 8, 8, "battle-shiplist-damage", 0); + this.layer_damage.alpha = 0; + this.addChild(this.layer_damage); + + this.layer_hover = new Phaser.Image(this.game, 5, 5, "battle-arena-ship-hover", 0); this.layer_hover.visible = false; this.addChild(this.layer_hover); @@ -90,6 +95,11 @@ module SpaceTac.View { } } + // Flash a damage indicator + setDamageHit() { + this.game.tweens.create(this.layer_damage).to({ alpha: 1 }, 100).to({ alpha: 0 }, 150).repeatAll(2).start(); + } + // Move to a given location on screen moveTo(x: number, y: number, animate: boolean) { if (animate) {