Sporadic Godot Tutorials - Tile Sets and Autotiling

Well, because I need to get popular somehow and I'd rather not start up some kind of horrible controversy involving throwing eggs at people in a public space while screaming my YouTube URL, my only other option seems to be to make more tutorials. This isn't the classic "Gitting Gud At Godot" stuff because that was kind of dense and I feel as though there was a kind of progression from simpler material to more complex tutorial.

This "Sporadic Godot Tutorials" thing that I'm doing right now is gonna be a bit all over the place compared to that, and I'll probably opt to explain more specific things. Hell, I don't even know if I'll ever do another one of these so I don't know why I'm framing this as a series but if you have anything that you desperately need explained, then send me a message or a comment and I'll see what I can do!

So let's get down to business. I assume that most people reading this know what a tile set is, but for the purposes of completeness I'll give a brief explanation here.

In Godot, there are two components to a tile system. One of which is the tile set, and one of which is the tile map. The tile set is kind of like a bunch of generic ingredients (flour, sugar, water) whereas the tile map is what you actually do with them, or specifically, a literal grid of the tiles which are defined in a tile set.

Here's an example of a tile set sprite from a game I made, Mushroom: The Ruckus:

 (sorry about the trailing whitespace!)

As you can see, there's a bunch of tiles here, each of which is a 16x16 tile. This is just saved as a .png file and placed into some folder in the project. However, we haven't finished creating a proper tile set as far as Godot is concerned, so let's get into the engine.

Create a new scene and save it as something like "tileset.tscn". This is something you should keep around- that is to say you shouldn't discard this as soon as the tile set data is generated!

Create a tree root node of type Node and then add some sprites. Each sprite you create will equate to one tile in the editor, with some exceptions that I'll get onto in a moment. However, at the moment we're at a cross-road. If you want to figure out how to do autotiling, you're gonna have to skip ahead of this bit. If you don't know how to do even normal tiling yet, then I'm about to explain that bit so stick around for a moment.

So for a standard tileset, add some Sprite objects and name it something unique. The name you give each Sprite will correspond to the name it is given in the tile set itself, so make sure that it's informative and clear.

Also, if all your tiles are stuck together in one big .png like mine are above, you're going to have to load that .png into each Sprite and set the region. You can do this by selecting the Sprite, scrolling down to "Region" and make sure it's enabled then set the Rect. This value is basically just a value that corresponds to a rectangle of the Sprite that is going to be displayed, so the X and Y parts are the position of the top left corner of the rectangle and the W and H parts are how wide and tall it is, respectively. It should look something like this:

One more thing to note is that in order to create tiles that have collision, you'll need to add a StaticBody2D node as a child of the Sprite. Also, you'll need to add a CollisionShape2D with the appropriate shape in order to map what the collider should be and then you're good to go.

So yay, you've done it! You've created a tile set- well, nearly. All you need to do now is to generate the .tres file(which stands for text resource, I think) which can be loaded by a TileMap node in another part of your project.

This is super easy, you just have to go to "Scene" in the top left, move down to "Convert To..." and click "TileSet". Save your new tileset resource as something memorable like "tileset.tres", create a TileMap somewhere else, load "tileset.tres" into your TileMap and you're good to start placing some tiles!

Now, onto AutoTiling!

So at this point and regardless of whether you want to, you're gonna have to put all the tiles that you want involved in this autotiling stuff into the same .png file.

Also, you're going to have to open your "tileset.tscn" scene file and create a new Sprite that loads that entire .png into it. This is important: Don't set the region like you might done previously! From my experience that'll mess things up for you. Just convert this scene to a tileset resource as described above and load it into a TileMap. You're definitely not done yet, though.You've yet to even begin the real AutoTiling work!

So you've created a TileMap that has the Tile Set property set to your lovely tile set resource. Click on that resource to open it in the inspector, scroll down to the tile that's holding the whole tileset and tick the "Is Autotile" box, as shown to the left- I've named my tile "AllTiles", since it holds all the tiles.

Next, you'll notice that a button that says "Autotiles" has appeared at the bottom, next to the "Output", "Debugger", "Audio", "Animation" or whatever other buttons you might have down there. Click that, and it'll open the AutoTiler menu.

Before we do anything here, go to the left hand column (where it would normally list your tiles) and find the "Properties" menu just below it. Set "Bitmask Mode" to 3x3 and Tile Size to whatever size your tiles are. Mine's 64x64, for instance.

Now that you've done that, let's get into what all this crazy stuff in the AutoTiling menu means. The first menu is "Icon", and that one's pretty easy. It's basically the default tile to show if the autotiler can't work out which tile to place. Just pick whichever one happens to work for you, but I picked this one by left clicking it:

Now for arguably the most important menu, the bitmask menu. This one is the one that decides how your tiles are automatically selected while they're being placed. Each time you click, you'll notice that it creates a little red box.

