Skip to content

Home

Jump to bottom
Caldas Lopes edited this page Oct 21, 2021 · 6 revisions

Add Tiled maps to p5.js.

p5.tiledmap CDN is available at https://www.jsdelivr.com/package/npm/p5.tiledmap.

How to use it:

Structure

.
├── basic.html
├── basic.js
├── p5.tiledmap.min.js
└── data
    ├── desert.js
    └── tmw_desert_spacing.png

Code

basic.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
		<script src="data/desert.js"></script>
		<script src="p5.tiledmap.min.js"></script>
		<script src="basic.js"></script>
		<title>Basic Example</title>
	</head>
	<body>
	</body>
</html>

Calling order of scripts is important: p5.js -> Maps -> p5.tiledmap -> Script.

basic.js

var tmap;

function preload() {
	tmap = loadTiledMap("desert", "data");
}

function setup() {
	createCanvas(800, 600);
}

function draw() {
	tmap.draw(0, 0);
}

When developing locally, you might be cursed by "Access to image at 'file:///xxx.png' has been blocked by CORS policy". Maybe this article can help.

Issues

What's not working (and may never will):

  • Loading TMX files - p5.tiledMap uses Tiled JavaScript export, which must be loaded previously.
  • External TileSets - must be embedded to be part of JavaScript export.
  • Tiles renderorder is not considered - always renders "right-down".
  • Objects draworder is not considered.
Clone this wiki locally