Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon Join the GFS Discord Server!
3. June 2015

 

In this tutorial we are going to look at Sprite Animation in Godot Engine, specifically on using the AnimatedSprite class.  We are going to import and create a node that has multiple frames of animation, then look at some code to flip between frames.  In the immediately following tutorial, we will then cover a much better animation method using AnimationPlayer.

 

As always, there is an HD Video version of this tutorial available right here or embedded below.

 

Alright, let’s just right in with AnimatedSprite.

 

Sprite Animation

AnimatedSprite is a handy Node2D derived class that enables you to have a node with multiple SpriteFrames.  In plain English, this class enables us to have a sprite with multiple frames of animation. 

 

Speaking of frames of animation, this is the sequence of png images I am going to use for this example:

image

 

You can download the zip file containing these images here, or of course you can use whatever images you want.

 

Now we simply want to import them to our using the standard Import->2D Texture method.  Be aware, you can multi select in the Importer, so you can import the entire sequence in one go.  Assuming you’ve done it right, your FileSystem should look somewhat like:

image

 

Now add an AnimatedSprite node to your scene like so:

image

 

Now we add the frames to our AnimatedSprite by selecting Frame->New SpriteFrames

image

 

Now drop it down again and select Edit:

image

 

The 2D editor will now be replaced with the SpriteFrames editor.  Click the open icon:

image

 

Shift select all of the sprite frames and select OK

image

 

All of your sprites should now appear in the editor:

image

 

Now let’s add some code to flip through the frames of our AnimatedSprite.  Attach a script to the AnimatedSprite node, then use the following code:


extends AnimatedSprite

var tempElapsed = 0

func _ready():
   set_process(true)
   
func _process(delta):
   tempElapsed = tempElapsed + delta
   
   if(tempElapsed > 0.1):
      if(get_frame() == self.get_sprite_frames().get_frame_count()-1):
         set_frame(0)
      else:
         self.set_frame(get_frame() + 1)
      
      tempElapsed = 0
   
   print(str(get_frame() + 1))

The logic is pretty simple.  In our process tick we increment a variable tempElapsed, until 1/10th of a second has elapsed, at which point we move on to the next frame.  If we are at the last frame of our available animation, we then go back to the very first frame.

 

When you run it, you should see:

walking

 

Pretty cool!  However, instead of advancing the frame using code there is a much better approach to animation, that we will see in the next tutorial.  Stay tuned.

 

The Video

Programming


1. June 2015

 

Today we are going to look at creating 2D maps composed of tiles.  You can think of tiles as re-usable lego block like sprites that are assembled to create a more detailed map.  Tiles are stored in a data structure called a tileset, where collision details can be added.  These tiles and tile sets are then used to “paint” 2D scenes in something called a tilemap.  A tile map itself can contain multiple layers of tiles stacked on top of each other.  Don’t worry, it will make sense once we jump in.

 

WARNING!


When I wrote this tutorial, the majority of functionality I cover is currently under very active development. In order to follow along with this tutorial you need to have version 4.8 installed. Currently 4.8 is in preview release only, hopefully it will be released soon and I can remove this message. For now however, if you want to work with 2D tilemaps with collision data, you need to install the development release. For details on how to do this please read this post.

 

So, at this point I assume you either have the developer preview download, enough time has elapsed that this functionality is in the main release or you are simply reading on for future reference.  All the disclaimers out of the way, let’s jump in!

 

There is an HD video version of this tutorial available here: [Coming Soon].

 

Creating a Tileset

 

First start off by loading a sprite sheet texture in Unreal Engine, details of loading a sprite are available here.

For  this particular example, we need some tiles to work with.   Instead of creating my own spritesheets, I am going to use some of the free graphics that Kenney.nl makes available, specifically the Platform Pack.  Obviously you can use whatever image you wish, just be sure that the tiles are size the same and ideally that your image is a power of two in size. 

Import the spritesheet you are going to use for your tiles, in my case I selected Spritesheets/spritesheet_ground.png.  Make any changes you wish to the texture, such as disabling mipmaps and turning filtering to nearest.

Now right click your newly created texture and select Sprite Actions->Create Tileset:

image

 

This will then create a TileSet object, double click it to open the editor.

image

 

The TileSet editor should appear:

image

 

Across the left hand side are all of the tiles that are in your imported sprite.  Selecting one will make it visible in the top right window.  The bottom right window has properties for the entire texture set.  The most important to set right away is the Tile Size:

image

 

Here you enter the pixel dimensions of each individual tile within your image.  In the spritesheet from Kenney.nl, each tile is 128x128 in size.  The remaining settings are for tilesets that have gaps between tiles and aren't applicable in this case.  Both the left and top right window can be zoomed and panned using the regular commands.

 

Now let’s look at setting up collision shapes for a few tiles.  First select a tile from the left side, like so:

image

 

A white rectangle will bound around the selected tile.  It will now appear in the top right window:

image

 

We can now define bounding shapes using the toolbar:

image

 

In this case, a simple box is the easiest ( and least processing intensive.  So click Add Box:

image

 

This will now make it so the entire surface causes a collision.   For non-box shaped tiles, you are often going to want to use the Add Polygon option instead, then define the collision boundary accordingly, like so:

tile

 

Simply click for each vertices you wish to create.  Once done hit enter to finish your shape.  You can shift click to add new points to an existing shape.

Repeat this action for each tile that has collision data.  If a sprite is able to pass completely through the sprite without collision you don’t need to provide a collision shape at all.  Repeat this step for each tile in your set that can be collided with.

You can easily check which tiles you’ve defined a collision shape for by clicking Colliding Tiles:

image

 

When done click Save and we have just created our first TileSet.

 

Creating a TileMap

 

Now it’s time to create a Tilemap.   To create a tilemap select Add New –>Paper2D->Tile Map

image

 

This will create a new tile map object.  Double click it to bring up the tilemap editor.

image

 

Here is the tilemap editor in action:

image

 

On the left hand side is a selection of tiles you can paint with.  In the middle is the canvas you paint on, while on the right are your layer controls and the layer properties.  There are a couple critical things you need to configure right away.

 

First select your tileset.  On the left hand side, drop down the Active Tile Set dialog ( hit the grid icon ) and select the tile set we just created.

image

 

Now in the layer properties, we set the size of our tiles and the overall width and height of our layer ( in tiles ):

image

Start by selecting a base tile to fill the entire map with, select file mode and then click somewhere inside the map grid, like so:

 

Select base tile:

image

 

Choose Fill:

image

 

And click:

image

 

Now select an individual tile to paint with, click Paint, then draw it on the map, like so:

tile2

 

Quite often you are going to want tiles to appear “over” other tiles.  This can be accomplished using layers.  To add a layer simply click the Add New Layer button:

image

 

The order layers are drawn is the same as they are displayed:

image

You can use the up and down icons to change the layer order.  The layer selected ( the one highlighted ) is the layer that all drawing will occur on.

 

Adding your Tilemap to the Scene

 

Now that you’ve created your map, you can use it like you would any Sprite object.  Simply drag it into your scene:

tile3

 

The positioning of the tilemap is important, the Y value is going to determine what is drawn over or under when drawing the scene, just like with sprites.  In this case however, sometimes you want to position your sprite in front of the background, but behind a foreground layer, like so:

tile4

 

This is done using a property called Separation Per Layer in the Tilemap details.

 image

This is the Y coordinate ( confusingly called Z order in the tooltip ) of the layer within the game world.  For example if you position your tilemap at Y= –10 and set Separation Per Layer to 50, the first layer will be at Y=40, the second at Y=90, etc.  Therefore a sprite at 0 will draw in front of the bottom layer, but behind the top layer.

If you want to see a more detailed example showing collisions in action, be sure to watch the video version of this tutorial.

 

The Video

 

Coming soon

Programming


29. May 2015

 

Up until this point we’ve covered a ton of the items that go into making a game, but nothing resembling a game… the pieces simply didn’t fit together.  In this tutorial we are going to change that and start bringing everything we learned together.  We are going to be covering a lot today, so if I lose you let me know.  This might be one of those tutorials where the video version comes in very handy.

 

Once again, I am simply going to assume you’ve gone through all the prior tutorials, so instead of telling you how to make a flipbook, I simply say “Make a flipbook”.  So if you haven’t already, you may want to go back and read or watch the earlier tutorials.  Ok, let’s jump right in.

 

There is an HD video version of this tutorial available here, or available embedded below.

 

 

Actors, Pawns, Characters and Controllers

 

In the world of Unreal Engine, things that exist in the game world are Actors.  Quite simply an Actor is an object that can be placed into a level.  It contains details like position, rotation and scale.  Most importantly, Actors are containers for Components, or even a hierarchy of components.  Components can be thought of as attributes or properties of an actor…  these are the things the actor is and does, and the Actor->Component relationship is a big part of Unreal’s modular design.

 

There are a few very important classes derived from Actor that are very important.  The first of which is the Pawn.  Basically a Pawn is an Actor that can be controlled by either the player or the games AI. Each Pawn has a Controller and each Controller has a pawn.

 

The Controller can control a pawn.  This takes two forms, AI controllers and character controllers.  The AI controller is responsible for the artificial intelligence that controls a pawns movements.  The Player Controller on the other hand is responsible for handling input from the player(s) and applying the results to the character’s pawn.

 

Finally you have Characters. A Character brings a number of objects together to represent that character.  In the 3D world, the Character class extends Pawn to include a skeletal mesh, a mesh for collision detection and of course whatever components you add.  In the Paper2D world there instead is PaperCharacter, which instead of a mesh instead has a Flipbook.

 

These key classes all work together to provide the building blocks of your game.  Don’t worry, we are about to see it all in action in a few minutes.

 

Getting Ready

 

We are now going to create the skeleton of a game, but this is going to require you to do a few things.  First of course create a new project, I am using these settings:

image

 

After loading I want a completely clean slate so I select an delete everything the project included:

image

 

Next, we need to import some sprites, both as a background and to create a flipbook for our main character.

 

I am using a simple three frame animation using this frame, this frame and this frame.   For my world background I am using this image.  Any likeness or similarity to an existing game is purely coincidental…   Obviously you don’t have to use these images, but if you want to follow along exactly you can.

 

Load all four images in as textures, then make a sprite from each.  Create a new Sprite Flipbook out of our 3 frames of animation and set the frame rate at 2fps. Then drag the fourth sprite in as our scenes background.  Be sure to set the backgrounds Y value to a negative so our game sprite will draw in front of it! 

 

Ultimately you should have something like this:

image

 

With a Flipbook like this:

pacbook

 

Creating a Main Character

 

Now that we have a world and an animation, it’s time to add a character to the game.

 

To do so, select Add New, then Blueprint Class:

image

 

It is going to present a dialog with a number of the options we talked about earlier.  The one we are going to use in this example isn’t actually on the list so select All Classes:

image

 

In the filter type “Pap”, then locate PaperCharacter, click it and press Select.

image

 

This will create a new Blueprint for you, I immediately renamed mine MyPlayer.

image

 

I suppose I should point out, you don’t have to use PaperCharacter, any Pawn derived class is fine, although the process will be slightly different.

 

In the Content Browser, double click MyPlayer to bring up the Blueprint editor, it should look something like this:

image

 

Now we need to set the Flipbook for our Player.  You will notice on the left hand side, several components are already defined:

image

 

Select Sprite.

 

Now with sprite selected, it’s details should appear on the right hand side.  No locate Sprite and select the Flipbook you created earlier:

image

 

In the Viewport tab, your Player should now look like:

pac2

 

Now we want to shrink the capsule down to match our sprite.  The capsule container is used for doing collision tests and should be as near an approximation as possible.  Simply select the capsule in the viewport, then in details locate Shape and set the two values until it just fits around your sprite.  I used:

image

 

And the end results looks like:

image

 

 

Adding a Camera

 

Let’s look at the process of adding a component to an actor, in this case a Camera.  This will create a camera centered on the Actor.  To do so, in the Components panel select Add Component, then Camera:

image

 

In the viewport you will now see your new Camera component:

image

 

Right click select it, hit E to rotate and rotate it 90 degrees.  Then hit W to move it, and move it back along the X axis.  Something like this:

image

 

The angle and distance between the camera and the sprite are important, but once you’ve got things configured correctly ( in a few minutes ), you will be able to hit the Play icon and preview the effect of the camera on your player.  If we needed more fine tune control of the relationship between the camera and the sprite, we could add a Swing Arm component and attach the camera to it.  We don’t need this in this particular example though.

 

Configuring your game

 

Now that we have our player class, we need to let the game know that it is our player.  This is done by creating a GameMode blueprint.  To do so drop down the Blueprints icon, select GameMode->Create->GameMode, like so:

image

 

In the resulting dialog, name it then select OK.  I’m going with the default NewGameMode.

image

 

This will create a new Blueprint but the part you are most interested in are the properties.  It is here that you configure a number of important top level classes for your game.  Locate “Default Pawn Class” in the Classes section and select your Player class.

image

 

Now when the game starts, and instance of your Player class will automatically be created.

 

Now we just need to tell the game WHERE the player should be created, and this is done using a Player Start object.  In the Modes dialog, locate or search for Player Start and drag one onto the scene where you want the player pawn to be created.

image

 

And position it like so:

image

 

Now press play and we see…

pac3

 

Hmmm… that’s not good.

 

The problem is, our game world has gravity enabled by default and we don’t want this.  The easiest fix is to turn gravity off.

 

To turn off gravity, in the World Outliner, double click your map to bring World Settings dialog up.  Now locate the Physics section, check Override World Gravity and make sure gravity is set to 0.

image

 

Now when we press play we should see:

pac4

 

Much better, we are now one step closer.  We have a world (sorta…  I’ll admit, we are faking that part pretty heavily here), we have a main character… now we just need to add some controls.

 

Simple Keyboard Controls

 

Now we are going to jump into some Blueprint programming to add some keyboard controls to our player.  Double click your MyPlayer blueprint to bring it up in the editor, then select the Event Graph task.  Personally I am deleting all of the premades that they provide to keep things a bit cleaner.

 

Now we are going to add an input handler for when the user presses the Right arrow key.  Simply right click the canvas, type Right and select Key Events –> Right like so:

image

 

We create this simple blueprint.

image

 

Now when the user releases the right arrow, we move the Character Movement component of our player by 20 along the X axis.

 

Now through the power of Cut and Paste, we quickly create the following simple control scheme:

image

 

All that changes is for each key pressed we move in a different direction, either +/- x for left and right, or +/- z for up and down.

 

In case you didn’t know, you can rectangle select a region of blueprint and replicate it use the traditional cut/copy/paste hot keys.  Now we we run our game, we have primitive control over our player:

pac5

 

This is a very very very trivial example, and as you can see, it’s missing some logic for left and right as “definitely not PacMan” doesn’t turn to face the direction we are facing.  If you watch the video version of this tutorial I will show a simple way to handle that situation, we are already running pretty long here.

 

More on Input

 

The above example was super simple, we simply respond directly to a certain key being pressed.  In your game you probably wont end up using this logic.  Let’s take a quick look at some more advanced control options before moving on.

 

First, there was additional options for the key handling events that I never showed.  With a Key event selected in the Details panel you will see additional options:

image

 

In addition to changing the key handled you can enabled/disable modifier keys like Ctrl and Shift.  You can also control if the keyboard event is handled or will be propagated to the rest of the application by setting Consume Input.

 

More commonly however, you are going to want to handle Input more generically.  Responding to a single key event is all well and good, but what happens when you want the same code to work on a device without a keyboard?  Or you want a joystick to do the same thing?  Or you want the user to be able to remap their own keys?  Well, good news, there is an answer for that.

 

First, select Edit->Project Settings:

image

 

On the left, under Engine select Input then locate the Bindings section:

image

 

This area allows us to create input bindings between controls and either an action, or the axis of a controller ( virtual or otherwise ).  Let’s look at an example of mapping a “Left” axis.

 

Start by clicking the + next to Axis Mapping, expand the new value and rename it left, then add a key like so:

image

 

Now I am going to repeat the task, but also mapping for the left D-pad on a controller and the A key.  The end result looks like:

image

 

Now instead of handling each controller/key separately they will all emit the same “LEFT” event.  When you are creating your input handling blueprint, you can now respond to an Input->Axis Events->LEFT event:

image

 

You will notice the Event for an axis has one additional parameter:

image

 

Axis value is the “amount” along the axis it is.  All of our examples are on/off inputs, but if you had an analog stick, the Axis Value would indicate how far to the left the stick was pressed.  Coincidentally, that is the use of the “Scale” property in the Axis mapping process.  If for example you wanted the Left arrow key to be equivalent of pushing the Left analog stick 50%, you would set the scale value to 0.5.

 

Video

 

Programming


29. April 2015

 

In the previous part we looked at we look in a bit more detail at working with Sprites, now we are going to get a bit more… animated.  In this tutorial we are going to look at using Spritesheets, named Flipbooks in Unreal Engine, to create sprite animations.

 

A bit of a warning before we jump in, as of writing this process is a bit buggy and needing improvement.  Hopefully by the time you read this, the Unreal team have ironed out some of the kinks.  If you want more details on creating the spritesheets and a bit more exposure to some of the Unreal Engine faults, be sure to check out the video version, it goes into much greater detail.

 

This tutorial is available in an HD video here.

 

Importing a Spritesheet

 

A Spritesheet is simply a texture with multiple sprites on it.  This is the one I am using for this example:

spritesheet

 

It is a power of 2 resolution PNG file containing 25 frames of a walk cycle animation.  A bit of a warning however, I HAVE HAD NO SUCCESS WITH PNGs in Unreal.  To get this to work I had to convert to tga format before importing.  Regardless to how the PNG is made, the results are almost always mangled once imported to UE4.

 

To get started, simply drag the texture in as normal.  The critical part of this equation is that your file must have an alpha channel, as the alpha channel is used to calculate each sprites location in the next portion.

 

Now that we’ve added our spritesheet to our textures, simply right click and select Extract Sprites:

image

 

Using the alpha channel, it will automatically create a sprite for each image in the spritesheet, like so:

image

 

With all of the generated sprites selected, I now moved them into their own folder in the Sprites folder.  This step is of course strictly optional.

 

Now a bit of a bug/problem with Unreal Engine…  Each of the generated sprites is automatically named, but the names themselves make no sense.  First off, they are named FILENAME_Sprite###.  However, the Content Browser doesn’t sort properly for alpha numeric, meaning that Sprite11 and Sprite12 come before Sprite2 and Sprite3, which makes things particularly painful to work with.

 

Even worse, the order they are created in makes absolutely no sense right now… so the process of creating a flipbook is needlessly complicated.  You’ll see what I mean in a moment.

 

First lets look at a generated sprite and suddenly Edit Source Region will make a ton more sense.  Simply double click a sprite to bring it up in the Sprite Editor.  Here is the very first sprite in the sequence opened in the editor. 

image

 

Now click Edit Source Region and you will see how multiple sprites can be stored in a single texture:

image

 

As you can see, our sprite is actually just a very small portion of the over all texture.  We would expect the next sprite to be Sprite2, 3, 4, etc…  but sadly, they aren’t.  I honestly cant make rhyme or reason of the naming convention Unreal used for automatically parsed sprites.  Sadly you will need to figure them out in order to deal with the next part of the process.  Hopefully this all gets fixed soon, as it’s extremely irritating.   For now select each sprite and figure out where it is in the order…  mine basically went

 

Row1: sprite, 2,3,4,5,6,7

Row2: 12,13,14,11,10,8,9

Row3: 15,16,17,18,19,20

Row4: 24,25,23,22

 

 

… if you see the logic there, good on you!  Ultimately once you figure the order out, the names really don’t matter, but you can rename them to make sense if you want.  Or you could change the UV values of each so the existing names actually make sense.  Me, I’ll just wait for Unreal to fix this mess.

 

Creating a Flipbook Animation

 

Anyways, once you’ve figured out your sprite frame orders, it’s time to create a new Flipbook.  Simply select New->Animation->Sprite Flipbook, like so:

image

 

A new flipbook will be created, feel free to rename it.  Then double click it to bring up the Flipbook Editor:

image

 

Now what you want to do is drag each Sprite over to the bottom of the page, in the order of the animation frames ( that’s the list I made above.  Basically if your spritesheet is like mine you want the top row, left to right, then the next, and the next, etc ).  The order they are dragged is the order they are played in the sequence:

image

 

You will see a real-time preview of your animation as you drag sprites in:

g2

 

You can change the over all speed of your animation here:

image

 

That is the number of frames that will be shown each second.  So a 26 frame animation would take 2 seconds to complete.  You can also set the duration of each frame, here:

image

Frame Run is how many frames this animation frame will be shown for.  For example, if you had Frames Per Second set to 10 and Frame 1 set to a Frame Run of 5, that particular frame would be shown for 1/2 a second.

 

Now your animated sprite can be added to the scene just as easily as a normal sprite, simply drag the flipbook in to your scene:

g3

 

Truth is however, you will rarely use a Flipbook this way, instead they will generally be owned by an Actor, which we will cover in the next portion.

 

The Video

 

Programming


28. April 2015

 

In this tutorial we are going to explore the tilemap functionality built into the Godot game engine.  A tile map is a 2D game map composed of layers of “tiles”, which are essentially just a fixed size sprite with some additional properties.  It allows you to quickly paint a level and reuse art assets, greatly decreasing storage and memory requirements for levels.  In addition to supporting tile maps, Godot also includes a handy editor, although there certainly are some warts.

 

There is an HD video version of this tutorial available here or embedded below.

 

We are going to require two scenes for this example, one to create our tileset and one to actually use it.

 

Creating a Tileset

 

Before we continue though, I need a tileset to use.  Instead of creating one, I am going to use this one from OpenGameArt.org.  Of course, you can use whatever image you want, just be sure the tiles are the same size and have no spacing between them (if you want to keep the math easy).

 

Here is the tileset I chose:

PathAndObjects

 

This version however is shrunk down, use the link above if you want to use the exact same tiles.  Each tile in this image is 32x32 pixels in size.  This will be important shortly.

 

Now let’s create a tileset in Godot.  Create a new scene.  This process is really labor intensive unfortunately, but very powerful too.  Create a root Node, then a Sprite for your first tile.  Each tile needs to have a unique name.  I am only going to use a subset of what is available on that spritesheet, but you simply repeat the process to add more.

 

Create a hierarchy like this:

image

 

Now for Sprite Tile1.  Now configure the sprite’s Texture to your spritesheet.  Importantly, set Region to on and set the Region Rect to 0,0,32,32, like so:

image

 

This sets the image source of this tile to a 32x32 region at the top left corner of the texture.  Now you should see:

image

 

Now let’s setup snapping, so we can arrange our tiles in a nice grid.  Select Edit->Configure Snap

image

 

Set Grid step to the same dimensions as your tiles, in my case 32x32:

image

 

Now select “Use Snap” as seen in the menu above.

 

The next part is optional, if you want to use physics or collisions or not.  If you do, we now need to set up StaticBody and hit detection boundaries.  This process is the same as we went through in the previous tutorial so I am not going to go into details on how.  You do want the end result like this however:

image

 

Then define the areas of your CollisionsPolygon2D that are collide-able or not, like so:

image

 

Turning snap on and off is critical here.  Snap makes it easy to create the initial bounding box, as it will automatically snap to each corner.  However, when you start adding fine detail, be sure to turn it off.

 

Now repeat this process for each tile you wish to include from your spritesheet.  You can make the process a great deal quicker using the Duplicate option ( or Ctrl +D ).  Simply select your first tile then duplicate.  Then you just need to reposition it on the map, redefine the CollisionPolygon2D bounds and of course, update the region to the next tile, like so:

image

 

This will select the next tile from the top left of the image.  Repeat until you have all of your tiles defined.  Yes, it would be nice if this was an automated process!

 

Because I’m lazy, im only going to define three tiles, like so:

image

 

Which look like this with collision polygons defined:

image

 

Please note, there was no need to put space between each tile like I have here.  Now that we’ve defined our tiles, first save your scene, I called mine tilemap.scn.  Now we are going to export a tilemap.  Simply choose Scene->Convert To…->TileSet…

 

image

 

I called mine tileset.xml.  Be aware of the option Merge With Existing.  When you make changes to your tileset in the future, you probably want to turn this off if you want your changes to be completely overwritten.

image

 

I personally found the Collision polygon exporting to be extremely buggy.  You may want to open up the generated XML file and make sure collision information was properly exported:

image

 

Using a Tilemap

 

Now that we’ve got our tileset created, our collision polygons configured and all things ready to go, it’s time to create a new scene then create a Tilemap.

 

The Node you want to add is a TileMap, like so:

image

 

Configure your tilemap like so:

image

 

If you are using Physics, set Use Kinematic on, otherwise don’t.  Set the Cell Size to the size of your tiles and tileset to your newly exported tileset.

 

You will notice now, with the TileMap node selected, your tiles will appear down the left hand side of the 2D editor window:

image

 

You can now use these to “paint” your level, like so:

image

 

You can create multiple TileMap objects if you need to have different layers of tiles (like foreground props for example).  Today though, we are going to stick to this simple example.

 

Finally I created a RigidBody sprite to interact with our tilemap, so our final scene looks like this:

image

 

Now when we run it, it should look like:

g1

 

You can make some edits to your tilemap from within Godot without re-exporting the tileset.  With your Tilemap selected, select your Tileset property, then Edit:

image

 

You will notice a new Theme menu appears, allowing you to edit your Tileset, such as adding new items:

image

 

You can also see the tiles that make up the tileset in the Inspector:

image

 

The Video

 

Programming


See More Tutorials on DevGa.me!

Month List