Original subtitles

1 1

In this video, we are gonna be setting up our tile palette, 2

2

creating a couple of tilemap layers within our tilemap grid, 3

3

and then painting a couple of layers of tile information into our scene and 4

4

creating a simple platform that might be something that our character could run and 5

5

jump on in the future. 6

6

So let's jump in and create our first tilemaps. 7

7

If you don't have it on your screen already, make sure you go to Windows and 8

8

Tile Palette, to get the Tile Palette, I've docked mine up here next to my scene, 9

9

so it's nice cose in hand, you will be using this a bunch in this lecture. 10

10

I wanna give you a little bit of an overview of the Tilemap Pipeline. 11

11

We started out with our sprite sheet. 12

12

We've sliced it up in the sprite editor. 13

13

Next we need to create a tile asset. 14

14

So each of these sliced sprites will become individual tile.assets. 15

15

And then we add those tiles into a tile palette and 16

16

from the tile palette, we can paint those into our tilemap, which is our scene. 17

17

And we can have multiple tilemaps that act as layers that you can paint 18

18

within and then they can fit on top of each other. 19

19

So that's the pipeline, let's go in and actually create that. 20

20

This is the flow we are going to be going through in this lecture, 21

21

in terms of creation. 22

22

It's also the challenge for this lecture, 23

23

feel free to complete this challenge as we go along, pausing the video. 24

24

Or watch the whole way through and then complete it at the end. 25

25

Create a foreground and background Tilemap. 26

26

Create your tile palette, format the tile palette. 27

27

So arrange the tiles if need be if you want it to be a little bit neater and 28

28

more arranged. 29

29

And then paint a background and a couple of simple platforms. 30

30

That's what we'll be going through. 31

31

Let's jump in and do that. 32

32

Step number one is to right-click in the hierarchy, go to 2D Object and Tilemap. 33

33

That creates for us a grid. 34

34

You can see this grid has been placed within our scene 35

35

that has a whole bunch of cells in it, a la a grid, which is very cool. 36

36

And underneath that, it has our first tilemap. 37

37

We're gonna rename the tilemap to Background, 38

38

right-click on Grid and create a second Tilemap and 39

39

I will call this one, you guessed it, Foreground, Foreground. 40

40

I'm also gonna rename our grid, 41

41

just to be really clear here I'm gonna rename this Tilemap Grid. 42

42

So this is where all of our tilemaps will live within this particular grid in here. 43

43

The next step is for us to jump over our Tile Palette and create a new palette. 44

44

So right, sorry, sorry, click on Create New Palette. 45

45

I'm going to call this Manual Tiles because in the future we'll have 46

46

an automatic tile set up. 47

47

So we'll call this Manual Tiles. 48

48

That will all become clearer in later videos. 49

49

It'll ask us where we would like to save this. 50

50

I'm gonna create a new folder. 51

51

Actually while I'm in here, which is a Tiles folder and 52

52

all things tiles I will drop in there. 53

53

We tend not to have to access the Tiles folder but 54

54

it's good to know where they are. 55

55

Okay, so now we have our Tiles folder with our tilemap, sorry, 56

56

our manual Tile Palette. 57

57

This is a prefab, you can see down here. 58

58

Next step is for us to find our sprite sheet. 59

59

We'll use the background one first and 60

60

drag that into our tile palette and it will ask us where we wanna save that. 61

61

This is more tiles, so double-click into Tiles, select that folder. 62

62

It's generating these as tile assets, so 63

63

it's converting or creating from the sprite, 64

64

it's creating actual tile assets, you can see them in our tile palette. 65

65

If you go into the tiles folder, 66

66

you can see these as individual, I'll just expand this a little bit, so we can see. 67

67

Individual.asset file, so each of these is now a tile file, a tile file as a .asset. 68

68

There's a little bit of information we can tweak on it. 69

69

We can change its color tinting and we can change its collider type, not a lot going 70

70

on there but a little, bit of manipulation we can do to each of these assets. 71

71

Now, in the tile palette, this is where we can do some cool stuff within our scene. 72

72

If you were to click on the top left and jump into your scene and 73

73

start painting, then we are painting these tiles into our scene. 74

74

And you can see something a little bit weird's going on. 75

75

It is allowing us to create one tile per grid square but 76

76

the tile's not the right size. 77

77

So we go back to our sprite sheet, which we sliced up previously where it says, 78

78

what is the pixels per unit? 79

79

When it comes to this is one unit, it's saying, well, 80

80

how many pixels belong to that one unit. 81

81

We are going to say 32 cuz that's the size of our individual sprites and 82

82

then click on Apply. 83

83

And that automatically makes it fit nicely into our tile palette. 84

84

I'll do that for the other sprite sheet while I'm here and I remember. 85

85

So I change that to 32. 86

86

And if you grabbed the tile asset straight from our asset pack provider, 87

87

you will need to make this 16 because those assets are 16 by 16. 88

88

I've gone and increased the size. 89

89

