Monster shadow

VIDEO

Unity Tilemaps - Hex, rectangle, isometric + rule tiles

Description:
Unity Tilemaps are incredibly powerful and easy to use. Learn how to get up and running quickly with hexagon, rectangle, or isometric palettes as well as the power of using rule-based tilesets. I'll also show you how to fix things like incorrect sorting order of tiles. 0:00 Intro 0:13 Setup 1:44 Creating a palette 4:04 Tile color and collider 5:25 Hexagon tileset 6:39 Adding depth tiles for a 3d look 8:27 Fixing sorting order of tiles 9:35 Rule-based tilesets 13:48 Custom base class for more flexibility 18:37 Summary =========
ADD A COMMENT

meowsqueak
Great tutorial! Just to clarify, that little circular arrow in the centre of the Rule Tile rule grid is actually “rotate” not “flip”. So it will apply the rule to each 90 degree *rotation* of the tile. This isn’t quite the same as flipping (the double-arrow symbols) as they act like mirrors and reverse left/right, which will produce a different result. You can also use [ and ] to rotate the current brush tile manually, and hold shift with [ and ] to flip. In my default Unity install the latter conflicts with another binding so I had to go into Unity preferences to sort that out.
Tarodev
Great info, thank you! Pinned
Ventura
Hey man nice Chanel, it would be nice a video about 2D optmization,its something that would help a lot of mobile devs like me
Tarodev
That's a good idea. I'll add it to the list 😊
benjamin borja
Hey man, i like your style explaining stuff, did you know if there is an asset that can combine multiple single tile colliders into one single big collider? I have phisycs issues when I'm using tiles beacuse of that...thank you!
srisrid multi purpose channel
Why are you not uploading
srisrid multi purpose channel
@Tarodevoh good
Tarodev
That's so funny. You commented this just as I started uploading a new video. You sensed something was up :P
tobiasfilms
Very helpful tutorial! Is there a way to add rule-based tiling with hexagons?
Tarodev
Yup absolutely! Word of warning though: the required tile combinations go up drastically whilst using hexagons. Be prepared for a bigger art budget/time investment!
DeadDoctor
Awesome tutorial!
Tarodev
Glad it helped you :)
SEE ALL COMMENTS


Transcript:

