Skip to content

Commit 27cb434

Browse files
RobousteRobouste
committed
- animated tiles !
1 parent 015e93a commit 27cb434

File tree

14 files changed

+1795
-433
lines changed

14 files changed

+1795
-433
lines changed

‎esbuild/build.prod.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import clean from "esbuild-plugin-clean";
33
import copy from "esbuild-plugin-copy";
44
import inlineImage from "esbuild-plugin-inline-image";
55

6+
const pluginDirectory = "./public/assets/plugins";
7+
68
const builder = async () => {
79
await build({
810
entryPoints: ["./src/main.ts"],

‎package-lock.json‎

Lines changed: 8 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"homepage": "https://github.com/phaserjs/template-esbuild-ts#readme",
2121
"license": "MIT",
2222
"dependencies": {
23-
"phaser": "^3.87.0"
23+
"phaser": "^3.87.0",
24+
"phaser-animated-tiles": "^2.0.2"
2425
},
2526
"devDependencies": {
2627
"@jgoz/esbuild-plugin-livereload": "^2.0.5",

‎public/assets/tilemaps/forest-map.json‎

Lines changed: 1592 additions & 368 deletions
Large diffs are not rendered by default.

‎src/configs/assets.config.ts‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import AnimatedTiles from "phaser-animated-tiles/dist/AnimatedTiles.js";
12
import {
23
BackgroundSound,
34
ImageTag,
5+
PluginTag,
46
SfxTag,
57
SpritesheetTag,
68
TilemapTag,
@@ -9,12 +11,15 @@ import {
911
import {
1012
BgsConfig,
1113
ImageConfig,
14+
PluginConfig,
1215
SfxConfig,
1316
SpritesheetConfig,
1417
TileMapConfig,
1518
TilesetConfig,
1619
} from "../types";
1720

21+
type FuckYou = any;
22+
1823
export class AssetsConfig {
1924
public static get images(): ImageConfig[] {
2025
return [
@@ -53,7 +58,15 @@ export class AssetsConfig {
5358
},
5459
{
5560
tag: TilesetTag.FOREST_WATER_ANIMATION,
56-
url: "tilemaps/tilesets/animations/water.png",
61+
url: "tilemaps/tilesets/animations/extruded/water.png",
62+
},
63+
{
64+
tag: TilesetTag.FOREST_TREE_BRIGHT_3_ANIMATION,
65+
url: "tilemaps/tilesets/animations/extruded/tree_bright3.png",
66+
},
67+
{
68+
tag: TilesetTag.FOREST_TREE_BRIGHT_4_ANIMATION,
69+
url: "tilemaps/tilesets/animations/extruded/tree_bright4.png",
5770
},
5871
];
5972
}
@@ -109,4 +122,15 @@ export class AssetsConfig {
109122
},
110123
];
111124
}
125+
126+
public static get plugins(): PluginConfig[] {
127+
return [
128+
{
129+
tag: PluginTag.ANIMATED_TILES,
130+
url: AnimatedTiles as FuckYou,
131+
systemKey: "animatedTiles",
132+
sceneKey: "animatedTiles",
133+
},
134+
];
135+
}
112136
}

‎src/global.d.ts‎

Lines changed: 74 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,94 @@
11
// images
2-
declare module '*.apng' {
3-
const src: string
4-
export default src
2+
declare module "*.apng" {
3+
const src: string;
4+
export default src;
55
}
6-
declare module '*.png' {
7-
const src: string
8-
export default src
6+
declare module "*.png" {
7+
const src: string;
8+
export default src;
99
}
10-
declare module '*.jpg' {
11-
const src: string
12-
export default src
10+
declare module "*.jpg" {
11+
const src: string;
12+
export default src;
1313
}
14-
declare module '*.jpeg' {
15-
const src: string
16-
export default src
14+
declare module "*.jpeg" {
15+
const src: string;
16+
export default src;
1717
}
18-
declare module '*.jfif' {
19-
const src: string
20-
export default src
18+
declare module "*.jfif" {
19+
const src: string;
20+
export default src;
2121
}
22-
declare module '*.pjpeg' {
23-
const src: string
24-
export default src
22+
declare module "*.pjpeg" {
23+
const src: string;
24+
export default src;
2525
}
26-
declare module '*.pjp' {
27-
const src: string
28-
export default src
26+
declare module "*.pjp" {
27+
const src: string;
28+
export default src;
2929
}
30-
declare module '*.gif' {
31-
const src: string
32-
export default src
30+
declare module "*.gif" {
31+
const src: string;
32+
export default src;
3333
}
34-
declare module '*.svg' {
35-
const src: string
36-
export default src
34+
declare module "*.svg" {
35+
const src: string;
36+
export default src;
3737
}
38-
declare module '*.ico' {
39-
const src: string
40-
export default src
38+
declare module "*.ico" {
39+
const src: string;
40+
export default src;
4141
}
42-
declare module '*.webp' {
43-
const src: string
44-
export default src
42+
declare module "*.webp" {
43+
const src: string;
44+
export default src;
4545
}
46-
declare module '*.avif' {
47-
const src: string
48-
export default src
46+
declare module "*.avif" {
47+
const src: string;
48+
export default src;
4949
}
5050

5151
// Shaders
52-
declare module '*.frag' {
53-
const src: string
54-
export default src
52+
declare module "*.frag" {
53+
const src: string;
54+
export default src;
5555
}
56-
declare module '*.vert' {
57-
const src: string
58-
export default src
56+
declare module "*.vert" {
57+
const src: string;
58+
export default src;
5959
}
60-
declare module '*.glsl' {
61-
const src: string
62-
export default src
60+
declare module "*.glsl" {
61+
const src: string;
62+
export default src;
6363
}
64-
declare module '*.vs' {
65-
const src: string
66-
export default src
64+
declare module "*.vs" {
65+
const src: string;
66+
export default src;
6767
}
68-
declare module '*.fs' {
69-
const src: string
70-
export default src
68+
declare module "*.fs" {
69+
const src: string;
70+
export default src;
71+
}
72+
73+
declare module "phaser-animated-tiles/dist/AnimatedTiles.js" {
74+
export interface AnimatedTilesInterface {
75+
init: (map: Phaser.Tilemaps.Tilemap) => void;
76+
setRate: (rate: number) => void;
77+
resetRates: () => void;
78+
resume: () => void;
79+
pause: () => void;
80+
postUpdate: (time: number, delta: number) => void;
81+
shutdown: () => void;
82+
}
83+
84+
const AnimatedTiles: AnimatedTilesInterface;
85+
export default AnimatedTiles;
86+
}
87+
88+
declare module "phaser" {
89+
namespace Scenes {
90+
interface Systems {
91+
animatedTiles: AnimatedTilesInterface;
92+
}
93+
}
7194
}

‎src/helpers/systems.helper.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Tilemap } from "../phaser-aliases";
2+
3+
interface AnimatedTiles {
4+
init: (map: Tilemap) => void;
5+
setRate: (rate: number) => void;
6+
resetRates: () => void;
7+
resume: () => void;
8+
pause: () => void;
9+
postUpdate: (time: number, delta: number) => void;
10+
shutdown: () => void;
11+
}
12+
13+
export class Systems extends Phaser.Scenes.Systems {
14+
public animatedTiles: AnimatedTiles | undefined;
15+
}

‎src/phaser-aliases/phaser.classes.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export class ArcadeSprite extends Phaser.Physics.Arcade.Sprite {}
22
export class ArcadeBody extends Phaser.Physics.Arcade.Body {}
3-
export class TileMapsTile extends Phaser.Tilemaps.Tile {}
3+
export class Tile extends Phaser.Tilemaps.Tile {}
4+
export class Tilemap extends Phaser.Tilemaps.Tilemap {}
45
export class GameObject extends Phaser.GameObjects.GameObject {}
56
export class Sprite extends Phaser.GameObjects.Sprite {}

‎src/scenes/game.scene.ts‎

Lines changed: 62 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Scene } from "phaser";
2+
import { AssetsConfig } from "../configs";
23
import { Hero } from "../game-objects";
34
import { Sprite } from "../phaser-aliases";
45
import {
@@ -31,11 +32,24 @@ export class Game extends Scene {
3132
super(SceneTag.GAME);
3233
}
3334

35+
public preload(): void {
36+
AssetsConfig.plugins.forEach((config) =>
37+
this.load.scenePlugin(
38+
config.tag,
39+
config.url,
40+
config.systemKey,
41+
config.sceneKey
42+
)
43+
);
44+
}
45+
3446
public create(): void {
3547
if (!this.input.keyboard) {
3648
throw Error("Keyboard plugin is not available");
3749
}
3850

51+
console.log("sys", this.sys);
52+
3953
this.sound.play(BackgroundSound.RIVER_FLOWING_INSECTS, {
4054
loop: true,
4155
});
@@ -92,27 +106,53 @@ export class Game extends Scene {
92106
}
93107

94108
private generateMap(): void {
95-
const map = this.make.tilemap({ key: TilemapTag.FOREST });
109+
const tilemap = this.make.tilemap({ key: TilemapTag.FOREST });
96110

97-
const baseTileset = map.addTilesetImage(
111+
const baseTileset = tilemap.addTilesetImage(
98112
"base-tiles",
99113
TilesetTag.FOREST_BASE,
100114
32,
101115
32,
102116
1,
103117
2
104118
);
105-
const decorativeTileset = map.addTilesetImage(
119+
const decorativeTileset = tilemap.addTilesetImage(
106120
"decorative-tiles",
107121
TilesetTag.FOREST_DECORATIVE,
108122
32,
109123
32,
110124
1,
111125
2
112126
);
127+
const waterAnimationTileset = tilemap.addTilesetImage(
128+
"water-animation",
129+
TilesetTag.FOREST_WATER_ANIMATION,
130+
32,
131+
32,
132+
1,
133+
2
134+
);
135+
136+
const treeBright3AnimationTileset = tilemap.addTilesetImage(
137+
"tree_bright3",
138+
TilesetTag.FOREST_TREE_BRIGHT_3_ANIMATION,
139+
32,
140+
32,
141+
1,
142+
2
143+
);
144+
145+
const treeBright4AnimationTileset = tilemap.addTilesetImage(
146+
"tree_bright4",
147+
TilesetTag.FOREST_TREE_BRIGHT_4_ANIMATION,
148+
32,
149+
32,
150+
1,
151+
2
152+
);
113153

114154
this._colliderGroup = this.physics.add.staticGroup();
115-
const colliders = map.createFromObjects("Colliders", {
155+
const colliders = tilemap.createFromObjects("Colliders", {
116156
type: "collider",
117157
classType: Sprite,
118158
});
@@ -125,7 +165,7 @@ export class Game extends Scene {
125165
collider.alpha = 0;
126166
});
127167

128-
const positions = map.createFromObjects("Positions", {
168+
const positions = tilemap.createFromObjects("Positions", {
129169
name: "hero",
130170
});
131171

@@ -156,13 +196,26 @@ export class Game extends Scene {
156196
}
157197
);
158198

159-
if (!baseTileset || !decorativeTileset) {
199+
if (
200+
!baseTileset ||
201+
!decorativeTileset ||
202+
!waterAnimationTileset ||
203+
!treeBright3AnimationTileset ||
204+
!treeBright4AnimationTileset
205+
) {
160206
throw Error("Tileset not found");
161207
}
162208

163-
map.createLayer("background", baseTileset);
164-
map.createLayer("foreground", baseTileset);
165-
map.createLayer("decorations", [baseTileset, decorativeTileset]);
209+
tilemap.createLayer("background", baseTileset);
210+
tilemap.createLayer("foreground", [baseTileset, waterAnimationTileset]);
211+
tilemap.createLayer("decorations", [
212+
baseTileset,
213+
decorativeTileset,
214+
treeBright3AnimationTileset,
215+
treeBright4AnimationTileset,
216+
]);
217+
218+
this.sys.animatedTiles.init(tilemap);
166219
}
167220

168221
private createPlayer(x: number, y: number): void {

0 commit comments

Comments
 (0)