diff --git a/graphics/ui/loader.svg b/graphics/ui/loader.svg new file mode 100644 index 0000000..bcb5083 --- /dev/null +++ b/graphics/ui/loader.svg @@ -0,0 +1,329 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/graphics/ui/template.svg b/graphics/ui/template.svg index 2743328..05155a2 100644 --- a/graphics/ui/template.svg +++ b/graphics/ui/template.svg @@ -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" diff --git a/out/assets/images/common/waiting.png b/out/assets/images/common/waiting.png index 5c1b7f0..8f2bdbf 100644 Binary files a/out/assets/images/common/waiting.png and b/out/assets/images/common/waiting.png differ diff --git a/src/ui/Preload.ts b/src/ui/Preload.ts index 287bc0c..8d98490 100644 --- a/src/ui/Preload.ts +++ b/src/ui/Preload.ts @@ -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); } diff --git a/src/ui/battle/ActionBar.ts b/src/ui/battle/ActionBar.ts index d6cc2dd..1916144 100644 --- a/src/ui/battle/ActionBar.ts +++ b/src/ui/battle/ActionBar.ts @@ -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); } } diff --git a/src/ui/common/UIComponent.ts b/src/ui/common/UIComponent.ts index ee6b61b..b27c17f 100644 --- a/src/ui/common/UIComponent.ts +++ b/src/ui/common/UIComponent.ts @@ -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. * diff --git a/src/ui/common/UIWaitingDialog.ts b/src/ui/common/UIWaitingDialog.ts index 8d0c4b3..12a7d77 100644 --- a/src/ui/common/UIWaitingDialog.ts +++ b/src/ui/common/UIWaitingDialog.ts @@ -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); } /**