Monster shadow


Create a grid in Unity - Perfect for tactics or turn-based games!

Create a grid in Unity of any width and height. I'll show you how to create a checkerboard pattern to better distinguish each tile as well as how to hover and select each individual tile. Perfect for any tactics or turn-based game. GridManager.cs: Tile.cs: =========

The S T A I N
When I create the grid manager object and add the gridmanager script it won't allow me to add dimensions or a prefab to it? I checked my script and it's identical to yours so I'm confused
@The S T A I N Sometimes it's the simple things which catch us :)
The S T A I N
Nevermind I just forgot to save the script so that it actually loaded lol 😆 thanks for the easy to follow tutorial
What's the difference between this and the grid component
Do you mean unity tile maps? Although they have their place, tilemaps give you very minimal control over tile logic. They make it basically impossible to link tiles, for example a lever and a trap door tile. Creating your own always gives a much more flexible result. Downside is if you want handmade maps you'll need to build a simple editor
why is it when I try to create a square it just stops at sprite? so its just Right click>2D Object>Sprite and it doesnt show squares and other shapes
Gleb Ozhgikhin
Most understandable grid tutorial ever! Thank you! I had problems with activating hilight object, and solved it with adding hilight color field into "Tile Script", and empty "backupColor" variable, that saves renderer color on mouse collision enter.
Ng Jia Yi
you're my fav tilemap guy right now!!
Wait until you see part 2 😉
oliver cromwell
will this work in a 3d project?
Yup, just change the y axis to z and change your sprite renderer colour logic to use the mesh renderer material 😊
things worked fine :O . Though my tiles keep dissapearing visually. They are there! just, not visible :/
@Tarodev May be that. I'll have to try again when I have time. Been busy lately :X
@stefani brench Ill try :)
stefani brench
@The_Ulfhednar Try to check the alpha again :) it was my issue, just check if the alfa at 0 and increse it to 255. hope it'll help.
@The_Ulfhednar Nope wont make a difference. Are you setting 22 in the editor or 22 in the script? Setting it in the editor just gives it a default value... if it already has a value in the editor it will keep that value until changed.
@Tarodev do you think making it a public variable would do any difference (Im kinda new to programming so idk :P )
Simon Greir
My tiles are invisible, any idea why? I can see that they are created in the scene but they have no color in neither game/scene
@Simon Greir happy coding 😊
Simon Greir
@Tarodev Yup thanks a lot, that was it!
Check the opacity on the sprite renderer. For some reason they can default to 0. The a in rgba
My GridManager script won't go on the GridManager scene, it gives the error message of "the script don't inherit a native class that can manage a script". No idea what that error is, or how it's caused. Any help would be appreciated, as I couldn't find a solution on the forums either.
@Dunga the script must derive from MonoBehaviour to place on a game object. Could that have been it?
Okay fixed that by making a new script. No idea what the issue was.
Isobel Shasha
wouldn't using a vector2 as a dictionary key run the risk of arbitrarily failing due to floating point inaccuracy?
Yup, although I'm yet to see it. I weighed the pros and cons for this tutorial If I should include it. Generally I hold a vector2int for grid position and a vector2 for physical position to allow dynamic node sizes.
Kitten In A Mitten
The visual studio text is too small, pretty difficult to read. Other than that pretty good tutorial.
Justin Addams
Wow, the cleanest GridManager code I've found so far. Thankyou a ton.
you wouldnt belive how easy it is in a 3d project
Any ide why none of the tiles show a color? I can see the outline of them when I click on them, but the base color and offset color are not showing up when I click play.
s a
@Tarodev Thanks, that was the problem
On your sprite renderer make sure you alpha (r, g, b, alpha) is pulled to the right. Sometimes it defaults to 0
Great video! How which variables would I need to change if say I wanted a more condensed grid, so instead of 16x9 squares on screen at a time I want 32x18?
Change the width and height of the grid and then zoom your orthographic size on your camera 😊
so i am getting this error NullReferenceException: Object reference not set to an instance of an object GridManager.GenerateGrid() (at Assets/Scripts/GridManager.cs:33) that is the _tiles[new Vector2(x, y)] = spawnedTile; what is wrong?
@Tarodev nope xD I'll do that thx for help
Did you initialize the _tiles dictionary? Looks like I do it on line 20. _tiles = new Dictionary<Vector2,Tile>();
Watching this at 50% speed but wish you could pause 2-3 seconds after you swapping the screen, so I have time stopping the video and finish typing :-) But anyway, your videos are very helpful, so thanks for your effort!
I do feel like I swap between windows a bit more than I should. I'll try keep it in mind for my future videos!
I did this on 3d as u said used Z, but i wnet into 5:27 but i have no sprite to drag in can u help ne :c
@Jochem Plays good solution for using 2d sprites in a 3d settings!
Jochem Plays
What I did was import the 2D sprite package into my project, Use the same methods as in the video (as you can now drag it in), but change inside the GridManager script the Quaternion.identity to Quaternion.Euler(-90, 0, 0). This made it so the tile is rotated and is easily used in X and Z space with its y-value staying 0.
​@Tarodev also highlight its rendering but it flickers between solid green and light green
@Tarodev Yeah I realized that and used a mesh renderer instead a sprite renderer and created a new material for the highlight, thanks for your repply
Instead of a Tile prefab with a sprite renderer, you'd use a Tile prefab with a cube mesh or something. Then instead of changing the sprite renderer color, you'd change the meshrenderers material color.
var iOffset = (x + y) % 2
Part 2 has been released: It includes additional functionality like unique tile logic, game flow, unit moving and attacking! Did you enjoy the video? Let me know so I can continue making helpful content!
Would look forward to more board game type of videos!
I just released part 2: :)


