1 00:00:00,440 --> 00:00:03,500 In this series, we're going to make a side-scrolling robot 2 00:00:03,657 --> 00:00:07,386 who can move left and right and also jump up and down. 3 00:00:07,400 --> 00:00:10,650 We're also going to add some hazards for this robot to deal with 4 00:00:10,651 --> 00:00:15,340 such as a disappearing platform and a bat which chases it around. 5 00:00:15,360 --> 00:00:17,867 But before we do this, we're going to go through the project 6 00:00:17,869 --> 00:00:21,780 because there are a few things that you may need to know before moving forward. 7 00:00:21,810 --> 00:00:24,995 We have a few pre-built scenes that we've created, 8 00:00:25,195 --> 00:00:28,729 just so it's quicker to get into the actual movement of the character. 9 00:00:29,210 --> 00:00:31,329 With the practice project open, 10 00:00:31,330 --> 00:00:34,912 you can scroll down to the side-scroller folder down here 11 00:00:35,329 --> 00:00:37,740 and we're going to be working in this folder. 12 00:00:37,760 --> 00:00:39,271 The first pre-built scene that 13 00:00:39,272 --> 00:00:42,100 I'd like to show you is the side-scroll skin. 14 00:00:42,120 --> 00:00:43,140 Now if we have a look here, 15 00:00:43,170 --> 00:00:45,420 we've got a load of sprites here. 16 00:00:45,450 --> 00:00:48,900 Which make up our character and the character's skin. 17 00:00:48,930 --> 00:00:51,178 We have an animation player, 18 00:00:51,179 --> 00:00:53,814 which has various animations that you'll use 19 00:00:53,815 --> 00:00:55,820 in this series such as running. 20 00:00:55,840 --> 00:00:58,986 If we just play this, you can see the character runs, 21 00:00:58,987 --> 00:01:03,543 but we also have an idle animation and a jump animation. 22 00:01:03,570 --> 00:01:06,554 We'll also use the push animation later in the course, 23 00:01:06,555 --> 00:01:08,930 when we're pushing rocks around the levels. 24 00:01:08,960 --> 00:01:13,043 Now, this skin scene will play these animations automatically, 25 00:01:13,044 --> 00:01:15,770 depending on how the robot is moving. 26 00:01:15,800 --> 00:01:20,540 We have a similar skin for the bat enemy and again we've got some animations 27 00:01:20,570 --> 00:01:25,140 that it will use such as flying, when the bat is chasing the robot. 28 00:01:25,170 --> 00:01:29,228 We also have a hang animation, which is like an idle animation 29 00:01:29,428 --> 00:01:32,564 and just a little bit of a shifty animation there 30 00:01:32,764 --> 00:01:36,260 just to show that the bat is looking at you but not moving. 31 00:01:36,280 --> 00:01:40,020 This skin works in the same way as the side-scroller skin. 32 00:01:40,050 --> 00:01:43,857 It will automatically choose either flying or hanging, 33 00:01:44,057 --> 00:01:47,100 depending on whether the bat is moving or not. 34 00:01:47,130 --> 00:01:50,214 Finally, I also want to go over the tile map. 35 00:01:50,215 --> 00:01:52,171 Now, you've worked with tile maps before, 36 00:01:52,172 --> 00:01:55,620 but we made this tile map just so it's easy to get started straight away. 37 00:01:55,650 --> 00:01:57,540 With those three scenes in mind, 38 00:01:57,570 --> 00:02:00,316 let's create the level that we'll be working in. 39 00:02:00,516 --> 00:02:03,500 To create the level, create a new 2D scene 40 00:02:03,743 --> 00:02:06,100 and we're going to call this, Level. 41 00:02:06,557 --> 00:02:08,685 Now, this level scene is what we're going 42 00:02:08,686 --> 00:02:12,260 to be working in almost exclusively in this series. 43 00:02:12,280 --> 00:02:15,820 Whenever we're creating a character, we're going to add it to the level. 44 00:02:15,850 --> 00:02:19,860 Whenever we add a hazard such as a disappearing platform, 45 00:02:19,880 --> 00:02:23,610 we're going to add it to the level so it doesn't look very good at the minute. 46 00:02:23,640 --> 00:02:26,743 What we're going to do is we're going to add our tile map 47 00:02:27,000 --> 00:02:31,020 into it as a child, and then we can start drawing. 48 00:02:31,050 --> 00:02:34,450 If you click the cave tile, 49 00:02:34,480 --> 00:02:40,780 you can start drawing some cave walls by holding the left mouse button. 50 00:02:40,810 --> 00:02:44,540 You can also hold Shift to draw a line. 51 00:02:44,560 --> 00:02:45,760 Now, that doesn't look very good 52 00:02:45,790 --> 00:02:48,780 so I'm going to press Control Z to undo that. 53 00:02:48,810 --> 00:02:52,044 Now, if you want to draw large blocks of wall, 54 00:02:52,045 --> 00:02:56,180 you can hold Shift and Control and you can draw rectangles, 55 00:02:56,210 --> 00:02:59,340 when you click and drag with the left mouse button. 56 00:02:59,370 --> 00:03:04,610 Now, this is a very quick and easy way to map out some levels. 57 00:03:04,640 --> 00:03:07,180 We'll say this is our play area here. 58 00:03:07,210 --> 00:03:09,580 This will be a good size to move around in. 59 00:03:09,600 --> 00:03:12,908 I'm just going to draw some random bits on the ceiling and the wall 60 00:03:12,909 --> 00:03:15,519 just to make it look just a little bit more interesting. 61 00:03:15,520 --> 00:03:17,457 What I'm going to do is I'm going to fill out 62 00:03:17,757 --> 00:03:24,140 just the rest of the level just so it looks a little bit better. 63 00:03:24,170 --> 00:03:28,980 Hold Space and hold left mouse button to move around. 64 00:03:29,010 --> 00:03:33,700 I'm just going to press Control S and save it in the side-scroller folder. 65 00:03:33,730 --> 00:03:38,180 Then if we press F6 or this button in the top right, we'll play the scene. 66 00:03:38,210 --> 00:03:40,795 I'm going to press F8 to close the scene, 67 00:03:40,796 --> 00:03:43,380 and then we're back to editing the level. 68 00:03:43,400 --> 00:03:45,780 Now to make this level look a little bit more interesting, 69 00:03:45,810 --> 00:03:47,917 we also have a cave background scene, 70 00:03:47,918 --> 00:03:50,529 which you can just drag and drop into the level, 71 00:03:50,530 --> 00:03:54,020 and that gives us a nice textured background for the cave. 72 00:03:54,050 --> 00:03:56,060 Now to add details to the tile map, 73 00:03:56,090 --> 00:03:59,340 you might have noticed some other tiles here in the tile map. 74 00:03:59,370 --> 00:04:03,338 If we try and select them and place them on our tile map, 75 00:04:03,339 --> 00:04:05,886 it doesn't look very good because here, 76 00:04:06,157 --> 00:04:09,300 they're overwriting the tiles we've already placed. 77 00:04:09,330 --> 00:04:11,140 So I'm just going to Control Z. 78 00:04:11,170 --> 00:04:12,660 Just get rid of all of those. 79 00:04:12,690 --> 00:04:16,620 Now to get around this, we're going to actually add another tile map. 80 00:04:16,640 --> 00:04:19,740 I'm just going to drag it just below this one, just so it looks nicer. 81 00:04:19,760 --> 00:04:22,843 Now, we know that nodes are usually drawn from top to bottom, 82 00:04:22,844 --> 00:04:25,340 so you would expect our details tile map 83 00:04:25,360 --> 00:04:28,980 to always draw on top of the previous tile map, right? 84 00:04:29,010 --> 00:04:33,237 However, in this tile map, we have changed the Z Index of the bush and bushes, 85 00:04:33,238 --> 00:04:36,557 which means they are drawn behind anything else 86 00:04:36,558 --> 00:04:39,771 with a higher Z Index, and that makes it so you don't have to worry 87 00:04:39,772 --> 00:04:42,300 about the order of the scene tree. 88 00:04:42,320 --> 00:04:45,314 Also, we have bushes which should appear behind the walls, 89 00:04:45,315 --> 00:04:47,740 and rocks which should appear in front of them. 90 00:04:47,770 --> 00:04:50,700 So it makes sense to change the Z Index for each tile. 91 00:04:50,701 --> 00:04:53,900 Place some bushes on the ceilings and the floor. 92 00:04:53,920 --> 00:04:57,020 Add some rock details and we're good to go. 93 00:04:57,040 --> 00:04:59,614 If there's anything you're not happy with the tile map, 94 00:04:59,615 --> 00:05:02,157 you can right-click to delete it. 95 00:05:02,520 --> 00:05:04,660 The same goes for our previous tile map. 96 00:05:04,690 --> 00:05:06,832 If you want to get rid of some walls, 97 00:05:07,032 --> 00:05:10,157 make sure you select the right tile map on the left here. 98 00:05:10,400 --> 00:05:12,396 Now, our level is looking very empty 99 00:05:12,397 --> 00:05:15,500 so what we're going to do is create the robot scene 100 00:05:15,529 --> 00:05:21,060 before we get coding so to this scene, add a new kinematic body. 101 00:05:21,090 --> 00:05:22,740 We're going to search for it. 102 00:05:22,770 --> 00:05:27,000 Kinematic Body 2D is what we want because we're working in 2D 103 00:05:27,001 --> 00:05:28,660 and this is right up here. 104 00:05:28,690 --> 00:05:33,660 I'm just going to press W and drag it into the center of the level. 105 00:05:33,690 --> 00:05:36,543 To this, we are going to add a side-scroll skin 106 00:05:36,544 --> 00:05:39,671 so move down here and click and drag 107 00:05:40,011 --> 00:05:42,029 so it's a child of the kinematic body 108 00:05:42,030 --> 00:05:44,460 and already it's looking much better. 109 00:05:44,480 --> 00:05:45,700 If we take a look over here, 110 00:05:45,720 --> 00:05:47,671 we can see that we've got a small error 111 00:05:47,672 --> 00:05:52,780 and this node has no shape so we need to add a Collision Shape 2D. 112 00:05:52,800 --> 00:05:56,929 Up here, we're going to add a Collision Shape 2D. 113 00:05:57,600 --> 00:06:00,940 This also has an error, so let's have a look and see what it wants. 114 00:06:00,970 --> 00:06:04,780 "A shape must be provided for the Collision Shape to function." 115 00:06:04,800 --> 00:06:06,980 Now to do that, we go over to the right 116 00:06:07,010 --> 00:06:11,641 and we're going to go into the drop-down and add a new rectangular shape. 117 00:06:11,841 --> 00:06:16,120 If we zoom in here you can just about see it but it's very small at the minute. 118 00:06:16,120 --> 00:06:18,860 We need to make it a little bit bigger so zoom out, 119 00:06:18,880 --> 00:06:21,100 let's see if we can make this a little bit better. 120 00:06:21,120 --> 00:06:23,457 What you can do is you can change the extent 121 00:06:23,458 --> 00:06:26,429 by clicking and dragging in the editor. 122 00:06:27,000 --> 00:06:28,020 Let's have a look here. 123 00:06:28,040 --> 00:06:30,379 Let's maybe move this up here like so. 124 00:06:31,000 --> 00:06:33,740 Let's have a look and see what happens when we run the scene. 125 00:06:33,770 --> 00:06:38,200 We have our character and you'll notice that the skin is automatically playing 126 00:06:38,230 --> 00:06:41,457 the idle animation because the character isn't moving. 127 00:06:41,629 --> 00:06:44,180 Good, everything seems to be working so far. 128 00:06:44,210 --> 00:06:48,189 Now we're going to rename our character to something like Robot. 129 00:06:48,389 --> 00:06:50,302 Doesn't really matter what you call it 130 00:06:50,303 --> 00:06:52,429 and what we're going to do is add a script 131 00:06:52,430 --> 00:06:54,728 by clicking the button in the top left here, 132 00:06:54,729 --> 00:06:57,729 and we're going to create it in the same folder as the side-scroller. 133 00:06:57,929 --> 00:06:59,180 That's fine. 134 00:06:59,210 --> 00:07:02,157 Since we have our robots here, we're going to click it 135 00:07:02,414 --> 00:07:05,072 and we're going to Save Branch as Scene 136 00:07:05,272 --> 00:07:07,740 and you can save it in this folder as well. 137 00:07:07,770 --> 00:07:10,260 This has created a scene for our robot 138 00:07:10,290 --> 00:07:13,700 which if we wanted to, we can edit individually. 139 00:07:13,730 --> 00:07:17,340 Saving scenes in this way, means we can reuse it in other scenes. 140 00:07:17,360 --> 00:07:21,829 Let's close out of this and open up our robot script. 141 00:07:22,040 --> 00:07:25,503 Let's expand this code editor by clicking this button up here, 142 00:07:25,504 --> 00:07:27,365 or pressing Control Shift F11 143 00:07:27,366 --> 00:07:31,400 and we're going to delete all of this and get coding in the lesson.