Updated hull display
1
TODO.md
|
@ -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
|
||||
|
|
Before Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 322 B |
Before Width: | Height: | Size: 330 B |
Before Width: | Height: | Size: 323 B |
After Width: | Height: | Size: 636 B |
After Width: | Height: | Size: 231 B |
Before Width: | Height: | Size: 244 B |
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 249 B |
Before Width: | Height: | Size: 4.5 KiB |
Before Width: | Height: | Size: 6.2 KiB |
Before Width: | Height: | Size: 524 B |
Before Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.3 KiB |
|
@ -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 |
|
@ -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"));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|