Platform Masters Title
Platform Masters - Will you be the world's next platform master?

Cloud creation - how the 3D effects are added

Date: Nov 21, 2009
Screenshot #21: This screenshot is a continuation of screenshot #20. Upon completing the earlier task, the image needs to be repeatedly scaled to the width mentioned in the spreadsheet. The image goes from 16,384 pixels to 947 in my example case. For this, an automated process script, provided by Saul Goode at the GIMP Talk forums, is used (yes, I know, I can write a C program to do this very thing and it's faster than GIMP, much faster; trouble is, I'm unsure how to work with scaling down with fractional values (yes, the color-averaging formula comes in) - I do have a rough idea, but I have yet to test it). This screenshot shows the process part way through. You might notice that the image size isn't 16,384, but rather, it's 16,386. Why is this? It's due a bug with GIMP's autocrop (one I reported at GIMP's bugzilla a long time ago). It's supposedly fixed in the recent version, but 2.4's selection system and its GTK deters me from using it, the selection system mainly.

Once this task is done, it's just a matter of a few more minutes of color-to-alpha (this, on grayscale layers, provides full control over the alpha channel's values), scaling the image down vertically (to reduce memory usage), cropping the image to the tightest possible (more memory usage reduction), then saving. Once saved, I copy the file to the directory my program uses to load images from, update/adjust my program, then test it, fixing any bugs I find.

Cloud creation - the results

Date: Nov 21, 2009
Screenshot #22: Viewed from 10 miles above the tree tops of Keveran Forest (about 8.54 miles above the cloud tops), this is what the scene looks like. It is very easy to make out the 3D effects by looking at this. It's like you can see forever. Technically, you'd be able to see out to about 5824 1/4 miles at this height but everything beyond 77 7/12 miles is completely fogged out and cannot be seen). Notice the number of draws in the debug panel - 713. If it wasn't for the optimizations, this could very well be past 2000 at this point. The text, images, and black backdrops of the onscreen data also count toward the draw count (the debug panel doesn't count though) along with the daytime sky backdrop. The level or other background scenery, of which would count, don't because they're not visible.

The scenery of Carnivalesta - ground level

Date: Nov 25, 2009
Screenshot #23: Until this time, the theme of world 9 (then known as 8 before I thought of new themes) was classified. It's not any more (otherwise, why would I be posting it?). When I first created the scenery of this world, starting with the flags then the barker and food stands, I was amazed. Despite the low priority on graphics, this world caught my attention and it sticks out much more than any of the others thus far (including world 8 (Keveran Reef), which is also done). I didn't get a chance to finish the two furthest sets of mountains until quite a while later. When I did, I was truly amazed at the scene's beauty.

When the recent spike in interest toward working on PM came, the Carnivalesta world was drawing me in - I wanted to see it in action, including the Ferris wheel, the Hero Wheel as I called it. On top of that, it's difficult to work with collision detection in Keveran Forest due to the fact that there's no ground. Carnivalesta, of which lacks a bottomless pit (yes, the ground is nice and solid (and dry as well)), serves as a great area to get not only collision detection added in, but also to get the character's movements as well, since there's a seemingly unlimited span on the horizontal.

