Documentation on tiles.png? #109
-
|
I was reading through examples and I couldn’t figure out how the tilemap becomes available. I see no reference to tiles.png in any example code. Is this file just implicitly loaded? Where is this detailed or otherwise made clear? Eg. how do I define the size of my tiles? I think I might be missing a stepping stone on my journey, possibly looking in the wrong place. Thank you! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
Thanks for checking out LJS! So the first thing I would do is search on "tiles.png". You will find that it is passed as the default image name to engineInit, which is why the examples don't reference it. You can pass in any image name though, or even multiple images to load. In the platformer example it actually does pass in two image names ('tiles.png' and 'tilesLevel.png') to demonstrate how multiple images are supported. In practice you can fit a ton of sprites on one tile sheet so most games won't need that. It is good to put all sprites on one sheet because then it can render them all with the same draw call which is much faster. Your tiles can vary in size even on the same sheet, so you can set that on a per tile basis. The platformer example is good to check out because it has the most art of the examples, it shows how to set up a sprite atlas. The default tile size is 16, set by tileSizeDefault. For the platformer examples most tiles are 16x16 but a few are 8x8. That is passed into the tile function. Tile sizes can even be rectangles, there's lots of options to customize! I hope that helps, planning to a tutorial about textures and tiles soon. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! I’m going to explore this further this weekend. My plan is to make a tiny dungeon crawler with tiles. I’m quite excited because LittleJS looks like a really good balance of simple, minimal, but sufficiently featured. |
Beta Was this translation helpful? Give feedback.
-
|
Very cool, I think it is just what you are looking for. You are also welcome to join us in the LittleJS discord to ask questions and share what you are working on! |
Beta Was this translation helpful? Give feedback.
-
|
also check out this reference sheet i made for new users, let me know if it helps or if you think anything should be added/changed... https://github.com/KilledByAPixel/LittleJS/blob/main/reference.md |
Beta Was this translation helpful? Give feedback.
Thanks for checking out LJS! So the first thing I would do is search on "tiles.png". You will find that it is passed as the default image name to engineInit, which is why the examples don't reference it.
You can pass in any image name though, or even multiple images to load. In the platformer example it actually does pass in two image names ('tiles.png' and 'tilesLevel.png') to demonstrate how multiple images are supported. In practice you can fit a ton of sprites on one tile sheet so most games won't need that. It is good to put all sprites on one sheet because then it can render them all with the same draw call which is much faster.
Your tiles can vary in size even on the same sheet, so…