Project Hex Part 4 – 8 Bits is Enough

 By Shamus Nov 10, 2010 59 comments

One of the things that ignited this project for me was when Jay Barnson linked to this mind-blowing series on pixel art creation*. I read through it, then through the rest of the site. I dabbled a bit in this sort of thing years ago, but never really produced anything I’d show to other people. These tutorials gave me the itch to try again, and this project seems like a good place to scratch that itch.

* Well, it blew my mind. Your own brains and the blowing thereof is your problem.

In general, the goal is to make a 3d landscape that uses that old-school style. This doesn’t mean I’m actually going for retro technology. I plan to use high resolution, high-polygon, fancy blending tricks, and whatever else I have at my disposal. I’m thinking I want to create a contrast between the 8-bit feel of the world and the modern-ish interface. For example, the landscape will be pixelated and blocky, while the hex outlines will be crisp and blend with the pixels underneath. I don’t actually know how well it will work, but it’s an idea I want to try.

Here is where we left off last week:

hex_hills4.jpg

Step one is to make a “low-res” texture for the landscape. What I’m going to do is have the program draw a single texture to be stretched over the entire landscape. During loading, I’m going to render one really fancy image made especially for the topography of the world. Grass, sand, dirt. Everything on a single texture. (This may change later as I get a feel for how big the world needs to be, how much detail I need, and how fast the camera needs to move. But for now, we’re doing one texture. Baby steps.)

I cut out a small part of the map to work with. Something with a little bit of everything: Water, dirt, sand, grass, etc.

hex_texture2.jpg

I’m using a very small region because I’m going to be making many experimental changes and I don’t want to have to wait for a long load every time I run the program.

This next part is going to be tough to explain. Stay with me here. Remember, we’re drawing a texture.

First we wipe our canvas clean, to medium gray. Then I load in a little texture, which will be used for water. This texture:

hex_texture1.jpg

Small, I know. That’s actually the point. The bright pink stuff is transparent, so we’ll never see that. What we’re interested in is the grayscale blob in the middle. Shapeless, mostly, but with a few wavy lines that I hope will look like waves. I made it after studying the tutorial above, on the part where it examines some of the tile work in Secret of Mana 3. The word “study” here is not hyperbole. I spent a few hours zoomed in on a little 32×32 patch of pixels, trying to figure out how you give a surface depth and detail with only a few pixels and four colors. It was fun but humbling work. The pioneers that worked in this medium during its heyday were very clever folks.

I’m going to pass over the points on the grid and throw down one of these little patches on every point that is marked as “deep water”. For illustrative purposes, I’m going to make the blob really tiny.

hex_texture3.jpg

I hope this is clear. Each grid point gets a little patch, which I’ve tinted blue because we’re supposedly drawing water.

Now, instead of drawing the patches tiny, I’m going to draw them so large that they overlap a bit.

hex_texture4.jpg

After the patches for deep water are drawn, I’ll draw patches for the shallow water near the shore. I use the same patch texture as before, but tinted slightly lighter.

hex_texture5.jpg

I don’t like how visible the tiling is. The pattern in the flat open ocean is very repetitive. A little tiling is okay with this style, but if we get too much the game won’t look so much “retro” as it will “cheap”. I might have to come back to this later.

Now another pass, this time for sand. And this time I’m using a slightly different texture, although the difference is probably impossible to spot in these screenshots.

hex_texture6.jpg

Now I’ll add more passes for the other surface types. One for bushy “edge” grass that borders sand, another for the more general green rolling hills, and another for the dirt slopes.

hex_texture7.jpg

Now let’s step in for a closer look.

hex_texture10.jpg

This is actually about the right distance for this game. This is about where the player’s camera will be. Maybe a bit higher or at a slightly different angle, but this is pretty close. Of course, people will likely be viewing this game full screen and not looking at it in a little 640×480 window on my blog. So let me zoom in on this image a bit so you can see what I’m seeing.

hex_texture8.jpg

Looks blurry, doesn’t it? There is a good reason for this. The reason is that our fancy modern graphics hardware is trying like crazy to “correct” how blocky my texture is. See, for years they have been coming up with better and better filtering systems in games so that when you slam face-first into a wall you don’t see a single pixel stretched out over your entire screen.