I've doubled the size of our assets that we'll be using, that I've provided for 90

90

you, just so that we've got a little bit more fidelity on there. 91

91

Okay, so, within our tile palette, the normal rule is you can scroll in and 92

92

out and move around the same way you would in a scene. 93

93

We're going to paint into our background scene a little bit more. 94

94

We're gonna paint a background. 95

95

Now, make sure your active tilemap is Background. 96

96

If you're painting onto the foreground, 97

97

then it will be physically painting on to this foreground tilemap layer here. 98

98

If we're painting on a background, it will paint on there. 99

99

Clicking on the individual tilemap itself doesn't change where you paint to, 100

100

it's only over here that changes where you paint to. 101

101

This is just inspecting it, it's not saying where we are painting to. 102

102

So we're painting to the Active Tilemap background. 103

103

We will click on the, let's see, we'll grab four of these. 104

104

Go over into our scene and we can paint four of these wherever we like. 105

105

Which is cool, we could grab these four and 106

106

paint four like that and build it up manually. 107

107

We could grab this entire area and that allows us to paint a big chunk and 108

108

we can move it along and paint bit by bit or we can click on the filled box tool and 109

109

then highlight all of our background which was nicely tiled and 110

110

drag it all the way over our area and you can see it is tiled nicely and 111

111

it feels out our whole background. 112

112

If we wanted to, we could zoom the whole way out and say you know what, 113

113

I think our level is going to be about that big. 114

114

And then make a background for that entire area. 115

115

I'm going to undo that for now, we don't need it to be all that size yet. 116

116

You can see the white line is where our camera is currently viewing. 117

117

If I click on main camera, you can see it in here. 118

118

If you wanted to have a view that was a little bit more zoomed out then you 119

119

could just increase the size of you camera. 120

120

You can see the preview is being zoomed out and the window is being zoomed out. 121

121

We'll spend a bunch of time on our camera a little bit later on. 122

122

So for now, I'm just going to leave it at five and not worry just yet 123

123

about how large I want my assets to appear on the screen. 124

124

Now the next step in this process is for 125

125

us to make some platforms in the foreground. 126

126

I'm going to zoom out a little bit here and drag in my other sprite sheet. 127

127

And again, you can see wherever I drag it, 128

128

it'll literally place that sprite sheet with the layout in that spot. 129

129

Click on tiles cuz it's creating our tile assets, wait for 130

130

it to generate those and then we will see a range in our tile pallet here, 131

131

we've got the exact sprite sheet all plugged in there nice and neatly. 132

132

Now here's where you can rearrange your tile pallet a little bit, 133

133

so that you can easily find things. 134

134

You can see here, we've got these top areas, we've got a upper left, 135

135

we've got a bottom left. 136

136

The botton spots of our platform, so click on the top left and 137

137

then I'll paint that in our scene here. 138

138

Now you might have painted that and you don't know where it is hiding. 139

139

I fiddled around with this a little bit, so this is now appearing on top. 140

140

But we have an issue now where we need to tell our Tilemap 141

141

layers how to render in relation to one another. 142

142

So we've go our foreground and our background. 143

143

If you have a look over her on the tarmac renderer, 144

144

you can see there is a sorting order which is currently default and 145

145

an ordering layer which is 0 on each of these. 146

146

If I was to go and change the foreground to say 1, 147

147

then it should appear over the top of the background. 148

148

If I was to change this to -1 then it should appear underneath and 149

149

I would only see that if I was to turn off the background and there they are. 150

150

So it's one way to manipulate the order of your layers, we're gonna use a different 151

151

way that I think has a lot more scalability, then that approach there. 152

152

I want you to go up to Layers up in the top right of your screen, 153

153

click on Edit Layers and here you'll see a few areas. 154

154

You've got tags, we've used tags a little bit in the past and you can add new tags. 155

155

That's good from within code to say, this thing is a such-and-such type, 156

156

as a tag or such-and-such tag, not necessarily a type. 157

157

And we've got sorting layers and 158

158

that's gonna be the focus of what we want to do here. 159

159

We've also got this nice and ambiguously named [LAUGH] layers. 160

160

And for us, we're gonna be using these layers when it comes to collision and 161

161

things to do with physics, to say what bumps int what. 162

162

When it comes to displaying, to rendering, we're gonna be using sorting layers, so 163

163

we're gonna go ahead and create a new layer. 164

164

I'll call this Background. 165

165

And then also create another layer which we will call Foreground. 166

166

Now the strength of doing it this way, 167

167

is that we can really easily rearrange the order of this, so if we get them wrong or 168

168

if we wanna add a new layer then it is very, very easy just in this one place 169

169

to change the sorting of everything that happens across our entire game. 170

170

If I click on background, 171

171

then we will see over here we've got the option sorting layer. 172

172

We'll make this sorting layer as background and then over on foreground, 173

173

we'll make the sorting layer as foreground. 174

174

And because we've set up in our layers that the background 175

175

is underneath the foreground, it has displayed it like that. 176

176