Each tile has 9 potential spaces (with a 3x3 bitmask, if it's 2x2 then it's only 4) to place a red box. Each red box basically means "put me here if there's a tile in this position relative to me". This is a bit confusing to get your head around at first, but just carry on.

Pretty much any tile that you want to show up needs a red box in the center, because that center red box represents the tile itself. Here's what my bitmask screen looks like:

Let's take the line of tiles in the middle first. The tile at the very top will only show up if the tile directly below it is also filled in, so I placed one red box in the center and one in the center bottom position. Similarly the one at the very bottom will only show up if the tile directly above it is filled in, so I placed a box in the center and a box in the center top position.

Let's take the top left corner of that blob to the left-hand side. That corner will only show up if 1. the tile to the right of it is placed, 2. the tile below it is placed and 3. if the tile to the bottom-right is placed. Therefore, I put a red box in the 1. center-right position, 2. center-bottom position and 3. bottom-right position.

I'm not sure if I've made this very clear, but just mess around with these things in mind- you'll get the hang of it soon enough.

For these tiles, I didn't set any collision because they are meant to be walked all over by everybody else. However, if you did want to set collision you'd have added a StaticBody2D with a BLANK CollisionShape2D node to the Sprite back in "tileset.tscn", and then you'd go to the Collision menu and drawn in collision shapes for each tile. That bit's pretty easy but also hellishly buggy as of Godot 3.0.2, so good luck. Changing settings randomly, node hierarchy, saving resources and loading them again- it's a bit of a mess and I'm pretty sure it's gonna be fixed in 3.1, but for now it's really a "fuck with it until it works then never touch it again" type thing.

I don't even know what the Occlusion menu does but I'm pretty sure it's to do with lighting/shadows so I haven't and will not touch it. Sorry!

Navigation is similar to Collision in that you can draw polygons onto each tile to map out a nice NavigationPolygonInstance that you don't have to draw manually after placing the tileset. It isn't always useful, since all of the tiles above are places that I don't necessarily want enemies to automatically pathfind through- for instance, if there's a solid house on grass, I'd rather the enemies look to get around the house rather than straight through it.

The Priority tab is actually quite cool. Basically,if you've mapped multiple tiles with all the same bitmask rules then it'll randomly select one of those tiles to place when the conditions are met. However, the chance of one tile being chosen over another is actually perfectly random unless you modify the chances of it being chosen in the Priority tab.

When selecting a Tile, it'll highlight the other tiles with the same placement rules and it'll give you a fraction of how likely it is to be placed compared to the other tiles. You can select a tile you want and use the up or down arrows next to the text field to modify the chances, so instead of a 1/16 chance for a tile to be placed, you can make it a 3/18 chance, as below:

And that should pretty much do it for all your tile set needs. You can return to your tilemap, select the "AllTiles" tile and start placing and it should start AutoTiling for you. If you want to know anything else about TileSets/AutoTiling/etc then let me know, if you want a tutorial on another specific engine feature then also let me know then. 

Thanks for reading, and good luck with the autotiling!

Mushroom: The Ruckus - A Post-Mortem

Oh lord, what a mistake I have made.

I'm not referring to Mushroom: The Ruckus just yet, I'm still stuck on the fact that I apparently can't keep a steady upload schedule to save my life. I'll give some explanation as to why at the end of the video, but it's not very interesting so I don't want to scare away all the people who legit just wanna know how my game did.

So, for those of you who don't know (and I wouldn't blame you for not knowing) Mushroom: The Ruckus is a top-down hack'n'slash thingy where you play as a mushroom and you kill all the other mushrooms. It costs $2 or £1.69 so it's not expensive but there's not a lot of content going on there. The reason for this was because I decided that I'd seriously cut down on how much time I would spend on this one.

My last project, Mass O' Kyzt, took me about 9 months from start to end. It still didn't have a lot of content because a lot of that time was just me removing the content and making it again but better. This meant that I effectively wasted a lot of time to create a pretty sub-par project.

This time, I decided that I'd seriously speed up the dev cycle and just get it done before I could even have time to start hating it. Trust me, I still got to that stage in the last week of development or so but I managed to pump out most of the game before I got there. Mushroom: The Ruckus only actually took me a little over one month to create. I started the main character design at about 1AM on March 23rd while talking to a friend and I released the whole game on May 1st.

I think overall, yeah this is way preferable to spending 9 months on something that's not even fun to play by most metrics. However, I think I cut the dev time a little bit short when I could maybe have used a bit more time. I don't know if more time would have even helped because quite frankly I'm not that good at a lot of the things this game focuses on- things like story, graphics and whatnot.

However, I did find myself working 8 hours a day plus school plus social responsibilities for about a month and feeling absolutely destroyed by the end of it. In fact, I still feel mostly destroyed, just a little less so than I have done. And yeah, that's pretty much why I haven't uploaded a video in ages. I'm not exactly presenting this as an excuse because that was a horrible decision.

