1
0
Fork 0

New waiting indicator

This commit is contained in:
Michaël Lemaire 2017-09-10 23:43:27 +02:00
parent 8c1bd3c2ea
commit d9cad0d786
7 changed files with 353 additions and 12 deletions

329
graphics/ui/loader.svg Normal file
View File

@ -0,0 +1,329 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="512"
height="512"
viewBox="0 0 512 512"
version="1.1"
id="svg6044"
inkscape:version="0.92.1 r15371"
sodipodi:docname="loader.svg"
inkscape:export-filename="/home/michael/workspace/perso/spacetac/out/assets/images/common/waiting.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
style="enable-background:new"
enable-background="new">
<defs
id="defs6038">
<linearGradient
inkscape:collect="always"
id="linearGradient10408">
<stop
style="stop-color:#519aed;stop-opacity:1;"
offset="0"
id="stop10404" />
<stop
style="stop-color:#96bfed;stop-opacity:1"
offset="1"
id="stop10406" />
</linearGradient>
<mask
maskUnits="userSpaceOnUse"
id="mask7281">
<g
id="g7285"
transform="matrix(0.73124794,0,0,0.99999999,79.083976,1.2221143e-7)">
<path
style="fill:#fffafa;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 680.67969,216.32031 V 749.67969 H 1543.6758 V 216.32031 Z m 257.48633,23.42774 174.01168,220.39453 174.0118,-220.39453 27.0703,11.42773 -174.0118,220.39649 h 348.0215 v 22.85546 H 1139.248 l 174.0118,220.39649 -27.0703,11.42773 L 1112.1777,505.85742 938.16602,726.25195 911.0957,714.82422 1085.1074,494.42773 H 737.08594 V 471.57227 H 1085.1074 L 911.0957,251.17578 Z"
transform="matrix(0.26458334,0,0,0.26458334,0,11.249983)"
id="path7283"
inkscape:connector-curvature="0" />
</g>
</mask>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath7292">
<path
style="fill:#ffff00;fill-rule:evenodd;stroke:#000000;stroke-width:0.36058816px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
inkscape:transform-center-x="24.888019"
d="m 254.34398,139.04371 149.32817,-46.261049 3e-5,92.522079 z"
id="path7294"
inkscape:connector-curvature="0"
inkscape:transform-center-y="-2.5000005e-06" />
</clipPath>
<mask
maskUnits="userSpaceOnUse"
id="mask8954">
<path
style="fill:#ececec;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M -2.5351562,832.71482 V 1093.7851 H 258.53516 V 832.71482 Z M 122,835.39256 h 12 V 952.8574 l 101.72852,-58.73242 6,10.39258 L 140,963.24998 l 101.72852,58.73242 -6,10.3926 L 134,973.64256 V 1091.1074 H 122 V 973.64256 l -101.728516,58.73244 -6,-10.3926 L 116,963.24998 14.271484,904.51756 l 6,-10.39258 L 122,952.8574 Z"
id="path8956"
inkscape:connector-curvature="0" />
</mask>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath8964">
<path
style="fill:#ffff00;fill-rule:evenodd;stroke:#000000;stroke-width:1.18050802px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
inkscape:transform-center-x="24.263684"
d="m 128.00001,963.24994 145.58209,-84.05186 10e-6,168.10372 z"
id="path8966"
inkscape:connector-curvature="0"
inkscape:transform-center-y="-1e-05" />
</clipPath>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient10408"
id="linearGradient10410"
x1="128.00002"
y1="963.24994"
x2="248.5"
y2="963.24994"
gradientUnits="userSpaceOnUse" />
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter11817"
x="-0.0276"
width="1.0552"
y="-0.0276"
height="1.0552">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="2.7025"
id="feGaussianBlur11819" />
</filter>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter11823"
x="-0.0276"
width="1.0552"
y="-0.0276"
height="1.0552">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="2.7025"
id="feGaussianBlur11825" />
</filter>
<filter
style="color-interpolation-filters:sRGB;"
inkscape:label="Color Shift"
id="filter11909">
<feColorMatrix
type="hueRotate"
values="164.59999999999999"
result="color1"
id="feColorMatrix11905" />
<feColorMatrix
type="saturate"
values="0.70999999999999996"
result="color2"
id="feColorMatrix11907" />
</filter>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="5.6"
inkscape:cx="79.947686"
inkscape:cy="445.41071"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
units="px"
showborder="true"
inkscape:showpageshadow="false"
showguides="false"
inkscape:snap-bbox="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-nodes="false"
inkscape:snap-object-midpoints="true"
inkscape:snap-global="false"
inkscape:snap-others="false">
<inkscape:grid
type="xygrid"
id="grid11797"
spacingx="64"
spacingy="64"
dotted="false"
color="#3f3fff"
opacity="0.20392157"
empcolor="#3f3fff"
empopacity="0.34509804"
empspacing="2" />
</sodipodi:namedview>
<metadata
id="metadata6041">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-579.24998)">
<use
x="0"
y="0"
xlink:href="#g11795"
id="use11799"
width="100%"
height="100%"
transform="rotate(60,128,754.10123)" />
<use
x="0"
y="0"
xlink:href="#g11795"
id="use11801"
width="100%"
height="100%"
transform="rotate(120,192,717.15081)" />
<use
x="0"
y="0"
xlink:href="#g11795"
id="use11803"
width="100%"
height="100%"
transform="rotate(-180,256,643.24998)" />
<use
x="0"
y="0"
xlink:href="#g11795"
id="use11805"
width="100%"
height="100%"
transform="rotate(-120,100.95042,707.24998)" />
<use
x="0"
y="0"
xlink:href="#g11795"
id="use11807"
width="100%"
height="100%"
transform="rotate(-60,238.85125,596.39873)" />
<g
id="g11795"
transform="matrix(0.44754579,0,0,0.44754579,6.9669246,211.99165)"
style="filter:url(#filter11909)">
<circle
r="117.5"
cy="963.25"
cx="128"
id="path8921"
style="opacity:1;fill:#2b598e;fill-opacity:0.11914894;fill-rule:evenodd;stroke:#519aed;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.21914894" />
<g
id="g10418"
transform="matrix(0.97065238,-0.18255724,0.18255724,0.97065238,-172.65659,51.993587)"
style="opacity:0.25400002;fill:#bbc3cb;fill-opacity:1;stroke:none;filter:url(#filter11823)">
<path
style="opacity:1;fill:#bbc3cb;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 245.5,963.25 A 117.5,117.5 0 0 1 128,1080.75 117.5,117.5 0 0 1 10.5,963.25 117.5,117.5 0 0 1 128,845.75 117.5,117.5 0 0 1 245.5,963.25 Z"
id="path10416"
inkscape:connector-curvature="0"
clip-path="url(#clipPath8964)" />
</g>
<g
style="opacity:0.42300002;fill:#374656;fill-opacity:1;stroke:none;filter:url(#filter11817)"
transform="matrix(1.0764834,0,0,1.0764834,-19.283274,-73.315481)"
id="g10180">
<path
clip-path="url(#clipPath8964)"
inkscape:connector-curvature="0"
id="path10178"
d="M 245.5,963.25 A 117.5,117.5 0 0 1 128,1080.75 117.5,117.5 0 0 1 10.5,963.25 117.5,117.5 0 0 1 128,845.75 117.5,117.5 0 0 1 245.5,963.25 Z"
style="opacity:1;fill:#374656;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
id="g9761">
<path
style="opacity:1;fill:url(#linearGradient10410);fill-opacity:1;fill-rule:evenodd;stroke:#50739b;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 245.5,963.25 A 117.5,117.5 0 0 1 128,1080.75 117.5,117.5 0 0 1 10.5,963.25 117.5,117.5 0 0 1 128,845.75 117.5,117.5 0 0 1 245.5,963.25 Z"
id="circle8958"
inkscape:connector-curvature="0"
clip-path="url(#clipPath8964)" />
</g>
<g
id="g10088">
<path
sodipodi:type="star"
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#4081ca;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path8939"
sodipodi:sides="6"
sodipodi:cx="128"
sodipodi:cy="963.25"
sodipodi:r1="105.28872"
sodipodi:r2="91.182709"
sodipodi:arg1="-1.5707963"
sodipodi:arg2="-1.0471976"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 128,857.96128 91.18271,52.64436 -10e-6,105.28876 -91.1827,52.6443 -91.182707,-52.6443 3e-6,-105.28876 z"
mask="url(#mask8954)" />
</g>
<g
transform="matrix(0.87923253,0,0,0.87923253,15.458236,116.32926)"
id="g10414">
<path
mask="url(#mask8954)"
d="m 128,857.96128 91.18271,52.64436 -10e-6,105.28876 -91.1827,52.6443 -91.182707,-52.6443 3e-6,-105.28876 z"
inkscape:randomized="0"
inkscape:rounded="0"
inkscape:flatsided="true"
sodipodi:arg2="-1.0471976"
sodipodi:arg1="-1.5707963"
sodipodi:r2="91.182709"
sodipodi:r1="105.28872"
sodipodi:cy="963.25"
sodipodi:cx="128"
sodipodi:sides="6"
id="path10412"
style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#4081ca;stroke-width:3.4120667;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
sodipodi:type="star" />
</g>
<g
transform="matrix(0.47449832,0,0,0.47449832,67.264216,506.1895)"
id="g10422">
<path
mask="url(#mask8954)"
d="m 128,857.96128 91.18271,52.64436 -10e-6,105.28876 -91.1827,52.6443 -91.182707,-52.6443 3e-6,-105.28876 z"
inkscape:randomized="0"
inkscape:rounded="0"
inkscape:flatsided="true"
sodipodi:arg2="-1.0471976"
sodipodi:arg1="-1.5707963"
sodipodi:r2="91.182709"
sodipodi:r1="105.28872"
sodipodi:cy="963.25"
sodipodi:cx="128"
sodipodi:sides="6"
id="path10420"
style="opacity:0.319;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#4081ca;stroke-width:31.71138763;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
sodipodi:type="star" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -11,7 +11,7 @@
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1920"
height="1080"
viewBox="0 0 507.99999 285.75001"
viewBox="0 0 1920 1080"
version="1.1"
id="svg6044"
inkscape:version="0.92.1 r15371"
@ -25,9 +25,9 @@
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="707.14286"
inkscape:cy="571.42857"
inkscape:zoom="0.49497475"
inkscape:cx="863.42126"
inkscape:cy="610.2451"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 78 KiB

