iPad game: Earth

Another experimental new look. This looks particularly nice when animated – the blue colours are based on real-world sea depths, so they swirl slightly.

Wind-blown particles: using real-world data (wind U,V directions from last 12 hours, from satellite feeds), I drive particles around the planet. They follow mountains, seas, storms, etc. But … I can also interact with them, which you can’t if you just use satellite-photos of current cloud cover.

New 3D look. All heights on Earth are now scaled to their (relatively correct) values – but obviously made larger so they’re easy to see.

Selecting countries in 3D (trailing the country-border over mountains etc)

I present “Onion Earth” (a bug when manually calculating normals)

Vector shapes (country outline, here in red) merged into the globe 3D space, with an experimental new way of showing text info (the blue arrow that slides on/off the screen).

Um … I turned off DepthTest by accident.

2D mode: everything together (procedural background, painter effects, antique-map look and feel, etc)

(this week’s screenshots are from the 2D prototype I built before moving to the 3D mode. I still use these to test gameplay – the 2D part is now a fully functioning game with AI and win/lose etc)

Test: simulating a water-colour effect (As used on antique maps) to show the extent of the “bonus group” (if you control all those countries at once, you get extra bonuses).

Bounding-boxes of countries – testing zoom-to-country (game automatically zooms in and out as you move around the interface – the idea is you never need to manually zoom, it always works out the best zoom for you). You can, of course, manually zoom (pinch/pull) whenever you want.

All the backgrounds are procedurally generated – the rhomb lines, the compass, everything.

Roads are procedural. First shot shows different ways of drawing roads, including “direct” vs “randomized wiggle”. Second and third show them being applied to the map.

The roads on the map show the actual routes you can use to move from country to country. Some countries appear to be adjacent but have no shared border, or vice versa – the roads tell you the exact connections in a diegetic way.

Low res, using simple white colour, with alpha slightly less than 1.

Note the anti-aliasing / border effect — the lines SHOULD be solid white, but they’re low-res upsampled, with blur, which gives a nice 3-tone line. Also note that INTERNAL borders are much brighter than COASTLINES – because the down/upscaled SVG overlaps each border 2 x (once for each country), but not on the shore.

Low res, with XOR. Should be easiest to see – but turns out it’s harder to see than solid colour!

High-res texture now. See how lines are sharper, the 3-tone border is fading out. These two screens are *both* using XOR – but one of them, since we’re higher res, I scaled the line-width down in proportion to how much I scaled the resolution up. It looks almost totally different. Elegant, but … much too subtle, I think!

Sticking with high-res country map … but back to the “solid white borders”. Using alpha = 0.85, we get a nice mix of “smooth edges (less jaggedness)” and “high clarity / readability”. We also get an interesting “ghostly” effect, where everything is a bit semi-solid. Again, where a lot of borders overlap – or where the original border wiggles back and forth a lot – you get lots of overlap, and so the white gets stronger.

As before, coastlines are dark, internal borders are bright

Final two experiments: reducing the alpha further and further, to see what effect we get on the readability (I felt the 0.85 alpha above was a bit too overwhelming, although it is very clear). Respectively 0.65 and 0.5 alpha here.