Skip to content

Commit

Permalink
changed tilemap world from csv to json with multilayer support
Browse files Browse the repository at this point in the history
  • Loading branch information
@wartoshika
wartoshika committed Jul 25, 2017
1 parent a06cf1f commit edbbeca
Show file tree
Hide file tree
Showing 10 changed files with 156 additions and 129 deletions.
5 changes: 2 additions & 3 deletions example/rpg/MyAwesomeRpgGame.ts
View file
Expand Up @@ -46,8 +46,7 @@ class MyAwesomeRpgGame extends Client {
registry.add('TileMap', {
name: 'level1',
path: 'example/rpg/asset/image/world1.png',
dimension: [32, 32],
layerCount: 2,
worldUrl: 'example/rpg/asset/world/level1.json',
tileCollision: [
137, 138, 139, 160, 161, 163, 164, 165, 166, 167, 168,
208, 209, 210
Expand All @@ -66,7 +65,7 @@ class MyAwesomeRpgGame extends Client {
this.link = new Link();

// create game objects
const camera = new OrthogonalCamera(1.5);
const camera = new OrthogonalCamera(1.25);
const world = new Level1('level1');

// add global world things
Expand Down
30 changes: 0 additions & 30 deletions example/rpg/asset/image/world1.png.0.csv
View file

This file was deleted.

30 changes: 0 additions & 30 deletions example/rpg/asset/image/world1.png.1.csv
View file

This file was deleted.

39 changes: 39 additions & 0 deletions example/rpg/asset/world/level1.json
View file
@@ -0,0 +1,39 @@
{ "height":30,
"layers":[
{
"data":[178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 50, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 194, 194, 194, 194, 194, 194, 178, 178, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 179, 209, 209, 209, 209, 209, 209, 193, 178, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 179, 164, 164, 164, 164, 164, 164, 164, 177, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 179, 164, 164, 164, 164, 164, 164, 164, 177, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 179, 164, 164, 164, 164, 164, 164, 164, 177, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 163, 164, 164, 164, 164, 164, 164, 177, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 179, 164, 164, 164, 164, 164, 164, 177, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 179, 164, 164, 164, 164, 164, 164, 177, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 179, 164, 164, 164, 164, 164, 164, 177, 178, 178, 17, 18, 19, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 179, 164, 164, 164, 164, 164, 164, 177, 178, 178, 17, 18, 65, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 178, 178, 179, 164, 164, 164, 164, 164, 164, 177, 178, 178, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 178, 178, 179, 164, 164, 164, 164, 164, 164, 177, 178, 178, 33, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 34, 178, 178, 179, 164, 164, 164, 164, 164, 164, 177, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 162, 164, 164, 164, 164, 164, 177, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 179, 164, 164, 164, 164, 164, 177, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 179, 164, 164, 164, 164, 164, 177, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 179, 164, 164, 164, 164, 164, 177, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 163, 164, 164, 164, 161, 177, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178, 178],
"height":30,
"name":"Kachelebene 1",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":30,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 225, 226, 227, 228, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 241, 242, 243, 244, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 165, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 138, 139, 0, 0, 0, 0, 0, 0, 0, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 168, 154, 155, 169, 0, 0, 0, 0, 0, 0, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 168, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":30,
"name":"Kachelebene 2",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":30,
"x":0,
"y":0
}],
"nextobjectid":1,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.0.2",
"tileheight":32,
"tilesets":[
{
"firstgid":1,
"source":"..\/world1.tsx"
}],
"tilewidth":32,
"type":"map",
"version":1,
"width":30
}
4 changes: 2 additions & 2 deletions src/client/Client.ts
View file
Expand Up @@ -58,9 +58,9 @@ export abstract class Client extends QhunEngineBootstrap {
this.update(this.gameInstance, this.inputInstance);

// run collision detection
//CollisionDetection.entitiesWithWorld(
// CollisionDetection.entitiesWithWorld(
// this.renderer.getWorld()
//);
// );

// render the game
if (typeof this.renderer.preRender === 'function') this.renderer.preRender();
Expand Down
2 changes: 1 addition & 1 deletion src/client/asset/AbstractAsset.ts
View file
Expand Up @@ -21,7 +21,7 @@ export abstract class AbstractAsset implements Asset {
constructor(
protected name?: string,
protected path?: string,
protected type?: AssetType,
protected readonly type?: AssetType,
protected data?: AssetDataType
) { }

Expand Down
86 changes: 68 additions & 18 deletions src/client/asset/TileMap.ts
View file
Expand Up @@ -14,42 +14,62 @@ import { Dimension } from '../../shared';
export interface InlineTileMapAsset extends InlineAsset {

/**
* the dimension of each tile
* the url of the world json file
*/
dimension: number[];

/**
* the amount of layers this tilemap has
* @default 1
*/
layerCount?: number;
worldUrl: string;

/**
* set the tile numbers to collide with
*/
tileCollision?: number[];
}

interface JsonWorld {

width?: number;
height?: number;
tilewidth?: number;
tileheight?: number;
layers?: TileJsonLayer[];
}

interface TileJsonLayer {

data?: number[];
height?: number;
name?: string;
opacity?: number;
type?: string;
visible?: boolean;
width?: number;
x?: number;
y?: number;
}

/**
* an asset class to load a tilemap as world
*/
export class TileMap extends AbstractAsset {

public worldWidth: number = 0;
public worldHeight: number = 0;

/**
* the tile numbers that collides with entities derived from CollidableEntity
*/
private tileCollision: number[] = [];

/**
* the attributes of the json world file
*/
private width = 0;
private height = 0;
private tilewidth = 0;
private tileheight = 0;
private layers: TileJsonLayer[] = [];

constructor(
name?: string,
path?: string,
data?: AssetDataType,
public map?: string[],
public dimension?: number[],
public layerCount?: number
protected worldUrl?: string
) {

super(name, path, AssetType.TileMap, data);
Expand All @@ -60,15 +80,45 @@ export class TileMap extends AbstractAsset {
*/
public getLayerCount(): number {

return this.layerCount || 1;
return this.layers.length;
}

/**
* get the height and width as dimension instance
*/
public getDimension(): Dimension {

return new Dimension(this.dimension[0], this.dimension[1]);
return new Dimension(this.tilewidth, this.tileheight);
}

/**
* get the path to the world file
*/
public getWorldUrl(): string {

return this.worldUrl;
}

/**
* get the world layers
*/
public getWorld(): TileJsonLayer[] {

return this.layers;
}

/**
* override the wold of the tilemap
*
* @param world the world object to set
*/
public setWorld(world: JsonWorld): void {

// take all attributes
Object.keys(world).forEach((key) => {

(this as any)[key] = (world as any)[key];
});
}

/**
Expand All @@ -78,8 +128,8 @@ export class TileMap extends AbstractAsset {

// multiply with the tile width and height
return new Dimension(
this.worldWidth,
this.worldHeight
this.width,
this.height
);
}

Expand Down

0 comments on commit edbbeca

Please sign in to comment.