The joust game (still no name yet – working on that!) has come a long way in the last two days. I used the tool in my previous post to select 2 world layouts I wanted, then joined them together to form one solid map of the world ground level. I then rigged the program to use the values from that when generating the terrain for each individual tile so they all line up nicely with each other. I also added in a simple gradient for the sky, so it starts off very pale blue then gets darker and darker as you get higher and higher. Soon I’ll add stars and clouds, but even this simple stuff I have so far has turned out very nice.
Currently I have the world set at 1000 tiles wide and 250 tiles tall. Each tile is 800×600 at the moment (subject to change!), which makes the world map 800,000 pixels wide and 150,000 pixels tall. That is a huge amount of real estate, so I expect it will be more than enough for our needs, even if we get a few hundred players (crossing fingers).
Naturally, the player is only going to see a tiny slice of this massive world at a time, so we don’t want to waste any time or memory loading and storing any more than we have to. I’ve been pretty frugal and decided to load only the tile the player is on and the 8 tiles surrounding it. As the player moves, the game automatically throws away the tiles in the other direction and loads new ones where the player is headed. I was worried this much processing would introduce some lag (remember the client’s computer has to generate and render the terrain on the fly), but as you can see in the video below, it runs very smoothly.
This is how the game renders the world to the player. These nine tiles are loaded and displayed, with the screen starting centered around the middle tile (Middle Center). If, for example, the player moved to the left, the nine tiles would move to the right as a group. When the player crossed from Middle Center into Middle Left, the game would throw away the three tiles in the Right column, move the other two columns over, and load three new tiles for the new left. The player never notices and the game never has more than the nine tiles loaded at once.
9 Tiles of Rendering
Here is a simple video of the system in action (if you follow the link and watch it at the youtube site, you can see my annotations explaining things a bit more). You can see how the tiles work together to make it appear that the entire world has already been loaded. The line on the screen is from the center to the mouse position, which is how I control the scroll direction and scroll speed (further from center = go faster). The video simply flies around a bit following the procedural terrain, then takes off at top speed vertically, climbing all the way to the top of the map (250 tiles high) to show off the gradient of the sky. Unfortunately, clouds, stars, and platforms are not yet implemented, so the sky is pretty lonely. Still, you can get a glimpse of just how big this world is.
After I got this working, I created a tool to generate a small ‘world map’ image so I could get (and show) an overview of the world as a whole. It is scaled down from the actual game world by a factor of 1/100, but that still makes it a giant image at 8000×1500 pixels. My first attempt at the code had the world map rendering the 250,000 tiles (!) in just under 3 DAYS. That wouldn’t do at all, so I jumped in and optimized everything I could and wrote some code to cache the sky gradient and the underground texture. After that and lots of fiddling, I now have it down to about 100 seconds (a respectable 2500 tiles/second).
Here is scaled down version of the world map – this one is ‘only’ 1600×300. Click to open it, or follow this link to check out the full map.
Scaled down world map