Pix3M's avatar

Metatiles - In a Nutshell

By Pix3M
672 Favourites
This thing won't teach you how to make awesome metatiles more quickly, but it's something to help explain what they are.

Poke me about anything if there's confusion

Also check out this tutorial to making better tile textures by Cyangmou
Basic Tiling by Cyangmou
Image size
1008x6704px 147.24 KB
© 2014 - 2020 Pix3M
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
Randommode's avatar
RandommodeProfessional Digital Artist
Awesome! Thank you for making this 
StrandedGeek's avatar
This shall prove to be most useful to me. I've only recently learned the magic of tile sets and solving my previously unsolvable background problems I was having, (for the most anyway). I shall have to take notes try to remember this for the future.

Thank you very much! ^.^
BizmasterStudios's avatar
BizmasterStudios General Artist
Absolutely fantastic!
cyrad's avatar
This is a great tutorial. It's worth mentioning that the original Sonic the Hedgehog games used metatiles. The Sonic game levels are made of 128x128 tiles, which were created using 16x16 sprites.
JustinGameDesign's avatar
JustinGameDesignProfessional Digital Artist
Thanks for sharing this!
AzKai's avatar
AzKaiProfessional Digital Artist
Love it! Thank you, Pix3m :)
pickledtezcat's avatar
pickledtezcatHobbyist Digital Artist
If you offset the tiles by 50% you only need to calculate the N/NE/NW neighboring tiles, so you can have a 2x2 grid of metatiles (just 16 variations per terrain type) further if you use an alpha channel and render several layers in multiple passes you can limit yourself to 16 tiles per terrain type, and also have feature tiles to go on top.

Like this:
finticemo's avatar
finticemoHobbyist Digital Artist
The base set you show there looks like suitable input for Tiled's terrain (which basically does the handling of simple edge blending, where you can draw solid grass or stone, and it uses your blending tiles to make stuff fit in.). I mention this because that means you can make your (single layer) tilemap with the smaller 'metatiles' and then generate the needed full size tiles from a bitmap export of the map.
blazah99's avatar
Good examples and explanation Pix3m, going to be saving /using this to refer to in the future. =)
Geneen-Bones's avatar
Geneen-BonesHobbyist Digital Artist
This is useful, not only for games but creating scenery aswell
skittlefuck's avatar
skittlefuck Digital Artist
Very well done tutorial, you picked a very good palette too!
immortius's avatar
These are also known as Wang tiles/tiling - programming-wise there are some good papers under that term, particularly a GPU Gems article.
Metagenki's avatar
Also, you explain things well.  I like how you walk us through the thought behind it.
Metagenki's avatar
Reminds me a lot of Warcraft 2 map editing.

Hey, what about hex metatiles?  I imagine those might look less gridlike, though straight paths might be weird to do.  I guess some games must have done it, by now.  I never thought much about it.
Pix3M's avatar
Pix3M Digital Artist
Most hex grids I've seen are used for strategy games that makes the tile grid part of the game, so hex tiles actually look very grid-like for the sake of good game design.

They sound a lot more difficult to work with too, and I have never had a need to work with hex tiles.
MiraKHall's avatar
MiraKHallHobbyist General Artist
This would be a very interesting thing to try and program on a random level generator in games via RPG maker or Flash; if: variant.soliddirt = 2x.2y(); addChild.externaldirts(1-8);

Sorry; got some pseudo ActionScript 3.0 codes stuck in my head after class today, and I don't even like programming; however, thinking about its potentials is a different matter, and this resource you made got me to thinking in regards to 2D random level generators :) It's very well done!
Pix3M's avatar
Pix3M Digital Artist
Oh yeah. Metatiles are really good for any level editor that works by saying 'these tiles will be assigned 'grass', these tiles will be assigned 'dirt''. :thumbsup:

Though I am fairly sure every RPGmaker versions already have a metatiling system. :O_o:
MiraKHall's avatar
MiraKHallHobbyist General Artist
Yeah, a pretty advanced form of metatiling programming system that a program hobbyist could work with.  I was thinking along the lines of Flash and/or from pure scratch.  Like I said: I had Flash on the brain since I got back from that class today, and the code writing we did was brutal to my minor language-disabled mentality ^^;
MystalurDimensh's avatar
MystalurDimenshProfessional General Artist
Funny, I had the same idea of making a random level maker that would stack up meta tiles on basic ones which would yield advanced level designs. Though, it would have to take many variables into account, so I don't know if it would be efficient in practice.
MiraKHall's avatar
MiraKHallHobbyist General Artist
Yeah, I have noticed the dark side of using variables :paranoid: How do you programming guys deal with it?  It's such a headache-inducing mystery to me most of the time, but I have a lot of respect for it.
MystalurDimensh's avatar
MystalurDimenshProfessional General Artist
It depends on the project, but if I have common types of values for different objects, storing variables in (multi-dimensional) arrays helps a lot.
GrimmBulbasaur's avatar
GrimmBulbasaurStudent General Artist
lol thought this was pokemon at first XD
Pixelkh1's avatar
Pixelkh1Hobbyist General Artist
Very usefull.
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In