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

Fixed "on" and "hover" layers being in back of children objects

This commit is contained in:
Michaël Lemaire 2018-03-06 00:52:44 +01:00
parent 69a65b0735
commit a2e40d2b91
8 changed files with 129 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
TODO.md
View File

@ -24,8 +24,6 @@ Map/story
Character sheet
---------------
* Fix the hover/on not working on fleet members
* Improve tooltip content
* Replace the close icon by a validation icon in creation view
* Allow to change/buy ship model
* Allow to rename a personality (in creation view only)

BIN
graphics/exported/character/portrait-hover.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 474 B

BIN
graphics/exported/character/portrait-on.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 474 B

After

Width:  |  Height:  |  Size: 5.8 KiB

140
graphics/ui/character.svg
View File

@ -23,6 +23,26 @@
enable-background="new">
<defs
id="defs6038">
<linearGradient
inkscape:collect="always"
id="linearGradient5133">
<stop
style="stop-color:#3b526d;stop-opacity:1"
offset="0"
id="stop5129" />
<stop
id="stop5137"
offset="0.14413227"
style="stop-color:#8d9bac;stop-opacity:1" />
<stop
style="stop-color:#4d5e74;stop-opacity:0.14509805"
offset="0.50630873"
id="stop5464" />
<stop
style="stop-color:#b8bbbf;stop-opacity:0;"
offset="1"
id="stop5131" />
</linearGradient>
<linearGradient
id="linearGradient4877"
inkscape:collect="always">
@ -791,19 +811,6 @@
result="composite2"
id="feComposite15041" />
</filter>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter5187"
x="-0.0612"
width="1.1224"
y="-0.0612"
height="1.1224">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="2.8930907"
id="feGaussianBlur5189" />
</filter>
<marker
id="Arrow2Sstart"
inkscape:isstock="true"
@ -870,6 +877,29 @@
result="composite2"
id="feComposite13787-2" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient5133"
id="linearGradient5135"
x1="369.46329"
y1="828.38304"
x2="398.45467"
y2="828.38304"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-0.39187887,1.866899)" />
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter5460"
x="-0.0336"
width="1.0672"
y="-0.0336"
height="1.0672">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="1.848"
id="feGaussianBlur5462" />
</filter>
</defs>
<sodipodi:namedview
id="base"
@ -878,11 +908,11 @@
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="0.5"
inkscape:cx="984.86575"
inkscape:cy="573.79438"
inkscape:zoom="0.99999999"
inkscape:cx="431.75594"
inkscape:cy="487.22659"
inkscape:document-units="px"
inkscape:current-layer="layer4"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
showborder="true"
@ -1643,7 +1673,7 @@
height="128"
x="230"
y="766.25"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/character/portrait-on.png"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/character/portrait-hover.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" />
<text
@ -1668,16 +1698,6 @@
x="731.63831"
y="65.749977"
style="font-size:21.33333397px;fill:#a0afc3;fill-opacity:1">Actions</tspan></text>
<rect
inkscape:export-ydpi="96"
inkscape:export-xdpi="96"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/character/portrait-hover.png"
y="773.52264"
x="378.34415"
height="113.45454"
width="113.45454"
id="rect4873"
style="opacity:0.67099998;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:3.54500008;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter5187)" />
<rect
inkscape:export-ydpi="96"
inkscape:export-xdpi="96"
@ -1688,6 +1708,70 @@
width="128"
id="rect4875"
style="fill:none;fill-rule:evenodd;stroke:#4d5156;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.45319148" />
<g
id="g5262"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/graphics/exported/character/portrait-on.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<use
x="0"
y="0"
xlink:href="#g5157"
id="use5266"
width="100%"
height="100%"
transform="matrix(0.93560606,0,0,0.93560606,28.015962,53.463064)"
style="opacity:0.61699997;filter:url(#filter5460)" />
<g
id="g5157">
<path
style="fill:url(#linearGradient5135);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 369.07141,784.11122 4.35793,0.19749 24.63345,9.34845 v 73.18556 l -24.89158,9.61022 -4.0998,-0.0643 z"
id="rect5126"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
<use
x="0"
y="0"
xlink:href="#rect5126"
id="use5147"
width="100%"
height="100%"
transform="matrix(-1,0,0,1,870.14282,0)" />
<use
x="0"
y="0"
xlink:href="#rect5126"
id="use5149"
width="100%"
height="100%"
transform="rotate(90,435.07142,830.24994)" />
<use
x="0"
y="0"
xlink:href="#rect5126"
id="use5151"
width="100%"
height="100%"
transform="rotate(-90,435.07141,830.24993)" />
</g>
</g>
<use
x="0"
y="0"
xlink:href="#g5262"
id="use5474"
width="100%"
height="100%"
transform="translate(141.0715,1.9072266e-5)" />
<use
x="0"
y="0"
xlink:href="#rect13891"
id="use5476"
width="100%"
height="100%"
transform="translate(282.14291,-5.0927734e-5)" />
</g>
<g
inkscape:groupmode="layer"

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 95 KiB