First they came up with bilinear filtering, which sort of blurs the edges between pixels. But there were situations where you might look at a wall at an extreme angle and have it look too blurry. So they came up with trilinear filtering, . Then, because there were still cases where our view of a texture might not possess the correct level of blurryness, they devised anisotropic filtering. Then came full screen anti-aliasing. Gamers have become the Princess and the Pea, so sensitive that they might lacerate their gentle eyeballs if they were ever exposed to something as dangerous as a sharp pixel edge. Everything Must Be Smooth.

This is the way graphics work now, and if you don’t want your game to look like it’s being viewed through a Vaseline-smeared coke bottle, then you should be using gargantuan 4096×4096 textures on all of your walls like a civilized person. Loading times? To hell with you and your impatience! People of quality understand that a truly fine experience is worth waiting for. And waiting. And waiting.

Or, maybe we can just turn off all this filtering? Let’s do that.

hex_texture9.jpg

That’s more like it.

Now, I don’t like the hard, square outline of the beach. I’d also like to do something about the tiling I mentioned earlier.

Let me make a few changes:
1) I’m now rotating the patches as I place them, so they aren’t all facing the same way.
2) I rounded off the sand patch, which was a bit too square.
3) I made the patches a bit smaller, which seems to look better.

Let’s see how it looks…

hex_texture11.jpg

That’s a big improvement. There’s a lot of work left on this, but I think we’ve reached the proof-of-concept stage. I can look at this scene and say, “Yeah, I could play a game in this style.” It’s interesting to look at, yet not likely to be mistaken for anything else.