in this video i'll show you how to get up and running with unity's tile map
system i'll get you across some of the caveats
newbies often fall into then i'll show you the power of working
with a rule-based tileset to create your game worlds
okay so to get started with tile maps in unity
let's just ensure you have got your 2d tile map editor
installed in the package manager which you can get to with windows
package manager once that's done the first thing you will want to do
is right click in your hierarchy 2d object tile map and let's just start
with a rectangular tile map so this will create two objects the
parent which is the grid this is where you can control your cell
size you can add cell gaps to it and the good thing about
this and how time that keeps it nice and easy
is say that this cell here is your zero zero zero tile map right
now tile maps use by default vector 3 int as opposed to vector 3. so if this
is 0 0 0 this one here will always be
1 0 0. even if you've got this cell gap here
and it's elongated right these are always going to match the
vector three inch uh coordinates okay so having having uh obscure
cell sizes and gaps does not change the maths in your scripts at all
it keeps it nice and easy and the swizzle here
is just the orientation so this is default unity default so obviously
horizontally will be the x and and the vertical on the screen will be the y
on the actual time map object itself i will go through this stuff
a bit shortly because we will touch on all this but to begin
painting on your tile map if you've got your tile map selected and you don't
have your palette open already you'll have this little dialog here so
you can just click this then let's just dock this down here like
that okay so now this is your tile palette to
begin actually painting you'll need to create a new palette instance
so click this create new palette let's just call this
the rectangle palette okay and then uh grid will be rectangle
um we'll keep all the defaults here and then just click create
i'm going to put it in my tile map folder and i'll create a
pellets let's folder right there so now we've got our palettes right here
now now that we've got our palette we need a
uh some sprites or some tiles to put to put in this to start painting so uh
to keep it simple if you just create a 2d sprite square
okay you can actually click this button here the sprite in the sprite renderer
to grab the official unity square that they use
and i'm just going to drag this straight up into my project to copy it
so now that i've got this sprite i can just drag this directly into my palette
and let's create a tiles folder and i'll call that square and now
you just need to click it and you can start painting just directly
onto the onto the scene view right there okay okay so there's a few things that
we can look into now so if you click on your
tile map over here you can see the the anchor now if i create just a
cube and i center it to zero you'll notice the cube is not like it's
it's not in the the boxes of the tile map it's so the
center of the cube is zero zero zero maybe you want your tile map to also
have the cells on the actual pivots of those vector3
positions so what you can do is you can click your
tile map and this tile anchor here you can change it to zero
zero and now your tile grid will if if you tell an object to go to you know
vector three uh one one one you know it will
definitely go straight to here okay uh it won't go to
the the middle kind of um grid point so
that's one thing you can do another thing is on your this is the
tile that we made so this is this this is the
uh instance of this tile here and this is just a basic tile um which
derives from the base tile class and basically it's just
given you a few additional things here so we can just
directly change the color okay not too exciting and then we can
also add colliders to it so right now it's sprite
collider and if you'll see i will just create a
sprite here and let's make it a circle and move it up here let's give it a
rigidbody2d a circle collider 2d and if we press
play it won't actually do anything
and let me just speed up my project startup
as you'll see it doesn't do anything that's because
even though that we have declared that we want uh a collider on
this uh sprite here we haven't said on the tile map
that we uh are expecting it so if we just search tilemap you can say
tilemap collider 2d and now as you can see each sprite has
the the individual um a lot of them okay so
i'm going to swap over to now a hexagon uh
tile group because hexagon tile group has significantly more caveats
and basically if you know how to do a hexagon tile map you can easily
just convert everything into your knowledge into
just a square a rectangle map all right so let's create a hexagon tile
map um flat top hexagon
and now that we've got that we need a new tile palette
to fit the hexagon map so let's call this a hexagon
palette and it will be a hexagon and a flat top
the rest will be default creates let's put that in our palettes
all right now we need our brush so i'm going to do it the same as what i did
with this rectangle 2d object sprite hexagon flat top i'm going to click it
and find the source pull it into my project just call it
hexagon delete it from the same and then just simply drag it into my
palettes here this oops just hexagon and now you can
grab it and start painting as a hexagon tile map okay so this is all well and
good uh but what if you would like a bit of depth to these tiles
so for example what if on these bottom tiles here you would like to actually
show that they've got kind of like an under
block here to give it more of a 3d look and that you're looking at it
on more of an angle as opposed to directly down on top
so i'll show you how to do that in your photo editor of choice
i use photoshop the the rule that you have to maintain is that the
tile always needs to be in like so the pivot
of the tile the center of the tile needs to be in the direct center of the
uh of the canvas so for example this is 512 wide it doesn't
actually matter how high uh how tall your your canvas is so i
like to give myself a lot of room here so for example if i wanted to have
some vines hanging down here i could have that if i wanted like a large tower
on top here i could also do that and it wouldn't actually change
the pivot of the tile uh oh sorry i'll show you what i meant
so i've got these actually imported here so i'm just going to use these
directly on the canvas here and as you can see i've got pixels per unit
set to 512 because that is the width of my
of my canvas here and i want that to be perfectly fitting into one world
unit in unity okay so make sure you set your pixels
per unit correctly depending on your image so i'm just going to drag this now
into here and let's just call this grass grass one
hex is fine so as you can see it's actually sitting
on the uh on the grid and then my under
block is under it's it's overhanging basically
so now you've got the brush you can now just paint it on
okay and you'll see that it it overhangs from the actual cell
but what you'll notice quickly is when you start painting
the ordering the layer the layer sorting is
absolutely off so this is the first caveat and i'll show you how to fix this
now so it's a two-step process go to edits project settings and then
graphics and you've got your camera settings here
so right now it's just using the default 0 0 1. what we want to do is we want to
change this to custom axis we want to make it 1 on the y and
0 on the z axis okay then on your tile map you want to change
this to individual and that should fix your
problem so let's just add a few more hex tiles
here of different colors i've got grass 2 hacks here got my
stone hex here and then you can easily just start oops
just painting on a little bit of color and you can easily see that you can
start getting a really nice looking tile map
relatively quickly okay now the final thing i'm going to show you
is rule tiles now this is what makes the unity tile system
so powerful and i'll show you what i mean
so to get started you go to windows package manager
and then you need to include enable preview packages so click the cog
gear right there enable preview packages and then let's
search extra and this will be the two map 2d
tile map extras so just install that all right so to
create your first rule tile let's make a new subfolder here and just
call this rule tiles and then unity provides an easy way so
just go to create 2d tiles and with the 2d
extras we've got all these new tiles here let's just say rule tile
okay call this our grass rule tile like that and let's put in our default
one there now we don't need this one anymore and i'll just show you in the in
tile maps you can use these same tools to actually edit the palette
just click edit button here click your eraser and just click that off
and then finish editing and that will just remove it from your palette
okay so let's start painting so we've got this tile here
and let's just start with that so let's give this tile some rules
to allow it to automatically put the correct sprites into the correct places
okay so what do we need we need this top one we'll need to have
walls here and this bottom one will need to have walls here and then they both
need to have a freeway here okay so let's find that
and three sides is what we need okay so go to our grass rule tile
open it up let's add a new rule here and then let's just slot in our
rule tile and now as you can see if we just open up that rule tile again
you'll see we need to block off this side
the bottom and this side and we let's need to let this one run through
so here we just say no no no and then this top one is free
okay so now you can see that because this is
only pointing up this one adheres to that rule but this one doesn't
but we can reuse this rule by clicking this middle circle here
to allow it to flip okay so that will flip independently there's a few more
rules here that just allow it to flip x flip y and then
all directions okay let's just use this one for now
so let's just expand this a little bit let's paint on another one down here
okay so now this middle rule does not have a rule set here that it
can adhere to what this needs is the sides to be
blocked and the two top the top and the bottom to be
free-flowing okay so let's find one that will adhere
to that standard there we go two opposite sides
so let's add a new rule here add the two opposite sides
let's say the sides are blocked and these are free-flowing and there we
go but if you've noticed if i draw this way
this one will not uh be able to follow this rule because
we haven't flipped it okay so now we can use this in both
directions this can get quite confusing and it
takes quite a while to get all the rule sets to cover every
single edge case so i'll just do one more with you here
so what does this one did this one needs a blocked side it needs
two free-flowing sides here one free-flowing side here and then it
actually needs two little divots here on the side
okay so let's look for a tile that could possibly uh
handle that job and there we go that one that one looks like it can handle the
job doesn't it so one side and then two divots here
that's one side and two corners let's add a rule for that one side and
two corners okay so looking at my little sprite here
i know that this side here is no go this can be flown through
this can be flowing through and then right here the little corners we're
going to say no and no then we'll allow it to flip
hey there matt from the past i'm just going to hold you there because i've got
one more thing i need to show the boys so i mentioned earlier that the reason
why we create our own game rule tile and i'll show you why
so if you've just got a traditional square tile here
you'll see that we can paint this on here
and if we go to our square tile we can actually we've got this color thing here
we can just change the color but what you'll notice is on our grass
rule tile we don't actually have that okay we've just got this is just the
unity's implementation of the rule tile and they just gave us the base thing
that they want to show us effectively so what if we wanted to uh add things to
this too like i'll show you color and then you
can just extrapolate from there and do your own thing so
let's go to our game rule tile sprite script
and let's add a public color here and then for this to actually apply
to our tile we need to override and let's scroll down here get tile data
now unit is actually calling this to grab
the information and actually serve it to the screen okay
so we can actually add additional stuff to this so it gets sent
in the tile data as a reference and we can
just go tile data and let's change the color
equal to our color and for this to actually work
we also need to set something uh the flags
oops equals lock color that's just a little niggly thing that
you need to know when changing uh the color of a type of tiles in
script but i'll show you now that that in fact
does work so on our grass rule tile right now it's
set to transparent so let's originally it's set to white
as you know but now we can change it to these kind of things okay
and you can also do a lot of handy things with this like let's say
you want and add a walkable boolean so now when you're traversing the map or
you're doing like a turn-based game you can now just show the tiles that are
walkable for them to move to or you could say uh
like you could have an enum here like um enum
tile type and let's uh serialize this so it can be shown and
then this could be like grass or this could be water and then
this could be like lava so then you could have your public tile
type here type and then depending on what they
walk on you could grab the tile type and then you could
you know add fire damage to them or drown them or you know whatever you want
to do so then that will now show up here okay and you can this is a
grass rule tile but using the same script you can now create another one
and this can be the water rule tile and now you can have um a whole set of
water rules um for your water tiles now so your water tiles might be like a
little bit inlaid here to make it look like it's got a little bit of depth
um and then if even even at the bottom here your bottom water tiles could
actually be like a waterfall and it could be animated and it could be going
off the side of your map you know whatever you want to do anyway
that's what i wanted to show you so back into the original video goodbye
so as you can see it's quite powerful and you can build
maps very very quickly using this system obviously if i just start drawing here
it's going to look disgusting because i've
only got three rules here and you do in fact need all of these 15
tiles with 15 rules to cover every single edge case
uh you'll probably start doing this and you'll get to like seven rules and
you'll be like oh i think i've tricked the system you know i think i've got
this uh really complex rule set that that
covers every single edge case but you'll soon find out that uh no
you've missed something i have certainly been there like a few
times you need all of these 15 tiles and
just for your convenience i i drew these this morning but i will
uh attach these in the description in case you want to go through and try to
set up your system yourself and then afterwards you can you
know replace them with your own tile sets
so i hope you learned something i hope this was helpful to you
uh if it was give it a thumbs up subscribe i'm gonna be releasing uh
a video every single week so stay tuned for that
and i will see you next time you