After

Width:  |  Height:  |  Size: 98 KiB

1
src/ui/character/CharacterPortrait.ts
View File

@ -14,7 +14,6 @@ module TK.SpaceTac.UI {
button.anchor.set(0.5);
builder.in(button, builder => {
// FIXME Under hover/on
let portrait = builder.image(`ship-${this.ship.model.code}-portrait`, 0, 0, true);
portrait.scale.set(0.5);
});

6
src/ui/character/CharacterSheet.ts
View File

@ -256,7 +256,7 @@ module TK.SpaceTac.UI {
let builder = this.builder.in(this.group_portraits);
fleet.ships.forEach((ship, idx) => {
let button: UIButton
let button: UIButton;
button = new CharacterPortrait(ship).draw(builder, 64 + idx * 140, 64, () => {
if (button) {
builder.select(button);
@ -267,6 +267,10 @@ module TK.SpaceTac.UI {
this.refreshUpgrades();
}
});
if (ship == this.ship) {
builder.switch(button, true);
}
});
}
}

13
src/ui/common/UIBuilder.ts
View File

@ -122,6 +122,14 @@ module TK.SpaceTac.UI {
private add(child: UIText | UIImage | UIButton | UIContainer): void {
if (this.parent instanceof Phaser.Group) {
this.parent.add(child);
} else if (this.parent instanceof Phaser.Button) {
// Protect the "on" and "hover" layers
let layer = first(this.parent.children, child => child instanceof Phaser.Image && (child.name == "*on*" || child.name == "*hover*"));
if (layer) {
this.parent.addChildAt(child, this.parent.getChildIndex(layer));
} else {
this.parent.addChild(child);
}
} else {
this.parent.addChild(child);
}
@ -208,6 +216,7 @@ module TK.SpaceTac.UI {
let on_info = this.view.getImageInfo(options.on_name || (name + "-on"));
if (on_info.exists) {
on_mask = new Phaser.Image(this.game, 0, 0, on_info.key, on_info.frame);
on_mask.name = "*on*";
on_mask.visible = false;
result.addChild(on_mask);
}
@ -227,6 +236,7 @@ module TK.SpaceTac.UI {
let hover_mask: Phaser.Image | null = null;
if (hover_info.exists) {
hover_mask = new Phaser.Image(this.game, 0, 0, hover_info.key, hover_info.frame);
hover_mask.name = "*hover*";
hover_mask.visible = false;
result.addChild(hover_mask);
}
@ -252,8 +262,7 @@ module TK.SpaceTac.UI {
() => {
if (onclick) {
onclick();
}
if (onoffcallback) {
} else if (onoffcallback) {
this.switch(result, !onstatus);
}
}, 100);

2
src/ui/common/UITools.ts
View File

@ -147,7 +147,7 @@ module TK.SpaceTac.UI {
if (!(background.width && background.data.bg_bounds && UITools.compareRects(background.data.bg_bounds, bounds))) {
background.clear();
background.lineStyle(2, 0x404450);
background.beginFill(0x202225, 0.9);
background.beginFill(0x202225);
background.drawRect(x, y, width, height);
background.endFill();