1
0
Fork 0

Updated hull display

This commit is contained in:
Michaël Lemaire 2019-05-20 19:28:20 +02:00
parent 6e319cc1ed
commit fa73b5485d
21 changed files with 104 additions and 175 deletions

View File

@ -4,7 +4,6 @@ To-Do-list
Phaser 3 migration
------------------
* Fix valuebar requiring to be in root display list (use tile sprite?)
* Restore unit tests about boundaries (in UITools)
Menu/settings/saves

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 322 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 330 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 323 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 636 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 244 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 249 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 524 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -1829,11 +1829,11 @@
borderopacity="1"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="0.70710675"
inkscape:cx="1068.4128"
inkscape:cy="524.67703"
inkscape:zoom="1.4142135"
inkscape:cx="-209.45656"
inkscape:cy="332.52453"
inkscape:document-units="px"
inkscape:current-layer="layer10"
inkscape:current-layer="g8128"
showgrid="false"
units="px"
showguides="false"
@ -3606,12 +3606,12 @@
<image
sodipodi:absref="/home/michael/workspace/spacetac/graphics/ui/pics/portrait.png"
xlink:href="pics/portrait.png"
width="183.97668"
height="183.97649"
preserveAspectRatio="none"
id="image6587"
y="497.55182"
x="465.07187"
y="497.55182" />
id="image6587"
preserveAspectRatio="none"
height="183.97649"
width="183.97668" />
</g>
</g>
<g
@ -3735,13 +3735,13 @@
<image
sodipodi:absref="/home/michael/workspace/spacetac/graphics/ui/pics/action.png"
xlink:href="pics/action.png"
style="display:inline;enable-background:new"
width="83.066681"
height="83.066681"
preserveAspectRatio="none"
id="image5902"
y="312.3288"
x="-333.53336"
y="312.3288" />
id="image5902"
preserveAspectRatio="none"
height="83.066681"
width="83.066681"
style="display:inline;enable-background:new" />
<g
id="g10025-6"
style="display:inline;fill:none;enable-background:new"
@ -3866,53 +3866,55 @@
inkscape:export-ydpi="96" />
<g
id="g8128"
transform="translate(0,-1.2500001)">
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="rect7916"
d="m -397.56783,681.69989 h 54.71209 l 6.56579,12.9047 h -67.84367 z"
style="fill:#1b3b4b;fill-opacity:1;stroke:none;stroke-width:2.12756777;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:#3a6479;fill-opacity:1;stroke:none;stroke-width:0.86704844;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -399.0188,688.44322 h 57.61403 l 2.67576,5.25906 h -62.96555 z"
id="path7928"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path7930"
d="m -386.76525,683.72284 h 33.10693 l 2.45483,4.82482 h -38.01659 z"
style="fill:#3a6479;fill-opacity:1;stroke:none;stroke-width:0.79545772;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter8120)" />
transform="translate(0,-1.2500001)"
inkscape:export-filename="/home/michael/workspace/spacetac/data/stage2/image/battle/hud/hull-background.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<g
id="g3219"
inkscape:export-filename="/home/michael/workspace/spacetac/data/stage2/image/battle/hud/hull-background.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<path
style="fill:#1b3b4b;fill-opacity:1;stroke:none;stroke-width:2.12756777;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -397.56783,681.69989 h 54.71209 l 6.56579,12.9047 h -67.84367 z"
id="rect7916"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path7928"
d="m -399.0188,688.44322 h 57.61403 l 2.67576,5.25906 h -62.96555 z"
style="fill:#3a6479;fill-opacity:1;stroke:none;stroke-width:0.86704844;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:#3a6479;fill-opacity:1;stroke:none;stroke-width:0.79545772;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter8120)"
d="m -386.76525,683.72284 h 33.10693 l 2.45483,4.82482 h -38.01659 z"
id="path7930"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<path
style="fill:#dbeff9;fill-opacity:1;stroke:none;stroke-width:0.80862641;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -397.07777,687.82489 h 53.73197 l 2.49547,4.9047 h -58.72291 z"
id="path7922"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
sodipodi:nodetypes="ccccc"
inkscape:export-filename="/home/michael/workspace/spacetac/data/stage2/image/battle/hud/hull-bar.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
</g>
<g
id="g8284"
transform="translate(0,45.500003)">
<path
style="fill:#1b3b4b;fill-opacity:1;stroke:none;stroke-width:2.12756777;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -397.56783,681.69989 h 54.71209 l 6.56579,12.9047 h -67.84367 z"
id="path8276"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path8278"
d="m -399.0188,688.44322 h 57.61403 l 2.67576,5.25906 h -62.96555 z"
style="fill:#3a6479;fill-opacity:1;stroke:none;stroke-width:0.86704844;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
style="fill:#3a6479;fill-opacity:1;stroke:none;stroke-width:0.79545772;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter8120)"
d="m -386.76525,683.72284 h 33.10693 l 2.45483,4.82482 h -38.01659 z"
id="path8280"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<use
style="display:inline;enable-background:new"
x="0"
y="0"
xlink:href="#g3219"
id="use3221"
width="100%"
height="100%" />
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
@ -4042,18 +4044,21 @@
<image
sodipodi:absref="/home/michael/workspace/spacetac/graphics/ui/pics/sprite.png"
xlink:href="pics/sprite.png"
width="84.542961"
height="84.542961"
preserveAspectRatio="none"
id="image9266"
x="-410.59262"
y="236.27179"
transform="translate(0,-27.637839)"
style="enable-background:new;display:inline"
transform="translate(0,-27.637839)" />
y="236.27179"
x="-410.59262"
id="image9266"
preserveAspectRatio="none"
height="84.542961"
width="84.542961" />
<g
style="enable-background:new;display:inline"
id="g8766"
transform="translate(-1233.2311,345.12415)">
transform="translate(-1233.2311,345.12415)"
inkscape:export-filename="/home/michael/workspace/spacetac/data/stage2/image/battle/hud/ship-impacted.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<path
inkscape:transform-center-x="-2.8320677"
d="m 951.32827,450.99997 -9.02653,4.0214 -7.96588,5.78917 1.03064,-9.82791 -1.03064,-9.79323 7.99591,5.80651 z"
@ -4649,13 +4654,13 @@
<image
sodipodi:absref="/home/michael/workspace/spacetac/graphics/ui/pics/portrait.png"
xlink:href="pics/portrait.png"
width="76.394867"
height="76.394867"
preserveAspectRatio="none"
id="image5590"
x="816.54016"
style="display:inline;enable-background:new"
y="313.90408"
style="display:inline;enable-background:new" />
x="816.54016"
id="image5590"
preserveAspectRatio="none"
height="76.394867"
width="76.394867" />
</g>
<use
transform="translate(96.619495)"

