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:
and
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:
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.
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…
I’m actually working on an app that does this to create 3D models from tilemaps. It’s over here: www.texsnap.com, 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:https://vimeo.com/357257875
Pretty cool! 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.
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?
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.
Lol, I’m nowhere near doing the physics, but this is where I’m at right now: https://cotterzz.github.io/insectopia/
Main character composed in three.js, the map and tiles are just two bitmaps:
Thanks!
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! 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!
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.