The scenery (viewed from 99 1/4 feet above the ground) is quite varied. Up close are flags and barker and food stands. My favorite of these is the "ball toss" one. Note that its balls are scattered all over the place, some even lodged on top. This is meant for humor. Ice cream, cotton candy, hot dogs, and pizza are staples of such places, along with corn dogs, and a burger stand (the latter 2 are in the more distant stands). "Race to the center" is actually a game (with the rules posted on my site in category 5), often for archery, that is one of those things where you win prizes. On these stands, there is a list of prizes, although this text is hard to make out (it's 200 feet away ya know). The more distant barker stands (another 200 feet further away) have more carnival-related stuff, only I was starting to run out of ideas. There's a barker stand for fishing, a place for getting lollipops (I was running out of ideas and needed one more building), and a video arcade (where these bulky, coin-operated video game systems are played). Strewn along the top from light pole to light pole are colored flags. Some lighting effects are also present from these light poles - the stuff near them and directly behind seem blurred and brighter. A banner is in the front of the more distant set of stands, which pretty much tells you when this game takes place.

Further in the distance is where carnival rides are. The Ferris Wheel, the "Hero Wheel" is actually an animated object (you'll have to watch the YouTube video after screenshot #25 to see this). It's also very big - 250 feet tall (gotta love that "Pixels*Scaling = CU" formula, used to determine this height). It's based on a color wheel. Roller Coaster tracks going 100 feet high follow in the distance out to the edge of the carnival itself. A series of hills leading up into mountains make up the last of the scenery, aside from the usual clouds. This time, however, the low density version of the clouds are used. It's "low density" because, well, there are very few visible clouds and what few there are, they are fairly small in size. It's 1/8 coverage instead of 1/2.

While a ground would seem obvious, one thing to note is that the closest part of the ground is actually textured. Notice how, in the distance, the texture seems to blend to a monotonic tone and up close, the pavement is rough-looking? There's also grass, but it's obscured by the roller coaster tracks, and the texture cannot be seen as it's too far away.

The platforms from the same test level as before are also present here. The two oddballs that seem out of alignment are actually dynamic platforms - they move. There's nothing otherwise special here.

The scenery of Carnivalesta - medium height

Date: Nov 25, 2009
Screenshot #24: This is Carnivalesta viewed from much higher above, 1518 feet. Here, the hills, mountains, and grass are more easily seen. You can even see the ground fogging away in the distance. Scattered around on the mountains are odd white lights, including large batches of lights. These are neighborhoods (the tiny-sized ones) and cities (the large ones). That more distant one on the furthest mountains to the right is about a mile wide. It's the largest viewable city in the vicinity (and no, it's not world 2 - that's way, way far in the distance (hundreds of miles), back the other way). These are still only small villages, not metro areas (the metro areas are marked on the overworld)

While Carnivalesta works quite a bit with height, you won't otherwise reach this height outside the jumbo and supersize levels.

The scenery of Carnivalesta - above the clouds

Date: Nov 25, 2009
Screenshot #25: At 13,428 feet above the ground, the scene is different. Getting this high is difficult, but still possible. This is mainly to show you both the low density clouds and the ground fogging effect. It's difficult to make out the 2 furthest "channels" because the setting is so dark, but if you look closely, you can see it just behind the most distant mountains. The mountain with the large city, of which the city is clearly visible, is also partially hiding some clouds. This feature is shown in the previous screenshots, however, unlike those screenshots, this is where the clouds actually are supposed to be. Being above the clouds, a clear view of the lovely night sky is possible.

The ground layers - getting the 3D effect

Date: Feb 6, 2010
Screenshot #26: Previously, I used a 2-channel doubling system for the ground's texture. While it provided a decent quality, it had some weak points. The contrast between channels was too high, and the spacing was awkward (not following the square root of 2 very well - 1.5 is far from 1.4142136. In addition, the contrast between the textured ground (seen for the closest part) and the untextured ground (seen for the furthest parts) was too high as well. On top of that, it was easy to see the textures tiling. Because of these, I went with a 3-channel doubling system that very closely follows the cubic root of 3 (3-channel doubling means it takes 3 channels (layers) for the scaling to double) and I made it so that, when the furthest textured layer was placed against the untextured layer, the contrast was 4 or less. It doesn't exactly follow the cubic root of 3, but it's far, far closer than it what I had with the 2-channel system. Trouble is, I needed to keep to multiples of 1/64 otherwise, the scaling won't work as effectively. This is where the rather odd 1.59375 number comes from (this is based on the 3/2 root of 2 which is about 1.587401052 for comparison), which is 1 19/32.

The first step was to import grayscale noise maps (layers with pixel values having completely random values, like static on the TV) use "color to alpha" to get random alpha values, then change the pixel colors in a way to create the texture. Once set, I merge the layers (duplicating them (so I have a backup) then merging them into a single layer) to create the base layer. I resize it so that, after scaling it down, the width is always a power of 2, the same as all the others. It's then a matter of duplicating these 3 base layers and scaling them down accordingly, as shown in the screenshot. The scale amount is based on the scaling of that channel, except for water which is based on the scaling of the layer (the previous layer for water). Yep, this another case of the frequently-used "Pixels*Scaling=CU" formula being put to use.... That is, let's say the layer's scaling is 5. For water, this means I need a scale down ratio of 4 (the previous layer's scaling) which turns the 4096 width to 1024, adjusting the height accordingly. Textures that aren't water (like pavement, sand, and grass), have the 2560 width become 512 for the same layer's scaling. This creates the 3D effects. You might be wondering on the rather large 4096x4080 image as well. By using a huge image like this, tiling effects are much less noticeable. By the time the tiling starts becoming noticeable, the texture has become quite smooth, so much so that this hides the effect. You won't notice it on the vertical at all, except for the most distant of grass layers (the 51 and 64, of which are exclusive to grass because it's so rough).

The ground layers - knowing when to stop

