<\/td><\/tr><\/table><\/p>\nStep 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.)<\/p>\n
I cut out a small part of the map to work with. Something with a little bit of everything: Water, dirt, sand, grass, etc. <\/p>\n
 <\/td><\/tr><\/table><\/p>\nI’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. <\/p>\n This next part is going to be tough to explain. Stay with me here. Remember, we’re drawing a texture<\/em>.<\/p>\n First we wipe our canvas clean, to medium gray. Then I load in a little texture, which will be used for water. This texture:<\/p>\n 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<\/a>. 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.<\/p>\n 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. <\/p>\n I hope this is clear. Each grid point gets a little patch, which I’ve tinted blue because we’re supposedly drawing water. <\/p>\n Now, instead of drawing the patches tiny, I’m going to draw them so large that they overlap a bit.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n Now let’s step in for a closer look.<\/p>\n 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.<\/p>\n 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. <\/p>\n 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<\/em> 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<\/a>, 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. <\/p>\n 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. <\/p>\n Or, maybe we can just turn off all this filtering? Let’s do that. <\/p>\n That’s more like it.<\/p>\n 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. <\/p>\n Let me make a few changes: Let’s see how it looks…<\/p>\n 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.<\/p>\n","protected":false},"excerpt":{"rendered":" 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. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66],"tags":[],"class_list":["post-9813","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/9813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9813"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/9813\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} |
<\/td><\/tr><\/table><\/p>\n
<\/td><\/tr><\/table><\/p>\n
<\/td><\/tr><\/table><\/p>\n
<\/td><\/tr><\/table><\/p>\n
<\/td><\/tr><\/table><\/p>\n
<\/td><\/tr><\/table><\/p>\n
<\/td><\/tr><\/table><\/p>\n
<\/td><\/tr><\/table><\/p>\n
<\/td><\/tr><\/table><\/p>\n
<\/td><\/tr><\/table><\/p>\n