Work on new battle HUD continued
This commit is contained in:
parent
545478b208
commit
9016af3fff
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
|
|
@ -9,6 +9,8 @@
|
|||
"**/.hg": true,
|
||||
"**/CVS": true,
|
||||
"**/.DS_Store": true,
|
||||
"node_modules": true
|
||||
"node_modules": true,
|
||||
".env": true,
|
||||
"out": true
|
||||
}
|
||||
}
|
||||
BIN
graphics/exported/battle/hud/ship-hsp.png
Normal file
BIN
graphics/exported/battle/hud/ship-hsp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
BIN
graphics/exported/battle/hud/ship-hull.png
Normal file
BIN
graphics/exported/battle/hud/ship-hull.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 161 B |
Binary file not shown.
|
Before Width: | Height: | Size: 350 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
BIN
graphics/exported/battle/hud/ship-shield.png
Normal file
BIN
graphics/exported/battle/hud/ship-shield.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 B |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 14 KiB |
|
|
@ -1750,11 +1750,11 @@
|
|||
borderopacity="1"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="4.0000001"
|
||||
inkscape:cx="258.91963"
|
||||
inkscape:cy="1160.3512"
|
||||
inkscape:zoom="4.0000002"
|
||||
inkscape:cx="1176.8952"
|
||||
inkscape:cy="497.32479"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="g5353"
|
||||
inkscape:current-layer="layer17"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
showguides="false"
|
||||
|
|
@ -2321,26 +2321,63 @@
|
|||
<g
|
||||
id="g10129"
|
||||
transform="translate(-0.11994512,63.748889)">
|
||||
<rect
|
||||
style="fill:url(#linearGradient10355);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.0351876px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter10397)"
|
||||
id="rect10347"
|
||||
width="91.712814"
|
||||
height="14.83267"
|
||||
x="1153.8358"
|
||||
y="629.98633" />
|
||||
<path
|
||||
sodipodi:nodetypes="ccccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="rect10078"
|
||||
d="m 1187.7736,630.35042 h 23.8371 l -4.8475,16.98714 h -14.1421 z"
|
||||
style="fill:#1d5664;fill-opacity:1;fill-rule:evenodd;stroke:#287583;stroke-width:1.875;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
<g
|
||||
id="g5251"
|
||||
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-hsp.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96">
|
||||
<rect
|
||||
y="629.98633"
|
||||
x="1153.8358"
|
||||
height="14.83267"
|
||||
width="91.712814"
|
||||
id="rect10347"
|
||||
style="fill:url(#linearGradient10355);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.0351876px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter10397)" />
|
||||
<path
|
||||
style="fill:#1d5664;fill-opacity:1;fill-rule:evenodd;stroke:#287583;stroke-width:1.875;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 1187.7736,630.35042 h 23.8371 l -4.8475,16.98714 h -14.1421 z"
|
||||
id="rect10078"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
<g
|
||||
transform="translate(0.7326577,0.9375)"
|
||||
id="g10345">
|
||||
<g
|
||||
id="g10307">
|
||||
<path
|
||||
sodipodi:nodetypes="ccccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path10085"
|
||||
d="m 1152.4031,643.36008 h 44.9006 v 3.97748 h -44.3116 z"
|
||||
style="fill:#287583;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.85732162px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
|
||||
<path
|
||||
d="m 1153.5078,644.3125 0.3067,2.07227 h 42.5351 v -2.07227 z"
|
||||
id="path10297"
|
||||
style="fill:#263538;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.85732162px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
inkscape:original="M 1152.4023 643.35938 L 1152.9922 647.33789 L 1197.3027 647.33789 L 1197.3027 643.35938 L 1152.4023 643.35938 z "
|
||||
inkscape:radius="-0.95294189"
|
||||
sodipodi:type="inkscape:offset" />
|
||||
</g>
|
||||
<use
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#g10307"
|
||||
id="use10313"
|
||||
width="100%"
|
||||
height="100%"
|
||||
transform="matrix(-1,0,0,1,2397.919,0)"
|
||||
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-shield-empty.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
</g>
|
||||
</g>
|
||||
<text
|
||||
id="text10091"
|
||||
y="642.75806"
|
||||
x="1153.788"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:23.4375px;font-family:DAGGERSQUARE;-inkscape-font-specification:DAGGERSQUARE;letter-spacing:0px;word-spacing:0px;fill:#eb4e4a;fill-opacity:1;stroke:none;stroke-width:0.9375px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter10663)"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:15px;fill:#eb4e4a;fill-opacity:1;stroke-width:0.9375px"
|
||||
style="font-size:14.66666698px;fill:#eb4e4a;fill-opacity:1;stroke-width:0.9375px"
|
||||
y="642.75806"
|
||||
x="1153.788"
|
||||
id="tspan10089"
|
||||
|
|
@ -2355,71 +2392,40 @@
|
|||
id="tspan10093"
|
||||
x="1223.2982"
|
||||
y="642.75806"
|
||||
style="font-size:15px;fill:#2ad8dc;fill-opacity:1;stroke-width:0.9375px">145</tspan></text>
|
||||
style="font-size:14.66666698px;fill:#2ad8dc;fill-opacity:1;stroke-width:0.9375px">145</tspan></text>
|
||||
<text
|
||||
id="text10099"
|
||||
y="641.53931"
|
||||
x="1196.4734"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:23.4375px;font-family:DAGGERSQUARE;-inkscape-font-specification:DAGGERSQUARE;letter-spacing:0px;word-spacing:0px;fill:#ffdd4b;fill-opacity:1;stroke:none;stroke-width:0.9375px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter10663)"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:12.5px;fill:#ffdd4b;fill-opacity:1;stroke-width:0.9375px"
|
||||
style="font-size:13.33333302px;fill:#ffdd4b;fill-opacity:1;stroke-width:0.9375px"
|
||||
y="641.53931"
|
||||
x="1196.4734"
|
||||
id="tspan10097"
|
||||
sodipodi:role="line">4</tspan></text>
|
||||
<g
|
||||
id="g10335"
|
||||
transform="translate(0.7326577,0.9375)">
|
||||
<g
|
||||
id="g10345">
|
||||
<g
|
||||
id="g10321">
|
||||
<g
|
||||
id="g10307">
|
||||
<path
|
||||
style="fill:#287583;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.85732162px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="m 1152.4031,643.36008 h 44.9006 v 3.97748 h -44.3116 z"
|
||||
id="path10085"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
<path
|
||||
sodipodi:type="inkscape:offset"
|
||||
inkscape:radius="-0.95294189"
|
||||
inkscape:original="M 1152.4023 643.35938 L 1152.9922 647.33789 L 1197.3027 647.33789 L 1197.3027 643.35938 L 1152.4023 643.35938 z "
|
||||
style="fill:#263538;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.85732162px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
id="path10297"
|
||||
d="m 1153.5078,644.3125 0.3067,2.07227 h 42.5351 v -2.07227 z" />
|
||||
</g>
|
||||
<path
|
||||
sodipodi:type="inkscape:offset"
|
||||
inkscape:radius="-0.95294189"
|
||||
inkscape:original="M 1152.4023 643.35938 L 1152.9922 647.33789 L 1197.3027 647.33789 L 1197.3027 643.35938 L 1152.4023 643.35938 z "
|
||||
style="fill:#eb4e4a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.85732162px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
id="path10303"
|
||||
d="m 1153.5078,644.3125 0.3067,2.07227 h 42.5351 v -2.07227 z" />
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-8.0378154)"
|
||||
id="g10325">
|
||||
<use
|
||||
transform="matrix(-1,0,0,1,2405.9568,0)"
|
||||
height="100%"
|
||||
width="100%"
|
||||
id="use10313"
|
||||
xlink:href="#g10307"
|
||||
y="0"
|
||||
x="0" />
|
||||
<path
|
||||
transform="matrix(-1,0,0,1,2405.9568,0)"
|
||||
d="m 1153.5078,644.3125 0.3067,2.07227 h 42.5351 v -2.07227 z"
|
||||
id="path10315"
|
||||
style="fill:#2ad8dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.85732162px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
inkscape:original="M 1152.4023 643.35938 L 1152.9922 647.33789 L 1197.3027 647.33789 L 1197.3027 643.35938 L 1152.4023 643.35938 z "
|
||||
inkscape:radius="-0.95294189"
|
||||
sodipodi:type="inkscape:offset" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
transform="translate(0.73264512,0.937501)"
|
||||
d="m 1153.5078,644.3125 0.3067,2.07227 h 42.5351 v -2.07227 z"
|
||||
id="path10303"
|
||||
style="display:inline;fill:#eb4e4a;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.85732162px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new"
|
||||
inkscape:original="M 1152.4023 643.35938 L 1152.9922 647.33789 L 1197.3027 647.33789 L 1197.3027 643.35938 L 1152.4023 643.35938 z "
|
||||
inkscape:radius="-0.95294189"
|
||||
sodipodi:type="inkscape:offset"
|
||||
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-hull.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
<path
|
||||
sodipodi:type="inkscape:offset"
|
||||
inkscape:radius="-0.95294189"
|
||||
inkscape:original="M 1152.4023 643.35938 L 1152.9922 647.33789 L 1197.3027 647.33789 L 1197.3027 643.35938 L 1152.4023 643.35938 z "
|
||||
style="display:inline;fill:#2ad8dc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.85732162px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new"
|
||||
id="path10315"
|
||||
d="m 1153.5078,644.3125 0.3067,2.07227 h 42.5351 v -2.07227 z"
|
||||
transform="matrix(-1,0,0,1,2398.6516,0.937501)"
|
||||
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-shield-full.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" />
|
||||
</g>
|
||||
<g
|
||||
transform="translate(230.1314,-149.11519)"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 189 KiB After Width: | Height: | Size: 190 KiB |
|
|
@ -18,12 +18,13 @@ module TS.SpaceTac.UI {
|
|||
stasis: Phaser.Image
|
||||
|
||||
// HSP display
|
||||
hull: ValueBar
|
||||
toggle_hull: Toggle
|
||||
shield: ValueBar
|
||||
toggle_shield: Toggle
|
||||
power: Phaser.Group
|
||||
toggle_power: Toggle
|
||||
hsp: Phaser.Image
|
||||
hull_bar: ValueBar
|
||||
hull_text: Phaser.Text
|
||||
shield_bar: ValueBar
|
||||
shield_text: Phaser.Text
|
||||
power_text: Phaser.Text
|
||||
toggle_hsp: Toggle
|
||||
|
||||
// Play order
|
||||
play_order: Phaser.Text
|
||||
|
|
@ -72,20 +73,33 @@ module TS.SpaceTac.UI {
|
|||
this.add(this.stasis);
|
||||
|
||||
// HSP display
|
||||
this.hull = ValueBar.newStyled(this.battleview, "battle-hud-ship-hull", -59, -47, true);
|
||||
this.hull.setValue(this.ship.getValue("hull"), this.ship.getAttribute("hull_capacity"));
|
||||
this.toggle_hull = this.battleview.animations.newVisibilityToggle(this.hull, 200, false);
|
||||
this.add(this.hull);
|
||||
this.shield = ValueBar.newStyled(this.battleview, "battle-hud-ship-shield", 40, -47, true);
|
||||
this.shield.setValue(this.ship.getValue("shield"), this.ship.getAttribute("shield_capacity"));
|
||||
this.toggle_shield = this.battleview.animations.newVisibilityToggle(this.shield, 200, false);
|
||||
this.add(this.shield);
|
||||
this.power = new Phaser.Group(this.game);
|
||||
this.toggle_power = this.battleview.animations.newVisibilityToggle(this.power, 200, false);
|
||||
this.add(this.power);
|
||||
this.hsp = this.battleview.newImage("battle-hud-ship-hsp", -48, 28);
|
||||
this.add(this.hsp);
|
||||
this.hull_bar = new ValueBar(this.battleview, "battle-hud-ship-hull", ValueBarOrientation.WEST, 45, 17);
|
||||
this.hull_bar.setValue(this.ship.getValue("hull"), this.ship.getAttribute("hull_capacity"));
|
||||
this.hsp.addChild(this.hull_bar.node);
|
||||
this.shield_bar = new ValueBar(this.battleview, "battle-hud-ship-shield", ValueBarOrientation.EAST, 50, 17);
|
||||
this.shield_bar.setValue(this.ship.getValue("shield"), this.ship.getAttribute("shield_capacity"));
|
||||
this.hsp.addChild(this.shield_bar.node);
|
||||
this.hull_text = new Phaser.Text(this.game, 3, 23, `${this.ship.getValue("hull")}`,
|
||||
{ align: "left", font: "10pt SpaceTac", fill: "#eb4e4a" });
|
||||
this.hull_text.setShadow(1, 1, "#000000");
|
||||
this.hull_text.anchor.set(0, 1);
|
||||
this.hsp.addChild(this.hull_text);
|
||||
this.shield_text = new Phaser.Text(this.game, 92, 23, `${this.ship.getValue("shield")}`,
|
||||
{ align: "right", font: "11pt SpaceTac", fill: "#2ad8dc" });
|
||||
this.shield_text.setShadow(1, 1, "#000000");
|
||||
this.shield_text.anchor.set(1, 1);
|
||||
this.hsp.addChild(this.shield_text);
|
||||
this.power_text = new Phaser.Text(this.game, 48, 11, `${this.ship.getValue("power")}`,
|
||||
{ align: "center", font: "11pt SpaceTac", fill: "#ffdd4b" });
|
||||
this.power_text.setShadow(1, 1, "#000000");
|
||||
this.power_text.anchor.set(0.5, 0.5);
|
||||
this.hsp.addChild(this.power_text);
|
||||
this.toggle_hsp = this.battleview.animations.newVisibilityToggle(this.hsp, 200, false);
|
||||
|
||||
// Play order display
|
||||
this.play_order = new Phaser.Text(this.game, 55, -47, "", { font: "bold 14pt SpaceTac", fill: "#aaaaaa" });
|
||||
this.play_order = new Phaser.Text(this.game, 44, -42, "", { font: "bold 14pt SpaceTac", fill: "#aaaaaa" });
|
||||
this.toggle_play_order = this.battleview.animations.newVisibilityToggle(this.play_order, 200, false);
|
||||
this.add(this.play_order);
|
||||
|
||||
|
|
@ -98,7 +112,6 @@ module TS.SpaceTac.UI {
|
|||
this.add(this.effects_messages);
|
||||
|
||||
this.updateActiveEffects();
|
||||
this.updatePowerIndicator(ship.getValue("power"));
|
||||
this.updateEffectsRadius();
|
||||
|
||||
// Handle input on ship sprite
|
||||
|
|
@ -145,19 +158,21 @@ module TS.SpaceTac.UI {
|
|||
return 0;
|
||||
} else if (event instanceof ValueChangeEvent) {
|
||||
if (event.value.name == "hull") {
|
||||
this.toggle_hull.start(1500, true);
|
||||
this.hull.setValue(event.value.get(), event.value.getMaximal() || 0);
|
||||
this.toggle_hsp.start(1500, true);
|
||||
this.hull_bar.setValue(event.value.get(), event.value.getMaximal() || 0);
|
||||
this.hull_text.text = `${event.value.get()}`;
|
||||
return 0;
|
||||
} else if (event.value.name == "shield") {
|
||||
this.toggle_shield.start(1500, true);
|
||||
this.shield.setValue(event.value.get(), event.value.getMaximal() || 0);
|
||||
this.toggle_hsp.start(1500, true);
|
||||
this.shield_bar.setValue(event.value.get(), event.value.getMaximal() || 0);
|
||||
this.shield_text.text = `${event.value.get()}`;
|
||||
if (event.value.get() == 0) {
|
||||
this.displayEffect("Shield failure", false);
|
||||
}
|
||||
return 0;
|
||||
} else if (event.value.name == "power") {
|
||||
this.toggle_power.start(1500, true);
|
||||
this.updatePowerIndicator(event.value.get());
|
||||
this.toggle_hsp.start(1500, true);
|
||||
this.power_text.text = `${event.value.get()}`;
|
||||
return 0;
|
||||
} else {
|
||||
this.displayValueChanged(event);
|
||||
|
|
@ -193,16 +208,12 @@ module TS.SpaceTac.UI {
|
|||
*/
|
||||
setHovered(hovered: boolean, tactical: boolean) {
|
||||
if (hovered && this.ship.alive) {
|
||||
this.toggle_hull.start();
|
||||
this.toggle_shield.start();
|
||||
this.toggle_power.start();
|
||||
this.toggle_hsp.start();
|
||||
if (tactical) {
|
||||
this.toggle_play_order.start();
|
||||
}
|
||||
} else {
|
||||
this.toggle_hull.stop();
|
||||
this.toggle_shield.stop();
|
||||
this.toggle_power.stop();
|
||||
this.toggle_hsp.stop();
|
||||
this.toggle_play_order.stop();
|
||||
}
|
||||
}
|
||||
|
|
@ -213,7 +224,11 @@ module TS.SpaceTac.UI {
|
|||
* This will alter the HUD frame to show this state
|
||||
*/
|
||||
setPlaying(playing: boolean) {
|
||||
this.frame.alpha = playing ? 1 : 0.35;
|
||||
if (this.ship.alive) {
|
||||
this.frame.alpha = playing ? 1 : 0.35;
|
||||
} else {
|
||||
this.frame.alpha = 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -223,7 +238,7 @@ module TS.SpaceTac.UI {
|
|||
if (dead) {
|
||||
this.displayEffect("stasis", false);
|
||||
}
|
||||
this.frame.alpha = dead ? 0 : 1;
|
||||
this.setPlaying(false);
|
||||
this.battleview.animations.setVisible(this.stasis, dead, 400);
|
||||
}
|
||||
|
||||
|
|
@ -240,9 +255,9 @@ module TS.SpaceTac.UI {
|
|||
getValue(value: keyof ShipValues): number {
|
||||
switch (value) {
|
||||
case "hull":
|
||||
return this.hull.getValue();
|
||||
return this.hull_bar.getValue();
|
||||
case "shield":
|
||||
return this.shield.getValue();
|
||||
return this.shield_bar.getValue();
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
|
|
@ -315,21 +330,6 @@ module TS.SpaceTac.UI {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the power indicator
|
||||
*/
|
||||
updatePowerIndicator(power: number) {
|
||||
this.power.removeAll();
|
||||
|
||||
if (power) {
|
||||
let positions = UITools.evenlySpace(70, 10, power);
|
||||
range(power).forEach(index => {
|
||||
let dot = this.battleview.newImage("battle-hud-ship-power", positions[index] - 40, 40);
|
||||
this.power.add(dot);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the activated effects radius
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -33,9 +33,9 @@ module TS.SpaceTac.UI {
|
|||
let turns = this.battleview.battle.getTurnsBefore(ship);
|
||||
filler.addText(140, 36, (turns == 0) ? "Playing" : ((turns == 1) ? "Plays next" : `Plays in ${turns} turns`), "#cccccc", 18);
|
||||
|
||||
filler.addText(140, 72, `Hull\n${ship.getValue("hull")}`, "#eb4e4a", 20, true, true);
|
||||
filler.addText(228, 72, `Shield\n${ship.getValue("shield")}`, "#2ad8dc", 20, true, true);
|
||||
filler.addText(328, 72, `Power\n${ship.getValue("power")}`, "#ffdd4b", 20, true, true);
|
||||
filler.addText(140, 72, `Hull\n${ship.getValue("hull")}/${ship.getAttribute("hull_capacity")}`, "#eb4e4a", 20, true, true);
|
||||
filler.addText(288, 72, `Shield\n${ship.getValue("shield")}/${ship.getAttribute("shield_capacity")}`, "#2ad8dc", 20, true, true);
|
||||
filler.addText(408, 72, `Power\n${ship.getValue("power")}/${ship.getAttribute("power_capacity")}`, "#ffdd4b", 20, true, true);
|
||||
|
||||
let iy = 148;
|
||||
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ module TS.SpaceTac.UI.Specs {
|
|||
let sprite = nn(battleview.arena.findShipSprite(ship));
|
||||
ship.setArenaPosition(50, 30);
|
||||
sprite.position.set(50, 30);
|
||||
sprite.hull.setValue(10, 10);
|
||||
sprite.shield.setValue(0, 10);
|
||||
sprite.hull_bar.setValue(10, 10);
|
||||
sprite.shield_bar.setValue(0, 10);
|
||||
let effect = new WeaponEffect(battleview.arena, new Ship(), Target.newFromShip(ship), new Equipment());
|
||||
|
||||
let mock_shield_impact = spyOn(effect, "shieldImpactEffect").and.stub();
|
||||
|
|
@ -54,7 +54,7 @@ module TS.SpaceTac.UI.Specs {
|
|||
expect(mock_hull_impact).toHaveBeenCalledTimes(1);
|
||||
expect(mock_hull_impact).toHaveBeenCalledWith(jasmine.objectContaining({ x: 0, y: 0 }), jasmine.objectContaining({ x: 50, y: 30 }), 100, 800);
|
||||
|
||||
sprite.shield.setValue(10, 10);
|
||||
sprite.shield_bar.setValue(10, 10);
|
||||
effect.gunEffect();
|
||||
expect(mock_shield_impact).toHaveBeenCalledTimes(1);
|
||||
expect(mock_shield_impact).toHaveBeenCalledWith(jasmine.objectContaining({ x: 0, y: 0 }), jasmine.objectContaining({ x: 50, y: 30 }), 100, 800, true);
|
||||
|
|
|
|||
|
|
@ -90,9 +90,8 @@ module TS.SpaceTac.UI {
|
|||
this.ship_level.anchor.set(0.5, 0.5);
|
||||
this.addChild(this.ship_level);
|
||||
|
||||
this.ship_experience = new ValueBar(this.game, 516, 1067, "common-transparent");
|
||||
this.ship_experience.setBarImage("character-experience");
|
||||
this.addChild(this.ship_experience);
|
||||
this.ship_experience = new ValueBar(this.view, "character-experience", ValueBarOrientation.EAST, 516, 1067);
|
||||
this.addChild(this.ship_experience.node);
|
||||
|
||||
this.ship_upgrade_points = new Phaser.Text(this.game, 1066, 1054, "", { align: "center", font: "30pt SpaceTac", fill: "#FFFFFF" });
|
||||
this.ship_upgrade_points.anchor.set(0.5, 0.5);
|
||||
|
|
|
|||
|
|
@ -3,20 +3,16 @@ module TS.SpaceTac.UI.Specs {
|
|||
let testgame = setupEmptyView();
|
||||
|
||||
it("computes proportional value", function () {
|
||||
var bar = ValueBar.newStyled(testgame.baseview, "default", 0, 0);
|
||||
|
||||
var bar = new ValueBar(testgame.baseview, "default", ValueBarOrientation.EAST);
|
||||
expect(bar.getProportionalValue()).toBe(0);
|
||||
|
||||
bar.setValue(20, 100);
|
||||
|
||||
expect(bar.getProportionalValue()).toBeCloseTo(0.2, 0.000001);
|
||||
|
||||
bar.setValue(40);
|
||||
|
||||
expect(bar.getProportionalValue()).toBeCloseTo(0.4, 0.000001);
|
||||
|
||||
bar.setValue(0, 0);
|
||||
|
||||
expect(bar.getProportionalValue()).toBe(0);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,69 +1,82 @@
|
|||
module TS.SpaceTac.UI {
|
||||
// Bar to display a value (like a progress bar)
|
||||
export class ValueBar extends Phaser.Image {
|
||||
// Vertical orientation
|
||||
vertical: boolean;
|
||||
/**
|
||||
* Orientation of a ValueBar.
|
||||
*
|
||||
* A EAST bar will have 0 at the west, and 1 at the east.
|
||||
*/
|
||||
export enum ValueBarOrientation {
|
||||
NORTH,
|
||||
SOUTH,
|
||||
EAST,
|
||||
WEST,
|
||||
}
|
||||
|
||||
/**
|
||||
* Bar to display a value with a graphical bar
|
||||
*
|
||||
* This will crop the image according to the value
|
||||
*/
|
||||
export class ValueBar {
|
||||
// Phaser node
|
||||
node: Phaser.Image
|
||||
|
||||
// Orientation
|
||||
private orientation: ValueBarOrientation
|
||||
|
||||
// Current value
|
||||
private current: number;
|
||||
private current: number
|
||||
|
||||
// Maximal value
|
||||
private maximal: number;
|
||||
private maximal: number
|
||||
|
||||
// Proportional value
|
||||
private proportional: number;
|
||||
private proportional: number
|
||||
|
||||
// Sprite of internal bar (inside the background sprite)
|
||||
private bar_sprite: Phaser.Image;
|
||||
private bar_sprite_rect: Phaser.Rectangle;
|
||||
private bar_sprite_offset: number;
|
||||
// Original size
|
||||
private original_width: number
|
||||
private original_height: number
|
||||
private crop_rect: Phaser.Rectangle
|
||||
|
||||
// Create a quick styled bar
|
||||
static newStyled(view: BaseView, base_name: string, x: number, y: number, vertical = false): ValueBar {
|
||||
let info = view.getImageInfo(base_name + "-empty");
|
||||
let result = new ValueBar(view.game, x, y, info.key, vertical, info.frame);
|
||||
constructor(view: BaseView, name: string, orientation: ValueBarOrientation, x = 0, y = 0) {
|
||||
this.node = view.newImage(name, x, y);
|
||||
this.orientation = orientation;
|
||||
this.original_width = this.node.width;
|
||||
this.original_height = this.node.height;
|
||||
|
||||
info = view.getImageInfo(base_name + "-full");
|
||||
result.setBarImage(info.key, 0, 0, info.frame);
|
||||
this.crop_rect = new Phaser.Rectangle(0, 0, this.original_width, this.original_height);
|
||||
this.node.crop(this.crop_rect);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
// Build an value bar sprite
|
||||
// background is the key to the image to use as background
|
||||
constructor(game: Phaser.Game, x: number, y: number, background: string, vertical = false, frame = 0) {
|
||||
super(game, x, y, background, frame);
|
||||
|
||||
this.vertical = vertical;
|
||||
if (orientation == ValueBarOrientation.WEST) {
|
||||
this.node.anchor.set(1, 0);
|
||||
} else if (orientation == ValueBarOrientation.NORTH) {
|
||||
this.node.anchor.set(0, 1);
|
||||
}
|
||||
|
||||
this.setValue(0, 1000);
|
||||
}
|
||||
|
||||
// Set an image to use for the bar
|
||||
setBarImage(key: string, offset_x = 0, offset_y = 0, frame = 0): void {
|
||||
this.bar_sprite = new Phaser.Image(this.game, offset_x, offset_y, key, frame);
|
||||
this.bar_sprite_rect = new Phaser.Rectangle(0, 0, this.bar_sprite.width, this.bar_sprite.height);
|
||||
this.bar_sprite_offset = this.vertical ? offset_y : offset_x;
|
||||
this.addChild(this.bar_sprite);
|
||||
}
|
||||
|
||||
// Update graphics representation
|
||||
/**
|
||||
* Update the phaser graphics to match the value
|
||||
*/
|
||||
update() {
|
||||
if (this.bar_sprite) {
|
||||
var xdest = this.vertical ? 1.0 : this.proportional;
|
||||
var ydest = this.vertical ? this.proportional : 1.0;
|
||||
|
||||
// TODO Animate
|
||||
var rect = Phaser.Rectangle.clone(this.bar_sprite_rect);
|
||||
rect = rect.scale(xdest, ydest);
|
||||
if (this.vertical) {
|
||||
rect = rect.offset(0, this.bar_sprite_rect.height - rect.height);
|
||||
}
|
||||
this.bar_sprite.crop(rect, false);
|
||||
if (this.vertical) {
|
||||
this.bar_sprite.y = this.bar_sprite_offset + (this.bar_sprite_rect.height - rect.height);
|
||||
}
|
||||
// TODO animation
|
||||
switch (this.orientation) {
|
||||
case ValueBarOrientation.EAST:
|
||||
this.crop_rect.width = Math.round(this.original_width * this.proportional);
|
||||
break;
|
||||
case ValueBarOrientation.WEST:
|
||||
this.crop_rect.width = Math.round(this.original_width * this.proportional);
|
||||
this.crop_rect.x = this.original_width - this.crop_rect.width;
|
||||
break;
|
||||
case ValueBarOrientation.NORTH:
|
||||
this.crop_rect.height = Math.round(this.original_height * this.proportional);
|
||||
this.crop_rect.y = this.original_height - this.crop_rect.height;
|
||||
break;
|
||||
case ValueBarOrientation.SOUTH:
|
||||
this.crop_rect.height = Math.round(this.original_height * this.proportional);
|
||||
break;
|
||||
}
|
||||
this.node.updateCrop();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in a new issue