1
0
Fork 0

Added hull and shield HUD in the arena

This commit is contained in:
Michaël Lemaire 2017-05-15 20:30:44 +02:00
parent 8bfc26b99b
commit ccab5fe8fc
11 changed files with 218 additions and 58 deletions

1
TODO
View file

@ -15,6 +15,7 @@
* Add battle statistics and/or critics in outcome dialog
* Ensure that tweens and particle emitters get destroyed once animation is done (or view changes)
* Controls: Do not focus on ship while targetting for area effects (dissociate hover and target)
* Controls: Fix hover being stuck when the cursor exits the window
* Active effects are not enough visible in ship list (maybe better in arena ?)
* All things displayed in battle should be updated from LogProcess forwarding, not from current game state
* Drones: add hull points and take area damage

View file

@ -1077,11 +1077,11 @@
borderopacity="1"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="0.70710678"
inkscape:cx="578.72075"
inkscape:cy="593.06898"
inkscape:zoom="4"
inkscape:cx="394.77432"
inkscape:cy="563.06617"
inkscape:document-units="px"
inkscape:current-layer="layer26"
inkscape:current-layer="g4971-3"
showgrid="false"
units="px"
showguides="false"
@ -1092,7 +1092,7 @@
inkscape:object-nodes="true"
inkscape:snap-intersection-paths="false"
inkscape:object-paths="true"
inkscape:snap-global="true"
inkscape:snap-global="false"
inkscape:showpageshadow="false"
showborder="true"
borderlayer="true" />
@ -1179,11 +1179,11 @@
style="display:inline">
<path
sodipodi:type="star"
style="display:inline;fill:#ffdd4b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.4464567;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
style="display:inline;fill:#ffdd4b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.4464567;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter6668);enable-background:new"
id="path4998"
sodipodi:sides="3"
sodipodi:cx="363.86221"
sodipodi:cy="602.23376"
sodipodi:cy="602.89667"
sodipodi:r1="5.1498642"
sodipodi:r2="2.5749321"
sodipodi:arg1="1.5707963"
@ -1191,7 +1191,7 @@
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 363.86221,607.38363 -4.45991,-7.7248 8.91983,0 z"
d="m 363.86221,608.04653 -4.45991,-7.72479 8.91983,0 z"
inkscape:transform-center-y="1.287466" />
<use
style="display:inline;enable-background:new"
@ -1245,30 +1245,10 @@
transform="translate(53.877816)" />
<path
style="display:inline;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.875;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
d="M 359.19306,561.5625 H 248.4375 V 283.12499 l -145.74267,-0.16573"
d="M 355.83565,561.5625 H 248.4375 V 283.12499 l -145.74267,-0.16573"
id="path6124"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
<rect
y="530.80554"
x="348.48169"
height="63.022022"
width="5.0654392"
id="rect4437-3-3-6-3"
style="display:inline;opacity:1;fill:#eb4e4a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:19.52019501;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
inkscape:export-filename="/tmp/export.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<rect
inkscape:export-ydpi="90"
inkscape:export-xdpi="90"
inkscape:export-filename="/tmp/export.png"
style="display:inline;opacity:1;fill:#2ad8dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:19.52019501;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;enable-background:new"
id="rect5911"
width="5.0654392"
height="63.022022"
x="428.36267"
y="530.80554" />
<circle
r="7.2920384"
cy="518.39703"
@ -1292,6 +1272,158 @@
cx="374.18796"
cy="518.39703"
r="7.2920384" />
<g
id="g5020"
transform="translate(-3.98585)">
<g
transform="translate(9.375)"
id="g4971">
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#eb4e4a;stroke-width:2.46539116;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:transform-center-x="1.4663198"
d="m 344.96338,606.73659 -8.79795,-45.17409 8.79795,-45.17408"
id="path4952"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-full.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<use
x="0"
y="0"
xlink:href="#path4952"
inkscape:transform-center-x="1.4867875"
id="use4955"
width="100%"
height="100%"
transform="translate(-1.875)"
style="opacity:0.52300002"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-base.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<use
x="0"
y="0"
xlink:href="#path4952"
inkscape:transform-center-x="1.4867875"
id="use4961"
width="100%"
height="100%"
transform="translate(3.75)"
style="opacity:0.52300002"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-base.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<use
x="0"
y="0"
xlink:href="#path4952"
inkscape:transform-center-x="1.4867875"
id="use4965"
width="100%"
height="100%"
transform="translate(1.875)"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-full.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path5032"
d="m 341.54484,606.73659 -8.79795,-45.17409 8.79795,-45.17408"
inkscape:transform-center-x="1.4663198"
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ebaead;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.75744683"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-base.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<use
x="0"
y="0"
xlink:href="#path5032"
inkscape:transform-center-x="1.4663198"
id="use5034"
width="100%"
height="100%"
transform="translate(8.8778154)"
style="opacity:0.76099997"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-hull-base.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
</g>
<g
transform="matrix(-1,0,0,1,780.26995,0.73591)"
id="g4971-3"
style="display:inline;enable-background:new">
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#2ad8dc;stroke-width:2.46539116;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:transform-center-x="1.4663198"
d="m 344.96338,606.73659 -8.79795,-45.17409 8.79795,-45.17408"
id="path4952-6"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-full.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<use
x="0"
y="0"
xlink:href="#path4952-6"
inkscape:transform-center-x="1.4867875"
id="use4955-7"
width="100%"
height="100%"
transform="translate(-1.875)"
style="opacity:0.52300002"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-base.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<use
x="0"
y="0"
xlink:href="#path4952-6"
inkscape:transform-center-x="1.4867875"
id="use4961-5"
width="100%"
height="100%"
transform="translate(3.75)"
style="opacity:0.52300002"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-base.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<use
x="0"
y="0"
xlink:href="#path4952-6"
inkscape:transform-center-x="1.4867875"
id="use4965-3"
width="100%"
height="100%"
transform="translate(1.875)"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-full.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path5036"
d="m 350.42264,606.73659 -8.79795,-45.17409 8.79795,-45.17408"
inkscape:transform-center-x="1.4663198"
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#bceaeb;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.74680852"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-base.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<path
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#bceaeb;stroke-width:0.9375;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.44893619"
inkscape:transform-center-x="1.4663198"
d="m 341.37911,606.73659 -8.79795,-45.17409 8.79795,-45.17408"
id="path5038"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/battle/arena/ship-shield-base.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"

