Creating tilemap using spritesheet on 3D plane?

It would make more sense to look for an example of a TMX loader that pulls maps into a 2D engine like pixi or phaser that use webGL.
I dont think three.js is suited to this kind of format.

There are two examples of TMX to Pixi:


Check out Pixi, if you haven’t already:

I can’t find any examples of loading tmx into phaser, but there’s a good article here that describes using tiled to create maps for phaser, as tiled exports to other formats than tmx:

And more info about phaser here:

Unless there’s a specific reason why you need this running in a fully 3d environment?
If you just need the GPU rendering power then use the right engine for the job.

1 Like

You could also check out and potentially reach out to the author of that post.

The code in that question/answer is pretty advanced, and seems to use a .JSON export of TMX data from Tiled rather than the .XML export, but there might be some useful nugget in there nonetheless…

1 Like

I’m actually working on an app that does this to create 3D models from tilemaps. It’s over here:, it’s still in development but once i get login/cloud working it’ll be out for public use, here’s a super quick video on how it works:

1 Like

Pretty cool! :slight_smile: But I was actually looking for a quick example on how to use Three.js Sprites Textured to a plane in Phaser & still be able to use Phaser’s built-in physics & collision system.

ah! well that would be very cool! And I totally have no idea how to do that, sorry >_<

lol, it’s ok. :slight_smile: Does anyone else know how to do this?

Which physics system? Phaser has three - arcade, impact and matter. (arcade is the simplest, custom engine built for phaser, whereas impact and matter are third party physics engines.)
You could use a physics engine by itself, no?

@Cotterzz : Arcade Physics

Ok, well that’s awkward because arcade is part of phaser, why do you need to render it in three.js?

I’ve just taken a look at the arcade examples - it’s actually very good, isn’t it? esp for 2d games.

Phaser is GPU accelerated, just use phaser for everything, or use three.js and a physics engine.

( - a physics plugin for three.js)

@Cotterzz Because I need to be able to use my character I created & animated in three.js in Phaser.

Yeah, I’m working on a similar problem, so I’m doing it all in three.js, because unless you want to export your 3d character frames as tiles, you kinda have to, there’s no way to use both three.js and phaser unless you have two canvasses, one with transparency over the other.

For the tile/2d layer I’m using a custom shader because it’s fast, and i’ll be writing my own physics, for the same reason.

@Cotterzz Can you upload an example to github? I would very much like to beta test this for you. I just need collision on my tiled levels. That’s all.

Lol, I’m nowhere near doing the physics, but this is where I’m at right now:
Main character composed in three.js, the map and tiles are just two bitmaps:

@Cotterzz WOW! That is SO COOL! When do you think you’ll have physics / collision working?! O_O

This year, hopefully!
I’ve got a lot of work on the character to do now that the tile rendering is done.
When the main character’s walk is animated, then I’ll do the physics.

Honestly you should try implementing it from scratch - pre built engines are never quite perfect, or as fast as custom built code.

@Cotterzz You are welcome! You need some animation code for the character? I used @felixmariotto’s AWESOME sprite animation library to allow for a 2D, animated character with multiple animation sequences in a 3D world! I can show you what I created if you’d like to use it! :slight_smile: It would save you MONTHS of work!

I’m having to do it all with a composed three.js object because of the complexity of the animation.
Things like face expressions and walk cycle at the same time, and with dynamic lighting, so I’m doing the character in full 3d, then placed in a 2d world (as opposed to 2d character in a 3d world)

@Cotterzz WOW! I’d LOVE to try that! But I would still like to use the physics / collision system you come up with!!! On my 3D plane animated character object! Would be SWEEEEEEEEEEET! :sunglasses: