games/spacetac
games/spacetac
1
0
Fork 0
Code Releases Activity

Improved arena ship HUD

Browse source
This commit is contained in:
Michaël Lemaire 2017-09-11 00:29:14 +02:00
parent d9cad0d786
commit 919370fa5f
7 changed files with 172 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
graphics/exported/battle/hud/ship-hsp.png
View file

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
graphics/exported/battle/hud/ship-hull.png
View file

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 161 B

After

Width:  |  Height:  |  Size: 176 B

BIN
graphics/exported/battle/hud/ship-impacted.png
View file

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
graphics/exported/battle/hud/ship-play-order.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 853 B

BIN
graphics/exported/battle/hud/ship-shield.png
View file

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 155 B

After

Width:  |  Height:  |  Size: 170 B

246
graphics/ui/battle.svg
View file

@ -31,6 +31,10 @@
style="stop-color:#224449;stop-opacity:1"
offset="0"
id="stop10349" />
<stop
id="stop6396"
offset="0.55678278"
style="stop-color:#234d54;stop-opacity:0.79607843;" />
<stop
style="stop-color:#287583;stop-opacity:0"
offset="1"
@ -1742,6 +1746,19 @@
fx="227.86516"
fy="-58.265144"
r="27.400387" />
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter6547"
x="-0.054623136"
width="1.1092463"
y="-0.069577426"
height="1.1391549">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="2.1979837"
id="feGaussianBlur6549" />
</filter>
</defs>
<sodipodi:namedview
id="base"
@ -1750,11 +1767,11 @@
borderopacity="1"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="4.0000002"
inkscape:cx="1176.8952"
inkscape:cy="497.32479"
inkscape:zoom="5.6568545"
inkscape:cx="1183.4315"
inkscape:cy="468.00675"
inkscape:document-units="px"
inkscape:current-layer="layer17"
inkscape:current-layer="layer38"
showgrid="false"
units="px"
showguides="false"
@ -2110,59 +2127,6 @@
inkscape:groupmode="layer"
id="layer38"
inkscape:label="New ship HUD">
<g
id="g10019"
transform="matrix(0.91965781,0,0,0.91965781,96.261289,118.46699)"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-impacted.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<g
id="g10008">
<path
sodipodi:type="star"
style="fill:#c69b70;fill-opacity:0.96470588;fill-rule:evenodd;stroke:none;stroke-width:0.4122031px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path10002"
sodipodi:sides="3"
sodipodi:cx="1199.6921"
sodipodi:cy="552.54395"
sodipodi:r1="6.7809258"
sodipodi:r2="3.3904629"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 1199.6921,559.32487 -5.8724,-10.17139 11.7449,0 z"
inkscape:transform-center-y="0.66622862"
transform="matrix(2.0288147,0,0,0.39300219,-1234.2608,333.33496)"
inkscape:transform-center-x="-0.0001076466" />
<use
x="0"
y="0"
xlink:href="#path10002"
inkscape:transform-center-y="-1.6952678"
id="use10004"
width="100%"
height="100%"
transform="matrix(1,0,0,-1,0,1188.8946)" />
</g>
<use
transform="rotate(60,1199.6921,594.4473)"
height="100%"
width="100%"
id="use10010"
xlink:href="#g10008"
y="0"
x="0" />
<use
transform="rotate(120,1199.6921,594.4473)"
height="100%"
width="100%"
id="use10012"
xlink:href="#g10008"
y="0"
x="0" />
</g>
<g
id="g10025"
style="fill:none"
@ -2277,14 +2241,17 @@
d="m 1260.0668,555.85712 -16.7872,16.14653 v -32.29306 z"
id="path10152"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccc" />
sodipodi:nodetypes="cccc"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-play-order.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
<text
id="text9927"
y="560.91962"
x="1245.1257"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45px;line-height:23.4375px;font-family:DAGGERSQUARE;-inkscape-font-specification:DAGGERSQUARE;letter-spacing:0px;word-spacing:0px;fill:#d1d1d1;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:#d1d1d1;fill-opacity:1;stroke-width:0.9375px"
style="font-size:16px;fill:#d1d1d1;fill-opacity:1;stroke-width:0.9375px"
y="560.91962"
x="1245.1257"
id="tspan9925"
@ -2320,7 +2287,7 @@
</g>
<g
id="g10129"
transform="translate(-0.11994512,63.748889)">
transform="translate(-0.11994512,65.123889)">
<g
id="g5251"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-hsp.png"
@ -2332,10 +2299,11 @@
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)" />
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)"
transform="matrix(1.0590246,0,0,0.99415563,-70.811353,3.7252191)" />
<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"
d="m 1187.7736,629.7317 h 23.8371 l -4.8475,17.60586 h -14.1421 z"
id="rect10078"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
@ -2348,15 +2316,14 @@
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"
d="m 1150.4031,641.36008 h 46.9006 v 5.97748 h -46.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" />
d="m 1151.5078,642.3125 0.3067,4.07227 h 44.5351 v -4.07227 z"
id="path10297"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
</g>
<use
x="0"
@ -2373,57 +2340,55 @@
</g>
<text
id="text10091"
y="642.75806"
x="1153.788"
y="640.25806"
x="1151.288"
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:14.66666698px;fill:#eb4e4a;fill-opacity:1;stroke-width:0.9375px"
y="642.75806"
x="1153.788"
style="font-size:16px;fill:#eb4e4a;fill-opacity:1;stroke-width:0.9375px"
y="640.25806"
x="1151.288"
id="tspan10089"
sodipodi:role="line">200</tspan></text>
<text
xml:space="preserve"
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:#2ad8dc;fill-opacity:1;stroke:none;stroke-width:0.9375px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter10663)"
x="1223.2982"
y="642.75806"
x="1225.2982"
y="640.25806"
id="text10095"><tspan
sodipodi:role="line"
id="tspan10093"
x="1223.2982"
y="642.75806"
style="font-size:14.66666698px;fill:#2ad8dc;fill-opacity:1;stroke-width:0.9375px">145</tspan></text>
x="1225.2982"
y="640.25806"
style="font-size:16px;fill:#2ad8dc;fill-opacity:1;stroke-width:0.9375px">145</tspan></text>
<text
id="text10099"
y="641.53931"
y="640.66431"
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:13.33333302px;fill:#ffdd4b;fill-opacity:1;stroke-width:0.9375px"
y="641.53931"
y="640.66431"
x="1196.4734"
id="tspan10097"
sodipodi:role="line">4</tspan></text>
<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"
d="m 1151.5078,642.3125 0.3067,4.07227 h 44.5351 v -4.07227 z"
id="path10303"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc"
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"
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"
d="m 1151.5078,642.3125 0.3067,4.07227 h 44.5351 v -4.07227 z"
id="path10315"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-shield.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
</g>
@ -2456,6 +2421,103 @@
height="93.75"
x="1152.6925"
y="618.28021" />
<g
id="g6405"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-impacted.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<g
inkscape:export-ydpi="96"
inkscape:export-xdpi="96"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-impacted.png"
transform="matrix(0.91965781,0,0,0.91965781,96.261289,118.46699)"
id="g10019">
<g
transform="rotate(60,1199.6921,594.4473)"
id="use10010">
<path
sodipodi:type="star"
style="fill:#c69b70;fill-opacity:0.96470588;fill-rule:evenodd;stroke:none;stroke-width:0.4122031px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path6373"
sodipodi:sides="3"
sodipodi:cx="1199.6921"
sodipodi:cy="552.54395"
sodipodi:r1="6.7809258"
sodipodi:r2="3.3904629"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 1199.6921,559.32487 -5.8724,-10.17139 11.7449,0 z"
inkscape:transform-center-y="0.66622862"
transform="matrix(2.0288147,0,0,0.39300219,-1234.2608,333.33496)"
inkscape:transform-center-x="-0.0001076466" />
<path
sodipodi:type="star"
style="fill:#c69b70;fill-opacity:0.96470588;fill-rule:evenodd;stroke:none;stroke-width:0.4122031px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="use6375"
sodipodi:sides="3"
sodipodi:cx="1199.6921"
sodipodi:cy="552.54395"
sodipodi:r1="6.7809258"
sodipodi:r2="3.3904629"
sodipodi:arg1="1.5707963"
sodipodi:arg2="2.6179939"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 1199.6921,559.32487 -5.8724,-10.17139 11.7449,0 z"
inkscape:transform-center-y="0.66622862"
transform="matrix(2.0288147,0,0,-0.39300219,-1234.2608,855.55964)"
inkscape:transform-center-x="-0.0001076466" />
</g>
<use
x="0"
y="0"
xlink:href="#use10010"
id="use6489"
width="100%"
height="100%"
transform="matrix(-1,0,0,1,2399.3843,0)" />
</g>
<g
id="g6556"
style="opacity:0.765">
<g
style="filter:url(#filter6547)"
inkscape:export-ydpi="96"
inkscape:export-xdpi="96"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/battle/hud/ship-impacted.png"
transform="matrix(0.91965781,0,0,0.91965781,96.261289,118.46699)"
id="g6499">
<g
transform="rotate(60,1199.6921,594.4473)"
id="g6495"
style="">
<path
inkscape:connector-curvature="0"
id="path6491"
d="m 1184.2647,549.5468 c 6.1562,1.04488 12.3116,6.37318 18.4697,4.15482 2.2432,-1.5873 19.6154,-4.8664 11.8436,-5.33382 -9.8609,0.23388 -28.0733,-0.46617 -32.8137,0.34033 0.8335,0.27956 1.6669,0.55912 2.5004,0.83867 z"
style="fill:#c69b70;fill-opacity:0.96470588;fill-rule:evenodd;stroke:none;stroke-width:0.36806959px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path6493"
d="m 1184.2647,639.3478 c 6.1562,-1.04488 12.3116,-6.37318 18.4697,-4.15482 2.2432,1.5873 19.6154,4.8664 11.8436,5.33382 -9.8609,-0.23388 -28.0733,0.46617 -32.8137,-0.34033 0.8335,-0.27956 1.6669,-0.55912 2.5004,-0.83867 z"
style="fill:#c69b70;fill-opacity:0.96470588;fill-rule:evenodd;stroke:none;stroke-width:0.36806959px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
<use
transform="matrix(1,0,0,-1,0,1329.4145)"
height="100%"
width="100%"
id="use6529"
xlink:href="#g6499"
y="0"
x="0"
style="" />
</g>
</g>
<g
id="g10025-6"
style="display:inline;fill:none;enable-background:new"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 192 KiB