So, whatever is on the bottom is gonna be displayed first. 177

177

Now the next step in the process, 178

178

I'm going to rearrange my tilemap, my tile palette just a little bit. 179

179

Now I'll show you how to do that, so you can do that yourself. 180

180

If we click on the Edit button here, right at the top of your 181

181

tile palette is an edit button, very important to click on that. 182

182

Now we can move things around in our palette. 183

183

Basically, we can paint and copy and move. 184

184

So we click on the Selection Tool, then click on the tile we're interested in. 185

185

Click on the move tool. 186

186

We can now drag and move this to another position. 187

187

So it's a block that belongs on its own, just a one-piece platform. 188

188

Put it over there. 189

189

We can also click on these other kind of vertical pieces, 190

190

move those to the side, get them out of the way, a little bit over there as well. 191

191

And you can of course click Select, click Select, 192

192

highlight a bunch of these and move them all together which is cool. 193

193

So I will select my block in here, this will become apparent in a moment, 194

194

move that aside. 195

195

Okay, so I'm not gonna do too much more finessing with that. 196

196

I will just get these guys out of the way, so 197

197

that they are not in the way of what I am trying to do there. 198

198

This last couple move them down into there, okay, 199

199

you can spend a lot more time finessing this and laying it out if you want but 200

200

I'm just gonna do it a little bit quick at the moment. 201

201

What we do need to do, though, 202

202

is figure out a way to be able to paint down all the pieces we need to paint down. 203

203

We've got this top left corner, which we've already painted in there. 204

204

Just gonna turn off Edit mode for the moment. 205

205

I can then click the tiles next to it, these upper level areas. 206

206

Click on the paint brush, select those and 207

207

that will allow me to paint the top of my platform. 208

208

Then clean things up a little bit by erasing these other ones down here. 209

209

And then we've got our platform that has a nice corner on the side and 210

210

a ledge we can run along. 211

211

What do we do at the right here? 212

212

Well we can do it two ways. 213

213

One, we can, first of all, click on our tile, come in here, paint it. 214

214

And then we can flip it within our scene. 215

215

What do I mean by that is if you select the Select tool, 216

216

click on the Select tool, click on your tile. 217

217

This is now the instance in our scene, I can scale that using -1 and 218

218

that will flip that tile. 219

219

But the process of having to do that every single time we put that down in a scene is 220

220

a little bit clunky, so the better way to do it is to click in our Tilemap, click 221

221

Edit, click on the Select Tool, click on the tile piece we're interested in. 222

222

Paint that down, it automatically changes to the paint brush. 223

223

Click that down, go to the Select Tool again, click back on that piece. 224

224

Now we can change the scale in here from 1 to -1. 225

225

And that will flip that so that we've now got a platform that we can go and 226

226

paint into our scene. 227

227

So I'll click off Edit and click on the paintbrush, 228

228

highlight all of those, and I can now place those into my scene. 229

229

Likewise, I can do that by grabbing the bottom left corner. 230

230

Need to click on edit again. 231

231

Paintbrush, select the dropper tool. 232

232

And then paint that down. 233

233

Click back to the selection tool, click back on our tile piece. 234

234

And change that to minus one. 235

235

It's a little bit clunky to go through that process, 236

236

but once you get your tile pallet setup, it's quite nice. 237

237

Now we don't need to do the same to these top pieces cuz there are two bottom pieces 238

238

in our sprite sheet here that we've got in our tile pallet. 239

239

We do need to do it for the two on our left, so I'm gonna select, 240

240

sorry eye dropper. 241

241

Drag on those, paint over there, 242

242

back to select and then change both of those at the same time to -1. 243

243

And as a final step in this process, I'll create, I'll grab this middle piece and 244

244

drag that into the middle. 245

245

So I know exactly where it lies. 246

246

There's a second middle piece in here that I've created just for 247

247

a little bit of flavor. 248

248

I will select that and then move it next to it as well. 249

249

Okay, so there we go. 250

250

We've got a tile pallet. 251

251

We're paining now the foreground. 252

252

I want you to go ahead as the last step in the challenge is just to create 253

253

a couple of very simple platforms. 254

254

Please don't over invest in this because we will be 255

255

doing an automatic process soon. 256

256

But for now, drop down a couple of little platforms. 257

257

So that we can be creating the first steps of our platform. 258

258

So if you do that I will see you back in a moment. 259

259

Okay, I'm gonna place down a simple little platform in here and 260

260

I'll speed up the video, so that it's nice and quick watching it and 261

261

I will see you in a moment. 262

262

Okay, there we have it. 263

263

Very simple, kind of platform, ledge, run along, jump, run along, jump, so 264

264

that we can get some shape for our level. 265

265

You can see that I've used these little rounded corner pieces on the corner here, 266

266

so that it looks a little bit more natural, how it flows. 267

267

And that's it for this video. 268

268

If you want to share a screenshot of what you've created, that would be fantastic. 269

269

I look forward to seeing it and I look forward to seeing you in the next video