Before

Width:  |  Height:  |  Size: 120 KiB

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -28,8 +28,6 @@ module TS.SpaceTac.UI {
this.loadImage("battle/shiplist/hover.png");
this.loadImage("battle/shiplist/info-button.png");
this.loadImage("battle/background.jpg");
this.loadImage("battle/arena/background.png");
this.loadImage("battle/arena/ap-indicator.png");
this.loadImage("battle/actionbar.png");
this.loadImage("battle/action-inactive.png");
this.loadImage("battle/action-active.png");
@ -38,11 +36,16 @@ module TS.SpaceTac.UI {
this.loadImage("battle/power-available.png");
this.loadImage("battle/power-using.png");
this.loadImage("battle/power-used.png");
this.loadImage("battle/arena/ship-hover.png");
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/stasis.png");
this.loadImage("battle/arena/target.png");
this.loadImage("battle/arena/blast.png");

View file

@ -61,8 +61,8 @@ module TS.SpaceTac.UI {
this.position.set(offset_x, offset_y);
this.addChild(this.background);
this.addChild(this.range_hint);
this.add(this.background);
this.add(this.range_hint);
this.init();
}
@ -77,12 +77,12 @@ module TS.SpaceTac.UI {
// Add ship sprites
this.battleview.battle.play_order.forEach(ship => {
var sprite = new ArenaShip(this, ship);
this.addChild(sprite);
this.add(sprite);
this.ship_sprites.push(sprite);
});
this.layer_weapon_effects = new Phaser.Group(this.game);
this.addChild(this.layer_weapon_effects);
this.add(this.layer_weapon_effects);
}
// Get the current MainUI instance
@ -168,7 +168,7 @@ module TS.SpaceTac.UI {
if (!this.findDrone(drone)) {
let sprite = new ArenaDrone(this.battleview, drone);
let angle = Math.atan2(drone.y - drone.owner.arena_y, drone.x - drone.owner.arena_x);
this.addChild(sprite);
this.add(sprite);
this.drone_sprites.push(sprite);
if (animate) {
@ -209,5 +209,15 @@ module TS.SpaceTac.UI {
highlightTargets(ships: Ship[]): void {
this.ship_sprites.forEach(sprite => sprite.setTargetted(contains(ships, sprite.ship)));
}
/**
* Set the HUD mode (shows information on all ships)
*/
setHUDMode(active: boolean): void {
this.ship_sprites.forEach(sprite => sprite.setHovered(active));
if (this.battleview.background) {
this.battleview.animations.setVisible(this.battleview.background, !active, 200);
}
}
}
}

View file

@ -19,8 +19,10 @@ module TS.SpaceTac.UI {
// Target effect
target: Phaser.Image;
// Hover effect
hover: Phaser.Image;
// Hover information
info: Phaser.Group;
info_hull: ValueBar;
info_shield: ValueBar;
// Frame to indicate the owner of the ship, and if it is playing
frame: Phaser.Image;
@ -41,34 +43,41 @@ module TS.SpaceTac.UI {
this.sprite.rotation = ship.arena_angle;
this.sprite.anchor.set(0.5, 0.5);
this.sprite.scale.set(64 / this.sprite.width);
this.addChild(this.sprite);
this.add(this.sprite);
// Add stasis effect
this.stasis = new Phaser.Image(this.game, 0, 0, "battle-arena-stasis");
this.stasis.anchor.set(0.5, 0.5);
this.stasis.visible = false;
this.addChild(this.stasis);
this.add(this.stasis);
// Add target effect
this.target = new Phaser.Image(this.game, 0, 0, "battle-arena-target");
this.target.anchor.set(0.5, 0.5);
this.target.visible = false;
this.addChild(this.target);
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.anchor.set(0.5, 0.5);
this.addChild(this.frame);
this.add(this.frame);
// Add hover effect
this.hover = new Phaser.Image(this.game, 0, 0, "battle-arena-ship-hover", 0);
this.hover.anchor.set(0.5, 0.5);
this.hover.visible = false;
this.addChild(this.hover);
// Hover informations
this.info = new Phaser.Group(this.game);
this.info_hull = new ValueBar(this.game, -59, -47, "battle-arena-ship-hull-base", true);
this.info_hull.setBarImage("battle-arena-ship-hull-full", 3);
this.info_hull.setValue(this.ship.getValue("hull"), this.ship.getAttribute("hull_capacity"));
this.info.add(this.info_hull);
this.info_shield = new ValueBar(this.game, 40, -47, "battle-arena-ship-shield-base", true);
this.info_shield.setBarImage("battle-arena-ship-shield-full", 3);
this.info_shield.setValue(this.ship.getValue("shield"), this.ship.getAttribute("shield_capacity"));
this.info.add(this.info_shield);
this.info.visible = false;
this.add(this.info);
// Effects display
this.effects = new Phaser.Group(this.game);
this.addChild(this.effects);
this.add(this.effects);
// Handle input on ship sprite
UITools.setHoverClick(this.sprite,
@ -81,12 +90,13 @@ module TS.SpaceTac.UI {
this.position.set(ship.arena_x, ship.arena_y);
}
// Set the hovered state on this ship
// This will toggle the hover effect
/**
* Set the hovered state on this ship
*
* This will show the information HUD accordingly
*/
setHovered(hovered: boolean) {
if (!this.target.visible) {
this.battleview.animations.setVisible(this.hover, hovered, 200);
}
this.battleview.animations.setVisible(this.info, hovered, 200);
}
// Set the playing state on this ship
@ -101,9 +111,6 @@ module TS.SpaceTac.UI {
* This will toggle the visibility of target indicator
*/
setTargetted(targetted: boolean): void {
if (targetted) {
this.battleview.animations.setVisible(this.hover, false, 1);
}
this.target.visible = targetted;
}
@ -141,7 +148,7 @@ module TS.SpaceTac.UI {
let text = new Phaser.Text(this.game, 0, 20 * this.effects.children.length, message, { font: "14pt Arial", fill: beneficial ? "#afe9c6" : "#e9afaf" });
this.effects.addChild(text);
this.effects.position.set(-this.effects.width / 2, this.sprite.height * 0.8);
this.effects.position.set(-this.effects.width / 2, this.sprite.height * 0.7);
this.game.tweens.removeFrom(this.effects);
this.effects.alpha = 1;
@ -156,6 +163,12 @@ module TS.SpaceTac.UI {
let diff = event.diff;
let name = event.value.name;
this.displayEffect(`${name} ${diff < 0 ? "-" : "+"}${Math.abs(diff)}`, diff >= 0);
if (name == "hull") {
this.info_hull.setValue(event.value.get(), this.ship.getAttribute("hull_capacity"));
} else if (name == "shield") {
this.info_shield.setValue(event.value.get(), this.ship.getAttribute("shield_capacity"));
}
}
}
}

View file

@ -28,6 +28,7 @@ module TS.SpaceTac.UI {
this.info_button = new Phaser.Button(this.game, 0, 0, "battle-shiplist-info-button");
this.info_button.position.set(0, this.height - this.info_button.height);
UITools.setHoverClick(this.info_button, () => this.battleview.arena.setHUDMode(true), () => this.battleview.arena.setHUDMode(false), () => null);
this.addChild(this.info_button);
battleview.layer_borders.add(this);