22 Jan 04:48

4a3022f

> npm install @excaliburjs/plugin-tiled

Features and Fixes

feat: [#283] Implements Tiled Data Components by @eonarheim in #287
fix: [#285] Use Implicit Tiled layer order to default z index by @eonarheim in #290
feature: Tiled names now are added as excalibur Entity names

Dependency Updates

chore: Update dependency webpack to v5.64.1 by @renovate in #265
chore: Update dependency karma to v6.3.9 by @renovate in #266
chore: Update dependency typescript to v4.5.2 by @renovate in #267
chore: Update dependency webpack to v5.64.2 by @renovate in #268
chore: Update dependency webpack to v5.64.3 by @renovate in #269
chore: Update dependency webpack to v5.64.4 by @renovate in #270
chore: Update dependency webpack-dev-server to v4.6.0 by @renovate in #271
chore: Update dependency webpack to v5.65.0 by @renovate in #272
chore: Update dependency typescript to v4.5.3 by @renovate in #273
chore: Update dependency typescript to v4.5.4 by @renovate in #274
chore: Update dependency webpack-dev-server to v4.7.0 by @renovate in #275
chore: Update dependency webpack-dev-server to v4.7.1 by @renovate in #276
chore: Update dependency @types/pako to v1.0.3 by @renovate in #277
chore: Update dependency webpack-dev-server to v4.7.2 by @renovate in #278
chore: Update dependency jasmine-core to v3.99.0 by @renovate in #279
chore: Update dependency @types/jasmine to v3.10.3 by @renovate in #281
chore: Update dependency karma to v6.3.10 by @renovate in #284
chore: Upgrade npm & node by @eonarheim in #286
chore: Update Node.js to v16.13.2 by @renovate in #288
chore: Update dependency webpack-dev-server to v4.7.3 by @renovate in #289
chore: Update dependency webpack to v5.66.0 by @renovate in #291
chore: Update dependency karma to v6.3.11 by @renovate in #292
chore: Update dependency jasmine-core to v4 by @renovate in #280
chore: Update dependency typescript to v4.5.5 by @renovate in #293
chore: Update dependency webpack to v5.67.0 by @renovate in #294
chore: Roll back dependency excalibur to 0.25.1 by @renovate in #295

Thanks to all the contributors this iteration

Full Changelog: v0.25.1...v0.25.2

Contributors

eonarheim, JumpLink, and 2 other contributors

Assets 2

14 Nov 22:38

eonarheim

v0.25.1

700b6c7

@excaliburjs/[email protected]

> npm install @excaliburjs/plugin-tiled

Fixes

fix: [#254] Find the first excalibur camera regardless of file order
perf: Reduce generated colliders by applying to the specific solid tilemap layer

Features

feat: Add tile map layer support with support of the z-index property by @JumpLink in #261

Dependency Updates

chore: Update dependency webpack to v5.56.1 by @renovate in #228
chore: Update dependency webpack-dev-server to v4.3.1 by @renovate in #229
chore: Update dependency webpack to v5.57.1 by @renovate in #230
chore: Update dependency webpack-cli to v4.9.0 by @renovate in #231
chore: Update dependency webpack to v5.58.0 by @renovate in #232
chore: Update dependency webpack to v5.58.1 by @renovate in #233
chore: Update dependency webpack-bundle-analyzer to v4.5.0 by @renovate in #234
chore: Update dependency typescript to v4.4.4 by @renovate in #235
chore: Update dependency webpack to v5.58.2 by @renovate in #236
chore: Update dependency @types/webpack-env to v1.16.3 by @renovate in #237
chore: Update dependency jasmine-core to v3.10.0 by @renovate in #238
chore: Update dependency @types/jasmine to v3.10.0 by @renovate in #239
chore: Update dependency webpack-cli to v4.9.1 by @renovate in #240
chore: Update dependency webpack to v5.59.0 by @renovate in #241
chore: Update dependency karma to v6.3.5 by @renovate in #242
chore: Update dependency webpack to v5.59.1 by @renovate in #243
chore: Update dependency @types/jasmine to v3.10.1 by @renovate in #244
chore: Update dependency jasmine-core to v3.10.1 by @renovate in #245
chore: Update dependency fast-xml-parser to v3.21.0 by @renovate in #246
chore: Update dependency webpack to v5.60.0 by @renovate in #247
chore: Update dependency karma to v6.3.6 by @renovate in #248
chore: Update dependency webpack-dev-server to v4.4.0 by @renovate in #249
chore: Update dependency webpack to v5.61.0 by @renovate in #250
chore: Update dependency fast-xml-parser to v3.21.1 by @renovate in #251
chore: Update dependency karma to v6.3.7 by @renovate in #252
chore: Update dependency @types/jasmine to v3.10.2 by @renovate in #253
chore: Update dependency webpack to v5.62.1 by @renovate in #257
chore: Update dependency excalibur to v0.25.1 by @renovate in #258
chore: Update dependency karma to v6.3.8 by @renovate in #259
chore: Update dependency webpack to v5.62.2 by @renovate in #260
chore: Update dependency webpack to v5.63.0 by @renovate in #262
chore: Update dependency webpack to v5.64.0 by @renovate in #263
chore: Update dependency webpack-dev-server to v4.5.0 by @renovate in #264

Contributors

@JumpLink made their first contribution in #261

Full Changelog: v0.25.0...v0.25.1

Contributors

JumpLink and renovate

Assets 2

04 Oct 02:19

eonarheim

v0.25.0

828cb84

@excaliburjs/[email protected]

Tiled Plugin for Excalibur.js

This extension adds support for tile maps from all Tiled map editor files in Excalibur. Use the TiledMapResource to load and interact with Tiled based maps!

Quickstart

Install using npm:

> npm install @excaliburjs/plugin-tiled

ES2015 (TS/JS)

The ES2015 import syntax is the recommended way to use Excalibur with Excalibur Tiled and is supported through a module loader like webpack or Parcel with TypeScript or Babel:

import * as ex from 'excalibur';
import { TiledMapeResource } from '@excaliburjs/plugin-tiled';

// Create tiled map resource, pointing to static asset path
const tiledMap = new TiledMapResource("/assets/map.tmx");

// Create a loader and reference the map
const loader = new ex.Loader([tiledMap]);

// Start the game (starts the loader)
game.start(loader).then(function() {
   
   console.log("Game loaded");
   tiledMap.addTiledMapToScene(game.currentScene);
   
});

For reference, see this CodeSandbox sample for a Parcel-based game.

Features

Parse default Tiled tmx files
- Supports all Tiled compressions zlib, gzip, and zstd
Parse Tiled exported json files
Supports external tilesets .tsx and json
New TypeScript based object model for working with Tiled data
- Query for layers by property
- Query for objects by property
- Easy helpers to locate Polygons, Polylines, and Text
Automatic Excalibur wiring for certain Tiled properties and objects:
- Camera
- Colliders
- Solid TileMap Layers
- Tiled Text
- Inserted Tiled Tiles

Excalibur Wiring

You may opt-in to the Excalibur wiring by calling addTiledMapToScene(someScene)

// After loading tiledMapResource
tiledMapResource.addTiledMapToScene(game.currentScene);

Only object layers with "excalibur"=true are parsed for objects. These object layers can be retrieved with
```
const objects: TiledObjectGroup[] = tiledMapResource.getExcaliburObjects();
```
Camera Position & Zoom - You may set the starting camera position and zoom
- In an object layer with a custom property "excalibur"=true
- Note Only the first Camera in the first "excalibur"=true layer will be used
- Create a Tiled "Point" with the Tiled Type "Camera"
- Optionally, to set zoom other than the default of 1.0, create a custom property named "Zoom" with a numeric value
Solid layers - You can mark a particular layers tiles as solid in Tiled
- In the Tiled layer properties, add a custom property named "Solid" with a boolean value true
- The presence of a tile in this layer indicates that space is solid, the abscence of a tile means it is not solid
Colliders - You may position Excalibur colliders within Tiled
- In an object layer with a custom property "excalibur"=true
- Create a "Circle" (ellipses are not supported) or "Rectangle"
  - Set the Tiled type to "BoxCollider" or "CircleCollider"
  - Optionally, to set an Excalibur collision type specify a custom property named "CollisionType" with the value
    - "Fixed" (default for colliders) - non-movable object
    - "Passive" - triggers events, does not participate in collision
    - "Active" - participates in collision and can be pushed around
    - "PreventCollision" - all collisions are ignored
Text - You may insert excalibur labels within Tiled
- In an object layer with a custom property "excalibur"=true
- Create a Tiled Text object
- Optionally, you can set the "ZIndex" as a float custom tiled property
- ⚠ A word of caution around fonts ⚠ - fonts are different on every operating system (some may not be available to your user unless you explicitly load them into the page with a font loader). See here for some detail
Inserted Tile Objects - You may insert tiles on or off grid in Tiled with inserted tiles
- In an object layer with a custom property "excalibur"=true
- Create a Tiled inserted Tile
- Optionally, you can set the "ZIndex" as a float custom tiled property
- Optionally, to set an Excalibur collision type specify a custom property named "CollisionType" with the value
  - "Fixed" non-movable object
  - "Passive" (default for inserted tiles) - triggers events, does not participate in collision
  - "Active" - participates in collision and can be pushed around
  - "PreventCollision" - all collisions are ignored

Not Yet Supported Out of the Box

Currently Isometric and Hexagonal maps are not directly supported by Excalibur TileMaps, however the data is still parsed by this plugin and can be used manually by accessing the RawTiledMap in TiledMapResource.data.rawMap after loading.
Excalibur Text is limited at the moment and doesn't support Tiled word wrapping or Tiled text alignment other than the default "Left" horizontal, "Top" vertical alignments.
Layer offsets are yet not supported.
Layer tinting is not yet supported
Parallax factor is not yet supported.
Image Layers - Tiled image layers are not yet fully supported, but do show up in the RawTiledMap so can be used that way. Using inserted Tile Objects is a way to achieve the same effect in a fully supported way.
Group Layers - Tiled group layers are not yet supported at all, currently layers in a group do not load. Maps with group layers will load all other layers fine.
Infinite maps - Tiled infinite maps are not yet supported, but do show up in the RawTiledMap.
RawTiledMap fully types the Tiled 1.4.3 api, this can be used to write custom code for anything this plugin doesn't yet support.

import * as ex from 'excalibur';
import { TiledMapeResource } from '@excaliburjs/plugin-tiled';

// Create tiled map resource, pointing to static asset path
const tiledMap = new TiledMapResource("/assets/map.tmx");

// Create a loader and reference the map
const loader = new ex.Loader([tiledMap]);

game.start(loader).then(function() {
   
   // Access raw data
   const rawMap = tiledMap.data.rawMap;
   
});

Webpack Configuration

You will need to modify your webpack configuration to load Tiled JSON files using file-loader and then ensure any tilemap images are copied to the same output directory as your bundle, see this example-ts-webpack branch for an example.

Standalone Script File (JS)

In your HTML file, add a reference dist/excalibur-tiled.min.js in your page:

<script type="text/javascript" src="node_modules/excalibur/dist/excalibur.min.js"></script>
<script type="text/javascript" src="node_modules/@excaliburjs/excalibur-tiled/dist/excalibur-tiled.min.js"></script>

and then you can use it like this:

// New game
const game = new ex.Engine({ width: 500, height: 400, canvasElementId: "game" });

// Create a new TiledMapResource loadable
const tiledMap = new ex.Plugin.Tiled.TiledMapResource("test.tmx");

// Create a loader and reference the map
const loader = new ex.Loader([tiledMap]);

// Start the game (starts the loader)
game.start(loader).then(function() {
   
   console.log("Game loaded");
   
   tiledMap.addTiledMapToScene(game.currentScene);
   
});

The dist uses a UMD build and will attach itself to the ex.Plugin.Tiled global if running in the browser standalone.

Documentation

The TiledMapResource loadable will load the map file you specify along with any referenced tile set assets (images).

Handling Tiled Paths

The image paths and external tileset paths loaded will be relative to where the exported file was saved.

For example, let's say this is your source working directory structure when you make your Tiled map:

work/
  - map.tmx
  - map.png
  - map.tsx

The tileset image and/or source are stored next to the TMX file.

So when you export to JSON, say to map.json, Tiled will save the paths like this:

{
  "tilesets": [
    {
      "image": "map.png"
    },
    {
      "source": "map.tsx"
    }
  ]
}

But for your game, your file structure looks like this:

assets/
  - maps/map.json
  - tx/map.png
  - tsx/map.tsx

When your game loads and the extension loads your map file (/assets/maps/map.tmx), the paths will be loaded relative to the map tmx or any tsx file, so they will return 404 responses:

GET /assets/maps/map.png -> 404 Not Found
GET /assets/maps/map.tsx -> 404 Not Found

If you need to override this behavior, you can set convertPath to a custom function that takes two parameters: originPath and relativePath data.

originPath is the path of the original source file (for example the map.tmx), and relativePath is referenced external fil (for example the map.tsx)

// Create a new TiledResource loadable
var map = new ex.Plugin.Tiled.TiledMapResource("map.tmx");

map.convertPath = function (originPath, relativePath) {
   return "/assets/tx/" + path;
}

That will fix the paths:

GET /assets/tx/map.png -> 200 OK
GET /assets/t...

Assets 2

31 Aug 01:11

eonarheim

v0.25.0-alpha.3

0667c1d

@excaliburjs/[email protected] Pre-release

Pre-release

Published @excaliburjs/[email protected]

Fix graphics import sites

Assets 2

31 Aug 00:55

eonarheim

v0.25.0-alpha.2

4e5758d

@excaliburjs/[email protected] Pre-release

Pre-release

Published @excaliburjs/[email protected]

Fixes Graphics import sites

Assets 2

27 Aug 14:15

eonarheim

v0.25.0-alpha.1

854c3a9

New Excalibur Tiled @excaliburjs/[email protected] Pre-release

Pre-release

Published @excaliburjs/[email protected]

Tiled Plugin for Excalibur.js

This extension adds support for tile maps from all Tiled map editor files in Excalibur. Use the TiledMapResource to load and interact with Tiled based maps!

Quickstart

Install using npm:

> npm install @excaliburjs/plugin-tiled

ES2015 (TS/JS)

The ES2015 import syntax is the recommended way to use Excalibur with Excalibur Tiled and is supported through a module loader like webpack or Parcel with TypeScript or Babel:

import * as ex from 'excalibur';
import { TiledMapeResource } from '@excaliburjs/plugin-tiled';

// Create tiled map resource, pointing to static asset path
const tiledMap = new TiledMapResource("/assets/map.tmx");

// Create a loader and reference the map
const loader = new ex.Loader([tiledMap]);

// Start the game (starts the loader)
game.start(loader).then(function() {
   
   console.log("Game loaded");
   tiledMap.addTiledMapToScene(game.currentScene);
   
});

For reference, see this CodeSandbox sample for a Parcel-based game.

Features

Parse default Tiled tmx files
- Supports all Tiled compressions zlib, gzip, and zstd
Parse Tiled exported json files
Supports external tilesets .tsx and json
New TypeScript based object model for working with Tiled data
- Query for layers by property
- Query for objects by property
- Easy helpers to locate Polygons, Polylines, and Text
Automatic Excalibur wiring for certain Tiled properties and objects:
- Camera
- Colliders
- Solid TileMap Layers
- Tiled Text
- Inserted Tiled Tiles

Excalibur Wiring

You may opt-in to the Excalibur wiring by calling addTiledMapToScene(someScene)

// After loading tiledMapResource
tiledMapResource.addTiledMapToScene(game.currentScene);

Only object layers with "excalibur"=true are parsed for objects. These object layers can be retrieved with
```
const objects: TiledObjectGroup[] = tiledMapResource.getExcaliburObjects();
```
Camera Position & Zoom - You may set the starting camera position and zoom
- In an object layer with a custom property "excalibur"=true
- Note Only the first Camera in the first "excalibur"=true layer will be used
- Create a Tiled "Point" with the Tiled Type "Camera"
- Optionally, to set zoom other than the default of 1.0, create a custom property named "Zoom" with a numeric value
Solid layers - You can mark a particular layers tiles as solid in Tiled
- In the Tiled layer properties, add a custom property named "Solid" with a boolean value true
- The presence of a tile in this layer indicates that space is solid, the abscence of a tile means it is not solid
Colliders - You may position Excalibur colliders within Tiled
- In an object layer with a custom property "excalibur"=true
- Create a "Circle" (ellipses are not supported) or "Rectangle"
  - Set the Tiled type to "BoxCollider" or "CircleCollider"
  - Optionally, to set an Excalibur collision type specify a custom property named "CollisionType" with the value
    - "Fixed" (default for colliders) - non-movable object
    - "Passive" - triggers events, does not participate in collision
    - "Active" - participates in collision and can be pushed around
    - "PreventCollision" - all collisions are ignored
Text - You may insert excalibur labels within Tiled
- In an object layer with a custom property "excalibur"=true
- Create a Tiled Text object
- Optionally, you can set the "ZIndex" as a float custom tiled property
- ⚠ A word of caution around fonts ⚠ - fonts are different on every operating system (some may not be available to your user unless you explicitly load them into the page with a font loader). See here for some detail
Inserted Tile Objects - You may insert tiles on or off grid in Tiled with inserted tiles
- In an object layer with a custom property "excalibur"=true
- Create a Tiled inserted Tile
- Optionally, you can set the "ZIndex" as a float custom tiled property
- Optionally, to set an Excalibur collision type specify a custom property named "CollisionType" with the value
  - "Fixed" non-movable object
  - "Passive" (default for inserted tiles) - triggers events, does not participate in collision
  - "Active" - participates in collision and can be pushed around
  - "PreventCollision" - all collisions are ignored

Not Yet Supported Out of the Box

Currently Isometric and Hexagonal maps are not directly supported by Excalibur TileMaps, however the data is still parsed by this plugin and can be used manually by accessing the RawTiledMap in TiledMapResource.data.rawMap after loading.
Excalibur Text is limited at the moment and doesn't support Tiled word wrapping or Tiled text alignment other than the default "Left" horizontal, "Top" vertical alignments.
Layer offsets are yet not supported.
Layer tinting is not yet supported
Parallax factor is not yet supported.
Image Layers - Tiled image layers are not yet fully supported, but do show up in the RawTiledMap so can be used that way. Using inserted Tile Objects is a way to achieve the same effect in a fully supported way.
Group Layers - Tiled group layers are not yet supported at all, currently layers in a group do not load. Maps with group layers will load all other layers fine.
Infinite maps - Tiled infinite maps are not yet supported, but do show up in the RawTiledMap.
RawTiledMap fully types the Tiled 1.4.3 api, this can be used to write custom code for anything this plugin doesn't yet support.

import * as ex from 'excalibur';
import { TiledMapeResource } from '@excaliburjs/plugin-tiled';

// Create tiled map resource, pointing to static asset path
const tiledMap = new TiledMapResource("/assets/map.tmx");

// Create a loader and reference the map
const loader = new ex.Loader([tiledMap]);

game.start(loader).then(function() {
   
   // Access raw data
   const rawMap = tiledMap.data.rawMap;
   
});

Webpack Configuration

Standalone Script File (JS)

In your HTML file, add a reference dist/excalibur-tiled.min.js in your page:

<script type="text/javascript" src="node_modules/excalibur/dist/excalibur.min.js"></script>
<script type="text/javascript" src="node_modules/@excaliburjs/excalibur-tiled/dist/excalibur-tiled.min.js"></script>

and then you can use it like this:

// New game
const game = new ex.Engine({ width: 500, height: 400, canvasElementId: "game" });

// Create a new TiledMapResource loadable
const tiledMap = new ex.Plugin.Tiled.TiledMapResource("test.tmx");

// Create a loader and reference the map
const loader = new ex.Loader([tiledMap]);

// Start the game (starts the loader)
game.start(loader).then(function() {
   
   console.log("Game loaded");
   
   tiledMap.addTiledMapToScene(game.currentScene);
   
});

The dist uses a UMD build and will attach itself to the ex.Plugin.Tiled global if running in the browser standalone.

Documentation

The TiledMapResource loadable will load the map file you specify along with any referenced tile set assets (images).

Handling Tiled Paths

The image paths and external tileset paths loaded will be relative to where the exported file was saved.

For example, let's say this is your source working directory structure when you make your Tiled map:

work/
  - map.tmx
  - map.png
  - map.tsx

The tileset image and/or source are stored next to the TMX file.

So when you export to JSON, say to map.json, Tiled will save the paths like this:

{
  "tilesets": [
    {
      "image": "map.png"
    },
    {
      "source": "map.tsx"
    }
  ]
}

But for your game, your file structure looks like this:

assets/
  - maps/map.json
  - tx/map.png
  - tsx/map.tsx

When your game loads and the extension loads your map file (/assets/maps/map.tmx), the paths will be loaded relative to the map tmx or any tsx file, so they will return 404 responses:

GET /assets/maps/map.png -> 404 Not Found
GET /assets/maps/map.tsx -> 404 Not Found

If you need to override this behavior, you can set convertPath to a custom function that takes two parameters: originPath and relativePath data.

originPath is the path of the original source file (for example the map.tmx), and relativePath is referenced external fil (for example the map.tsx)

// Create a new TiledResource loadable
var map = new ex.Plugin.Tiled.TiledMapResource("map.tmx");

map.convertPath = function (originPath, relativePath) {
   return "/assets/tx/" + path;
}

That will fix the paths:...

Assets 2

19 Apr 05:33

kamranayub

v2.3.0

d9f002c

v2.3.0 - Compression support

Thanks to @Dreaded-Gnu

Add gzip and zlib support

Assets 2

16 Nov 00:09

kamranayub

v2.2.0

63b3ed3

v2.2.0

Added external tileset (TSX) support for newer versions of Tiled

Assets 2

08 Aug 03:04

kamranayub

2.1.0

44c4f42

v2.1.0

Updated to use webpack/UMD bundle

Assets 2

08 Aug 01:55

kamranayub

2.0.3

f3cabb7

v2.0.3

Switch to npm using @excaliburjs/excalibur-tiled package
Updated to excalibur 0.11.0

Assets 2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Features and Fixes

Dependency Updates

Thanks to all the contributors this iteration

Contributors

Fixes

Features

Dependency Updates

Contributors

Contributors

Tiled Plugin for Excalibur.js

Quickstart

ES2015 (TS/JS)

Features

Excalibur Wiring

Not Yet Supported Out of the Box

Webpack Configuration

Standalone Script File (JS)

Documentation

Handling Tiled Paths

Tiled Plugin for Excalibur.js

Quickstart

ES2015 (TS/JS)

Features

Excalibur Wiring

Not Yet Supported Out of the Box

Webpack Configuration

Standalone Script File (JS)

Documentation

Handling Tiled Paths

Releases: excaliburjs/excalibur-tiled

@excaliburjs/[email protected]

Features and Fixes

Dependency Updates

Thanks to all the contributors this iteration

Contributors

@excaliburjs/[email protected]

Fixes

Features

Dependency Updates

Contributors

Contributors

@excaliburjs/[email protected]

Tiled Plugin for Excalibur.js

Quickstart

ES2015 (TS/JS)

Features

Excalibur Wiring

Not Yet Supported Out of the Box

Webpack Configuration

Standalone Script File (JS)

Documentation

Handling Tiled Paths

@excaliburjs/[email protected]

@excaliburjs/[email protected]

New Excalibur Tiled @excaliburjs/[email protected]

Tiled Plugin for Excalibur.js

Quickstart

ES2015 (TS/JS)

Features

Excalibur Wiring

Not Yet Supported Out of the Box

Webpack Configuration

Standalone Script File (JS)

Documentation

Handling Tiled Paths

v2.3.0 - Compression support

v2.2.0

v2.1.0

v2.0.3