in this video i'll show you how to create this nice checkerboard padding
grid as well as highlighting on mouse over
and how to select individual tiles so you
can perform your game logic let's get stuck into it begin by
creating two c-sharp scripts one for the grid and one for the tile
itself in the grid manager scripts let's create
a few variables one for the width of the grid
and one for the height let's create a function
called generates grid in here we will loop over our width so
let's call this x for width and then
inside here we will loop over our height so call that y
and now we need a reference to our grid tile so let's create a reference
there and we'll call this tile prefab and before we spawn that we need
to actually create our tile so back in unity
let's create a 2d object sprite square call it tile put our tile script on it
and then let's make that a prefab next let's create a empty object here
call it grid manager slide in our grid manager
scripts and for the width i'm using 1080p so i'm
just going to use a 1080p aspect ratio so i'll do by nine
and whoops then we'll put the tile prefab on the tile slot there
and now let's actually go back and spawn them so now we're looping over our width
and height say spawned tile equals instantiate
and we'll send in our tile prefab u vector 3 and this will be on our x and
our y and then just quaternion identity is
fine let's name these so they are more
self-explanatory in the editor so let's call this
tile and then we'll send in the x and the y
just in our start method oops it's called generate grid all right
let's try that out and there we go so uh zero zero tile is
actually on zero zero and instead of moving this to
center in the camera how about we move the camera to center into
the game world so that r0 is actually in world space zero zero
so let's grab a reference here to our camera
and actually the transformer of the camera
and down here we will say cam transform position
equals new vector3 and we will say our width of the map
divided by two and this is actually a float so let's
just cast this to a float sorry it's an int we need to
cast it to a float and then also we need to remove half of
a world tile and you'll see why in a moment
okay and then we can just copy this for the height as well
heights and then we actually still want the camera to be at -10
which is the standard position that they start on
let's try that no we have not set our camera
all right let's try that out beautiful but it's a little bit
hard to kind of see what's going on so what would be good is if
we could grab this tile here and make this one type of green and then this one
another type of green and then back to the original green just like a chess
board so i'll show you how to do that oh in
our grid manager so the way we do that is we say is offset we're going to check
if this style is offset and we'll say is x modulo 2
equals 0 which basically we're just saying here is x is
x uh even right now and y modulo two uh does not equal
zero so we're saying is x even and y is not even
or alternatively we're going to say is x not even but why is even
and if if if so we want to color them a separate color in our tile scripts
let's remove this boilerplate and let's create a few references here
so private color base color and also
offset color and a reference to uh render right here sprite renderer
because we actually need to change the color of it
and let's make a public void and knit function
and this will take in a boolean is offset
and then we'll say render our color equals
if we are offset let's set it to the offset color
otherwise let's set it to the base color and back in our grid manager we'll say is offsets like that
now over on our tile let's create some colors here so i've got a
nice green for this base color and then for our
offset color i'm going to use the same green but i'm just going to
change it just over slightly let's put on our sprite renderer here
and let's try that there we go now we can actually
see the individual hexes or the squares sorry
so let's add a little bit of interactivity here
so on tile let's create uh on mouse enter
and let's actually grab another reference and we'll
create a game object here and this will be our highlights
now there's many ways to do this you can do it with shaders or just change the
actual sprite itself but i'm just going to
enable or disable this highlight object whenever we mouse over it
so on mouse enter it's going to be true and then on mouse exit here
we're going to say pulse and then back on our tile
i'm going to just create another 2d sprite on top of it here and this will
be called the highlight and let's just make it a white but let's
reduce the opacity here and then actually disable it and then on
the tile just add the highlight and then also to mouse on it with those
mouse events it actually needs a collider so let's add a
box collider 2d there and press play and there we go now we've got
interactivity so this is a quick easy way to start a grid
uh obviously you can start placing units
down here and then you can tap into the mouse down event here to
select the tiles or the units and then you can
be on your merry way and create your game so i hope this helped
if it did leave a like and subscribe and i'll see you next time for the next
tutorial uh hello so this is post-production matt
and i figured i should probably show you how to
actually grab these tiles in logic so the way i would do this is i
would create a private dictionary and the key will be a vector 2 and then
the actual value will be a tile so i'll just do that
now when we're creating a grid i'll instantiate this new uh dictionary
and after we create a tile i will say tiles and then new
vector 2 and this will be the x and the y equals
to the spawn tile like that and now you can create a function here
it could be public and this will return a tile get tile
at position this will take in a vector 2 and then you can do this so we'll do try
whoops no we won't actually we will do if tiles
try get value and we'll put in the pause and then we can actually say out
ba tile so if if the tile is available we will simply
return tile otherwise let's just return null
so then you can just quickly just call that to get the tile at the
at the current position and that's how you would do that