From cde4b2fdf18b43938cee0bcc76c1706bd199a0dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Lemaire?= Date: Sun, 15 Jan 2017 23:05:00 +0100 Subject: [PATCH] Added flashing effect on ship list when receiving damage --- TODO | 1 - graphics/ui/battle.svg | 85 +++++++++++++++---- out/assets/images/battle/shiplist-damage.png | Bin 0 -> 5573 bytes src/view/Preload.ts | 1 + src/view/battle/ArenaShip.ts | 8 +- src/view/battle/LogProcessor.ts | 4 + src/view/battle/ShipListItem.ts | 18 +++- 7 files changed, 91 insertions(+), 26 deletions(-) create mode 100644 out/assets/images/battle/shiplist-damage.png 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 0000000000000000000000000000000000000000..02673938e465414bf15666840e061da88d59d3b6 GIT binary patch literal 5573 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 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) {