Before

Width:  |  Height:  |  Size: 191 KiB

After

Width:  |  Height:  |  Size: 191 KiB

View File

@ -19,13 +19,9 @@ module TK.SpaceTac.UI {
// Stasis effect
stasis: UIImage
// HSP display
hsp: UIContainer
power_text: UIText
life_hull: UIContainer
life_shield: UIContainer
life_evasion: UIContainer
toggle_hsp: Toggle
// Hull display
hull: ValueBar
toggle_hull: Toggle
// Frames to indicate the owner, if the ship is selected, and if it is hovered
frame_owner: UIImage
@ -68,15 +64,11 @@ module TK.SpaceTac.UI {
this.stasis.setAlpha(0.9);
this.stasis.setVisible(!ship.alive);
// HSP display
this.hsp = builder.container("hsp", 0, 34);
builder.in(this.hsp).image("battle-hud-hsp-background", 0, 0, true);
this.power_text = builder.in(this.hsp).text(`${ship.getValue("power")}`, -42, 0,
{ size: 13, color: "#ffdd4b", bold: true, shadow: true, center: true });
this.life_hull = builder.in(this.hsp).container("hull");
this.life_shield = builder.in(this.hsp).container("shield");
this.life_evasion = builder.in(this.hsp).container("evasion");
this.toggle_hsp = this.battleview.animations.newVisibilityToggle(this.hsp, 200, false);
// Hull display
const hull_container = builder.container("hull");
builder.in(hull_container).image("battle-hud-hull-background", -34, 48);
this.hull = builder.in(hull_container).valuebar("battle-hud-hull-bar", -30, 53);
this.toggle_hull = this.battleview.animations.newVisibilityToggle(hull_container, 200, false);
// Effects display
this.active_effects_display = builder.container("active-effects", 0, -44);
@ -84,8 +76,6 @@ module TK.SpaceTac.UI {
this.effects_messages_toggle = this.battleview.animations.newVisibilityToggle(this.effects_messages, 500, false);
this.updateHull(this.ship.getValue("hull"));
this.updateShield(this.ship.getValue("shield"));
this.updateEvasion(this.ship.getAttribute("evasion"));
this.updateActiveEffects();
this.updateEffectsRadius();
@ -118,38 +108,24 @@ module TK.SpaceTac.UI {
} else if (diff instanceof ShipValueDiff) {
return {
background: async (speed: number) => {
if (speed) {
this.toggle_hsp.manipulate("value")(true);
}
if (diff.code == "hull") {
if (speed) {
this.updateHull(this.ship.getValue("hull") - diff.diff, diff.diff);
await timer.sleep(1000 / speed);
this.updateHull(this.ship.getValue("hull"));
await timer.sleep(500 / speed);
} else {
this.updateHull(this.ship.getValue("hull"));
}
} else if (diff.code == "shield") {
if (speed) {
this.updateShield(this.ship.getValue("shield") - diff.diff, diff.diff);
await timer.sleep(1000 / speed);
this.updateShield(this.ship.getValue("shield"));
await timer.sleep(500 / speed);
} else {
this.updateShield(this.ship.getValue("shield"));
}
} else if (diff.code == "power") {
this.power_text.setText(`${this.ship.getValue("power")}`);
if (speed) {
await this.battleview.animations.blink(this.power_text, { speed: speed });
}
}
this.toggle_hull.manipulate("value")(true);
if (speed) {
await timer.sleep(500 / speed);
this.toggle_hsp.manipulate("value")(false);
await timer.sleep(500 / speed);
for (let i = 0; i < 3; i++) {
this.updateHull(this.ship.getValue("hull") - diff.diff, diff.diff);
await timer.sleep(100 / speed);
this.updateHull(this.ship.getValue("hull"));
await timer.sleep(100 / speed);
}
await timer.sleep(500 / speed);
this.toggle_hull.manipulate("value")(false);
} else {
this.updateHull(this.ship.getValue("hull"));
}
}
}
}
@ -158,11 +134,6 @@ module TK.SpaceTac.UI {
background: async (speed: number) => {
if (speed) {
this.displayAttributeChanged(diff, speed);
if (diff.code == "evasion") {
// TODO diff
this.updateEvasion(this.ship.getAttribute("evasion"));
this.toggle_hsp.manipulate("attribute")(2000 / speed);
}
await timer.sleep(2000 / speed);
}
}
@ -249,7 +220,7 @@ module TK.SpaceTac.UI {
*/
setHovered(hovered: boolean, tactical: boolean) {
let client = tactical ? "tactical" : "hover";
this.toggle_hsp.manipulate(client)(hovered && this.ship.alive);
this.toggle_hull.manipulate(client)(hovered && this.ship.alive);
this.battleview.animations.setVisible(this.frame_hover, hovered && this.ship.alive && !tactical, 200);
}
@ -315,13 +286,13 @@ module TK.SpaceTac.UI {
let builder = new UIBuilder(this.arena.view, this.effects_messages);
builder.text(message, 0, 20 * this.effects_messages.length, {
color: beneficial ? "#afe9c6" : "#e9afaf"
color: beneficial ? "#D9F9F1" : "#FFD09A"
});
let arena = this.battleview.arena.getBoundaries();
this.effects_messages.setPosition(
(this.ship.arena_x < 100) ? 0 : ((this.ship.arena_x > arena.width - 100) ? (-this.effects_messages.width) : (-this.effects_messages.width * 0.5)),
(this.ship.arena_y < arena.height * 0.9) ? 60 : (-60 - this.effects_messages.height)
(this.ship.arena_y < arena.height * 0.9) ? 76 : (-66 - this.effects_messages.height)
);
this.effects_messages_toggle.manipulate("added")(1400 / speed);
@ -340,55 +311,11 @@ module TK.SpaceTac.UI {
}
}
/**
* Reposition the HSP indicators
*/
repositionLifeIndicators(): void {
this.life_hull.x = -25;
this.life_shield.x = this.life_hull.x + (this.life_hull.length * 9);
this.life_evasion.x = this.life_shield.x + (this.life_shield.length * 9);
}
/**
* Update the hull indicator
*/
updateHull(current: number, diff = 0): void {
let builder = new UIBuilder(this.battleview, this.life_hull);
builder.clear();
range(current).forEach(i => {
builder.image("battle-hud-hsp-hull", i * 9, 0, true);
});
this.repositionLifeIndicators();
}
/**
* Update the shield indicator
*/
updateShield(current: number, diff = 0): void {
let builder = new UIBuilder(this.battleview, this.life_shield);
builder.clear();
range(current).forEach(i => {
builder.image("battle-hud-hsp-shield", i * 9, 0, true);
});
this.repositionLifeIndicators();
}
/**
* Update the evasion indicator
*/
updateEvasion(current: number, diff = 0): void {
let builder = new UIBuilder(this.battleview, this.life_evasion);
builder.clear();
range(current).forEach(i => {
builder.image("battle-hud-hsp-evasion", i * 9, 0, true);
});
this.repositionLifeIndicators();
this.hull.setValue(current, this.ship.getAttribute("hull_capacity"));
}
/**

View File

@ -27,7 +27,9 @@ module TK.SpaceTac.UI {
let sprite = this.battleview.arena.findShipSprite(ship);
if (sprite) {
this.container.show(UITools.getBounds(sprite.frame_owner));
const rect = UITools.getBounds(sprite.frame_selected);
rect.height += 10;
this.container.show(rect);
}
}

View File

@ -36,7 +36,6 @@ module TK.SpaceTac.UI {
private original_width: number
private original_height: number
private crop_rect: Phaser.Geom.Rectangle
private crop_mask: Phaser.GameObjects.Graphics
constructor(view: BaseView, name: string, orientation: ValueBarOrientation, x = 0, y = 0) {
this.node = view.newImage(name, x, y);
@ -53,9 +52,7 @@ module TK.SpaceTac.UI {
this.original_height = this.node.height;
this.crop_rect = new Phaser.Geom.Rectangle(0, 0, this.original_width, this.original_height);
this.crop_mask = view.make.graphics({ x: x, y: y, add: false });
this.crop_mask.fillStyle(0xffffff);
this.node.setMask(new Phaser.Display.Masks.GeometryMask(view, this.crop_mask));
this.node.setCrop(this.crop_rect);
this.setValue(0, 1000);
}
@ -82,8 +79,7 @@ module TK.SpaceTac.UI {
break;
}
this.crop_mask.clear();
this.crop_mask.fillRectShape(this.crop_rect);
this.node.setCrop(this.crop_rect);
}
/**