RayLib 2D Challenge Part 5 - Creating a World with Tiled
So far, Scarfy has a title screen & menu, and can run and jump with sound effects. It's high time that a world is built for him to run around in. That's what I'm going to today. Watch the video above to see what happened...
Click here to watch the video on Odysee.
I decided to go with a tile map for the world. It's an old well-established method. Image tiles are placed on a grid to build the entire world. Using tiles instead of large images is very memory efficient (games once had to run with mere kilobytes of memory).
RayLib doesn't have its own tile map editor, so I used "Tiled" (link). It's an open-source tile editor that's been battle tested on multiple games.
Getting a Tile Set
I'm no artist and am in a hurry, so I found a suitable tile set on itch.io (link). The tile set is for side-scrolling platform games, which is exactly what I was looking for. You can find more tile sets here (link).
Once imported into Tiled, I could draw a 2D world for Scarfy. Tiled has its quirks, but I got the hang of it after an hour or so. Watch the video above for more.
The chosen tile set includes multiple layers, so a 3D-ish parallax effect can be made. If you look sideways while walking (not recommended), you'll notice that things close up appear to move fast, while far away things like distant mountains look like they barely move.
We simulate this effect by having multiple layers that moving at different speeds. The sky layer is stationary, mountains move slowly, nearer hills move faster, and the ground is panned sideways as fast as Scarfy walks.
The tiles need "collision" information, or Scarfy (and anything else) will fall right through them. The Tiled editor includes a collision shape editor for this purpose. It can be tedious to do with many tiles. Fortunately for me, this is a simple example, so it didn't take long.
That's it for today. Next time I'll work on importing the tile map into the Scarfy demo. This will require three things:
- Code to read the data files and images (I'll use a library)
- A camera to follow Scarfy around the world (the world is larger than the screen)
- Collision handling code, so that Scarfy can walk on the world instead of falling through it
Post your comment