games/trickster-tiles
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sprites

Browse Source
This commit is contained in:
Zsolt Tasnadi
2026-05-15 20:35:41 +02:00
parent 1346dba937
commit 1b427c8679
12 changed files with 77 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/sprites/exit.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 80" shape-rendering="crispEdges">
<rect width="40" height="80" fill="#aa7700"/>
<rect x="4" y="6" width="32" height="74" fill="#ffd700"/>
<rect x="8" y="10" width="6" height="66" fill="#ffea66"/>
<rect x="6" y="6" width="28" height="4" fill="#ffae00"/>
<rect x="28" y="42" width="3" height="6" fill="#5a3500"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 384 B

12
public/sprites/platform.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" shape-rendering="crispEdges">
<rect width="40" height="40" fill="#6b4226"/>
<rect width="40" height="8" fill="#4a7c3a"/>
<rect width="40" height="2" fill="#65a050"/>
<rect x="6" y="2" width="2" height="4" fill="#3a6028"/>
<rect x="18" y="2" width="2" height="4" fill="#3a6028"/>
<rect x="30" y="2" width="2" height="4" fill="#3a6028"/>
<rect x="6" y="14" width="3" height="3" fill="#4d2f1c"/>
<rect x="22" y="20" width="3" height="3" fill="#4d2f1c"/>
<rect x="14" y="28" width="3" height="3" fill="#4d2f1c"/>
<rect x="30" y="32" width="3" height="3" fill="#4d2f1c"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 654 B

12
public/sprites/player.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" shape-rendering="crispEdges">
<rect width="32" height="32" fill="#ff4444"/>
<rect x="0" y="0" width="32" height="2" fill="#cc2222"/>
<rect x="0" y="30" width="32" height="2" fill="#cc2222"/>
<rect x="0" y="0" width="2" height="32" fill="#cc2222"/>
<rect x="30" y="0" width="2" height="32" fill="#cc2222"/>
<rect x="8" y="10" width="5" height="6" fill="#ffffff"/>
<rect x="19" y="10" width="5" height="6" fill="#ffffff"/>
<rect x="10" y="12" width="2" height="3" fill="#000000"/>
<rect x="21" y="12" width="2" height="3" fill="#000000"/>
<rect x="10" y="22" width="12" height="2" fill="#aa1111"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 683 B

8
public/sprites/spike-normal.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20" shape-rendering="crispEdges">
<polygon points="0,20 7,2 13,20" fill="#ff3333"/>
<polygon points="13,20 20,2 27,20" fill="#cc2222"/>
<polygon points="27,20 33,2 40,20" fill="#ff3333"/>
<polygon points="3,18 7,4 9,18" fill="#ff6666"/>
<polygon points="16,18 20,4 22,18" fill="#ff4444"/>
<polygon points="29,18 33,4 35,18" fill="#ff6666"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 416 B

7
public/sprites/spike-tricky.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 20" shape-rendering="crispEdges">
<polygon points="0,20 7,2 13,20" fill="#ff8800"/>
<polygon points="13,20 20,2 27,20" fill="#cc6600"/>
<polygon points="27,20 33,2 40,20" fill="#ff8800"/>
<rect x="18" y="11" width="4" height="4" fill="#ffffff"/>
<rect x="19" y="12" width="2" height="2" fill="#000000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

6
src/entities/Exit.ts
View File

@@ -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);
}

4
src/entities/ObstaclePlatformDisappearing.ts
View File

@@ -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);
}

6
src/entities/ObstacleSpikeNormal.ts
View File

@@ -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);
}

6
src/entities/ObstacleSpikeTricky.ts
View File

@@ -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);
}

6
src/entities/Platform.ts
View File

@@ -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);
}

6
src/entities/Player.ts
View File

@@ -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);

14
src/scenes/GameScene.ts
View File

@@ -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;