Skip to content

Commit d0efead

Browse files
RobousteRobouste
committed
- improve (?) map
1 parent 63add75 commit d0efead

File tree

8 files changed

+454
-57
lines changed

8 files changed

+454
-57
lines changed

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

Lines changed: 330 additions & 20 deletions
Large diffs are not rendered by default.

‎src/configs/assets.config.ts‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
import AnimatedTiles from "phaser-animated-tiles/dist/AnimatedTiles.js";
2-
import {
3-
BackgroundSound,
4-
ImageTag,
5-
PluginTag,
6-
SfxTag,
7-
SpritesheetTag,
8-
TilemapTag,
9-
TilesetTag,
10-
} from "../tags";
2+
import { BackgroundSound, ImageTag, PluginTag, SfxTag, SpritesheetTag, TilemapTag, TilesetTag } from "../tags";
113
import {
124
BgsConfig,
135
ImageConfig,
@@ -68,6 +60,30 @@ export class AssetsConfig {
6860
tag: TilesetTag.FOREST_TREE_BRIGHT_4_ANIMATION,
6961
url: "tilemaps/tilesets/animations/extruded/tree_bright4.png",
7062
},
63+
{
64+
tag: TilesetTag.FOREST_GRASS_1_ANIMATION,
65+
url: "tilemaps/tilesets/animations/extruded/grass1.png",
66+
},
67+
{
68+
tag: TilesetTag.FOREST_GRASS_2_ANIMATION,
69+
url: "tilemaps/tilesets/animations/extruded/grass2.png",
70+
},
71+
{
72+
tag: TilesetTag.FOREST_GRASS_3_ANIMATION,
73+
url: "tilemaps/tilesets/animations/extruded/grass3.png",
74+
},
75+
{
76+
tag: TilesetTag.FOREST_PLANT_1_ANIMATION,
77+
url: "tilemaps/tilesets/animations/extruded/plant1.png",
78+
},
79+
{
80+
tag: TilesetTag.FOREST_PLANT_2_ANIMATION,
81+
url: "tilemaps/tilesets/animations/extruded/plant2.png",
82+
},
83+
{
84+
tag: TilesetTag.FOREST_PLANT_3_ANIMATION,
85+
url: "tilemaps/tilesets/animations/extruded/plant3.png",
86+
},
7187
];
7288
}
7389

‎src/configs/depth.config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export const depthsConfig = {
2+
hero: 50,
3+
background: 0,
4+
map: 1,
5+
foreground: 100,
6+
};

‎src/configs/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './assets.config';
2+
export * from './depth.config';