Date: Feb 6, 2010
Screenshot #27: If I just kept going and going, I'll eventually get out to the 128 zone and still get smaller yet. There's really no point to this because, at that kind of distance, even for the very rough-looking grass looks featureless, let alone sand which is fairly smooth-looking. Basically, I stop at 4 to note the contrast between the pixels. If it's easily seen, I go to the next power of 2, of which is 8. If this, too, has too much contrast where the texture is easily noticeable, I go to 16. Usually, at this point, the texture is quite difficult to see without zooming in, but you can still see something. In this case, I go to the next power of 2, 32. For most textures (grass (which stops at 64), sand (which stops at 16), and snow (which also stops at 16)), 32 is the stopping point as, even with 16x zoom, it's very hard to see the texture. When put against the solid layer (the untextured one which is essentially a mere average of the the largest base layer's pixel colors), the different is very hard to see, typically for a contrast of 4 or less. The screenshot above shows the solid layer with the 32 for water directly in front of it - you can barely even see where the 32 even is! This is when I stop.

The ground layers - saving the results

Date: Feb 6, 2010
Screenshot #28: Saving all those layers is next, of which involves setting the image's canvas size to match that of the current layer's size (or, for a shortcut since only 5 unique sizes are used, set the image's size to that of the largest layer and work toward the smallest layer). This goes by pretty quick. The file name is based on the layer's scaling. The first 4 digits at the end of the file name is the integer part of the scaling. Extra digits are for fractionals, up to 6 decimal places, if fractionals are used. The 6.375 layer, for example, would have "0006375" at the end.

The ground layers - previewing the results

Date: Feb 6, 2010
Screenshot #29: Once all the layers are saved, I put them into a simulation-screenshot-like image and position them like they would be in the game engine. Water uses a different rule than grass, sand, and other textures. This is because it's based on the furthest of the waves' reach. For Keveran Reef, the waves extend out to a scaling of 8. This means that the closest of water ground layers is 10 (the next one after 8) instead of 1.25. Lake Keveran, which has the waves extend out to 4 instead, has the water ground layers at 5 instead of 4.

When I design worlds, I use a simulation-screenshot-like design. This allows me to preview the effects of various objects. Normally, I position the scene so that it's 320 CU (or 46.93 feet) above the ground. The screenshot uses 2880 (that's 422.4 feet of height) instead causing the 256-scale island (that's 4.9 miles away) to be easily seen as being surrounded by water. Keveran Reef does indeed have a reef, with things like coral, but you can't see it, even when just a little under the water's surface. By diving deep, you can start seeing it, though you don't have to go too far. By using 200% zoom, I can simulate viewing the scene in full screen on my monitor, without the need to use the game engine. My game runs at 1024x768 (hence the image size) and I view and run Windows at 1920x1440. 200% zoom would, in a way, make it seem like 960x720, which is very close. This mainly relates to the apparent size as opposed to being truly full screen.

While the screenshot doesn't use the texture like that of the above, this is because the setting is based on a dusk time of day, sunset in a sense (Keveran Reef is immediately before Carnivalesta) and it, thus, needs a different texture to better suit the environment. Still, you can easily see how the ground works. The seventh YouTube video shows how this part works, only for Ronnis (world 2) and before I updated the water texture.

The odd untextured spot at the bottom is where the waves go. The waves essentially copy the ground texture, to some extent. I don't have the waves for the dusk time as of the time the screenshot was taken.

The ground layers - in the game engine

Date: Feb 30, 2010
Screenshot #30: With the updated sky, fixed hills and mountains, and updated ground, I wanted to see what they looked like before I started making changes, considerable changes, to the game engine so that I use DirectX instead of AlphaBlend. Originally, the textured ground became untextured where the closest of the roller coaster tracks are. The new 3-channel doubling ground system is used and it has this texture visibility out to the edge of the pavement where the texture is extremely difficult to make out though still possible. Grass is the only ground texture that extends out to a 64x range, because it's so rough, so you could even see that, if you look carefully enough. The results of the correct brightness for the hills and mountains and the updated sky add more depth to the scene. The ground's fog has also been updated as well so that the gradient between channels is less visible, a lot less visible. Also, many more worlds have been completed or have major progress toward. Worlds 2 (done), 3 (done except for the story scene)), 6 (done), 8 (needs a slight fix), 9 (done (seen in the screenshot) except for story scenes), 10 (needs an enhancement), and 11 (needs one more thing and the same enhancement with world 10) are essentially done, ignoring extra scenes needed for the story, of which has also been done.

You might be thinking, DirectX now? DirectX does work with 2D games and I'm using it primarily for the speed. 3600 draws per frame at 60 fps (on a P4 system; speed), the lack of vsync, and the lack of full screen are the main limiting factors of my current AlphaBlend system. Although PM doesn't really need the speed all that much, I could still make great use of it, primarily for vsync (the ripping, jittering effect present, of which gets irritating) and full screen (full screen is simulated by using 200% zoom in GIMP, a close approximation, but I don't get any animation this way). DirectX will resolve at least these 2 issues, but, another one of my projects, The Supernatural Olympics version 3, stalled because of speed problems, could use it even more. PM has more sales potential and a much greater entertainment value than TSO, so PM is likely to be finished first.