https://github.com/jerenaux/chunks_tutorial

Small demo showing how to load and manage tilemap chunks on the fly with Phaser 3
https://github.com/jerenaux/chunks_tutorial

chunk game map phaser

Last synced: 2 months ago
JSON representation

Small demo showing how to load and manage tilemap chunks on the fly with Phaser 3

• Host: GitHub
• URL: https://github.com/jerenaux/chunks_tutorial
• Owner: Jerenaux
• License: mit
• Created: 2018-02-17T19:12:13.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-06-09T14:58:38.000Z (over 2 years ago)
• Last Synced: 2023-03-01T07:46:21.408Z (almost 2 years ago)
• Topics: chunk, game, map, phaser
• Language: JavaScript
• Homepage: http://www.dynetisgames.com/2018/02/24/manage-big-maps-phaser-3/
• Size: 1.96 MB
• Stars: 42
• Watchers: 5
• Forks: 14
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# chunks_tutorial

Small demo showing how to load and manage tilemap chunks on the fly as the player moves, with Phaser 3. You can see it in action in the [online demo](https://jerenaux.github.io/chunks_tutorial/). Note that the loading of the chunks should be almost invisible, so if the demo works well there won't be that much to see! You can have a look at [this gif](http://www.dynetisgames.com/wp-content/uploads/2017/07/test2.gif.pagespeed.ce.ThPirHNwQq.gif) to see it in action with smaller chunks where the effect becomes visible.

The tutorial corresponding to this demo [is available here](http://www.dynetisgames.com/2018/02/24/manage-big-maps-phaser-3/).

## Running the demo

Place all the files on your local web server and navigate to index.html.

You can move around by clicking on the map. The tilemap chunks will be loaded and discarded on the fly so that only the surrounding chunks are displayed at any time.

## Splitting a map

The folder `splitter` contains a script that allows you to split a Tiled map in chunks of arbitrary dimensions. To use it, first install the required dependencies by running `npm install` or `yarn` in the `root` directory. Then run `npm start` or `yarn start`. Run it without any arguments to see a message listing the possible (and required) options.

The root directory for the script is the `assets/map`. The script searches for the map JSON file relatively from that directory.

Example of usage: `yarn start -i fullmap.json`