For the purposes of disclosure, since May 1st and as of May 11th my game has sold 50 copies. This is WAY less than Mass O' Kyzt which sold a lot more, even despite its initially greater price tag and (in my opinion) less appealing visuals. Now you might be thinking "well, 50 copies at $2 a copy isn't bad, that basically makes you back the Steam Direct fee" but unfortunately that is not actually the case. You see, I put the game at a 40% launch discount - another mistake - which meant that about 40 of those 50 copies are only worth barely over one dollar each.

So for the time being, I'm at a net loss. That sucks, but I've only myself to blame in this case. I'm not super upset about it(well, anymore) because I have definitely learned some lessons from the experience and I'm sure as hell not gonna do most of the things I've done again.

So why did Mushroom: The Ruckus only sell 50 copies? There are a lot of reasons and I'm pretty sure all of them are because my marketing SERIOUSLY sucked. Pretty much all the marketing I did was a half-hearted YouTube video and a bad trailer, and I send some copies to some Steam curators. If I was smart, I would have taken an extra month, worked on the game more slowly and actually marketed it properly as I was working on it.

In my defense I did show some gifs on Twitter which netted me about 15-20 followers over the course of two weeks, but unfortunately those were not the weeks leading up to release day, those were like April 1st to April 14th. Even my real life friends who are generally pretty clued into what I do legitimately did not know that my game was being released on May 1st, because up until literally the day before release it was only ever an internal release date.

On April 30th I tweeted something like "oh yeah, by the way, game's coming out tomorrow" which is by far the worst way to build hype since I only have a little under 200 followers and I'm pretty sure a lot of them are bots. 

Also, I should have made proper YouTube videos that document the process a little bit more. This isn't just for motivational purposes, this is because I have a free bank of 800 people who signed up for regular notifications about my content and for some reason, I'm not utilizing that!

One more thing I might add is the price point. Yeah, maybe my game wasn't worth any more than $2 and that's not really the point I'm making but people will believe that your game has more value if it is priced higher. Regardless of the actual "value for money", people generally don't pay attention to a smaller product for smaller money because they perceive it as being disposable or worth less.

I think that the solution to this is to just make slightly bigger games. Nothing too big, but games that would maybe fit a $5 price tag. Also, I have to learn to think in terms of dollars which is great because I don't use that damned currency in my country.

Lastly, lemme talk about how this is the first large game I've made with Godot 3. 

The transition to Godot 3 from Godot 2.1 is one of the smoothest things I've ever done. It is honestly so much nicer to use a nice, slick UI and the audio bus system than it is to have a slightly less nice and less slick UI with whatever the fuck audio system Godot 2.1 uses.

Not only that, but Godot 3 has native support for autotiling. It's not very well documented at the moment so I had to spend a while figuring out how to use it but it's really convenient, albeit a bit buggy with saving collision shapes.

Speaking of bugs, the trail effect after the player dashes.

Now when I was implementing the dash effect, I thought "hey, let's add a lovely trail effect". So after a little while of googling some neat implementations of something like that I found a kind of tutorial that uses a Line2D. I know what you're thinking, "Hey, Alex! You should use the particle system which is like a thousand times better for trail effects!" and yes, you are absolutely right. However, I didn't realize this at the time for some reason.

So I created a Line2D and made it sync up nicely and everything, but in a pixel art-style game I should really try and make the Line2D node actually display in a pixelly way. So I applied a simple pixelization shader to the Line2D.

Well, that didn't work. For whatever reason, we live to suffer and it just turned the Line2D white. I tried applying the shader to a normal sprite and it worked perfectly, pixelated the sprite and everything was in order. Back to the Line2D - not pixelated, just white.

I must have spent like an hour just trying to deal with that and figuring out why even modulating it didn't make it any less white but after a small breakdown I came up with the idea to create a slightly larger Line2D object that is given the exact same data as the other one but uses a screen-space shader to pixelize(pixelate?) anything that is underneath it.

Sadly, this worked. It's really hacky and if you look carefully you can actually see that it slightly messes with the ground in an area around the trail effect, but yeah. It works.

Also, it seems that Godot 3.0.2 actually has some problematic bugs on Ubuntu. I talked about it a bit in a forum post that was made in the community hub but I cannot figure out what the problem is, just that it only seems to occur with the Unity desktop manager, and segfaults when "New Game" is selected in the main menu.

I have seen some bug reports on Github for similar issues, so I didn't make a proper bug report. I suppose the point of this section is just to beware. Hopefully a lot of these growing pains will be fixed in Godot 3.1 or 3.0.3, but yeah- for the moment they're a little problematic.

With all the complaining I've done about the engine I just wanna reiterate that yeah, this engine is awesome and I could hardly love it more. I've made a few successful contributions to the repo too, so I'm slowly climbing my way up to being listed as a developer(which requires 10 commits). 

Anyway thanks for watching(or reading, if you're reading this) and stay tuned for a video regarding my next project. Yikes. I have exams, you know, I can't be doing this to myself.