View File

@ -14,7 +14,7 @@ module TS.SpaceTac.UI {
this.loadSheet("common/particles.png", 32);
this.loadImage("common/transparent.png");
this.loadImage("common/debug.png");
this.loadImage("common/waiting.png");
this.loadAnimation("common/waiting.png", 128, 128, 6);
this.loadImage("common/arrow.png");
this.loadImage("common/button-ok.png");
this.loadImage("common/button-cancel.png");
@ -106,6 +106,10 @@ module TS.SpaceTac.UI {
this.load.spritesheet(Preload.getKey(path), "assets/images/" + path, frame_width, frame_height);
}
loadAnimation(path: string, frame_width: number, frame_height = frame_width, count?: number) {
this.load.spritesheet(Preload.getKey(path), "assets/images/" + path, frame_width, frame_height, count);
}
loadImage(path: string) {
this.load.image(Preload.getKey(path), "assets/images/" + path);
}

View File

@ -45,9 +45,9 @@ module TS.SpaceTac.UI {
this.add(this.actions);
// Waiting icon
this.icon_waiting = new Phaser.Image(this.game, this.width / 2, 50, "common-waiting", 0);
this.icon_waiting = new Phaser.Image(this.game, this.width / 2, this.height / 2, "common-waiting", 0);
this.icon_waiting.anchor.set(0.5, 0.5);
this.icon_waiting.scale.set(0.5, 0.5);
this.icon_waiting.animations.add("loop").play(9, true);
this.add(this.icon_waiting);
// Options button
@ -113,11 +113,7 @@ module TS.SpaceTac.UI {
if (this.interactive != interactive) {
this.interactive = interactive;
this.game.tweens.removeFrom(this.icon_waiting);
this.icon_waiting.angle = 0;
this.battleview.animations.setVisible(this.icon_waiting, !this.interactive, 100);
this.game.tweens.create(this.icon_waiting).to({ "angle": 360 }, 3000).loop().start();
this.battleview.animations.setVisible(this.actions, interactive, 100, 1, 0.2);
}
}

View File

@ -262,6 +262,18 @@ module TS.SpaceTac.UI {
return image;
}
/**
* Add an animated loader (to indicate a waiting for something).
*/
addLoader(x: number, y: number, scale = 1): Phaser.Image {
let image = new Phaser.Image(this.game, x, y, "common-waiting");
image.anchor.set(0.5, 0.5);
image.scale.set(scale);
image.animations.add("loop").play(3, true);
this.addInternalChild(image);
return image;
}
/**
* Add a 2-states toggle button.
*

View File

@ -7,7 +7,7 @@ module TS.SpaceTac.UI {
super(view);
this.addText(this.width * 0.5, this.height * 0.3, message, "#90FEE3", 32);
this.addImageF(this.width * 0.5, this.height * 0.6, "common-waiting");
this.addLoader(this.width * 0.5, this.height * 0.6);
}
/**