‎src/game-objects/hero.game-object.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Scene } from "phaser";
2+
import { depthsConfig } from "../configs";
23
import { GameHelper } from "../helpers/game.helper";
34
import { ArcadeBody, ArcadeSprite } from "../phaser-aliases";
45
import { AnimationTag, ImageTag, SfxTag, SpritesheetTag } from "../tags";
@@ -31,7 +32,7 @@ export class Hero extends Phaser.GameObjects.Sprite {
3132
constructor(scene: Scene, x: number, y: number) {
3233
super(scene, x, y, SpritesheetTag.HERO);
3334

34-
this.setScale(0.5).setDepth(2);
35+
this.setScale(0.5).setDepth(depthsConfig.hero);
3536

3637
if (!this.scene.input.keyboard) {
3738
throw Error("Keyboard plugin is not available");

‎src/levels/1-forest.level.ts‎

Lines changed: 82 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Scene } from "phaser";
2+
import { depthsConfig } from "../configs";
23
import { Hero } from "../game-objects";
34
import { GameHelper } from "../helpers";
45
import { Sprite, Tilemap, Tileset } from "../phaser-aliases";
@@ -13,9 +14,36 @@ import {
1314
TilesetTag,
1415
} from "../tags";
1516

16-
const tilesetNames = ["base-tiles", "decorative-tiles", "water-animation", "tree_bright3", "tree_bright4"];
17+
type ValueOf<T> = T[keyof T];
18+
19+
type NonEmptyArray<T> = [T, ...T[]];
20+
21+
type MustInclude<T, U extends T[]> = [T] extends [ValueOf<U>] ? U : never;
22+
23+
export const unionTypeToArray = <T>() => {
24+
return <U extends NonEmptyArray<T>>(...elements: MustInclude<T, U>) => elements;
25+
};
26+
27+
const tilesetNames = [
28+
"base-tiles",
29+
"decorative-tiles",
30+
"water-animation",
31+
"tree_bright3",
32+
"tree_bright4",
33+
"grass1",
34+
"grass2",
35+
"grass3",
36+
"plant1",
37+
"plant2",
38+
"plant3",
39+
] as const;
1740
type TilesetName = (typeof tilesetNames)[number];
1841

42+
type LayerConfig = {
43+
tilesets: TilesetName[];
44+
depth: number;
45+
};
46+
1947
export class ForestLevel {
2048
private get _physics(): Phaser.Physics.Arcade.ArcadePhysics {
2149
return this._scene.physics;
@@ -26,17 +54,47 @@ export class ForestLevel {
2654
private _colliderGroup: Phaser.Physics.Arcade.StaticGroup;
2755
private _sceneWidth = 3200;
2856
private _map: Tilemap;
29-
private _layersConfig: Record<TilemapLayerTag, TilesetName[]> = {
30-
[TilemapLayerTag.BACKGROUND]: ["base-tiles"],
31-
[TilemapLayerTag.FOREGROUND]: ["base-tiles", "water-animation"],
32-
[TilemapLayerTag.DECORATIONS]: ["base-tiles", "decorative-tiles", "tree_bright3", "tree_bright4"],
57+
private _layersConfig: Record<TilemapLayerTag, LayerConfig> = {
58+
[TilemapLayerTag.BACKGROUND]: {
59+
tilesets: ["base-tiles"],
60+
depth: depthsConfig.background,
61+
},
62+
[TilemapLayerTag.MAP]: {
63+
tilesets: ["base-tiles", "water-animation"],
64+
depth: depthsConfig.background,
65+
},
66+
[TilemapLayerTag.DECORATIONS]: {
67+
tilesets: [
68+
"base-tiles",
69+
"decorative-tiles",
70+
"tree_bright3",
71+
"tree_bright4",
72+
"grass1",
73+
"grass2",
74+
"grass3",
75+
"plant1",
76+
"plant2",
77+
"plant3",
78+
],
79+
depth: depthsConfig.background,
80+
},
81+
[TilemapLayerTag.FOREGROUND]: {
82+
tilesets: ["base-tiles", "decorative-tiles"],
83+
depth: depthsConfig.foreground,
84+
},
3385
};
3486
private _tilesetsConfig: Record<TilesetName, TilesetTag> = {
3587
"base-tiles": TilesetTag.FOREST_BASE,
3688
"decorative-tiles": TilesetTag.FOREST_DECORATIVE,
3789
"water-animation": TilesetTag.FOREST_WATER_ANIMATION,
3890
tree_bright3: TilesetTag.FOREST_TREE_BRIGHT_3_ANIMATION,
3991
tree_bright4: TilesetTag.FOREST_TREE_BRIGHT_4_ANIMATION,
92+
grass1: TilesetTag.FOREST_GRASS_1_ANIMATION,
93+
grass2: TilesetTag.FOREST_GRASS_2_ANIMATION,
94+
grass3: TilesetTag.FOREST_GRASS_3_ANIMATION,
95+
plant1: TilesetTag.FOREST_PLANT_1_ANIMATION,
96+
plant2: TilesetTag.FOREST_PLANT_2_ANIMATION,
97+
plant3: TilesetTag.FOREST_PLANT_3_ANIMATION,
4098
};
4199

42100
constructor(public hero: Hero, private _scene: Scene) {
@@ -78,31 +136,29 @@ export class ForestLevel {
78136

79137
private generateMap(): void {
80138
// assign each tileset to its name.
81-
const tilesetsMap: Record<TilesetName, Tileset> = tilesetNames.reduce<Record<TilesetName, Tileset>>(
82-
(acc, tilesetName) => {
83-
const tileset = this._map.addTilesetImage(tilesetName, this._tilesetsConfig[tilesetName], 32, 32, 1, 2);
84-
85-
if (!tileset) {
86-
throw Error("Tileset not found");
87-
}
88-
acc[tilesetName] = tileset;
89-
return acc;
90-
},
91-
{}
92-
);
93-
94-
this._map.createLayer(TilemapLayerTag.BACKGROUND, this.getTilesetForLayer(TilemapLayerTag.BACKGROUND, tilesetsMap));
95-
this._map.createLayer(TilemapLayerTag.FOREGROUND, this.getTilesetForLayer(TilemapLayerTag.FOREGROUND, tilesetsMap));
96-
this._map.createLayer(
97-
TilemapLayerTag.DECORATIONS,
98-
this.getTilesetForLayer(TilemapLayerTag.DECORATIONS, tilesetsMap)
99-
);
139+
const tilesetsMap = tilesetNames.reduce((acc, tilesetName) => {
140+
const tileset = this._map.addTilesetImage(tilesetName, this._tilesetsConfig[tilesetName], 32, 32, 1, 2);
141+
142+
if (!tileset) {
143+
throw Error("Tileset not found");
144+
}
145+
146+
acc[tilesetName] = tileset;
147+
return acc;
148+
}, {} as Record<TilesetName, Tileset>);
149+
150+
Object.keys(this._layersConfig)
151+
.filter((key): key is TilemapLayerTag => key in this._layersConfig)
152+
.forEach((tag) => {
153+
const layer = this._map.createLayer(tag, this.getTilesetNamesForLayer(tag, tilesetsMap));
154+
layer?.setDepth(this._layersConfig[tag].depth);
155+
});
100156

101157
this._scene.sys.animatedTiles.init(this._map);
102158
}
103159

104-
private getTilesetForLayer(layer: TilemapLayerTag, tilesetsMap: Record<TilesetName, Tileset>): Tileset[] {
105-
return this._layersConfig[layer].map((tilesetName) => tilesetsMap[tilesetName]);
160+
private getTilesetNamesForLayer(layer: TilemapLayerTag, tilesetsMap: Record<TilesetName, Tileset>): Tileset[] {
161+
return this._layersConfig[layer].tilesets.map((tilesetName) => tilesetsMap[tilesetName]);
106162
}
107163

108164
private addColliders(): void {

‎src/tags/tilemap.tag.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ export enum TilemapTag {
44

55
export enum TilemapLayerTag {
66
BACKGROUND = "background",
7-
FOREGROUND = "foreground",
7+
MAP = "map",
88
DECORATIONS = "decorations",
9+
FOREGROUND = "foreground",
910
}
1011

1112
export enum TilemapObjectsTag {

‎src/tags/tileset.tag.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,10 @@ export enum TilesetTag {
44
FOREST_WATER_ANIMATION = "forest-water-animation_tileset_tag",
55
FOREST_TREE_BRIGHT_3_ANIMATION = "forest-tree-bright-3-animation_tileset_tag",
66
FOREST_TREE_BRIGHT_4_ANIMATION = "forest-tree-bright-4-animation_tileset_tag",
7+
FOREST_GRASS_1_ANIMATION = "forest-grass-1-animation_tileset_tag",
8+
FOREST_GRASS_2_ANIMATION = "forest-grass-2-animation_tileset_tag",
9+
FOREST_GRASS_3_ANIMATION = "forest-grass-3-animation_tileset_tag",
10+
FOREST_PLANT_1_ANIMATION = "forest-plant-1-animation_tileset_tag",
11+
FOREST_PLANT_2_ANIMATION = "forest-plant-2-animation_tileset_tag",
12+
FOREST_PLANT_3_ANIMATION = "forest-plant-3-animation_tileset_tag",
713
}

0 commit comments

Comments
 (0)