diff --git a/TODO.md b/TODO.md index f58bf87..0e8f571 100644 --- a/TODO.md +++ b/TODO.md @@ -7,9 +7,7 @@ Phaser 3 migration * Pause the game when the window isn't focused (except in headless) * Fit the game in window size * Fix top-right messages positions -* Make the AI-thinking loader work again * Fix the character sheet layout -* Fix the crash in gatling animation * Fix valuebar requiring to be in root display list Menu/settings/saves diff --git a/data/stage1/image/common/awaiter.png b/data/stage1/image/common/awaiter.png new file mode 100644 index 0000000..ae2d02f Binary files /dev/null and b/data/stage1/image/common/awaiter.png differ diff --git a/graphics/ui/awaiter.svg b/graphics/ui/awaiter.svg new file mode 100644 index 0000000..1d41e68 --- /dev/null +++ b/graphics/ui/awaiter.svg @@ -0,0 +1,251 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/graphics/ui/loader.svg b/graphics/ui/loader.svg deleted file mode 100644 index bcb5083..0000000 --- a/graphics/ui/loader.svg +++ /dev/null @@ -1,329 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/out/images/common/waiting.png b/out/images/common/waiting.png deleted file mode 100644 index 8f2bdbf..0000000 Binary files a/out/images/common/waiting.png and /dev/null differ diff --git a/src/ui/AssetLoading.ts b/src/ui/AssetLoading.ts index 5a3461c..17d1ac9 100644 --- a/src/ui/AssetLoading.ts +++ b/src/ui/AssetLoading.ts @@ -55,7 +55,6 @@ module TK.SpaceTac.UI { // TODO pack this.loadSheet("common/particles.png", 32); - this.loadAnimation("common/waiting.png", 128, 128, 6); } if (this.required >= AssetLoadingRange.BATTLE && AssetLoading.loaded < AssetLoadingRange.BATTLE) { @@ -86,14 +85,5 @@ module TK.SpaceTac.UI { frameHeight: frame_height, }); } - - loadAnimation(path: string, frame_width: number, frame_height = frame_width, count: number) { - this.load.spritesheet(AssetLoading.getKey(path), "images/" + path, { - frameWidth: frame_width, - frameHeight: frame_height, - startFrame: 0, - endFrame: count - 1 - }); - } } } diff --git a/src/ui/BaseView.ts b/src/ui/BaseView.ts index 473cba3..8061b5f 100644 --- a/src/ui/BaseView.ts +++ b/src/ui/BaseView.ts @@ -18,7 +18,7 @@ module TK.SpaceTac.UI { // Animations animations!: Animations - particles!: ParticleSystem + particles!: UIParticles // Timing timer!: Timer @@ -57,7 +57,7 @@ module TK.SpaceTac.UI { this.gameui = this.sys.game; this.timer = new Timer(this.gameui.headless); this.animations = new Animations(this.tweens); - this.particles = new ParticleSystem(this); + this.particles = new UIParticles(this); this.inputs = new InputManager(this); this.audio = new Audio(this); this.debug = this.gameui.debug; diff --git a/src/ui/battle/ActionBar.ts b/src/ui/battle/ActionBar.ts index 462bbe2..0ff6e09 100644 --- a/src/ui/battle/ActionBar.ts +++ b/src/ui/battle/ActionBar.ts @@ -17,7 +17,7 @@ module TK.SpaceTac.UI { power_icons!: UIContainer // Indicator of interaction disabled - icon_waiting: UIImage + icon_waiting: UIAwaiter // Current ship, whose actions are displayed ship: Ship | null @@ -55,9 +55,7 @@ module TK.SpaceTac.UI { builder.image("battle-actionbar-ship", 1735); // Waiting icon - this.icon_waiting = builder.image("common-waiting", base.width / 2, base.height / 2, true); - // FIXME - //this.icon_waiting.animations.add("loop").play(9, true); + this.icon_waiting = builder.awaiter(base.width / 2, base.height / 2, true, 0.5); // Options button builder.button("battle-actionbar-button-menu", 0, 0, () => battleview.showOptions(), "Game options"); diff --git a/src/ui/common/UIAwaiter.ts b/src/ui/common/UIAwaiter.ts new file mode 100644 index 0000000..c8da3b6 --- /dev/null +++ b/src/ui/common/UIAwaiter.ts @@ -0,0 +1,26 @@ +module TK.SpaceTac.UI { + /** + * UI component to show a loader animation while waiting for something + */ + export class UIAwaiter extends Phaser.GameObjects.Container { + constructor(view: BaseView, x: number, y: number, visible: boolean) { + super(view, x, y); + this.setName("awaiter"); + this.setVisible(visible); + + let manager = new UIParticles(view).createManager("common-awaiter", this); + let circle = new Phaser.Geom.Circle(0, 0, 60); + manager.createEmitter({ + angle: { start: 0, end: 360, steps: 6 }, + alpha: { start: 1, end: 0, ease: "Quad.easeIn" }, + lifespan: 1200, + speed: 5, + quantity: 1, + scale: { start: 0.9, end: 1, ease: "Quad.easeOut" }, + frequency: 200, + particleClass: FacingAlwaysParticle, + emitZone: { type: 'edge', source: circle, quantity: 6 } + }); + } + } +} diff --git a/src/ui/common/UIBuilder.ts b/src/ui/common/UIBuilder.ts index 0b7a577..5361adf 100644 --- a/src/ui/common/UIBuilder.ts +++ b/src/ui/common/UIBuilder.ts @@ -2,7 +2,6 @@ * Main way to create UI components */ module TK.SpaceTac.UI { - export type UIParticles = Phaser.GameObjects.Particles.ParticleEmitterManager export type UIBuilderParent = UIImage | UIContainer export type ShaderValue = number | { x: number, y: number } @@ -217,6 +216,16 @@ module TK.SpaceTac.UI { this.view.particles.emit(config, this.parent instanceof UIContainer ? this.parent : undefined); } + /** + * Animation to await something + */ + awaiter(x = 0, y = 0, visible = true, scale = 1): UIAwaiter { + let result = new UIAwaiter(this.view, x, y, visible); + result.setScale(scale); + this.add(result); + return result; + } + /** * Change the content of an component * diff --git a/src/ui/common/ParticleSystem.ts b/src/ui/common/UIParticles.ts similarity index 81% rename from src/ui/common/ParticleSystem.ts rename to src/ui/common/UIParticles.ts index 11cd715..1b28656 100644 --- a/src/ui/common/ParticleSystem.ts +++ b/src/ui/common/UIParticles.ts @@ -1,6 +1,4 @@ module TK.SpaceTac.UI { - type Manager = Phaser.GameObjects.Particles.ParticleEmitterManager; - export enum ParticleFacingMode { INITIAL = 1, ALWAYS = 2 @@ -29,29 +27,30 @@ module TK.SpaceTac.UI { facing?: ParticleFacingMode } + /** + * Override of phaser particle manager to fix some issues + */ + export class UIParticleManager extends Phaser.GameObjects.Particles.ParticleEmitterManager { + setScrollFactor() { + } + setAlpha() { + } + } + /** * System to emit multiple particles of the same texture */ - export class ParticleSystem { + export class UIParticles { constructor(private view: BaseView) { } - private getManager(key: string, parent?: UIContainer): Manager { - let info = this.view.getImageInfo(key); - let result = this.view.add.particles(info.key, info.frame); - if (parent) { - parent.add(result); - } - return result; - } - /** * Emit a batch of particles * * Returns the total duration in milliseconds */ emit(config: ParticlesConfig, parent?: UIContainer): number { - let manager = this.getManager(config.key, parent); + let manager = this.createManager(config.key, parent); let emitter = manager.createEmitter({}); if (config.fading) { emitter.setAlpha({ start: 1, end: 0 }); @@ -81,12 +80,27 @@ module TK.SpaceTac.UI { let duration = this.emit(config); return this.view.timer.sleep(duration); } + + /** + * Create a new particle manager + * + * Automatically called by *emit*. + */ + createManager(key: string, parent?: UIContainer): UIParticleManager { + let info = this.view.getImageInfo(key); + let result = new UIParticleManager(this.view, info.key, info.frame, []); + this.view.add.existing(result); + if (parent) { + parent.add(result); + } + return result; + } } /** * Particle that is rotated to face its initial direction */ - class FacingInitialParticle extends Phaser.GameObjects.Particles.Particle { + export class FacingInitialParticle extends Phaser.GameObjects.Particles.Particle { fire(x: number, y: number): any { let result = super.fire(x, y); this.rotation = Math.atan2(this.velocityY, this.velocityX); @@ -97,7 +111,7 @@ module TK.SpaceTac.UI { /** * Particle that is rotated to face its movement direction */ - class FacingAlwaysParticle extends FacingInitialParticle { + export class FacingAlwaysParticle extends FacingInitialParticle { update(delta: any, step: any, processors: any): any { let result = super.update(delta, step, processors); this.rotation = Math.atan2(this.velocityY, this.velocityX); diff --git a/src/ui/common/UIWaitingDialog.ts b/src/ui/common/UIWaitingDialog.ts index eb8d6af..c6cb933 100644 --- a/src/ui/common/UIWaitingDialog.ts +++ b/src/ui/common/UIWaitingDialog.ts @@ -7,7 +7,7 @@ module TK.SpaceTac.UI { super(view); this.content.text(message, this.width * 0.5, this.height * 0.3, { color: "#90FEE3", size: 32 }); - //this.addLoader(this.width * 0.5, this.height * 0.6); + this.content.awaiter(this.width * 0.5, this.height * 0.6); } /**