diff --git a/bubbo-bubbo/src/game/Game.ts b/bubbo-bubbo/src/game/Game.ts index 9465503..f5c621d 100644 --- a/bubbo-bubbo/src/game/Game.ts +++ b/bubbo-bubbo/src/game/Game.ts @@ -1,5 +1,5 @@ import gsap from 'gsap'; -import type { DisplayObject } from 'pixi.js'; +import { DisplayObject, Point } from 'pixi.js'; import { Container, Rectangle } from 'pixi.js'; import { navigation } from '../navigation'; @@ -24,6 +24,8 @@ export class Game { public stage = new Container(); /** Container to hold gameplay elements like bubbles. */ public gameContainer = new Container(); + /** Original game container position to use as reset for screen shake effects. */ + public gameContainerPosition = new Point(); /** Container to handle user interaction. */ public hitContainer = new Container(); /** A system manager to handle the common functions found in systems. */ @@ -165,8 +167,11 @@ export class Game { public resize(w: number, h: number) { // Sets game container to the bottom of the screen, // since the game should be anchor there - this.gameContainer.x = w * 0.5; - this.gameContainer.y = h; + this.gameContainerPosition.x = w * 0.5; + this.gameContainerPosition.y = h; + + this.gameContainer.x = this.gameContainerPosition.x; + this.gameContainer.y = this.gameContainerPosition.y; // Offsets the hit area position back to top left of the screen, // it then sets the dimensions of the hit area to match the screen dimensions diff --git a/bubbo-bubbo/src/game/systems/EffectsSystem.ts b/bubbo-bubbo/src/game/systems/EffectsSystem.ts index d667dde..21a5d4f 100644 --- a/bubbo-bubbo/src/game/systems/EffectsSystem.ts +++ b/bubbo-bubbo/src/game/systems/EffectsSystem.ts @@ -1,4 +1,3 @@ -import { Point } from 'pixi.js'; import { ShockwaveFilter } from 'pixi-filters'; import { sfx } from '../../audio'; @@ -26,11 +25,6 @@ export class EffectsSystem implements System { private _activeShockwave = false; /** The speed modification for the shockwave effect. */ private _shockwaveSpeedMod = 1; - /** - * The last position of the game container before the shockwave effect was applied. - * This is used to restore the position of the container after the effect has completed. - */ - private readonly _lastContainerPos = new Point(); /** The intensity of the shockwave effect. */ private _shockIntensity!: number; @@ -41,9 +35,6 @@ export class EffectsSystem implements System { * @param intense Indicates whether the effect should be intense (default: false). */ public shockwave(x: number, y: number, intense = false) { - // Store the last position of the game container - this._lastContainerPos.set(this.game.gameContainer.x, this.game.gameContainer.y); - const { shockwaveFilter } = this; this._activeShockwave = true; @@ -96,8 +87,8 @@ export class EffectsSystem implements System { } // Set the game container position back to its original position - this.game.gameContainer.x = this._lastContainerPos.x; - this.game.gameContainer.y = this._lastContainerPos.y; + this.game.gameContainer.x = this.game.gameContainerPosition.x; + this.game.gameContainer.y = this.game.gameContainerPosition.y; } /** @@ -109,8 +100,10 @@ export class EffectsSystem implements System { if (!this._activeShockwave) return; // Update the position of the game container to simulate screen shake. - this.game.gameContainer.x = this._lastContainerPos.x + Math.random() * this._shockIntensity; - this.game.gameContainer.y = this._lastContainerPos.y + Math.random() * this._shockIntensity; + this.game.gameContainer.x = + this.game.gameContainerPosition.x + Math.random() * this._shockIntensity; + this.game.gameContainer.y = + this.game.gameContainerPosition.y + Math.random() * this._shockIntensity; // Stop the shockwave effect if the time has exceeded a certain threshold. if (this.shockwaveFilter.time > 0.4) this.stopShockwave();