31
src/ui/battle/ArenaShip.ts
View file

@ -73,35 +73,40 @@ module TS.SpaceTac.UI {
this.add(this.stasis);
// HSP display
this.hsp = this.battleview.newImage("battle-hud-ship-hsp", -48, 28);
this.hsp = this.battleview.newImage("battle-hud-ship-hsp", -50, 28);
this.add(this.hsp);
this.hull_bar = new ValueBar(this.battleview, "battle-hud-ship-hull", ValueBarOrientation.WEST, 45, 17);
this.hull_bar = new ValueBar(this.battleview, "battle-hud-ship-hull", ValueBarOrientation.WEST, 48, 15);
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 = new ValueBar(this.battleview, "battle-hud-ship-shield", ValueBarOrientation.EAST, 53, 15);
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 = new Phaser.Text(this.game, 0, 20, `${this.ship.getValue("hull")}`,
{ align: "left", font: "12pt 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 = new Phaser.Text(this.game, 104, 20, `${this.ship.getValue("shield")}`,
{ align: "right", font: "12pt 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 = new Phaser.Text(this.game, 51, 10, `${this.ship.getValue("power")}`,
{ align: "center", font: "10pt 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, 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);
let play_order_bg = this.battleview.newImage("battle-hud-ship-play-order", -44, 0);
play_order_bg.anchor.set(0.5, 0.5);
this.play_order = new Phaser.Text(this.game, -2, 3, "", { font: "bold 12pt SpaceTac", fill: "#d1d1d1" });
this.play_order.setShadow(1, 1, "#000000");
this.play_order.anchor.set(0.5, 0.5);
play_order_bg.addChild(this.play_order);
this.toggle_play_order = this.battleview.animations.newVisibilityToggle(play_order_bg, 200, false);
this.add(play_order_bg);
// Effects display
this.active_effects = new ActiveEffectsEvent(ship);
@ -140,7 +145,7 @@ module TS.SpaceTac.UI {
private processLogEvent(event: BaseBattleEvent): number {
if (event instanceof ShipChangeEvent) {
if (event.new_ship === this.ship) {
this.play_order.text = "";
this.play_order.text = "-";
} else {
this.play_order.text = this.battleview.battle.getTurnsBefore(this.ship).toString();
}