Creating tilemap using spritesheet on 3D plane?

yes. It is a 16384 x 16384. I just want it to load. As long as it stays above 30 FPS, I’m happy.

Is it a map? How much of it do you see at once?

Yes, it’s a map. You should be able to see like any other RPG. I’d say around 256, 256.

256x256 tiles? If you want to see the whole map at once, you can make a downscaled version that works as a single texture.

At this point, I just need example that can load & parse TMX files exported from Tiled.

If you can’t find it using Google, I guess you will have to get your hands dirty doing it yourself. TMX is based on XML. Check out XML parsers.

2 Likes

That does not help. Does anyone know where to find TMX reader for three.js??

You’re going to have to give people more information if you want someone to help you. You should assume that we don’t know what you’re talking about. What’s a TMX file? What’s “Tiled”, is it a program?

I’m pretty certain that a TMX reader for Three.js does not exist.

3 Likes

@marquizzo: My apologies. I didn’t realize there wasn’t enough info being said. So a TMX file is (Tile Map XML) map format. TMX is a flexible way to describe a tile based map. It can describe maps with any tile size, any amount of layers, any number of tile sets and it allows custom properties to be set on most elements. Beside tile layers, it can also contain groups of objects that can be placed freely. Tiled is located here : http://www.mapeditor.org/

Tiled is a free easy to use and flexible level editor that uses tilemaps.

Did I explain well enough? If not, please do let me know & I will do my best to go more in-depth.

@Aerion
In any case, what do you expect from community?
Guidance of how to work with XML-files? I perfectly agree with @EliasHasle’s suggestion, as there are tons of informations in the internet on how to work with it.

I just need a TMX loader example. Plain & simple. Pardon me, I do not wish to sound rude.

I don’t think there is such a thing for three.js (or even babylon). You will have to build one. I highly doubt someone is going to do that for you unless you pay them.

2 Likes

Is there not a single example on the internet that anyone can find? I know with all the censorship google does, it’s impossible to get the same search results in different places. That is why I ask.

1 Like

You don’t sound rude, you just sound entitled. You’ve had three people tell you that it doesn’t exist, yet you still insist that you want an example. I think it’s time you accept that you’re going to have to build your own. If you run into problems with your implementation, you can show your work here and we’ll try to help you.

3 Likes

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:


And more info about phaser here: https://phaser.io/

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 https://stackoverflow.com/questions/13516990/render-tmx-map-on-threejs-plane 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: 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

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?