diff --git a/public/sprites/exit.svg b/public/sprites/exit.svg new file mode 100644 index 0000000..00287ef --- /dev/null +++ b/public/sprites/exit.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/sprites/platform.svg b/public/sprites/platform.svg new file mode 100644 index 0000000..53b0550 --- /dev/null +++ b/public/sprites/platform.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/sprites/player.svg b/public/sprites/player.svg new file mode 100644 index 0000000..59cff84 --- /dev/null +++ b/public/sprites/player.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/sprites/spike-normal.svg b/public/sprites/spike-normal.svg new file mode 100644 index 0000000..a57b6d0 --- /dev/null +++ b/public/sprites/spike-normal.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/sprites/spike-tricky.svg b/public/sprites/spike-tricky.svg new file mode 100644 index 0000000..8561159 --- /dev/null +++ b/public/sprites/spike-tricky.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/entities/Exit.ts b/src/entities/Exit.ts index abdbfe5..3dd7f1e 100644 --- a/src/entities/Exit.ts +++ b/src/entities/Exit.ts @@ -1,14 +1,14 @@ import Phaser from "phaser"; -export class Exit extends Phaser.GameObjects.Rectangle { +export class Exit extends Phaser.GameObjects.Image { + static readonly TEXTURE_KEY = "exit"; static readonly WIDTH = 40; static readonly HEIGHT = 80; - static readonly COLOR = 0xffd700; declare body: Phaser.Physics.Arcade.StaticBody; constructor(scene: Phaser.Scene, x: number, y: number) { - super(scene, x, y, Exit.WIDTH, Exit.HEIGHT, Exit.COLOR); + super(scene, x, y, Exit.TEXTURE_KEY); scene.add.existing(this); scene.physics.add.existing(this, true); } diff --git a/src/entities/ObstaclePlatformDisappearing.ts b/src/entities/ObstaclePlatformDisappearing.ts index c2c495b..0a892aa 100644 --- a/src/entities/ObstaclePlatformDisappearing.ts +++ b/src/entities/ObstaclePlatformDisappearing.ts @@ -1,7 +1,7 @@ import Phaser from "phaser"; import { Platform } from "./Platform"; -export class ObstaclePlatformDisappearing extends Phaser.GameObjects.Rectangle { +export class ObstaclePlatformDisappearing extends Phaser.GameObjects.TileSprite { static readonly TRIGGER_DISTANCE = 110; static readonly FADE_MS = 200; @@ -10,7 +10,7 @@ export class ObstaclePlatformDisappearing extends Phaser.GameObjects.Rectangle { private vanished = false; constructor(scene: Phaser.Scene, x: number, y: number, width: number, height: number) { - super(scene, x, y, width, height, Platform.COLOR); + super(scene, x, y, width, height, Platform.TEXTURE_KEY); scene.add.existing(this); scene.physics.add.existing(this, true); } diff --git a/src/entities/ObstacleSpikeNormal.ts b/src/entities/ObstacleSpikeNormal.ts index 2c2042a..90147c5 100644 --- a/src/entities/ObstacleSpikeNormal.ts +++ b/src/entities/ObstacleSpikeNormal.ts @@ -1,14 +1,14 @@ import Phaser from "phaser"; -export class ObstacleSpikeNormal extends Phaser.GameObjects.Rectangle { +export class ObstacleSpikeNormal extends Phaser.GameObjects.Image { + static readonly TEXTURE_KEY = "spike-normal"; static readonly WIDTH = 40; static readonly HEIGHT = 20; - static readonly COLOR = 0xff3333; declare body: Phaser.Physics.Arcade.StaticBody; constructor(scene: Phaser.Scene, x: number, y: number) { - super(scene, x, y, ObstacleSpikeNormal.WIDTH, ObstacleSpikeNormal.HEIGHT, ObstacleSpikeNormal.COLOR); + super(scene, x, y, ObstacleSpikeNormal.TEXTURE_KEY); scene.add.existing(this); scene.physics.add.existing(this, true); } diff --git a/src/entities/ObstacleSpikeTricky.ts b/src/entities/ObstacleSpikeTricky.ts index 00cdcb2..16d3c7d 100644 --- a/src/entities/ObstacleSpikeTricky.ts +++ b/src/entities/ObstacleSpikeTricky.ts @@ -1,9 +1,9 @@ import Phaser from "phaser"; -export class ObstacleSpikeTricky extends Phaser.GameObjects.Rectangle { +export class ObstacleSpikeTricky extends Phaser.GameObjects.Image { + static readonly TEXTURE_KEY = "spike-tricky"; static readonly WIDTH = 40; static readonly HEIGHT = 20; - static readonly COLOR = 0xff8800; static readonly TRIGGER_DISTANCE = 55; static readonly DISPLACEMENT = 100; @@ -12,7 +12,7 @@ export class ObstacleSpikeTricky extends Phaser.GameObjects.Rectangle { private moved = false; constructor(scene: Phaser.Scene, x: number, y: number) { - super(scene, x, y, ObstacleSpikeTricky.WIDTH, ObstacleSpikeTricky.HEIGHT, ObstacleSpikeTricky.COLOR); + super(scene, x, y, ObstacleSpikeTricky.TEXTURE_KEY); scene.add.existing(this); scene.physics.add.existing(this, true); } diff --git a/src/entities/Platform.ts b/src/entities/Platform.ts index 7a6f942..eeaf93d 100644 --- a/src/entities/Platform.ts +++ b/src/entities/Platform.ts @@ -1,12 +1,12 @@ import Phaser from "phaser"; -export class Platform extends Phaser.GameObjects.Rectangle { - static readonly COLOR = 0x4a7c3a; +export class Platform extends Phaser.GameObjects.TileSprite { + static readonly TEXTURE_KEY = "platform"; declare body: Phaser.Physics.Arcade.StaticBody; constructor(scene: Phaser.Scene, x: number, y: number, width: number, height: number) { - super(scene, x, y, width, height, Platform.COLOR); + super(scene, x, y, width, height, Platform.TEXTURE_KEY); scene.add.existing(this); scene.physics.add.existing(this, true); } diff --git a/src/entities/Player.ts b/src/entities/Player.ts index 0984b8b..dd5a840 100644 --- a/src/entities/Player.ts +++ b/src/entities/Player.ts @@ -1,8 +1,8 @@ import Phaser from "phaser"; -export class Player extends Phaser.GameObjects.Rectangle { +export class Player extends Phaser.GameObjects.Image { + static readonly TEXTURE_KEY = "player"; static readonly SIZE = 32; - static readonly COLOR = 0xff4444; static readonly MOVE_SPEED = 250; static readonly JUMP_VELOCITY = 480; @@ -15,7 +15,7 @@ export class Player extends Phaser.GameObjects.Rectangle { private keySpace: Phaser.Input.Keyboard.Key; constructor(scene: Phaser.Scene, x: number, y: number) { - super(scene, x, y, Player.SIZE, Player.SIZE, Player.COLOR); + super(scene, x, y, Player.TEXTURE_KEY); scene.add.existing(this); scene.physics.add.existing(this); this.body.setCollideWorldBounds(true); diff --git a/src/scenes/GameScene.ts b/src/scenes/GameScene.ts index 8555f6e..25e93c6 100644 --- a/src/scenes/GameScene.ts +++ b/src/scenes/GameScene.ts @@ -32,6 +32,20 @@ export class GameScene extends Phaser.Scene { super({ key: "GameScene" }); } + preload(): void { + this.load.svg(Player.TEXTURE_KEY, "/sprites/player.svg", { width: 32, height: 32 }); + this.load.svg(Exit.TEXTURE_KEY, "/sprites/exit.svg", { width: Exit.WIDTH, height: Exit.HEIGHT }); + this.load.svg(Platform.TEXTURE_KEY, "/sprites/platform.svg", { width: 40, height: 40 }); + this.load.svg(ObstacleSpikeNormal.TEXTURE_KEY, "/sprites/spike-normal.svg", { + width: ObstacleSpikeNormal.WIDTH, + height: ObstacleSpikeNormal.HEIGHT, + }); + this.load.svg(ObstacleSpikeTricky.TEXTURE_KEY, "/sprites/spike-tricky.svg", { + width: ObstacleSpikeTricky.WIDTH, + height: ObstacleSpikeTricky.HEIGHT, + }); + } + init(data: SceneData): void { this.levelIndex = data.levelIndex ?? 0; this.levelCompleted = false;