20201959 comments. It's getting crowded in here.


  1. Nick C says:

    Is this going to be Minecraft with Hexagons instead of squares? Pretty dope!

  2. Michael says:

    I’m trying to decide whether I like the final outcome in this post, or “hex_hills3.jpg” better.

    I love the super retro feel to this beachscape, but at the same time, I love the clean, stylized, ultra simplistic look of what you had started with. (When the world was drawn inside the hexes. Everything had a nice crisp border.)

    The thing I’m wondering here is: How are you going to reconcile hexes with more than one land-type in them?

    (Also? Homestar Runner reference? Awesome.)

    • Dev Null says:

      The thing I’m wondering here is: How are you going to reconcile hexes with more than one land-type in them?

      More or less exactly what I was asking myself… but at the same time I think this is early enough in the project that we can not worry about it yet. So far this seems to be about getting the look right – adjustments may have to be made when a game gets dumped into it.

    • Jarenth says:

      I also wondered this… so question thirded, I suppose.

    • Thom (talzaroff) says:

      Since the textures aren’t created per hex, but per corner of every hex, either the movement (or whatever the game is going to be about), will be over the borders of hexes, with every corner being a place to stand, or… the land types don’t do anything but are just for show, purely graphic properties of the ground, which is also perfectly possible ofcourse.

  3. Raygereio says:

    Out of curiosity: am I the only one that thinks that games look beter with all that fancy schmancy filtering stuff turned off?
    And with beter I mean really ugly with the filtering turned on.

    • RPharazon says:

      I purposely set my graphics card and games to not use antialiasing or anisotropic filtering. My computer can handle modern games at 1600×900 with full detail and all the fancy bling-mapping, but AA and AF are set to nothing. I like the jagged lines and the “crispness” of motions and actions in games.

      Bethesda games, however, are an exception. Jaggies just don’t look good in them.

      • Hugo Sanchez says:

        I can’t stand Jaggies. I’m find with well defined pixels. But I don’t want every edge to be a staircase. It’s really annoying.

        • Mephane says:

          So true. If there is one graphics setting I always want turned on – no compromise, it is Anti-Aliasing, at least 2x, typically 4x.

          However, I still think in the pictures above, it looks better without the blurriness. But AA is basically used to smooth out edges of 3D object that don’t align with the screen’s pixel grid, i.e. are neither vertical nor horizontal. It’s a whole different story about pixel-art, 2D/sprite graphics or just putting some blurriness on top of intentional pixelation. ;)

    • Veloxyll says:

      I dunno, I can’t see much of modern games, my video card has used up all its brown…

      (I don’t really notice Anti aliasing and whatnot though)

    • Slothful says:

      Well, I seem to make it a habit to play games on my elderly computers that can’t keep up with these fancy shmancy graphics of the here and now. I normally just turn everything off so it won’t die on me.

      That being said, when I played Knights of the Old Republic on my laptop after previously playing it on my older desktop, I was so startled by the fact that Canderous had all these crazy scars on his face that I had to turn the settings back down.

  4. StranaMente says:

    I like the overall style, but I have 2 problems with it. The first is ipothetical. You said once that putting near high resolution and low resolution makes the whole thing ugly. Wouldn’t it be a problem with your project, so, putting togheter clean crisp high-res things with blocky world?
    Second problem is the earth color. I think you put two colors too saturated too close. Light yellow and purple brown are a bit disturbing (as purple is complementary to yellow, you may want more reddish than bluish tint in your brown), even if you go for a high saturated color palette (I’d prefer a more muted one, but it’s about personal tastes).
    If something else comes to my mind I’ll tell you.

    edit: Looking at the grass/forest, I think it looks too wavy. You can try to make something more bubbly, as it will probably look like the top of the trees.

  5. Nentuaby says:

    The last image looks a lot like the Final Fantasy DS remake(s?).

  6. X2-Eliah says:

    Incidentally, I think that the water-space looked nicer with the blurriness.

  7. Eldiran says:

    Excellent stuff! Reading this it occurs to me that disabling that blending is exactly what I want to do with all the stuff I’m working on… Only I can’t figure out how to do it in XNA 3.1. Does anyone happen to know how (EDIT: without using Immediate sorting? Either way I guess I can live without it…)

    Also, those articles on pixel art are excellent — I’m glad to see other people have read them.

  8. Sir Broccoli says:

    That’s looking very nice! Your dirt texture needs improvement though. Eliminate the grid, Shamus!
    Also, have you linked that tutorial before? I’m sure I’ve read it before but I’m not sure where I got the link.

  9. 4th Dimension says:

    Isn’t it goint to be a problem that some hexes mix landtypes. I mean some of them have beach, land, sea, all of them in one hex.

    • Deoxy says:

      Perhaps the tile in the center of each hex should be placed last? Not sure that would work (might make it look too tile-ish), but it would solve this problem…

      As I learned from watching the development of Wesnoth, terrain edges are extremely difficult to truly do right (Wesnoth has individually made terrain borders for almost every terrain-terrain combination for just this reason).

  10. eric says:

    Looking good, but the only problem now is that the terrain seems displaced from the hex grid. If the hexes are just what you’re using to generate terrain, that’s fine, but if your game is centred around a grid, like a board game or Civilization, you’ll need to account for the offset so that you don’t run into a disconnect between gameplay and visuals.

  11. Bubble181 says:

    To all of you wondering how he’ll reconcile hexes with different terrains in them: who says he has to? Perhaps he’s using the intersection points as locations (à la Go or Settlers of Catan). A point on the grid always has two or three terrains bordering it :-)

  12. Sydney says:

    I think the very first picture (‘where we left off last week’) looks better than any of the others.

    • Pickly says:

      Yes, I though this as well. It also seems that the pixels are too big for the “close-up” view that the players will presumably always be using.

      Of course, there’s probably more graphics work coming, so the terrain may be improved in the future.

  13. Davie says:

    Yay, now I know why the Source engine has five or six filtering options instead of, say, three. I’d always wondered what the difference was between the linears and the anisotropics. Although it doesn’t much matter for me, since my computer starts to chug at anything better than bilinear…

  14. mockware says:

    I prefer the original image myself. In the latter images, you have lost visibility of the hexes. Also, with all the various color choices you have used, how will you be able to make out the game pieces that will go on the board and any information associated with those pieces like hit points or such?

  15. Brandon says:

    This is looking like a really, really cool project. This is really something I want to try my hand at someday.

  16. swimon says:

    It’s a little hard to see elevation in the later pictures IMO but other than that I think it looks really interesting and I’m even more curious as to how this will turn out.

  17. Mephane says:

    I was really hoping for a style similar to

    http://en.wikipedia.org/wiki/The_Settlers_of_Catan

    i.e. each tile would be hexagonal and exactly fill a single hexagon… ;)

    For me the above images somehow look like the thing can’t decide between squares and hexagons as its basic shape.

    Also, just out of curiosity: Do you program this in C or C++?

  18. Neil Polenske says:

    I can honestly say I’m really interested in seeing where this goes…

  19. FatPope says:

    Am I the only one who thought N64-Playstation, when confronted with the filtered vs unfiltered images.

    The bilinear filtering on the N64 could be amazing when done well. Unfortunately, do to the obtuse programming requirements and tiny 4KB texture cache that was very hard to do. My presiding memory of most N64 games was “blurry”. On the other hand the Playstation looked bad precisely because everything was so jaggedy.

    As you mentioned, using advanced filtering techniques requires high res textures, which is precisely what the N64 didn’t have. Still though, the best developers managed to find ways around these problems, meaning that some of the later games on the system were vastly more impressive than the early ones.

  20. SolkaTruesilver says:

    This remembers me of a game named “Survival!” where each players were playing people on an island that was slowly sinking into the sea. You had to gather your people, make them pick up boats, and go to safety. The island disapeared with the beach first, then the forest and finally the rock/mountains.

    There were Whales which destroyed boats and forced your villagers to swim. There were sharks which eat up swimmers (but not people in boat). there were sea dragons destroying both boats and swimmers.

  21. Jarenth says:

    I really enjoy how comparatively easy you’re making this look, Shamus. I appreciate that there’s probably hours of research and code testing behind the facade of this one blog post, but it’s still very cool how you manage to reduce the whole complex creation process to the You-could-do-this-as-well-if-you-tried core.

  22. Licaon_Kter says:

    Why not use fractals for the shore line? :D

  23. Blake says:

    Is it possible to randomize the texture size from 95% to 105% on a per tile basis?
    I think if that was possible the tiling would be even less obvious.

  24. wtrmute says:

    I think that the problem with this tiling is that the separate shades work well so long as we’re working with two-dimensional tiles, because we distribute the shades so as to imply a light source. When the textures are rotated arbitrarily, then the shades don’t line up as well. Also, when you eventually put three-dimensional game pieces in there, they’re going to be illuminated by the actual light source in your scene, which may not mesh well with the light direction implied by your texture.

    That being said, it still looks pretty interesting for a simple set of regolith-looking 16×16 or 32×32 textures… It’s just that I don’t think you should try to imply depth with them.

    • Blanko2 says:

      im gonna be straight and say i hadn’t noticed this till you mentioned it, but then i went back and yeah, mostly on the water, though, rest it looks okay, i think, the grass ends up looking foresty, though.
      with the dirt you cant even see it at all.

  25. Henebry says:

    As I look at this, I realize I have NO idea what the scale is. Are we playing an rpg, in which case each hex is about 5 or 6 ft across, or civilization, in which case a hex is a mile across?

    • Dys says:

      Could be either. The world is fractal, baby!

      • Pickly says:

        Its obviously space. What you think is “water”, “grass”, “land”, etc., is really slang words in wherever Shamus lives for nebula, vacuum, and gas clouds. So it seems Shamus is doing his own space empire game. :)

        (Count me in, as mentioned in a previous post, as another person who’s been curious what this will be.)

  26. Blanko2 says:

    the screenshot with all the filtering applied reminds me of Outcast.
    but yeah its looking cool, can’t wait to see what you do with this

  27. Alex says:

    It was a pleasant surprise seeing that pixel tutorial mentioned on your blog. Those articles are invaluable for anyone looking to dabble in spriting/texturing, I think, and it looks like your project has benefiting from them too.

  28. Moblin_DK says:

    Damn you Shamus. Now I’ve spent way to much time reading about pixel art, and I don’t even have a particularly deep interest.

    But the map looks… serviceable (I would have said good but I just spent a lot of time looking at a masters work ;) )

    Have no idea where your going with this though.

  29. Eric says:

    I’m finding this series extremely interesting. And I’m liking the pixel art tutorials you linked to, but with the amount of times the guy uses “heh,” I’m starting to think he has a nervous tic.

  30. *Blah* says:

    I have to say, I was very surprised when I clicked on the link and was taken to a !Russian website; it was a very interesting read. Where did you find this??

Leave a Reply

Comments are moderated and may not be posted immediately. Required fields are marked *

*
*

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun.

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!