Make the Game Art for your 2d Platformer | Martin Belvisi | Skillshare

Make the Game Art for your 2d Platformer

Martin Belvisi

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
29 Lessons (4h 51m)
    • 1. Introduction to the Class

    • 2. What are Tiles and Tilemaps?

    • 3. Basic Inkscape Illustration Techniques Part 1

    • 4. Basic Inkscape Illustration Techniques Part 2

    • 5. Basic Inkscape Illustration Techniques Part 3

    • 6. Introduction to the 2d Platformer Mockup Project

    • 7. Document Set Up

    • 8. Blocks Part 1

    • 9. Blocks Part 2

    • 10. Items Part 1

    • 11. Items Part 2

    • 12. UI Elements Part 1

    • 13. UI Elements Part 2

    • 14. Terrain Part 1

    • 15. Terrain Part 2

    • 16. Terrain Part 3

    • 17. Characters Part 1

    • 18. Characters Part 2

    • 19. Characters Part 3

    • 20. Characters Part 4

    • 21. Background Part 1

    • 22. Background Part 2

    • 23. Background Part 3

    • 24. 2d Platformer Mockup Part 1

    • 25. 2d Platformer Mockup Part 2

    • 26. Basics of Exporting

    • 27. Exporting Our Assets

    • 28. Awesome Tools to Make Your 2d Platformer

    • 29. Conclusion


About This Class

In this course you'll learn everything you need to know to create the game art for your 2d platformer. And all by using the fantastic free, open source vector illustration software Inkscape.

We'll be using vector graphics and the mouse (no need for tablets) to create beautiful,  HD graphics, in the style that you often see in many modern, 2d cartoony cellphone games but also in some PC games as well.

But the great thing is that you don't have to be an artist to take this course!. We'll start from the ground up, with a mini-course on how to use the program (Inkscape) for illustration, then we'll delve into more specific game art techniques, finally we'll start making the assets of our 2d platformer one by one, ranging from items to game characters. And once we have everything we need, we'll assemble everything into a mockup illustration (a fake screenshot).

Here are a few of the things this course deals with:

  • Designing and drawing attractive assets for a 2d platformer using vectors

  • Inkscape for illustration

  • Tools, methods and techniques for game art and general vector illustration

  • Basic character design

  • Basic background design

  • Working with tileable assets in Inkscape

So, if you want to make a game but you aren't an artist, i strongly recommend you to check this class.


1. Introduction to the Class: thank you so much for taking your time to check this course out. I put a lot of work on it, and I think you're gonna have a lot of fun making some game out in this course. I want to show you everything you need to know. So use the free, better program inside on the mouse. No tablet or sketches here will be drawing state to the problem, too great. The type off out that's very common in modern to the platform er's, especially in mobile phones performers I could name you. I turn off gains from this category that are currently at the moment off, making the scores in the top 100 games in the Google play store. It's like a soup, particularly on its own, they to the platform, but something heavily inspired by the Mario franchise. Now, not all of these games are cheap knockoffs. Some of them are really well done, and they take inspiration from my donor for their known Maggio to the performers. But I believe that if we are going to learn how to create game graphics for these types of games, we may as well learn how to create them and the most common style to see. So the final project does take some heavy inspiration from the Mario Games. Now, the goal here is to teach you how to create the game out off to the platform. But of course, it will be very impractical to make the entire assets of a game just to show you the techniques and methods. After all, once you get familiar with these techniques and methods, you're gonna be able to make any type of to the platform and asset. And if you are thrilled with the course and willing to experiment a bit any type of facet for any type of to the game what, your man here is heavily transferrable to any other type of game that uses it seemed last time. So we're gonna follow a different process that Did you see you everything you need to make the assets themselves and at the same time get to prepared for the actual finishing and polishing you will have to do for a final game. So we're making a moke up. Aimo copy. Sort off a fake screenshots off what a game could look every asset in a mock up it's made us if it was gonna be used in a real game. But instead of making a done off assets for different levels, you make assets only for what's gonna be displayed in the fake screenshots. Because we're gonna be making the assets ready to be used in a real life game. You're not only gonna learn how toe your state wets on the mo cap, but I was alone real life through the game, massive creation techniques. As far as the sea levels, the courses starts with an optional in ST Michel's that will get you up and running within Sape in a matter of minutes. This year is especially important for students that don't have any experience with any type off victor registration problem. Then we're gonna deal with a few more advanced vector illustration techniques, but they're gonna be essential for the rest of the course. After that, we're gonna finally start with the project by making Alas, it's one by one and then finishing the mock up. The last few lessons are gonna deal with how to use what you love here. So making a really life to the platform and that's it for this introduction. Now let's get stuff them 2. What are Tiles and Tilemaps?: before we start making the actual assets for the game, I want to talk a bit about how we're gonna approach building the project and the assets. First of all, let's talk very quickly about tiles, What are tiles and how they affect this project. There is a common metal toe build in the graphics off a game with you. Divide the large assets into interchangeable squares in such a way that you can build more complex structures using a small group of tiles or time up. Or that's it. Diane Maps are often associated with big, sad graphics, but that's because style graphics were born as saying necessity to handle lower solution graphics. Today it's very common to see high resolution Dysert on to the games, mostly for mobile games. So let's take a look at an example, so things get a bit clearer. RPGs made a lot off the rain to build lalish expansive worlds. Drawing every piece off the rain manually will be a near impossible task, even for the simplest and short that's temperature. But if you're ready to sacrifice a bit off uniqueness and detail, you can make huge and expensive walls using only a few tiles. This way we could build infinite the land variations that not only used very little space in these can memory, but I saw it makes it considerably easier and faster to build the game world. Now this makes it sound like time outs have a limited use, as if they were only useful to create rain. Another reputable batons. But you will be surprised what you can achieve with a bit off ingenuity, as demonstrated by the amazing graphics that later and yes, games were able to achieve with a incredibly small memory. Emphases in power. And that's the thing for every console games, it was a necessity cover wasn't able toe handle actual realizations, so everything had to be handled used in jail mops. And this restricted that possible graphics that games of that data cool display today. There is no such restriction. We could make use illustrations and put them as backgrounds and move them around with blazing fast FBS mind maps and no, neither. But here's the thing. Like I said that earlier, no memory and persistent usage, I don't the only benefit of using time lapse. You also save a huge amount of time compare than if you were to draw everything. Memoli. And if you are a smart with the way you build your time up, you don't have to suffer too much of a drop down in quality. My use in time ups. In a smart way, a single artist could easily make the graphic soffit to the blood former game for any other type of to the game. What's more with today? Sen. Gene technology You don't have the restrictions that all the games have. You could draw arbitrary size styles or mix and match dives, assets and non stylus. It's with today's and giants. You used time lapse on Lee when you wonder. And while you could easily find a way to make the act without using tiles and still local most Mother mobile to the platformer games to use them. So I think that it's important that you know the basics of how to build assets you see in 10 laps, at least for the absolute essentials, like the terrain or all the basic blood phones and everything else, we're gonna make it normally this way, you love the best of both worlds 3. Basic Inkscape Illustration Techniques Part 1: before we begin with the project. In the next few lessons, I want to show you some of the basic tools and techniques that we're gonna be used. You know, throughout these scores pretty much everything off what I'll show you here. It's common to all vector illustration, not just came out. So if you've never worked with Victor softer before, it's gonna be especially important to get familiar with these concepts in this. Listen. In particular, I want to start with one of the most important features of bacteria situation Boolean operations. I know it talked about Boolean operations in the exit medicals, but there it showed you the mechanics off, help to use them, not what they are actually used for immunization. And this is what this lesson is all about. But before that, let me remind you really quickly what are Boolean operations? Boolean operations at a group off tools. The program has that what, by making two or more shapes indirect, and I'll puts a single bath. As a result, Boolean operations do not need to be performed with custom paths. They can be used with building shapes like ellipses over tangles. But the result in shape off the operation will always be a path. An important detail is that Boolean operations only work with shapes with the more custom, but not with the other types off objects like important images or groups. There are a total off six different operations that thinks a breeze in, but in practice only three of them are really in a society. For most illustrations, they have the union that difference and the intersection. With that out of the way, let's begin with the union. The union will join our selected shapes into a single path, often used to create organic masses off objects like clouds or bushes. Creating organic shapes like this can be way faster than using the bento to draw the cigarette mentally, and it gives you a lot more fine control and flexibility. Take a look at this club. If you pay attention to this threat, you see that it's actually made up off multiple ellipses overlapping. This is something that will be really easy to go use in a union. So take the live stool and draw a little. Phillips is overlapping to build this threat off the global. Now pick the object and select all the shapes go to Beth. You know what it really easy to remember. Shortcut control and blues. Another glove is a single buff. Instead of being made a multiple ellipses. Now you can see and edit the notes with no tools. Now I'm sure you're thinking, Why couldn't we just leave all their lives together, overlapping each other well, for once, it's more comfortable toe control, an object made off a single shape. But the most important benefit of having a single path is that we can modify this in red of the shape, since it's a path that is something we cannot do if the Taliban just separate the shapes together. Now, if you select the no tune, you can play around with the path and make this a threat much more interesting. Like I say the minute ago, the union is perfect to be objects that have these organic Bumpy's let like clouds or bush is made of ellipses, but it can be used to build pretty much any complex shape that's made off multiple smaller , simple shapes. In another, common juice will be to create mechanic looking shapes like dogs are man made objects. The key question you should be asking yourself is if you need the multiple shapes to be a single bath, for whatever reason, and if they do build it with a union, the 1,000,000,000 difference will generate a shape that's the first shape minus alleges were intersected with the second shape. Another waas in it You got out or Garibay shape by using another one, a couple of important difference with the union. First, you should only use two shapes. The difference does not work well with more than two shapes. And second, the shape that's gonna cut. The other one should be above in the stack. Or though, let's go back to the example of the cloud. What if we want to make the classic love with the flat bottom? We could go in there and add and remove notes. Men really and then just the bottom so it looks flat. But that's a little work for such a simple task. So the best way is to use a 1,000,000,000 difference. Toe got out the lower part of the club, so you have that rectangle tool and drop where you went to good as just a shape carefully. It may be helpful to change the rectangle Golar so you can see better. And when you're done, go to bath difference. Well, the show could control and miners remember that this glad shape is a new shape result of performing the difference with the other two shapes, I'm telling you, cause it may seem like it's the same object that's before. Thus it has a similar four minutes in the same place. But if you perform a difference with a built in shape in new ship will be played in the same place. That looks similar, but that is a path and does not have the building Mother fires also keep in mind that you could have used the Panther to make the shape. Now he is an extremely common used for the separation, and he's creating a side shadow or highlight. Let's get going with the globe. What if you want to have some sort off ream highlight on top, as if the light is hitting the top part of the silhouette? This is something very common. You see a lot in illustrations again. We could go in and do it manually, really slowly and really carefully, but that's what we slow, inaccurate and tedious. So for that, we're gonna use a different separation to create the shape of the highlight. Now, the first step may seem a bit well, but you have to duplicate the clever shape two times. You'll see why in a minute. So selected and press controls eat place. Remember that duplicating controlled the re create an exact duplicate on top. So it looks like nothing happened. But there are three exact looking clouds of stuck in the same place right there for the next step. It will be very useful to change the color off the top public aid so you can see whether what you're gonna do next. Now, the clothes directly below this double, it's gonna be cut down, and it's gonna become the highlight. So just to stop Red Cloud. So what's showing through off the closure below? Because the form off the highlight you want when you're happy with the result, so more shapes and perform their difference. The sultan shape may not be visible because it has the same color than the club. So there is the nice white this ray just to clarify if it's not clear you made it to duplicate twice because I'm really an operations Bruce, only one l put shape. So we need to generate the highlight shape with a copy, so we could also keep the original glass a blow at the end of the day. Difference have, basically is to cut other objects to me. It's easier to think of it as the scissors off their Boolean operations Only then, instead, off a couple of leaves, you use another path to good. What's below finally, is the intersection appellation. This operation is used to limit a shape to the inside off. Another often took the shadows or highlights that I share in a complex mother, all to create patterns that need to be limited to the inside off a complex shape for the sake of simplicity, let's continue with the theme off the clouds. Let's say that I want to create the nice looking shadow that give some traces off volume notice that this element of the cloud is sexually fairly complex. The easiest way to create this type of highlights, or shadows that are made with a mental and I'm not created where you send the technique I show you and me to go with the difference Operation is to use an intersection. It's a policy just rather shape you want with the mental on top of the cloud and now, very important when you get to the outside area conveniently shape so it covers completely aside, the shallow is gonna go, We're gonna delete the excess. But the important thing is that the shape of a lapse completely aside. So it one show in homes once you perform the intersection, now it's time to actually perform intersection. But just like in the previous case, with the difference, I want to create the no shape on top of the club, so duplicate the club's shape with Contrave now the glad copies on top of the other we made . But that doesn't mother. The intersection doesn't care about the stock order like the difference does. So these duplicate and the shallow shape and goto path intersection I've used the shortcut control an asterisk, the resulting shape with feet exactly the inside off the cloud shape. The important thing here is that in illustration is very frequent, that you'll have to draw a shape that's one on top. If I know that it needs to be constrained the vein side off a shade below, not just in the case of shadows and highlights. That's the worst frequent case better than other uses. And that's all you need to know about your symbol and operations in practice. Willian operations are some of the most common operations that you'll be doing the time, so I strongly suggest you to really wrap your head around what you've seen in these. Listen, play around and practice on your own till this concepts become second nature, cause they really are an essential part of fallback authorization. And one last thing. I believe that, just like with the mind for tools, you should as soon as possible, study using shortcuts instead off the menu so get used to performing the operations using the shark cuts they are quite easy to remember, and they are essential to work in a good, comfortable base 4. Basic Inkscape Illustration Techniques Part 2: Okay. Now let's continue with the tools and techniques of Vector illustration with a couple of really important features. 200 groups off objects. First of all, I want to talk about groups. You can group multiple objects so they scandalous if they were a single object. This will help you a lot when you're dealing with an illustration field with objects, and you have problems selecting a group of shapes. They're meant to be a single thing like for a simple. This cloud is made of three different shapes. The base clothes shape the highlight shape on the shallow shape, but the three shapes makes up a single thing. A club. If we were working in a real life composition with a ton off nearby objects, dragging a rectangle to only select these three shapes may not be a C C as to were like so the solution will be to group these three objects, so select them all control G. You see the three outlines that indicated that the three objects were selected becomes one . Now you can make any manipulation as if these three shapes with a single one. However, at any moment you can double click on this group and then you'll enter the group. You can see that you've entered a group because you see this wheel text in the current layer Drop down in the status. Well, these drop down this place they currently active layer. But when you enter, the group will display their name off the group they will text is the default name except gives the groups. Now that you've entered the group, you can modify the shapes as if the group never waas creative Your mother fighting in the resort shapes and it them they let them and even create new ones that we belong to the group. After you're done eight in the group you can double click in any free place in the campus toe. Leave the group again. You see that that we have exchanged back and it will display the lay of name. All changes that you made to the group will be kept if at any moment you want toe on group A group, you can simply selected and hit control shift g A couple of notes about the behavior of groups First there no tool bypasses in the group against that. This is a feature to simplify the anything off the contents off a group, so you don't have to enter first if you want to quickly at just something inside second. And this is important. You cannot perform Boolean operations with groups. The program won't allow it. This behavior can be a bit of a pain when building more complex shapes. Those groups are really useful to handle the complexity and organize subjects. Boolean operations has some of the most common operations you'll be doing. For this reason, only I tend to avoid use in too many groups if the object I'm joining is manageable. I talked about clips in the examine it Victoria, but just like with Lillian operations, I didn't went into the actual uses for registration or they're more important details. I'm assuming that you watched that lesson or that you are at least familiar on how to create clips. Some not gonna go over the basics, feel we watched that lesson. If you forgot about how to create lives, however, as a quick official grips allows you to limit, the visibility often object, so the silhouette off another. If these description sounds a bit familiar, it's because it fulfils a similar purpose than the illustration, but with a couple of really important changes. First clips do not generating new shape like the intersection, it just limits the visibility of the target shape so you can still edit the clip shape inside and have way better control of how an object looks. And second, while the intersection being a Boolean operation only works with baths, clips work with pretty much everything paths, groups, important images. You can even use groups that sleeping shapes themselves, which is tremendously useful at times. As you can imagine, this opens up a lot of new possibilities. So let me show you an example. If I wanted to add this pattern to the club using an intersection, I would have to dismantle this bottom. I hope it and move each path into the right position, then perform an operation with each of the shapes, one by one being careful that the over there bathrooms are not gets destroyed in the process. It will be a ridiculous amount of work for such a simple task. Luckily, cliffs can be used with groups, so first make sure the bottom is a group select all shapes and energy I put the bottom on top of the cloud, duplicate the cloud and perform a simple click with it. Because they sleep pattern. It's a group. You can enter the pattern group and easily move the shapes, modify them and even have new objects with a fear of leaving the silhouette of the club. It's really powerful. Another common use will be to use them as I wait. Toe bitten textures toe a bath, since sleep work with important images you have to do is to put it on top of the shape you want, replicate the bottle shape and performed the clip with the texture. Now you should play around with the capacity and maybe edible in the effect or something toe. Make it look nicer. All this power that clips been seen may make you think that you should use clips on Lee and completely forget about intersections. After all, everything that you can do with Intersection, you can do it with a clipper in a more flexible way. Well, in practice, there are a couple off inconveniences that clips being seen. One being example is that just like with groups you think lives with Boolean operations, it's a bit tricky. The difference with groups is that you are able to perform the operation use. The sleep only has baths, but the problem is that since a clip function is toe only, Heil perhaps often object. The operation will be performed with a full shape, not only with the visible parts. On the other hand, if a clip it's made with a group, the operation will not perform. And if you're working in a more complex trying with a lot of shapes, it may end up being a bit complicated to identify which object is not let in the Julian Operation Toe execute. So in practice, I tried to be as careful sake and both with groups and clips, cause they can seriously complicate you in the long run. So my recommendation is that you should try to at least not use them in completely unnecessary places. As a rule of thumb, I always used intersections for simple and quick shapes that I can remake in a minute if I want, and I use clips for the more complex shapes. And, of course, for every time I need to sleep a group or an image this way, I minimized the amount off clips as much as I can, and the drawing is a bit cleaner 5. Basic Inkscape Illustration Techniques Part 3: in this lesson. I want to talk very quickly about the basics off light and shadow and how to apply those concepts to your ex ape infestations. We can think of a no object as having two types of color. First is the local color. This is the actual color. That the object is painted could be a red, yellow, greenish blue or a combination off multiple colors. And then is the illumination color on top. Let me explain. In real life, when light hits a surface, it makes its color lighter. Every surface direct ticket by the sun, which have a lighter shade off well than the rest off the surface in shallow on the same if the color off the surfaces, yellow or greenish blue or any other color. You may think how light that surface will be depends on how directly the light rays are hitting the surface. That is how much a surface is pointing at the light sores. Our brains are programmed to quickly and effortlessly identify different shades off lightness off one down as different planes in an object. This way, by giving your object that might shave off a color, you can imply volume. Now in real life, most objects with ground surfaces that is none man made objects have surfaced that transition softly between light and shadow. But since we're working with a cell shaded captain style, we can is the stylist. This light and shallow areas in easy to draw have shapes like this ones. Now, how many off these have illumination shapes you create? Depends on the stand you're working. In some cartoons, you see three or more light and shadow shapes that simplifies elimination but gives a lot of deafness in some other student even see any separation with doing lightness areas that depends on this. Tell you're going for off course. There's more complexity to lighter shadow, but for our purposes, that's what we need to know for now. So to summarize a highlight, we'll have the same color than the local color off the object, but later and the shadow will have the same cooler than the local color. But Alka Okay, so let me show you how to apply these theories using inks. Ape, take a look at this red circle. I want to imply light roughly coming from the top left side. Somebody quickly. I'll draw a highlight on top, where the light race in the area will be hitting stronger in a shallow shape below. Roughly when the light race wouldn't be sheet in the area, minutely off course, both using the intersection technique that we saw in the previous lesson, I stopped with the shadow. Remember, the shadow has to seem cooler than the local color. But Danica So I was selected. Make sure I'm in the field, and she got the decision to make which one of these five color selection most use. If you watch the accept tips lesson, they say that I always recommend to use in the H S. Elmo, since it's a mole that I believe it's better for illustration in general, in the ages and mold. You have the same color Stan in the other moles. But the difference is that you selected colors by selecting the hue, saturation, lightness by separate, using separate the sliders. As you can imagine, these works like a charm for us. We have a separate slither that we can use to handle the elimination the L slither, which handles the lightness. So what I do is to use the dropper to here. The fall short cut is the I sample the local cooler, so they the same. Now go to the El Sider and start to slightly lower it. So the shadow is now a darker down off. Well, of course, and I will do the same for the highlight. But instead, I slightly move with the l slider up till I get a lighter. Well, one little note here, remember that we are working with highly stylus captains here, so there is no need to be physically exact with the colors. Just I'm a which a darker or lighter you think will fit your shadow or highlight. And it's a look. Okay, Malcolm, repeat the same step with these different colors. Circles. The method is the same. Just sample the cooler and move slightly the else lighter toe, one side or the other, depending on if you're making the highlight or shallow A couple of things first we could have used any of the other color selection most to set. The color is because it is way more comfortable and easier uses leather to control the lightning Sophia color in the really from the other properties. But there is no reason why you couldn't have used any of the other most if you know what you're doing at the end of the day, what you want is to keep a similar hue and saturation, but lower or higher. And you can do that with any off the other color mouths, just not as easily. The other issue is that this method or sampling the local color and then moving their Slater only work when the highlight or shadow, is going through a surface off the same goal. If you come an object made of multiple colors, then we have a problem. Well, let me show you a quick technique to quickly make light and shadow shapes that will affect equal your colors. And for this we're gonna use a nice property off digital colors, and that is transparency. First, of course, make the highlight and shadow shape. Now for the highlight. Give it a completely white color. Now, in the age of cell, Diallo, you see fourth slither with the label A A stands for Alfa that is the transparency of the corner. No one, that transparency quiet of it. Almost 2 1/3 down. There's no formula here, just play around with this lighter to the highlight in the racks the way you want with the colors really low, as you can see because the color is white and transparent, it's out into the other colors white and given a pretty good effect off being a highlight. Now I think you know what is it with a shadow is the exact same process. Only this time you should use a full black instead of white again. Play around with the opacity until it looks school without the colors below. This method of using black and white colors with transparency. I spoke of the advantage that you can change the color below on both the highlight and shadow. Well, pretty well so you can make the highlight in shallow shapes once and then play around changing the local color and experimenting and see what looks good. But remember, different colors have different natural lightness, so the other factor independency that looks schools in one color may require Justin in another. Also, remember that generally, shadows looks better than highlights, using these methods one quick thought here actually wondering if you could just use thes black and white as what is the matter to create highlights and shadows always and completely forget about the digit color methods I show you first. Well, you certainly legal, but the problem is that when you're using this method, you're not picking the actual colors. You are thinking other objects scholars, so you lose a lot of control over simply being able toe. Pick the color you want. For example, it's very common that on top off, making a highlight later, I saw just the huge just to be to make the colors more region body didn't the same with shadows. If you're working with a color with transparency, you can still select a huge that will influence the colors below. But you're gonna need to go back and forth and waste a lot of time experiment and drying together so she want. There are other ways to have shadows and highlights that look slightly better by using blood moles, but that's a bit more difficult to implement and doesn't look that better, in my opinion. In other words, sometimes it is yet to simply give the highlight or shadow a dick color, especially since that Justin colors. It's not a particularly slow process, so as that your thumb. I prefer to always use direct color when I'm working with simple objects. Where is easy to go in and change colors quickly. And I used the transparency methods when there is a done off highlights and shadows shapes , and it could be difficult to go in and just things one by one, or when it's a single object made off multiple objects off different colors, and it will simplify the things a lot. 6. Introduction to the 2d Platformer Mockup Project: Okay, this is it. In this unit will make the mock up. You're seen on the screen right now. We were using everything that you learned in the previous unit and applying it to an actual practical project. Here's what you'll see how to handle the grieves, the making off the dial's, the characters, background and other assets. However, before we begin, I want to give you a woman, or throughout this unit, we were using everything that you saw in the previous unit. All the techniques, methods, show cuts, all of that. And I want to remind you that it will be impossible to move forward with such a last project if I had to stop every five minutes to explain concepts that we already saw. So I'm gonna be using shortcuts and drawing things quickly. And I'm gonna assume that at least you can follow what I'm doing. If you feel lost at any moment, train going back and check the last unit because I won't be using anything that I haven't show you before. Well, with that out of the way, let's make the app off our to the platform of game 7. Document Set Up: Okay, let's start by setting up a few options in the document that we're gonna be using or throughout this project, I want to remind you that the project we are gonna be making is a mock up a fake screen shirt for demonstration purposes. This means that some off the assets that you're going to see in this project may need to be adjusted to the needs off the game engine. For example, in these mock up, we are going to treat the back around us if it were administation Onley worrying about what's on this clean. But if you were creating the background asset for an actual game, they may need to extend the backgrounds different shapes. So you can parallax the different layers when they character moves. I can possibly know how you plan to build your game or the juice that you're gonna use. This project will teach you everything you need to draw the app for your game. It's just that the details off, Captain into your game tools. It's up to you. With that out of the way, they're in a couple of options we need to set up so we can work comfortably remember that we're gonna be working with tiles for you. So the very first step should be enabling. And Confederated agrees, so we can be on the title set. We talk so much in the previous listen, Escape brings a fully feature and very versatile system that's very easy to use receptions and in the document property standard. So go to file document properties. They options are in the green tab. To be able to use agree, you have to create it first. First, select the type of greed from the drop down. But dangler or ex automatic, the rectangular grid option will create a normal rectangular. This is the one we live, the other one, the X automatically we create agreed with inclined angles. This is mostly used to create isometric out. We have not gonna be used in this type of lead, so you can safely, You know, a curious thing about this way of candle England's is that you can create more than one grease in the document. Every time you click on the new button, you create a new grill. This is completely unnecessary because you clearly need more than one single early to draw whatever you want to remove? Agree, Just click and a button that say's removed Now for the actual agree adoptions. Deceptions are pretty self explanatory. They will disable or highly. The next option is very important. You just select the unit with which you will change the values in these options. If you're following alone and went to have the exact same numbers than I do, make sure you said this. Drop them to be X big thumbs. I'm gonna be using a few specific values for line and sizes, and I'm gonna be using the greed toe. Calculate those sizes. I already covered the numbers that work out for me. So if you're following along, make sure the copy or these values the origin options just lights the greed in the central of radical access completely useless to use. So you can just ignore these two options. Spacing will make the bigger or smaller like a city already have the size that we were better for us and that really literally the by the idea of working the nice work of the squares, said the X and Y space in value to 30. You should see that the green gotta be bigger to keep you handle yourself better. Insight has two options to have a different color. The grid line every certain quantity off other three lines For our purposes, I strongly recommend you to sell it to two, so they had to squares inside off a stronger color and square. Believe me, this will help you get a bit less confused when moving objects around. Agreed. The minor and major league color lines will change the colors and Alfa off the minor and major good lines reception. You can leave it like this, but it can be helpful to change the opacity off the major re lines, so they're a bit more visible than the minor ones. Just click on the label and move the alphas light. And so it's a bit more likely. Kids will be very easy to change color if you want. Just make sure you don't pick a really strong color that distracts you while working. So trying to keep the l found the lower side, and that's all you need to know about creating leads for our project. They will really help you. The sign and work with the different dials will make him But now it's time to learn how to actually use them for trying first. Of course, you need to enable their snapping functionality in the snapping options like a saving. The excitement occurs when you enable snapping. There should be a few options enabled by default. I recommend you toe not touch anything here. If you don't know what each of these weapons do, However, if you want to be ableto snapped, the village's you should enable this little button by telling this. Put it on and off, you'll enable and the several is snapping to the grids. This is really useful because he won't always want to draw to the career. Sometimes you want to draw their things to the same. So at the moment of working, you're gonna need to constantly come to this Bhutan to switch on enough! They agreed, snapping. Play the straight pick the mental and create knows anyone in the campus. You shall see that the notes snapped. Really. Now, if you move this shape with the object, will we shall see that the shape also snaps to the A very important detail is that when you move an object with the object tool they know closest to the mounts will be the one snapping toe. This is a common functionality off all snapping in. Except So, for example, if I drag this bullet come from closer to the top, you see the little labor that indicates you that I don't know this the one step into the green. But if I drag the shape from the bottom right, you see that the bottom right, no will be the one that's snapping on. The same happens if I drank from close to the bottom left. This functionality will be importantly, the run when we work on tiles, so keep it in mind. One. Nothing before the end of this lesson. We want to make a moke up off a platformer game for mobile phones, so we know that toe better produce realize the area off realization. I went to draw a rectangle with the dimensions off the Swin. I know multiple phones have different dimensions, but we're learning the basics here, and we care more about clarity than staying true to the dimensions off a phone. So we're gonna be using a standard monitor dimensions for this game 12 80 by 7 20 which is says, Is there a solution off the videos in the scores? Sort of the rectangle tool and running in normal rectangle off any size. Now with the rectangle tool and the rectangle selective Go to the tool controls well, and make sure this rap down is said to be X pixels. Now we can import the sites we want in pixels in the double beauty input Sillitoe of 80 and in the H input senator 7 20 Also, make sure our X and are why I said to see, though these values controlled the roundness off the corners, I wouldn't want any around this. If they have a value you can click on, this will turn to send it to. So remember, this is gonna be the guy that we show the display area so it shouldn't have any field whatsoever. Only a single black soak. And now we shall see that they agreed. Dimensions that we set up a moment ago fit nicely as far as size. With the illustration area, each major square is gonna be a single tile. If you were working with different screen proportions or different types sizes, you may want to experiment a bit with the actual size of the green in the document property stay low so that one major square equals one tile in your game. 8. Blocks Part 1: Now it's time to start drawing the efforts, and I want to start by creating an asset that uses the agrees we created in the last lesson , while at the same time demonstrates in a simplified way pretty much every single function that we're gonna be using all throughout the rest off the cars. We're going to start by creating our version off the classic question block that appears in most Mario games and it's clones. Now. A question block may not seem like an extremely complex asset to make, but I guarantee that we're gonna be using 95% off the tools and techniques that you're gonna be using to create the other, more complex assets. So I think it's a good place to start one less thing before we start with this. Listen, if you watch the state minicars in the tips, listen. I strongly recommended you to start used in shortcuts. They say that you should have nice, comfortable shortcuts for the foremost used tools in the toolbox. The object knows Ben and Roberto. Well, I want to double down on what I say, because from now on, all throughout these cars, I'll be using shortcuts to speed up the whole process. I would remind you that you can change the shortcuts by going toe of it. References, interface, keyboard shortcuts and the doors are in the context. So many. I still recommend you to sit them to the keys, A S DNF or something similar. So they are close to the other the fall shortcuts. I also have other shortcuts for other reparations, but those are not nearly as important. You can go make another shark attacks you need when you have more experience with the program. Okay, let's begin. Have their rectangle tool. And with the option snapping to agree the neighborhood draw a rectangle that feeds a single major square. You should see the little Blue X as your snap while drying. First of all, we don't want a stroke in the subject yet. You'll see why in a minute. So this able it now in most media games and loans, question blocks tend to be off a light, yellowish orange study. With that color, you can copy my colors if you want us always amusing the decimal, so you'll have to copy each number for each slither. Well, I think we are gonna be company in the style of the more modern cellphone platformer games . So with the rectangle, Mother, fire Rondo for B D edges, you may want to disable snapping so it won't miss you. Oppa's you make small adjustments from no one. Okay, so now we're gonna have a really simple light and shoveled toe. Make the asset look a bit nicer than more details. Nothing too complex. Just a simple help highlight on top and 1/2 shadow. Trust me, a simple highlight and shadow will go a long way to make your out nicer to create these two shapes with an abusing the intersection mental, which you should be familiar with if you watch the techniques, Listen. So if you have problems getting something that I'm doing, be sure to re watch those lessons again. So have the mental and draw the highlight shape on the top part. What is the name? Followin the roundness off the top. It's not just a straight line. Another thing. They highlight this a bit as symmetrical and guilt tow one side. This will not only imply that the light sources a slightly do that to the left, but also make the whole object that bit more interesting. I always avoid creating straight lines when again on the highlight and shadows. Single place to do this, of course. Don't overdo it. Justice like deal this enoughto giving more dynamic field toe the whole object. Since the highlight implies that the lights off is coming for the top left, the show is gonna be slightly to the right. And I'm using the intersection technique to trim the excess off. I have an important deepest that you want to constantly soon toe the distance from where it's gonna be beauty. Remember that this smoke up represents something that will be displayed in a mobile fund and that this look is gonna be the size off a single detail. It's a very common beginner's mistake to assume in and draw the sizes off objects, completely, ignoring the distance from where it's going to be seen. It's always soon out and make sure that every state has the right proportions and that is visible. Okay, now, with some color, let's just use the direct color technique by now, you should know the steps like the highlight and remove the stroke. Sample the local cooler goto the l slider and move it There be up that be the same steps with the shadow. But now move The years later I bit down and we are almost on. But there is one important thing that needs to be done. And that is the question mark. And for that, we're gonna do something neat. We're gonna make a kind of symbol. Okay? The first step is making the silhouette off the symbol. And for that, we have not gonna complicate ourselves Trying it is just a question mark. So let's use the next tool. So pick the textile and type in a question mark with the objective. Remove the symbol to the center of look and holding controlled. Keep the proportions scale so it has the correct size. Make sure it's nice and center. If you want precision, you could use the align in this serial day alone to open it. Goto object a line in this revealed Now select the question mark and then select the block . The under of selection mothers here. Make sure that dropped down safe last selector and click on these through Putin's to center the symbol horizontally and then vertically. Now the symbol is in the exact center. Okay, I'm not convinced with the symbol. I feel that needs to be every thinker. The problem is the front by the fourth, except always said the front as area, and you can try other funds and see what funnies in books you can find. But the fastest solution is to change the weight. So with the symbol selector, select the textile and goto the drop down right next to the front. Look down and said, the weight toe, the last value heavy and that's it. A nice, thick question mark. You can try Justin, either with more moving it around or skeletal Holden shift to make it thicker. It's up to you now. It's time to make the actual kind of symbol. First of all, since we want to give the impression off a curved idea, you should make the color of the symbol of it darker, maybe slightly darker than the shallow Coehlo. This will imply that the surface sublet re sitting down. Okay, the key to make another give the impression of being comforting. You still use eyeshadow dropping on itself, and it zoomed. Dream highlight to accentuate the fact that It's a corner of the Let's start with the shadow. For this, we're gonna use the difference technique that I show you in the technique lists. On one. We watched that. Listen, if you're feeling, will be lost, so duplicate the symbol twice and make that up symbol off a clearly visible random color. Move the top symbol a bit down. Remember that the area that's showing through is gonna be the shadow. When you're happy. Select the top symbol and the symbol right below and perform a difference, not just the mother of giving the shadowy, shallow Hello. Now let's repeat the same steps for the limb. Highlight. But see this a woman. Women highlights are highlights that are captured my in its so they tend to be really small and more intense than normal highlights. Because the skylight is so small, it means to be fairly intense to be noticeable. Also, keep in mind when I told you well ago about keeping an eye in the size and the stability of the shapes, you don't want to make the shadow or highlight two things so that it won't being noticeable in the extra game and that's it. I love creating Carvel surfaces cause it really feels like you can go in and touch it. Evolution is really convincing if the color sound right. Of course, this technique, I just show you can be used with pretty much any kind of surface you may want to do. Okay, we have done with the main object, but there is one less thing I went toe in. Most medical owns, especially for mobile phones. The assets often get a think outline, so they stand out from the background. So listen now. But before starting this, a couple of things you should know. First, we want a consistent line weight across all asset. I made some tests and I go to the conclusion that decides I'm working on the best looking out plane is gonna be three big sets. Wife. Of course, if you're not working at the same size that I am the unusual eyeball it and see what works best for you. The important thing is that it's consistent across all assets. Second, I strongly recommend you to separate these outline from the other shapes that makes up the block. You see why in a minute sel implicate the mind block shape. Other, move the feel and give it a stroke. This is gonna be our outline shape. First, the color this type of games, often used on help line with the same color than the mind shape, but darker. There's one last detail regarding create and outlines and accept or strokes are calculated from the center in such a way that if you said they stroke off them because that's why the stroke, you know, fight exist outside of the shape if I picks us inside of the shape. So if we said outlined to three picks us, why 1.5 pixels will go inside and cover some details in the borders later on. If we want to create a bigger size outline, it will eat away even more details from the cardinals. Luckily, the solution is really simple. Send the stroke object to the bottom, off the stack or the so it's below everything. That's one of the recent way. It's a good idea to separate the airplane from the rest off the drawing. So now that's below. We need to set it toe twice the pixel with, so it shows the picture. With that, we want So go to the stroke side, make sure that dropped down next to the with input, says the eggs, and then said it to six speaks us. And then we have an outline off three picks as wife. That won't get in the way off our joint, and we're done illustrating the question block that will be a good idea to select everything and hit control. G group it to make it easier to manipulate one final small step because we made the blood without having in consideration the stroke now than their object. Is three big sense bigger than the dial size? Well, this has a couple off solutions. You could just eyeball and try to make the whole shape size off the tile. But this will bring you problems down the road when you went to export the toe. The actual game engine, the most accurate but slightly more complex solution is to use their snapping back to make sure their blow Castaic sex eyes off the day. But the problem is that we need toe enable and disable a couple off options. The worry it's not that complex and able to snapping again. What we want is to snap the blood group to a green rectangle. But the problem is that the options by the fault we'll make it snapped to a cardinal. No, but since the block is around there, we want to snap into the corner off the group instead. First, a neighbor, these two options This will enable snap into bounding boxes and snap into corners inbounding boxes. A group is basically a bounding box, so this option has to be enabled and one less step disabled. This option This will force snapping to nose instead off bounding boxes, and it takes precedence over any other options. So you have to disable it temporarily. Now you should be able tow, make it snapped away corner and using the opposite arrow, you can scale it in as soon as you scale is gonna snap and fit perfectly inside the green rectangle. Now then, forget it. Don't snap into notes back on, cause it's really important for other types off snapping. Well, finally we have done with the block What you saw here isn't terribly complex, but I can assure you that most off the other assets will be easier to make, like a saving the enter off this lesson. I wanted to show you an example that demonstrate pretty natural features that we're gonna be using in the rest of the girls. There's another similar asset and that is the activated question block. It's a block when has been hit with no question mark and either kill Cooler. I want you to make this bogus and exercise assignment. And if you want extra points, start from Syria. Don't use their finalize question block to recall a rate and save you some work. I won't be showing you how to do it first. I want to save some time. And second is just the same as things look on, the easier. So I strongly recommend you to do it as an exercise. 9. Blocks Part 2: the red alert off different types off looks in these types off blood former's. It will be a waste of time to show you how to make all possible types of blocks considered and they will use the same techniques you have seen before. However, I do want to make it slightly more complex. Type off. Look, that will show you how to apply these techniques. Two more complex assets. In this lesson, we're gonna be making this family complex brick block. Let's begin with the outline of the block. We want the exact same block roundness than the rest off the block in the game. It will look really weird if you see different types off blocks with different amounts off corners, smoothness. So for this, we can do a couple of things. But the easiest is to enter the question blood group, Remember it with double click and when you're inside, select only the rectangle and hit controversy to copy now, very important, you're still inside of the group, so double click in any part off the canvas to leave the group. Make sure that these drop down here says that you are in a layer. Otherwise you didn't actually left the group. Now heat control be based around the rectangle shape. If you want, you can place it and I agree. Though we don't believe it on agree square at all For now, you can just disabled, snapping and work the side if you want. And now for the last step, give it a color. In this case, I'm gonna be using a brick. That college You can copy my colors that you want. The next few steps may seem maybe complex. But if you watch and study other, please listen. You should be able to follow me without any problem. Want to imply that this block it's made off a few smaller bricks? For that, we're gonna follow a set of steps first with the mental, there are a few lines toe the linea. It breaks a couple of tips here. Don't worry about leaving the silhouette of the look. We're gonna fix that later. Also, I like to make the bricks uneven and skills like I said before, uneven areas are way more interesting than evenly divided ideas with straight lines. So this way the whole block looks more being and cartoony, of course, distributions are meant to be the mortar joints in my assembly that the name for the space between the bricks that has Morton so so little joints and make them bigger with the with drop down a three pixel will work for me. Finally with the darker shade of the local color. By now, I think I don't need to remind you the steps to make it feel more cartoony and less artificial. Let's make the joints a bit uneven. And for this we're gonna an intuitive the stroke as if it were a path. So we're gonna need to transform all these throws to Bath. Luckily, that's something so police, it'll go select them all and go to bath. Throw the bath. Now all these throws are bath. If you want to simplify your work, you can join all the response into a single shape so they are easier to manipulate. In this case, I just used a shortcut, contributes to make a union now double click toe nose and then moved and also beat up and down to make the whole joints more uneven. B Sutter, this is gonna be more noticeable once we have the shadows and highlights a nice little you can do is to white in the places where two joints connect. Now there is the problem with the giants shapes in some parts they leave the slough it off the block. I believe that you can see help to solve this. That's right, this using intersection way along with the separation between breaks but no one to be read the next two out something. I want to cut out the retail cigarette in the area where the joints intersect with the border. And this will help for that. Give the impression that this is a block made by breaks separated by mortal, not to mention that was result in a more interesting so you. Yet the easiest way to do this is to use a difference to cut out those parts. So grab the mental and draw these trapezius like shape now so you don't have to go one by one making six different populations. But it's a nice little trick you can do. You can sell it all these shapes and joined them into a single shape by using a union. And yes, unions work with shapes that I'm not intersecting. Now you have a single shaping. You only have to do a single difference operation. And now the mortar joints need to be adjusted to these new blocks in red. So I'm sure you know what to do. But former intersection with the block. Okay. Now, for the highlight and shovels, we're gonna follow the exact same steps with it before with the question block with the only difference that we're even Each individual break a highlight and shadow. So think of which Bricusse, its own separate, minimal up you have the mental and rather highlights. I remember everything that I showed you before. Keep in mind the roundness made the highly shape. Think enough. So it's visible from far away, and they did you with a sort of deal. So it looks a bit more interesting when the little shadow is close to an inch. You know what to do. You have to perform my intersection to remove the excess. But when it's here on the middle of the block, you have to hide one off the edges below the joint shape. There is no other way around. And for the color of the highlights and shadows, I think that you can do that on their own. By now, - one less important thing, the shape of the shadow or highlight will imply the form off the brick. So making these shapes that can rob's around the leak. It's a nice way to make the bricks more interesting. These choppy lines off the highlights and shadows in play that the particular break is damaged or cheap, the way which is always a nice way to out. Did they do anything? Architect Er, and we can leave it like this and the job will be done. But I want to have some small extract. It is to make it look slightly more finished. First, we're gonna add some damage to the bricks, have the lib stone, and there are few. Leave self a small, irregular shapes here and there. Make sure nobody ate the size. When in love, I'll just a few to occupy large spaces with nothing on it. Also, make sure the ellipses have the same color as the shallow. This is supposed to be a curved surface. Also, you don't have to use ellipses, but elliptical dem instant to look better than other shape damage, and I strict is that you can draw more than one leaves on top off each other to make this safe more level quickly without the need to go in there and modify the shape of the leaks. Now you can have a nice beat off detail with these reliefs is and then use the difference technique to create a thing. Very intense highlight shape. It's important to not overdo with these types off the tail of this coveted yes, Onley to feel the empty areas. Otherwise, it would look to feel them distracting, and now it looks a look better without that detail. But one nothing. I went to the I love the mental angry, these political bombs on the joint shapes. What you want to do is to imply that there is damage in the Blix. When you're done drying them, bring them to the joints with their union again. You should keep in mind the quantity of theater and only had a few what it feels to empty. Here's another nice thing I like to go. I like to draw this cracks on the borders, but that it's a really nice looking detail. You can have specifically toe the horizontal cracks since they have a border that's opposite to a Lessels, and that is to give it the really thin highlight. Listen, may they collect put up more. And now for the final step, the three pixel outline killed. You can simply pick the love shape duplicated. Give it a six pixels stroke. We talk about in less. Listen, I'm moving to the background as far as the color make it slightly darker than the darker shape. And it's a don't forget to group everything and make it feet a grid unit like we did in the last Listen, this book is actually the single most complex shape you'll be doing in these cars. So congratulations on finishing. I want to remind you that if you want to use this bloke asai floor or workable tile, it's gonna be problematic because of the roundness off the borders in a sex. Insights will be to make one off these books to function as a floor like the Blixen, the level 12 in the original Maria. So you're gonna have to redraw one off these without around the edges, maybe with a bit less detail, so it won't call attention to itself since it's a floor tile 10. Items Part 1: Now that we're alone with the basic blocks, let's make the agents. This will be the collect we're going the power up mushroom, The break You were great and, of course, the classic dream pipe. We were drawing this items using the size of the dial's just so we have some consistent numbers later on, we may need to change the scale and make some last minute adjustments when we put them in the final illustration. So let's start with arguably the easiest one. The classic green pipe. The ship off the Bible is super easy to make. Grab the rectangle tool and draw a rectangle off about two tiles by two tiles and give it this green color that is roughly the same green that you see in the matter grains. Now to create the top part of the pipe, Ukuleles graf again, the rectangle tool Indra a rectangle on top of the pipe very carefully, so it's in the exact center. But it's is here to simply duplicate this rectangle with control D and then holding control . So the movement is constrained. Toe the vertical axis, move it up and starts killing it in the position called on shift this way, you make sure the second rectangle is perfectly in the center. Just make it slightly lower than one time and slightly wider than the other rectangle. But what makes this pipe object more interesting of the highlights and shadows? So let's start with the shallows. We want shovels on two places first, a drop shallow from the top part of the pipe, and a safer though this is spirited to make. Just could have the mental and rather drop shadow just below the top part. Remember that you can make these completely straight line if you called control while you click to other no and then intersected inside and with a shadow cooler with our color selection technique. No, the thing for the other side shadows. I tried to make the shadows off roughly the same with When you're Done, intersect them inside and give it the same color than the other shallow. Now here's a really nice technique to copy the color from one object toe another super fast . You copy the object from which you want to get the colors with control, see, and then you select the object. You want to place the colors with the object and hit control shift me. This will apply the colors off the copy of objects feeling stroke as well as in the other state properties like stroke with an ingredient. So that selected object. This way you won't have to be constantly switching to the object and rapper tool to apply a common color. This is the fastest way to apply color toe the highlights and shadows because most of the time they will have a common goal. Er that it's so from now on, if you see that on average it gets color without off nowhere, it's because I'm based in the style using these shots. Great now for the highlights. We want to make it look like this, the same metal material until that we're gonna make the highlight in a specific way. But let's start with the dream highlight. This one is the same. Us with the shadow. Just make a perfectly straight line shape, intersected inside and give it a fairly bright highlight color. This guy let should be on top off the shadow, hiding part off it for the other kind. Lights were gonna separate it into two to give the impression off a more complex material, so using the same metal off, creating shapes with straight lines make a thin and a wider rectangular shape right next to each other, intersect them inside and copy the highlight color, hopefully using the base the style metal. Now let's see what some work and copy these two shapes and move them into the upper part of the pipe when they were a bit to the side again, intersecting inside and give it the highlight color. A little note. You could have used a rectangle tool to create these rectangle highlights and shadows, but I thought it would be nice to show you how to create these shapes quickly using their mental. Now it's on my mother of creating the darker outline just duplicated to pipe shapes, make a union and give it a darker green stroke with a nice and thick with and of course descended below. In a previous listen, I told you that sometimes it's good to create askew than uneven shapes to avoid battle alliance. Well, in this case, because the shape of the asset is important to the gameplay, it's a good idea to keep this you it at cities were born in about a little lines and all. And since the highlight and shadow that find the shape of the object, it sounds like a good idea to make them feet these boring shape. Now let's make the collectible coin, have the lib stone and using a tile as I guy Rana lips slightly less wise than the dial's. Give it a gold yellow. You can copy my numbers for the color if you want. Let's make the site of the going duplicate the highlight and give it this lower black death and saturation yellow. I also move the eighth Slater a bit to the left to make it just the bench. This coin is meant to be a collectible item, so I think it warrants a bit more colorful color scheme now to have some interest. Let's create a circular carved plane in the center of the coin duplicate different plane, change its color so you can see what they're doing and holding control and shift so you keep the proportions and scale from the center scale him how much it's up to you on the type of going you're going for. That's when it's cooler. Remember We want a bit more color for item, so we're gonna do the same. We deal with the side plane, not only Lowell in the lightness, but I also love within the situation of it. And with the Hughes later, Abby. Doors to urine. Let's have a shallow in the plane. You know the dream. Duplicate twice and move the upper copy a good quantity. So the shadow shape it's clearly visible from far away. This time, sample the color from the plane. I love even more the lightness, saturation and hue. So you get this really strong orange color. Okay, now it's time to make the highlight opposite to the lead source. One thing we want this highlight to be nice and thick, so it's mystery from far away. Plus it's gold, so it's supposed to be shining, so we have to make the highlight on the outer side of the guard plane rather than the way we've been doing it before. On the inside section off a cups office. Well, in my opinion, day is his way to the least is to use a valuation off the difference technique, so these replicate the plane twice and change the color like you will normally do. I move the shape slightly, do the side, then you send it below the other shape, and now that is visible are just only the color of the shape instead of state up shape when they're done, performed the difference so you can see that's pretty much the same process, but slightly different as far as the cooler. The with an almost white yellow. This would look good because it's supposed to be gold and gold Rose. Gold would be shining the highlights, but I want to be with the next track. I like to make it look even more shiny. We have the mental. I make this long shape that covers the whole coin and, of course, in the sector. Inside a coin with the front airplane mobile below the current plane, I agree with the highlight cooler. One last thing I want to do with this highlight. I want to make it more interesting, more like it shows a texture. So with the Penton brothers blocks on top off the big highlight, I'm perform a difference, and that's it. We're going the last step. Of course, it would be to create the outline. So Senate both the frontal inside ellipses duplicate them and perform a union. It a darker color with a nice and think picks up with and, of course, move it to the back, having the coolest technique we used. It's very common for out this to move slightly the saturation and Hughes later when giving colors to shadows and highlights and different planes to create more colorful and interest in illustrations. I didn't talk about it until now because I thought that it wasn't necessary. But in this case, off a collectible going, we needed to make it. That's much colorful on contrasting as we could. So at the moment of begin colors, keep in mind that you are not bounded toe only handle the else later. Introducing other values as long as you're sort of will make the registrations more colorful, and we're done with the items for now. Next, we're gonna make a great and the classic mushroom power up 11. Items Part 2: Okay, let's continue with the items By making a great don't worry, this one is easier than it looks. Grab the rectangle tool in creative rectangle the size off. Dale, if you want, you can round it off just a bit. But not too much. Just enough so the edges won't look that aggressive. I'm giving them in saturation brown color. Now we want to create the different planks. I went to the same with the With the breaks in the bricks lesson I make them slightly skewed to make them look more cartoony. The easiest way to do this is to use the mental on the intersection technique. Don't forget, you just want to give it a slight twist. Don't exaggerate. Give it a light version of the Bronco. In this case, I have some of the hue and increase situation. Just agreed to make their planks pop up every four for the next step. It would be helpful to give the outline, so they moved in. Yet we're gonna give the great fellows from the blanks. So we need a clear separation between planks to guide us. This will have a lot of depth and detail to the asset. So with the Penton dress single shape that will go through the entire grade. So as the drug, keep in mind that the shadow will change. The length depended on whether that is supplying below or not. So make the shadow longer or shorter. Depending on that, since the shovels would go through different colors objects, remember, we'll need to use the low opacity black shadow method so you know what to do. Give it a black color and lower the capacity and send it below the top plank. But about all the other ones for the left flank, you can create the shadow and then perform a union with top shallow so they share the same color properties. They're sensitive. They're gonna blank. Also, don't forget the always useful based anchorman with Contra shift B so you don't have to give the shallow scholar manually. Okay, Now I want to have a small detail that's really gonna make a difference. I went to at this separation or indentation that these types off blanks often have. For this, create a straight line with the mental. Remember that you can hold control what you place a point toe, make it perfectly horizontal. Give it a darker shade of ground on the flanks. Now with the object duplicated on, Move it down so it's shed in a border with the other one. And give this copy a lighter shade off the brown off the blanks. Senate bull shapes and group them. Now move this group to the center of its drink. As you place them, you need to rotate them in the same direction as the blank and, of course, handled the right the stack order. Don't worry about them sticking out. We'll fix that in a minute. Great, Nice. And to remove the parts that are sticking out, we have two options. To use an intersection or to limit the visibility. You seen clips previously. I say that I always prefer to use intersections for simple cases because they tend to prevent problems down the road with more complex civilizations. Well, in this particular case, since it's such a simple asset, is this year to go in and use a clip instead of finding the section. The problem is that here an intersection would require the going and dismantle every single group, and I saw transform each of the strokes tow path. Before we could perform any William operation, just sleep. Each of these groups with the mind book shape all with the planks, and it would be so bad. Easy. In this case, this back part of the great answer needs these lines to make it look like it's made off multiple other planks. So move a couple of copies down. You're probably gonna have to change the color so they rather feed the darker color they are against one tiny little little I want to create four males on each corner's to have some l e f details in the world ends. Since this is gonna be seeing from far away, the names are gonna be super simple. Just the perfect lives we have not conceded today. One last detail. You have the mental and raw these health moon shape make it a really light shade off late toe in play, the intense highlight off metal and now, if you want it will give it a quick shadow. Lubricate the circle, give it a full black and lower the opacity. And don't forget the move it a bit down and implicated to the four corners. Literally the highlight and shadows off the great. This is what will make it look more three dimensional. You know what to do. Create the highlight shape of Opel. Use in the mental again. Be careful of the corners. Make sure to give it some roundness there. So they feed the shape the same with the shadow shape. You know, I don't forget this stop plane that's pointing up in this blank. This plane also needs a highlight. Now give them the classic highlight and shadow colors. - There is one last detail I want to have. I want to have some slight destruction or gods here and there to add more interest to the whole object. Don't worry. It wont we have. We're just going to use some unions and differences to add some spikes in a few places. First, let's start by making some planks more interesting. I want a couple of big cars in the top on in the middle blank. So what? Have the Pendleton and draw a spike? We're gonna do something similar to what we did with a look. Then select the spike and blank and perform a difference tow car of that area. We're someone to have some spikes in the highlights to imply some damage in the corner. That's let in some light or shadow through sort of read the same steps. There are a few spikes with the mental only that this time we went toe at the spike to the highlight of shadow. So used a union instead of difference. Okay for the finishing touches. After making some tests, I realized that I prefer to keep the outline of which blank. Otherwise they kind of blend too much. There's not enough contrast. So instead of moving the stroke, just give you think darker brown and your colors maybe the same color than the other outline. And as for the size, make this truck size small level of these outlines is to make the separation between blanks more obvious, not doing capsule it the entire acid. So you want a small stroke size. - And of course, we went from large outlined as well, so they have the main back shape duplicated. You can be with the same color as the blank outlines, and of course, we with a nice, thick, big cell with the great is done Now. If you want, you can make it free to tile by using their same snapping methods. I show you in the less Listen now let's make the motion on board up. That's always we're gonna be using a single diet as the guy for the stocks ices. Now these item is every different than the other ones. It's a bit more organic. This means that there is more room to play with the shape moving and just in their notes and get in the shape you want. So first, let's start by quickly creating the to mind shapes off the mushroom. This them and the cup. The idea here is to get the proportions right off the bat. After we have the proportions, we can go in and started just in the shapes off both. So grab the rectangle tune and create a pretender that feet about this big unit. Notice a couple of things first that is in the center. Second, that it's really short doesn't even reach. They have a point of the Dale now, with the mother fire rounded off a bit for the cup, just making a lips that goes through the other shape as I'm showing you here. Now that we have the proportions, Mr. Modifying these shapes and giving them the final shape. Let's start with the cup with the lips selector go towpath, object to path to get access to the nose. Now, since this is a more organic shape, couple in Exactly what I'm doing is gonna be a bit have, though. Let's try to place the notes in the same place that I did and go from them. So grab the two knows at the sides and lower them. Rather know that the bottom and move it a bit up. Then just the length of the handles off regional. Could you get us into what similar to mine? Finally, give it the night saturated orange rail. As I feel under move this truck for the stem it easy with a reddish white color, the sample the red color and lower the situation and move the lightness up. Still, it's almost white, but with that lens off to me, this color just looks more blessings than a grayish white. It makes it feel more like a real mushroom first to move the doctor notes, so you get only two and introduced this curvature to imply that the form it's actually cylindrical at just the proportions by moving, scaling and rotating this time shape if you need no, let's other evidence for the cup. Let's have the classic mushroom spots. This is so easy. Speak their lips stool under three or four spots. I like to add one that's gonna be got within the section. Just don't imply somebody. Just decide that you need to modify them or, today them a bit to modify the spots. Remember that you could use pass object of bathrooms and form the spot into a bath or the shortcut control shift. See for the stem. I went to have a couple of beady eyes with the lips to create one. Ellen Gator lives with a dark gray color, not quite full black clothes, now created smaller, more circular lives, making me they white scholar again, not quite full white but close and put it on the left side off the black eye. Lubricate the eye to the science and, since we wanted to be in a sort off 3/4 view, offset a bit tries to the science. So it appears like it's looking to the side and now the shallows. This is quite simple. We want to imply that this camp has a low, well plane. So with the mental, their own around the fine in this lower world plane. When you're done, have Justin knows. You also want a shallow on the right side to be consistent with the rest of the efforts. Just right intersected inside and join it with the other shadow by performing the union. Notice that the shadow is overlap in one of the spots. So we're gonna have to use a black color with a lower capacity for the shallow in this them . Don't forget the drop shallow from the mushroom cap on the right side when you're done, intersected inside and give it the same shallow cooler than the cap. Of course, the last step is gonna be to create the outline off the human shapes, the stamen cap. So you know that really greatly rail and sickle bland using a duplicate of the Mann Cup shape and send it to the bottom for the stem because the stem is in front of the cap. We want the airplane to be behind the shapes of the stem, but in fluent off all shapes off the gap and we're them with the items. Remember that because the sytems would have a different function than the other assets, we may need to make some quick adjustments at the moment of foot in them in their final illustration. It's gonna be mostly a few quick changes in scale or with size, but we'll cross that bridge when we come to it. 12. UI Elements Part 1: every platform will need some kind of user interface toe this place, some important information like lives going, scattered power laps, that kind of stuff. In this couple of lessons, we're gonna make the assets toe create a super simple user interface for our game. Now, we don't need a fancy in assertive You I, in fact, for this type of game, the best type of few. I is gonna be a simple one that won't occupy too much space and don't distract from the game expedience. So in this lesson, we're gonna draw the main couple of assets that we're gonna need. And then we are finishing the last steps in the final registration when we have all the other assets in place just so we can make some adjustments a bit more informed off with what is the u i gonna interact? We need I have to come toe Most money games don't have damage canto, but this isn't a Mario game. It's our own game, and we can do what we want. So let's make the hunt. Making hearts is basically backed orchestration 11 but I want to show you a nice technique that you can use to make any type of symmetrical asset. One thing before we start in this list on Al draw, they had the with off one tail. But since this is meant to be the you, I most likely will have to adjust the size to fit the final composition. Okay, grab the mental and place the points just like I'm showing you. Now, this is gonna be 1/2 off our heart at just the position and handle off. These two knows they were happy with the shape and then select the two notes and transform them toe smooth time. Don't introduce the roundness. Now switch to the object tool and hit control de toe duplicate it, holding controls. So it's constrained to the recent Alexis moving to the other side and then he'd they h g the flip it horizontally. I think you get what we're gonna go down. Move it. So the two nose in the middle intersect and here were taken advantage off a nice little feature off the Noto. We can join too knows even if they belong to completely different objects. Once those who knows shine, the two objects will join into one as well so we depend. Toe first of it. Both have hurt and I should see or the nose from both objects, just like the tunnels in the middle and click on the joint selector notes. Bottom this one over here. Now that you joined those two nodes, the two has become a single bath. But that doesn't mean that the nose at the bottom automatically joined. So go in there and during the two knows with the same button and close their path. You with a nice red color and remove the stroke and the suit. This technique amuse with pretty much every symmetrical object you want. Now there is a path effect that gives you a much more robust it off tools for create and mineral bath. But I think that's every tower gil for the more simple shapes like this one. Now let's have a couple of details to make the help. Nice are looking. First, let's have a cello. Nothing fancy. Just grabbed the pencil and draw a shallow over the right side when Jordan used an intersection to remove the excess. And now give me the shot caller for the highlight. I want to make something slightly different. I want to roughly imply that this is something like a glass or some shiny material like that. Now, to make something like a realistic less material will be considerably more complicated. And I don't want to waste that time in a simple you listen, but I went to do something different. The hell it is gonna be. Just a couple of ellipses with a very intense highlight color as most white. This is how a glass like material captures highlights. Usually we do ellipsis one B and one or two smaller ones outside. Okay, Now you beat something extra. Instead of making the single dark outline like we've been doing, we're gonna create a white outline to further given impression that this is a shiny surface . Believe me, it will help a lot. You know, that real duplicated mind shape. Remove the feel angry with a white stroke. This is stroke is gonna be smaller than the bigger, darker stroke that we're gonna make it a minute. So give it a smaller picture with then send it to the back. Repeat the same steps for the other outline. This is gonna be the outline. So you're gonna have to sample the red color and make it that go this time, give it a considerably larger wheels. Since you do begin here, they have shaped the picks up with is gonna have to be bigger to show through the other outline. And this is for the full huffed. You can group it if you want. I thought it would be fun to make a couple of other variations a health and she hurt, and it fully the pleader helped both superfast made. Let's start with a fully that breathe out the UK their full have to the side on group it if you group that and they did the shadow to kind of shapes and the actual real hard shape. Now the only thing visible is the two outlines, certainly white outline angry. They feel what we want to see a slightly lighter color than the market help line. But then, as solo, where the situation so off the sampling, the color off the outline on top off, moving the else later to the right Move. The earth's later to the left, and you should get this Bordeaux color. And of course, we don't want a white highlight. So you with that stroke the corner of the field. Just whole shift when you sample for the half the little health. It has also baby sea with the mental drug, a perfectly straight line down the middle. You can just snap into snap to the nose in the middle. But I just table it. The subject is gonna be really small, so there is no need to be these perfect. Then finish the shape covered in the right half, Look together, have shaped and perform an intersection. He was the color off the board your backfield. Let's organize them together like they will be in the final project I'd use for hurt to full one have and won the bleeder. You can use the alliance, distribute daily photo daily, everything up. Make sure each have is group Well, there ways there's gonna be a huge mess. Goto object, align and distribute. Then select the mall and goto this bottom toe. Distribute them all in equal distance or something. If we leave the hurts like this, depending on what's gonna be in the back room, it may or may not be visible. The same happens with all the other U. Y. elements. The fastest and simplest solution is to give the U I elements a background on. We won't complicate with complex backgrounds. The open style of the game is super simply so. We'll just used a black rectangle with a lower capacity for all the elements backgrounds. This is extremely simple to make just a black rectangle with lower capacity, so still a question time here will draw them in the final illustration so we can adjust it and make it fit better with the rest off the assets. 13. UI Elements Part 2: Okay, one last year. Element. I want to include a power up item. Nothing too complex. That's a simple icon. So the overvalue I want feel less empty. My original idea was to make something like the probable power ups from Mario World, where the center of the screen there was thes box, that store one power up, and you can get a button to drop it at any time. So I could just put the motion powered app that we made in the terms recent. I don't want to repeat myself. I want to smoke up to feel more like a real game. So I draw a new simplify powered up just for these. Listen, this bullet up is gonna be the classic fire flower. So with the Penton, wait this long stroke and bend it a little and give it a fairly thick struck with so many fight, because that's what's enough. Now you have the live stool and create an elongated leaves with the object. Oh, rotated a little and just the scale. So these flower part, it's about more than half than their figure. Okay, now let's make the pitons. So this is a simple iconic illustration within one more than four big betters. So we have the Ellipse stone and put four ellipses in each corner. And when you're done, perform a union with all of them. Now, for the inner part of the flower, a couple of ellipses together should work and other leaves. This is simple, simple with the mental. Just make this simple leave shape and dedicated to the other side. You want to make a couple of week adjustment so they won't look exactly the same. When you're done, you may want to have a line in the middle to imply the leave stock one the step. I don't like this inclined plane at the bottom of this. Them I would rather to be flat. So this has an easy solution. You're selling this them stroke and go to bath. Throw the bath. Now the stroke is that bath you can get at one of the nose within a little and make it flat . We wanted this them to be a bath rather than a stroke anyways, since we needed so we go create the outline invested for the shapes. Now let's give all the subjects some color to make them pretty. First of all, give the flower a red color and, of course, remove the stroke for the inner shapes. I'll be using a white and an orange for the stem and leaves. I'll be giving it this win and then, if you want, you can just stop the media. Check the color numbers in the ages and ciders who copy my colors exactly, but I believe that creating your own colors can be more fun. So it's up to you. No, for the shells. For the show of the flower part, I don't want to complicate myself. Join indecent. Let's just use the difference technique. You know what to do. Duplicate twice. Give the apple shape a different color, moving a bit to generate the shadow and performed the difference and give the shape a shallow color for the shells in the stem. You want a drop shallow below the flower part, so draw a simple, shallow and performing intersection to remove the excess for the shells in the left. Leave. Just make a shadow in the lower part. An interesting Now here comes the slightly more complex variation, the same with the right leave but continued down the right side of the stem. Remember that you're gonna have to have this in right off the leave and stem as a single shape. It will intersect the shadow shape some for making the section duplicate the right leave on the stem and joining them with the union and use this new shape toe intersect the shallow in and give you the same Teleglobe. - We're almost on. But like with all other assets in this smoke up, we want to create a darker outline for each part of the asset. So you have the main flowers to read from the flower part, duplicated with control Z with a nice thick stroke. Thank you with a darker toned on the color, the shallow for the Stempel. It's made of multiple objects, the stem and the leaves. Luckily, we transformed this them to a path before, so it's easy to select everything duplicated and perform a union. Now you with the fixed rope and send it to the back. Thank you. With the cooler darker than the shallow and the seats in Newport up only that this one is exclusive to their U I. The final step will be to make the background where they was gonna go. But this is extremely simple. It's just a black rectangle with the capacity low well on the governor's founder. Just like with the other, you element will throw them right into the final illustration so we can make any adjustments right there and we're done with you. I because we don't know how the colors are gonna intellect with the rest of the background , Most probably the color stuff we pick. I don't gonna be definitive. We may need to crank up the saturation or lightness off a particular shape, so it's more visible in the final image. So we'll have to wait until the composition is done to make some final tweaks. That's well, s I did the final touches like the background on the position off the elements. 14. Terrain Part 1: let's start making the terrain where the characters can work and jump. Here's what we're going to start creating the assets by finally used in proper tiles, not just Houston degrees for mission and the sizes, but actually using them to guide us in the process off, creating reputation. Terrible patterns. But first I want to show you that you can apply everything will see toe tile on non tile assets by equal. So we for making the actual ties assets. I want to start by creating these non tile floating platform that's very common in most to the blood formals and on the way, show you the approach and techniques to create the rain that will be reusing when we make the actual the vein tiles. This floating platform will be very similar to the actual tile assets. It's gonna use similar graphics and bottoms. After all, it's gonna go in the same composition, but with the mind difference that we have a bit more freedom since we have not constrained to a single grid square and we can focus more on the techniques and methods to create in the rain in general. But first start drawing. Let's take a look at how other platformer games create this type of platform and to rein in general. So think I look at this screen shirts off these eight and 16 games. I know this games have not illustrated using victors, but we can a study and take inspiration from the sign of the assets. Look at how did the rain, including the platforms are usually separated into. You have the top, usually with a nice Lillian glass layer, and then you have the actual terrain below. Also notice how the grass girls not only on the top but also hangs a bit to the side, as if it was a real cross section of it. Arraigned with grass on top, this pattern is very common not only for the reins with grass, but that's a pretty much senator Rain. You see snow hanging to the side in the snow. It rains or leaves in the jungle. But even Brocks under this thing, this makes the graphics much more illustrative and therefore more opinion. Finally, a common batam that you see in a lot of games. No, mother, the type is to simplify that the rain texture with this wavy colorations no mother, the style You see that creating this waves It's a really efficient way to make an area give the illusion of being a gross section off an actual terrain. And if you have a few very of things in there, like rocks or bones, then the illusion will be even bigger. We're gonna designer the rain using these observations, so keep them in mind. We're not gonna use agreed to create the dials, but we're still using it to guide ourselves for the sizes in this platform will be about three times by 1 1.5 breed squares. So let's start with the grass. I want to show you a nice and easy way to build grass or any other organic shape. Using their bullion union technique we saw in the techniques Listen first to graduates of weather create a rectangle off three times while in less than half a mile high. Now, using the lib stool do like within the unit techniques. Listen, another lot of Phillips and several Lapin, What you want here is the very ate. This ice is off the lips is too great. An interesting looking silhouette. I've always in creating more than do you consider the relief sets of the same size or with . So if you need to be afraid of having the object tool and moving them around to get the best looking cigarette, paying special attention to the edges, I want a nice, patrician off grass that leaves the three squares limit off the platform when you're done, joined everything with the union. Thank you with this bright green color company. My colors, if you want now. Very important. We want a nice, organic looking silhouette, and for that we're gonna need to make a couple of adjustments toe the path. So go in and the little notes that are in the bombs basically the lead, everything. That's not a government. Nothing. We have only knows the gardener's. We can easily grab the bombs with a note. I move and drag each of them so they look more like rests. What you want is to give it a bit of weight, like the massive grasses filing, because off gravity, I so don't be afraid of moving. The actual corner knows toe better at just the silhouette, so it looks nicer. Remember, the key here is variation. You want the grass to be more or less the height off Cal fertile but very ate a lot the sizes off each mass. Now for the platform itself. Since this is a floating platform, I want to give it a nice, interesting Sarette so we'll have the mental and creating the straight lines make this uneven terrain shape. I want to make it about one time high when you're done with this orangey brown color. Okay, well done with the form. Honestly, with the the dance, let's start with the grass Firstly, when they find out on top to emphasize every the work of the area, this issue that's just a pencil to create a perfectly straight line on top. I'm intersected inside. Give it a highlight Gola, but make it subtle, the silent. It's meant to imply that this aliens walk over, but he doesn't want it to be distracting, either. Okay, now I want to make the grass a bit more interesting for that. Let's give it a shallow area than we know. The easiest way to do that is to use the difference technique. You know, the real duplicate two times change color and perform a difference. The one thing nice and thick, shallow area When they're done, give it a shadow cooler. If you're feeling unsatisfied with the shape you can always go in and just a path of it with no tool. Speaking of shadows, it's in a nice drop Shadow in the rain This one is gonna be easy Just duplicate the shape of the grass Send it below And maybe that with down as far as the color we don't know what's gonna be real. Oh, so in this case, just give it the low opacity black shadow and of course, intersected inside it rain area so it won't show outside. Wait one final step With this grass shape, we want to give it a nice outline, just like with all the other assets. So you know what to do. Duplicate the mind shape, send it really low. The other grass shapes you with a nice and fixed with and of course, you with a darker shade of the same green. And we're done with the grass it here for now, I recommend you to zoom out and see how it looks from far away. Now for the details in the train. If we're gonna make a couple of more complex stuff. Don't worry. It won't be anything too difficult. What I want to do is to show you a few of the many ways in which you can add details to a rain for this floating platform, I want to get the leadoff damage like an arrow. That part this is is it to make you have the mental and make this line with multiple planes intersected in on the lower side. And since the color to make it a bit darker than the other train. To emphasize that change in plane, that's another plane right below this one sec. Use a different technique. Make these, you know, plain Xena, and again make it a rhetorical. I want to make this new plane more interesting. So little. Someday we have the Penton and a two or more of these spikes or planes, they're supposed to be damaged, just like the damage in the bloke or the great. I feel this whole floating platform feels a bit plane to help with this. I went to the final few planes in the board that are around it. So with the mental greatly shape following more or less the cigarette over the line and when you're done, intersected inside. Not everything the capacity black, shallow like we've done so many times before. But this time I don't want us to live with full black. It removes the lid off the color. The other in Paktika should be a bit warmer. So instead of living like this, move the separations later on the way up and give the show a really dark, almost black brown. And, of course, I just the Alfa. We should notice that the color off the brown since the shallow up it make it less dull. It's really black, low opacity, shallow not only take lightness from a color, but I don't think saturation. So keep that in mind now that we with some nice detail, did they send you this with the plane on top, create multiple shapes of damage and gender with the shape use in a union. I will repeat what I say originally in the block lesson. You don't want to oversaturated with Don's off these small details. Just have a few here and there with feels empty. Okay, for the next step, it will be really useful to enable snapping. Once your neighbors snapping, make sure that all their default options are on. I'm telling you, in case that you leave the snapping toe commerce off from when we made the other assets. Now here comes to quit, but with a pencil create a shape that snaps toe. All four knows to create a plane. Also, don't forget to also snap toe the damage detail it finito. What they want is to give all planes that point to the right. A darker tone implied that the light is hitting those planes less, so you only need to create these shapes in the plains. Point into the right. That's for a school. You can give it the same color than the shape below, maybe every dark of. And you see that because off the transparency, the colors will multiply and you'll get the darker. Don't you want nothing? A couple off extra details to close up everything with mental. Create a couple of these politicians on the top. This is supposed to be car planes resulting from damage, so give them the same color as the other plane below. And here's the pain a little leaders that I like to have to all the rain. A few small drugs on the lower, darker plane. This also policy to go with the mental Just raf you four or five side lanes belittles, making really small. They're not supposed to call attention to themselves. They're just a nice little detail. So get them a gray color, that one contrast too much with the color off the brown in the back. And we're along with a floating platform. We're gonna be reusing some off the things you've seen here to create their available d'Alene. So make sure to get everything in this lesson before taking this one. 15. Terrain Part 2: Okay, let's finally start with the dials. But before we begin drawing anything, I went to talk about what we need to approach the creation far tires because we want to be able to be not only the floors breath, so platforms, we'll need to have a minimum of four different. The renters se platform looks go, then complete. I went there for the top. They one that has the grass. I don't have time for the middle without glass and at least two more tires for the science . These have the most common ties you need for a simple platform. But this is if you're not counting other types of terrain like and gland the reins. What any other special type? Now, what we're gonna do to save up some time. I used to draw a single divine patch that we're gonna have a use for the grass to rent tile on top and for the pure, your entire on the bottom in their life. That is not that much benefit from doing these. Bring these cars first. I want to save up some time, and second, I think that it's kind of need to be able to do these things you see in vectors. Anyway, let's get stuff A quick thought just because degrees will represent a single dial in the game, It doesn't mean that we're forced to make it style off a single unit. Remember, we're working with dies for the convenience of Houston. Reputable assets for the terrain, not because off any technical limitation. So these times we're gonna make, I'm gonna occupy four grid squares in the final registration. I believe that it looks better this way, and we can create a bit more detailed terrain types without loosely in detail because it looks too small. He didn't important the floating platform we made in the previous Listen, we don't take inspiration as well. Simple the color. So we don't have to worry about anything but building the asset. So this start and with snapping the neighborhood make a rectangle off two times by two. Hey, with the same color as to my interim color off the platform, these brown orders. Now we're gonna follow the same procedure that before toe create the grass on top. But now we have a couple of extra things to think about. And that is that the grass needs toe rap back so it can dial. But one thing at the time. First kind of the rectangle tool and make a rectangle off about half off 1/2 time. The beat the same steps before are a few ellipses and make sure that they all look uneven. An organic answer To make the things This year For the next step, make sure that there is one similar size of lives, and in the cornice off both ends off the tire being cut off at South Pointe motherless. And this was simplify hugely. They work for us when we're done, joined them all with a union and, of course, intersect them inside the time him comes about. When you make these bombs nicer and more organic with the notable, remove the unnecessary. No. So it's, he said, would have them in just bumps. Don't forget making them feel like they are being pulled by gravity. Now, if you follow my advice and place and lives in the middle of each end, this next step should be easy. You have the two windmills and up in the ally in and this real day low go to object, aligning this real I go to the path section and click on this Putin. This will align both males at exactly the same vertical position. I think you know what you should do now. Mr. Snapping is enabled and duplicated two shapes to the side, on with the shape at the side, fixing just the original version. So it gives a smooth transition between the two tiles and repeat the same step with the other side. Great, we're done with the glass shape, but he didn't want to do something slightly different than what we did with the non title of platform. I want to do something that's pretty common for the graphics in these types of games, and that is to create a second layer of glass that seven darker and makes the tile a lot more interesting. So we're gonna repeat XX and process them before just below the other grass medical thing about backed illustration is that there is always a way to cheat, and here you can cheat a bit and save a lot of time. Let me show you how this is his duplicating shape on a snap into the side, so there are two glass shapes continuously since you're Justin. So they style. They should match perfectly duplicate these two shapes and join them into a single one with a union. Now move it below the other guys shape and down of it. This is gonna be the second grass shape which will be a darker shade of the same green. Now here comes equipped belt. Now you can slightly to the left or right. And you know for sure that it's gonna tile perfectly, since they are too dire shapes join together. It s a recommend you to flip it horizontally with the HP. So you get the extra variation once you place it and it looks sufficiently different than the other grass shape about official intersected inside the jail. And if you want, you can make some adjustments like women denounce or making some minor transformations, and that's it for the shapes of the grass. Now let's do the same with you with the other grass shape. Give it some cooler and outline. First of kind, I don't up just like we highlight on the upper path with mental. I intersected in if you couldn't control toe, make a straight line. Obviously it's well tile perfectly. Now some of the highlight color from the blood from we made. Let's listen for the shovels. Well Oh, you know the drill. You send a different technique, create a shower shape on the lower month, Thank everything shadow cooler and repeat the same steps with the Dhaka last shape below. - Now , very quickly. The drop shadows for the two grass shapes enough for the outline. We want to outlines one on the top draft shape and another for the bottom one. The only difference with the outline off the floating platform is that we're gonna have to lead the side so they stylus well. So once you select the right color, thickness and position, select the L blame shape Select. Both knows that the size with an old stone and click on this wooden this would only moves their stroke between two or more selected knows which in this case, is exactly what we want. The same with the dual clients on the left and right side. Now the grass and it's all planned is with the total perfectly. It may happen that after you remove their side off another plane, a bit of the outland leaves the dice. Well, this is because of the way the outline is raw data to fix this. There is no other way than to transform this outlined to a path and intersected inside using a rectangle the size off a tale. So make sure to give it the final shape and says you want before things for me to a bath. Once you do it, it will be impossible to adjust anything. Okay, Now that we have along with the grass, let's make the extra terrain area. So let's start with our wave. But, um and remember this pattern is gonna have to be useful for both the title. With the grass on top and the tile, that's only the rain. So what I've come up with is to hide one off the waves below the two batches of with us. So the upper time looks different, but it's the same design than the middle one. Duplicate the mind tiles to the side to create the waves. We're gonna use the mental so would have the mental and throw these wavy shaves. Don't worry about making them brown. We're gonna around them in a second. Just worry about making them think enough and that they are in the right position. Remember, we went to high one of them below the grass. So once you enter the system inside, you may want to move them up for them or even scale them if you like the way they look. But make sure to leave one of them completely hidden by the grass shape. That's the reason why I wanted to duplicated time to the side so we can see whether where the grass was gonna be. Now it's time to meet with some color. What you want to do is to do with the darker or lighter version off the orange we're using used the Insider along with the SS later, 200 the lightness. But as of the situation on each of these waves, you may also want to play around the read with the age slider to give it a bit off a different down, of course, always being as Southern as possible. We're gonna follow the same procedure than we follow with great shape to make the same diet correctly, making sure that the tunnels at each side out of the same height with the align and this reviewed a low. So if it's not open, goto object a line on this real. So they took correspondent notes and click on this button toe, put them at the same practical level and repeat the same steps with the other pair off knows below. Let's finally into the use of curvature. I think the notes in the middle of the bath, not the elder ones, just once in the middle and click on this wouldn't to transform them to a small tape. This will introduce a carbon depending on the angle of the corner. But now that we've introduced a culture, we need to make sure it flows nicely into the next time. So let's do the same. We did with the grass and able snapping investigators into the side and just the candle. So each curvature flows nicely between tiles. Remember that the end objective off its style is that you cannot tell when one tile ends and the next one begins. After we had just one side, you have to adjust the other one. So do obligated to the other side. I'm gonna be this in steps. Okay. What I want to do with these shapes is to give the illusion off dental and place planes. For this, we're gonna be using the same technique we use with the platform. We're going to create a little plane to indicate whether the planes going in or out. So you're seeing the difference technique that you should be super familiar way now created in shape about, and we love each of the three way of shapes for the doing. Then the planes follow the same steps that you deal with. The girl in question mark with a shallow cooler for the Super Bowl in the Highlands for the same below for the race plane is the exact opposite. Okay, let the ball in a shallow below. Okay, now, for the final step for the terrain, there'll be days. Let's have some nice details like we did with the floating platform. First, that the Ripston and there are few. It leaves this year there in the empty spaces and give them the same color of the show. Remember that if you want more variation, you can just stack more than when it lives together to get a slightly different shape. Another thing you can do to create even more radiation. It's still the same thing with the with the item enough shapes to the shadow idea to play some music calamities in the rain. I think that fuel spikes and a few polygons we go a long way to make the terrain freedom organic. Remember to sample the corner from where you are in the It would also be a good idea to join these details with you. For the families step. I like to add a few rocks just like we did with floating platform. So there are a few small drugs here and that India of the spaces. What you want to do, basically, is to feel the empty space, but without making it to be see, that's distracting. He finally has to detail it may look, goes on its own, but it may not look that great when the latter tone of ties are together is that I needed I like to go. I like to create yet another police in shape, just below the rocks to make them contrast every ball. So draw their politicians with the mental and send them below the rocks. The last step should be to try it with the glass shape and see if they work together. Remember that this terrain is also acting as the lower part of the upper style with the grass. So you should see if it waas with a glass on is they don't you can always go have the pen tool and make some adjustments. Maybe moving this planes have it up or down or women some details around. When we created the grass outline, the stroke was living everything silhouette. So he did just corrected that using the group's snapping method toe snap, the grass toe the corner of the time, prison it entirely inside of it. Now that I really has exact shape off the square and it's perfectly deliver, okay, we have, along with the upper grass, the rental and the middle during time. But we still need the two entitles that will make the floor and platforms no way nicer. So let's do that in the next lesson. 16. Terrain Part 3: in this lesson. We're gonna finish with the rain by creating the tiles that are gonna go to the side. We need to off these tiles one toe end the upper two rental the one we grasp in another to end the lower, pure the rain. Tired. If you want, you can create another two for the other side. But the most common thing is that you just flip them or center if units. So we're gonna be making only two tires. First of all, we need the finish tiles is the guy I group them so they won't cost any problems at the moment of drying. A good thing about these side tiles is that they want gonna occupy one entire square, only about less than healthful off one. It's a purely decorative tile. Without it, a platform or flow would look and finished. So what they're gonna try to do is something similar to the end section off their floating platform we made previously. Okay, let's start with the grass again. Just follow the same steps you follow to create the grass in the last lesson. Only that this time try toe the finally nice looking and the incidents for the grass. I still remember toe not overextend with three or four reliefs is that which so about half a total is just fine. Done with the union. Notice how the shape often extensively to the tile grain next to it. We live to got out the excess, so you have a rectangle. Snap it to the used to shape to intersect the L plane, so it fits perfectly within the time. Try to make them look nice and natural by adjusting this let with notable, and they make this shape fit with the end off the other grass shape, making the transition go as to smooth. Dispose of it when you're done, repeat the same step with a lower glass shape again. Used three or so ellipses and make sure this glass shaped want extend past the other top class shape. This way it looks more like a cliff. The next few steps you shall know them by third. By now, even the color used a difference. Technique to create the shells and highlights. Adjust the shells and highlights so they connect with the ones in the other tile. Thank you with the outlines. This time you're gonna have to got the outline in the right side so it won't overlap with your lifetime. Just elected notes. Went to the lead and go to the button. Delete segment on the grass section off the dial is done. Trade out to see if it feet with the grass in the other times. Okay, my safer that the rain section Remember that this area is meant to give a nice and into the platform. So we're gonna be doing something similar to what we did with the edges of the floating platform. We're gonna create the side plane. There is a tiny little issue we have to have in mind. Remember that we used the same rain tile to create the diet with gas and the ties with only the rain where we won't do that now mainly because this want local. We want the extra variation in the silhouette of the edges. So we need to make to dies, one that connects the patches of grass and the other one that continues with shape. So let's begin with the apple tile, the one with the grass. This one is simple with the mental. Just make this irregular straight lines to imply some broken terrain. I prefer to be with that read off a slope and leave some glass hanging to the side to make it look more like a cliff. We recommend you to just move on us. If you were making a single to die along shape, don't mind where the first and second I'll start. We're gonna cut this shape in the two needless invited tiles in a moment. Now listen very the shape into two tiles. Grab the rectangle tool and make sure that there is no smooth in the corners with the great snapping enabled. Great to rectangles that feet perfectly, their squares one on its style and send it below the L shape duplicate. The shape intersected with one of these rectangles with the leftover shape intersected inside the other rectangle. And did you go? You have two different shapes that fit perfectly within eight as well. By doing these were skipping over a ton off headaches with snapping shape, so they feet, then tile correctly. - Let's find out the details. Well, of course, the first thing we should do is to continue with the way we shapes Mrs Easy just enable snapping with the glancing up in this able and with the mental snapped a one of the corners off the shape and finish it off. I'm just using a single shape here because this shape is really simple. So I leave this in red and finish it off in one. Go try to make the waves transition in a small way on debris the same steps for another three waves. When you're done, intersected inside and give it the colors. The next step is making the shallows and highlights you just made. At least in the previous lesson. The quickest way to do them is to use the difference technique. I bought the height, so it fits with the other highlights or shadow. - I didn't notice that the South Land also leaves the tile. So I'm repeating the same steps I did with the other outline. I took it with the inside off the time and one Finance D day. I went to the same with it with a floating platform. I create some sort off outer plane to accentuate the border. So with the mental, create this thing shape that roughly follows the silhouette of the countem all the way down again. Make it continue to the next stylus if it were a single shape. When the moment do intersect the ship in comes, the only thing you need to do is to create an extra copy before intersected in in each time . And they have a social be that you have to shapes that feet exactly in the area they should be. Give it shape the dark brown color with a really low while. For that we use a social cooler in there floating platform and now, for the last little detail enable snapping. And I start creating this planes on all the areas where they should be pointing down. When you're done with the same low alfa dark brown color and because it's taking off the tool for values, they should leave as being even darker. You just have any problem. Adjust the alphabet more, and we're done with the dials. With these four shapes, you should be able to create any type of platform with any dimensions, of course, that there are a lot of possible things you can do here, for example, with what you know now, it shouldn't be too hard to create things like holes in the rain, more elaborated blood from endings or even diagonal or slope the tiles. In fact, any off, this would be a really nice come work. We really just grab the surface. But now you have the knowledge toe experiment and try new things, and that's exactly what I recommend you to do now. 17. Characters Part 1: Now that we're done without the dials and assets, there is one last thing we need before moving on to make the backgrounds and to assemble the mo cap and at least the characters. I relieved that having characters on the mock up will go a long way to sell the illusion off being a screenshot off every game. So in the next few lessons, we're gonna make a Kumba enemy clone AP in a plant clone and the label character that is not a clone and is completely original. Marlowe the Lumber. But before we begin, I want to give you a couple of quick warnings about the way we're gonna work first. Now that we have dealing with more complex and time consuming illustrations, I'm going to speed up the pace of read and assume that you're pretty familiar. Without the tools and techniques that we're using. I won't be using anything that I haven't show you before, so if you have trouble following whatever doing, we watch a couple off the older lessons, especially the techniques. Listen. And second, this course is not about character creation, and certainly it's not about collective creation for games. These characters that we're gonna be making are basically a quick sketch, and I'm not the sign in any way for an actual game. If you want to create characters for your own game, you probably are gonna have to have in consideration things like the gameplay or the animations or the engine that you're using the characters that you're going to see here I want. If a demonstration for the sake of a more complete the mo cap, However, I believe that the least value in making this characters. If you're willing to research more about the sign and animation and all that, then you're gonna be able to use everything your limb here, right with that out of the way, let's start with the easiest character. They come back alone again. We're gonna used agreed as a way toe guide ourselves. Let us start with the main part off this mushroom with Fitz, the cup so wrapped in a live stool andro and leaves the sides off a single detail. It doesn't need to stop this. Eyeball it. We're using the greasy rough guy. Now let's edit the shape within out own so Goto path. Object to Bath to get the nose. Now we have the lower no more with capital goes just past the middle boy into the dial. You can just that just the nose to get the exact shape off the job you want. That's when it's cooler. I'm just giving it this orange, but you can give me the color you want. No, Let's make this stem. Just use the pento, create these square looking shape. Maybe this science has been so they look a bit more organic and give it an almost white owners. Just crank up the L slider while selecting on or and shoe. To me, this looks way more pleasant than a great white. Now make the backside of the cup. Just just the bendel and follow the shape off the cap. The later ones will do something in between the cap and the stem color. Now for the feet, I want to create these comically big fit. And for that, grabbed a pencil and create this rectangular shape. This is gonna be one feet Now select the top left. No. Consented to smooth type with this Well done on move and justice. No. So it feels like a shoe being looks from the side. Give it the orange color we've been using duplicated to the site. We're gonna make the other feet, but I want to make it so this one is being looked from the front. This is a policy to make. Just grab the other note. Answered it to smooth as well on a justic armature. Okay, Now, for the last part of the character, the ice Well, the lips stolen draw one Ellen gator The lips dedicated to the science. So it in their sex with the other one, how much they intersect. It's up to you. But this is supposed to be the silhouette off the ice. When you don't perform a union tojoin both shaves and he's you can make some adjustments with no than girls to make the whole shape more interesting. Put it in place and justice Skill. You want the ice toe? Leave the cigarette off the gap for that extract a medic touch. Give it a white ish honest like the one you gave it to stem. Now to create the pupils. These are just gonna be too perfect. Circles may be a threat down a bit, So with the lips, draw a circle make it really small and for color, just use a really dark orange. So it's a really dark brown for the last face. Dissidents who have the mental and there are these two large rectangular eyebrows make them look on TV. The worry, if they're not perfectly tangles, they're supposed to be a be done, even draw them so they are not exactly symmetrical. Give them on almost black today. And if you want, don't be afraid off adjusting the nose in the ice. Or they one show through the eyebrows and we're done with all the pieces off the character . But that doesn't mean that we are done with it. Why do yet? Like I said that minutes ago. Now we are working with more organic and complex constructions. Chances are that the shapes need a quick retouched to adjust unorganized everything. This is especially important if you build a glider by joining all shapes by separate and then assemble them together like with. Now that you have the whole character built, you can see how old pieces feed together and make the right adjustment. Based on that, Trajan, the proportions and scale of the different pieces we find the individual shapes with Milton , or why not remove? Or are they different shape or together after they're done with the finalized in the shapes face, it is time to give it the outline and the shallows. We're gonna be using a single, shallow and no highlight. The characters are already complex enough as they are. We don't need the extra complication. So far, the shells this one has been assuming that the shells in the mushroom boat up just go over the mental and create a border below. This time, I'll be thinner than the one in the bush room and a shallow to the side. Anything I'm doing here is to run off the join between the two shadows. Comply that the border is a drowned. Then you joined them in into a single shape. Using that union, don't forget to do with the shallow color. Then a drop shadow on the stem for the shoes just around shallow on the right side. And they want a drop shallow from the Ebel's to emphasize them in the seats for the shells. Now the greater feels a lot more soldiers. That's what's the outline. We want three different outlines. One in front for the two feet. Well for the gym and one for the stem. So you know what to do. Duplicated two feet. Join them. I made the ship into a thick, darker, all and shout line and send them below the feet but in front, off the rest of the body. Then make this time outline. Follow the same steps and send them below the stem. But in front of the cap shapes finally end with the cup outline. This L Glenn is when I have to go up normally, take up bed the ice Ivlow and also the number of part of the gap. So another toe make an elder line off that shape. You're gonna have to select all those shapes, complicate them and perform a union. Now you can use the shape toe, make the Outland and were then without this count number. Now let's move on to our discount. Banana planned 18. Characters Part 2: Okay, let's crank up the difficulty just a bit and make a blown off the classic banana plant enemy first. Let's make this them. Grab the mental and create this A straight line off about 2.5 tiles. Bend it like I'm showing you here using the minor grid lines toe guide yourself. You want to give it this s shape that you're seeing here? This is gonna be the stem, and it has to be very visible and look like it will hold the weight of the heavy. And finally, with a light green color for the hell of the plant making a lips off about four squares and scared and incidentally, about list and half a time Place it on top off the stem. Emma Tate that every down. So it better matches with it. You can always that justice later on, So don't worry about too much about the placement. Finally, give it a family saturated rep. We need to add the classic leaps and if that's so characteristic off this character, So using the mental created triangle toe cut out the shape, draw a triangle off about 45 degrees and performed the difference to put out that section. Here's what your Justin else, if necessary. I recommend you do the lady and Mississippi knows, and not just a shape mannerly with the nopal. Did you get something that you like? But a piano planned clone is not complete without the lives with mental on top off the border. Druthers. Fairly thick arrow shape. Give it a light play color as always, a recommended to leave a trace off the red color. So it looks a bit more interesting than bring Lee and now start grounded it. What I'm doing here is holding the shift key and clicking on a no and drag it to the side. This post one of the two handers, depending on where you drive and this allows you to introduce a subtle Corbett er, get in the shape that you want, like this may need a beat off trying never so keep tinkering with it. You're satisfied with the shape you get once you're done. Next step is creating the thief. This happened this simple. Just three rectangles on each side. Give them a darker shade of gray of their lives and move them real them now for a couple of finishing touches to the same. We're gonna create this part off the flower that joins the stem. And here in the research that I did, it was called a receptacle or simple, depending on what these parts are mentally, which I don't know, I just want to some shape to after the back of the head. So they could be either. I saw it from now on, because the receptacle cause I need a name for it. And to me, it just sounds better than about. But first, let's analyze the shape because it can be a bit confusing. The shape coming, separated in two parts. One off course, the soul like this and the other in this trapezius like shape. You see why we are making the shape in a moment? Make sure that the A P. C L shaped follows and covers the back side of the head shape. And then, at this source shape, I recommended to join them with a union. Okay, so here comes the important part. Remember what I showed you a minute ago about holding shift the introduce a curvature from a straight cardinal? No. Well, we're gonna do that with all the teeth in these shape, this whole control and right to both sides. We want a nice around the leaf like shape when they don't give it the color off the stem, and we're almost done. But I think it needs another every day. I want another off these receptacle you couldn't read write again, but its way, he said, to just duplicate it and make it larger, change its color to a darker shades of the green and put it below the other. If you want, you could go in and change everything. You're better off the teeth so it doesn't look like it duplicated shape. Okay, And for a final detail, I want to have a couple of leaves to balance the sign a bit more. This is so open easy. You have already done some leaves in the flower powered up, so it's the same here. Just make the leaves shapes with the mental and make them really big. What you want is that the balance to you Better the same. Make it the silhouette more interesting. Make two of them put one on each side and thinker with the rotation and scale with the same cholera system. Then, if you want, you can create this pain in the middle, give it a darker shade of green and actually with a fairly think pixel with enough so it's visible from far away and the seat for the drying off the shapes, not to give it some shadows and leaders. First of all, I want to start with the lips, so give it a shot of shape on the lower part of the upper thief and in the lower part off the lower thirties. Then inter sector shapes in and give them a shallow color. You may also want to give the geese the same color than the shadow color, just for the sake of consistency for the head shape. We want each other when the lower part and maybe also a drop shadow from the leaps. Some of the paint tool and draw these shapes, and when you're done into, stick them inside the head. Don't worry about that except ago. That's what the seller state below now for the shallows off the receptacle. Of course, we need a drop shadow from both shapes, so you don't want to do lubricate the shape with them. A bit to the site and down. So they are visible and give them a show. Finally intersect them inside the right shapes. - If you're bothered by the fact that there are two shallows overlapping here, it'll just duplicate the black after shape. I'm performing a difference with the drug shallow this way you eliminate the section where they have overlapping. But you also want a shallow for the lower side off the receptacle. Just don't complicate yourself with this. Do not forget that this part is gonna be really smile on the screen. Make a single shell shape that goes through the do shapes and at the moment off it does take them in. You have to duplicate both shapes off the receptacles and then joined them with a union and use the shape to interstate the shell shape. Don't forget that you're gonna have to use a black color with lower Alfa because it goes through two shaves a different color, the stem and leaves. That's only is shadows, but in order to be able to intercept the shadows with this them when did it to be a path so you know what they do selected and goto path Oh, projected path now that the shadow on Lee on the parts of this them that are roughly pointing down. So you have to separate the shallow with two shapes like I'm doing here as far as the leaves, Don't complicate yourself. Just make the shallows on the lower side off the leaves. Once you're done, intersect them in for the governor. I'm just sampling from the black shallow I'm were done with the shells. Now for the final final step, the Outlands. This outlines may complicate you in a couple of places, depending on the way you drew the plant or more specifically, but if so, another demonstration to solve the problem, I purposefully drew that. These so they've shown this problem. But first, let's start easy. Let's make the airplane off the stem. You know what to do. So all the paths that makes up the stem, including the two shapes from the receptacle the play gave them and join them together, everything nice and thick. Stroke committee, That shade of the green off the stem. I'm a bit behind and that's them for the ship. Elden Senate all shapes that makes up the help, including the mouth and teeth duplicate them, joined them, even the thickness the Golder and move them to the back as you've done so many times over. But now you're probably gonna have a problem, depending on how you threw that. These well, the problems you may encounter is that you made a thief every two sharp, costing Insecto flat in the stroke except Dusty's toe about. It's really long and uncomfortable outlines the sorting from really thick strokes and really sharp Cornell's most of the time. This is exactly what you want. But some things, like in the case off these deals, you can really result in really distracting areas in the outline that kill attention 1,000,000,000 cells. One solution will be to go to the stroked up in their feelings of Halo. And with this option selector, which should be selected by the foot, increase the number in the input until the stroke in the beef area, I'm no longer flatter, but now a new problem is everything. Now, the stroke in the teeth are too long and they intersect each other. This is the problem in state wanted us to avoid with the D for adoptions. Well, the only solution to this problem while keeping the stroke nice and thick is to go in there and mollify the shape of the stroke mine early, within a little. Modify the nose, pulling them back a bit. What? Trying to keep the biggest quantity of stroke outline in its stiff. If you see that you can possibly show too much outlined because the position of the teeth makes it really have, you could pick a teeth and move them straightly to the side and just the outline. A constantly Worley from up close, the stroke looks of it wonky. What's important is that looks OK from far away, so some out constantly. I know mine area just in an outline is serious, but it's the only way to cover cake and eat it, too. And he was. The final is banana plant clone. Now let's make the most complex character yet. The player character, my love number 19. Characters Part 3: Okay, let's finally end this character section of the girls with our main player character. Mom. No, the plumber and I want to repeat what I say back in the first characters. Listen, this is not a course about correct of the side. All of these three characters are basically quick sketches that I've come up and I'm not design in any way from games. The field of correct of the sign for games. He's every to grow for me to deal with in these cars. Breasted wanted to other a few characters to make them Oh crap, look a bit more complete. So now that we're dealing with a more complex character, I'm gonna take some sharp cuts to save some time. So this lesson won't take like two waas. I still want you to learn at least the process off, draw in a character for again, so I'll be demonstrating how to do everything. But I still want you. I'll be skipping them Time left, seen over some areas, if you're interested in a more in the fluke at correct of the signed using inks a plan the mouse like we're doing here. But I suggest you to check out my cars on correct of the sign on my profile. With that that other way, let's start with the current first, Let's make the kill. Hey, this one of the most important parts of the character. So it wants to take our time with it to go with the theme off the mocha. I want to make a character that roughly rece embers Mario with its iconic clothing and mustache, but that it is its own thing. So they hear the for character is gonna have a big nose, a big moustache, any red cap that I'm gonna change from the classic flat cap to a baseball cap. That's don't change something in that the same. I also want to take this opportunity to show you a quick method to build the hell. Using a common design technique, this method is really easy and will produce good toe great results, depending on how much time you take with it. Let's start by making really quickly and rough the features off the hill just to cover them with canvas. First, the hill stopped by making a leaps about the size office. Well, we'll need to mollify the notes so go to path. Objective bath. What you want fears to get this shape. This shape is the form of the Hellsing from the 3/4 real with the A perform being the skull and that were being their job. Just that just the fourth knows. Did you get the form of the head Want for the skin color? I'll be using this watch in the palate. I'll be using just a stroke as an outline and I won't bother creating more complex outlines since this is a more complex character and things can change later on, I was gonna compromise with a separate shape for the ice. They're just gonna be to ellipses one white with a black stroke in another black with no stroke for their peoples. Notice that I'm producing either full black or full white for either. I recently tones closer but not full. This is a common technique to make the color suggests aggressive for the knows. This is sissy. Just make this rectangular shape with the pento and then another rectangular shape on the lower left bottom for the windows, the nose. Then you select all notes except the ones at the corners and said them so smooth type. And of course, you have just the position of the nose to get there No shape you want. This is my favorite way to create diagnosis for the moustache. Just create these star shape. Then you select the lower notes and chase them tow, small type. And of course, then you adjust them so they feet with what you want. The hell is just a C shape with another smaller C shape in the middle, then just moved it to other notes and adjust. The more complex shape I'm drawing here is the cap. Just make this shape and doing here you got to be aware of the shape of the head. We want to have this side of the cap to match the side of the hill and the two sides at the front. Too much different of the hill. Once you're done, Used time for the vice, sir, this is just a C shape that perhaps to the back of the head, just below the line off the cup. This wrapping around the side of the here is what we have seen. The illusion off the cup existent in space. Notice how I'm wrapping the shape of the bison around the here. So you want overlap at the side where the vice, which will be behind the hill? This is a common program. You have been dealing with complex illustrations in vectors due to the way pictures, candle objects. Sometimes it's have to create a shape. That's but surely he'd anabel and video another shape. So you have to fake it. And this is for the cup. We're gonna have to refine the entire shape of it. Once we modify the here later on us, we will find that the sign. So don't worry too much about how it looks now. Okay, As you may have noticed, this doesn't look that cool. In fact, it looks terrible, but that's okay, because at this stage we want is to get the mine idea fast. In my case, my idea waas a nice guy that's a bit overweight with a mustache, a gap, some smaller eyes and big bushy eyebrows. That kind of vaguely reminds you a veto. The Nintendo character. That was my main idea. Now it's time to refine and explorers, so these shapes convey that idea the best way possible. However, right now they have not saying is them. They're just a few shapes thrown together. So when I'm Canedo used to play around with the position, scale and rotation off the features and try to show through my original idea in some way, but very important without adding anything, I'm not drying anything here. I'm just that just in the shapes that are already there, this is the key of the process to use what you already have in the registration and explore the tons of possibilities you have. You will be surprised of how much some smaller changes in the position on a scale of a couple of shapes affecting over the feel of the character. And he's a secret woman. This process can take a lot of time. That's the main reason why am time lapse in and escaping number. So Marias and the thing is that this isn't really anything complex or something that requires explanation. I'm just using the object toe the scale and move the shapes around and seeing what looks cool to me now that I got to this point where I'm kind of satisfied with the result. I could live it here, but I want to show you the classic, the sign method that's often used to come up with a better the signs, and that is to create multiple variations. I want gonna show you this process here cause it will take a lot of time. But idea here is that with every variation, you can make a more informed decision off what looks cool for your character. This way you improve and refined the sign progressively. So basically, you do the same thing with you just now, but with different versions. And then you pick your favorite out off a bunch and repeat the same steps over and over again. Failure, satisfied with the way they have the same looks. Doing all that on a lesson will be very impractical. It was taken around this amount of time and just the same thing. You did little better number again. So what you're seeing here are 15 variations off the original share that I made on my own. If you pay attention to the characters disposition, you see that they are three main categories. This categories represent the way I went on with the design. First I changed the shape of the head to make this really strong job action. And after all, variations, I did end up with a the sign I really like this one. Something similar happened with the other two columns with the one on the right there Waas exploring anymore around with him and again I went down on beer in variation of our radiation. Well, I go to the version. I liked it. The column in the middle is a more normal looking, maybe a bit more genetic, but still showing some personality the head that I think it's better for the Modelo. Correct. Is this one the more genetic one? I like a few other body ations more, but I think that this one is perfect for a playable character. So in the next lesson, we're gonna take this hell and build the body and fish, making it look cool. 20. Characters Part 4: Let's continue with the body of the character now in the less Listen, I say that I wasn't gonna create the character, Really? Do we used in a game toe animate and all that and I won't. But the way I'm gonna build a body is gonna December the way you will create again character for production So let me show you what I mean. First, let's make the torso Just make an ellipse The sides off a square transform me to a path you may want to be with the final color which is gonna be the same grand off the gap Let it be with this egg shape We want the plumbers to be a bit chubby, but not too much now for the legs. This is so policy doesn't have the mental I make to interrogators Trapezius try to make the legs open and make the whole correct of balanced and give it the blue collar for the feet is the exact same process that we followed with the goombah feet, Just make a rectangle and found the two notes off. With this moved. I've no bulletin and of course, at just a shape for the other foot toe the same only that you should run off only one off their nose. And of course, then just again the answer also super easy. We're just gonna use their under off rectangle for the upper and lower, so they have the tools round it off and create the two shapes of the arm at the moment of placing the apple in lower limb together. Remember that you can move the people point by dragging the little gross to anywhere you want. In this case, I'm just placing the cross in the intersection between the two limbs so I can rotate them and put them in the position I want. He didn't make this leave of the show. This is just 1/2 rectangle that covers the upper arm. The hand is just another round of the rectangle that he didn't make in this time. So it reads a bit more like a hand notice that I'm giving the same stroke color as a stroke of the hill. Now it's time for the other arm. I won't bother to remake the entire arm on the other side, so just duplicated and move it. Still, it doesn't fully match so I took a moment to adjust it and make sure it looks well. And now I'm other than a few more lines to imply some fingers and a thumb, nothing too complex. Otherwise it will be distracting. Okay, the body is done, and just like with the hill, not stand toe just some proportions. Emplacements. I would find the shoe by the body. I won't be making multiple variations of the body shape like I did with the help. It's just a body in a simple genetic do we have here? Body shape is enough. - The final step is that in the details and since we want to bother with gate and outlines for every single shape, this means created in shadows in a couple of other things. But first, let's start by finishing the clothing off our character, so we need a new shape for the upper part off the others. Just use the mental and create a new shape from an intersection on the lower part of it. Also for the suspenders, it's super easy just to lions and intersect them inside it. Also, if you want, you can keep them, separate them or join them with the overall shape for the Wooten's just a couple of ellipses. I wanted them brother by giving them another side, like the going Like I say the minute ago, I won't bother creating separated outlines for every single shape. But I still want to have some outlines to be consistent with the rest of the style of the game, even if they are not the same Wistar the right color. So what I'll be doing here in the arms is to enable the strokes and remove the area where the strokes are intersecting. I'm using their delete segments. Bhutan quickly give the illusion that these two like tangles on a single shape, and I'm gonna repeat the exact same process with most of the shapes to create outlines. I want to use the old method off, duplicating the shape and then placing the outline behind at most if I need them gonna duplicate the shape and place a stroke on top. This is certainly less clean, but a lot faster. Now it's time for the shows. I'll be creating shells on the right side rather than the way we've been doing on the left side. This is because the character is tilted to the right and it just looks better if the shadows out during the character on the right side rather than the left side. This time again, I'm gonna take a different slightly faster but less accurate metal located in the shallows . I'm just gonna get out of the Penton. I'm gonna make this other shape on top and instead off intersected in. I'm gonna draw the shallow shape right on the borders. This way, I save up some time and the objects and the groups, This is way less accurate and way less clean. But it's a way faster. And for this character, that's pretty complex. It's good enough since the shallow is going to go through different objects. I'm using a black Alfa color shallow and of course, as I'm joining the shadows and placed in the style using control Shift B, which allows me to make the whole shells in a character really fast. - Okay , this shell something. Now let's make the main alkaline because this is supposed to be a player with director again, I'm going to make an exception. Gonna outlined the entire character black other than making it the outline the same color than the asset. But that cover. I believe that this makes sense from a gameplay perspective. Since a player character means to be as visible as possible, especially in a cell phone game. And that's all it is. We'll probably look ugly with an outline off any other color. Now, in order to make this outline, I'm just gonna use the union method. But remember that a few groups there, So to be able to create the outline out off our union, I'm gonna have to go in there and find any group I may have. So let me save you the pain of watching me. Such for groups in the object style. Oh, for a long time. It ended up being way more groups than I thought they would be. So this justice keeps royalties Now that we have the union, just use the same process as before with a nice, big black outline and send it to the back and the seats for the believer character man loaded number. I hope you've learned something. Even if it wasn't they step by step to Dorian anyway. If you're interested in learning to make game characters, Algeria in the resources a few links to some tutorials to learn to create victor characters and also collect of the same. So if you're interested, make sure to check him out. 21. Background Part 1: Okay, we're ready to start building our mock up on the very first step is making the background. Now, in my opinion, backgrounds are some of the most interesting and fun things to draw. You seem vectors. I believe that the vector to said, really complements the illustration off certain types off backgrounds, mostly the type off background that you see in cartoons and video games. I would also like to remind you that I made a fool, then our plus cars on cartoon back on the sign. So if you want to learn more about making backgrounds with Xscape, you can take it out in my profile before something else. We need to talk about a couple of features and concepts that I'm really gonna be useful at the moment off, illustrating a background we're gonna make heavy use off layers. The inside a feature offing shape that unless you tow, organize shapes into groups so you can better handle large quantities. If you've used any traditional pixel based civilizations after before, leaders are basically the same. Each layer Is it only the world what on one layer cannot interact with what's on another layer for victor shapes? These basically means that each layer has its own stock order and objects in one layer Abu cannot go below on object from a layer below and the other way around. So let's set up the layer. Stop. Well, when I use for the rest of the project go to lay ever layers This will open their layer style Oh, by the fort inside creating lay of names layer one And this is the one that you're seeing right now. If you don't touch anything in the layer style Oh, all of Jensen you create will be created belonging toa this layer So in this moment, our guy rectangle that we made all the way back in this sort of listen belongs to this layer. You can delete this layer but when you a little later all objects belonging Toa the player will be the leader as well. So don't touch anything yet not escalate the layers that we need for the project. I went to have a nice blue sky in the back military well knew it's gonna be a pain to draw anything in front if you have a big shape behind that constantly. Gates selector. This is the perfect case to use a layer and luck it so you can't accident. That is select any object belonging to it. So let's create a layer toe. Hold this guy. Click on the blue Cycm. Thank you with the name like Sky or something like that. Of course I want to be able to create and the background off the game independent off the game objects. So I'm gonna need a layer on top off these Skyla, So I'm going to create a new layer called back. Kids were put all the different shapes that makes up the back around on top of the background. I'm gonna need to put the tiles and object that makes up their play well area like the terrain tiles and the pipe and maybe other small detail objects more on that later. So creating new layer on top because variable area I also only the layer to place all the instance Objects like the characters are the items which will go objects and one final layer for the u I. We're just gonna be on top of everything card simply you I finally that is this rectangle guy because the little a here with the minor second in Houston Sky as a guy to play so the objects in the labour area. But I believe that it's always useful to have a guy on top off everything to really be able to see without the problem. Where are the limits of the screen? Luckily, we can change the name and position off this default layer, so double click on renamed the Layer do Guy. Then with this layer selector, click on the up arrow to move it up to the top. We want this guy to deal with visible No, Mother. What? I'm moving the letter to the top. We'll make sure that all objects belong into layers. Willow will be below it. Okay. Before starting with illustration, I went to the V a quick tour off. Help toe handle the basics off layers. First, any new object is gonna be added to the currently selected layer. If you want to add a new object layer, make sure that is selective. Should I got selected the layer flavour area. So I'm gonna go and draw a few tangles in the document a quick way to see what objects are in what layer is to vote in the lake here. You think the objects out and too little on and off the disability with a little eye symbol right next to their layer name to temporarily high and show all the objects in that layer. And I can't happen this with all the other layers he s elected back layer and there are few objects. I noticed that usually all newly created objects, at least on top off this stack. But here because the layer back is below the layer playable area. Every lives that I create is below all the objects belonging to play well area And this one change even if I tried to move them up the stack with the move Bhutan The only way for these ellipses to appear on top off the rectangles. Yes, If we move the layer back to be on top off label area here I'm using the arrows in the layer style of to change the other off the layers. I don't really if what you want is for the ellipses to appear on top off the tankers without tension earlier or the we could just move their lips is to a layer above player idea to move all jacks to a different layer. We have to use the layer menu. If you go to layer, you see a ton off options to move selected objects with layers. However, to me, the fastest and easiest method toe objects toe a different layer is to put them and paste them. So in this case, I'm going to select all ellipses and hit control. X toe got them and then selectively you I, which asked agency, is on top off label area and here I could execute the base common with control be. But then I had lost the position where they originally were. Since when you do a simple based in except the evidence will be based to the position of the Carson instead, what you want to do is to hit control out, be to execute their based in place comments. We just seem left to the based, but instead is the members to your original location off the objects and place them in the The final Fortunati of the layer style that you're gonna use all the time is the local earlier, which makes all the objects from the nuclear completely and selective er so if I go to the player, will area layer and I click right here on the Bhutan, right next to the I who used to make it invisible. I can look the layer. You can see that it's locks because the icon of the look changes to a close look now No, Mother. What? I cannot select any object belonging to the play Will area layer against a like the ellipsis which belonged to the layer, but not the rectangles. As I say that, Leo, this is really useful to look shapes in the background, so they have not accidentally selector. Okay, Now you know everything you need to know to start drawing in the background, and that's what we're gonna do next. Listen. 22. Background Part 2: We got everything ready, so let's start making the background. What I want to do here is to make something kind of like the classic Mario background with the classic tell. Here's Mountains in a sunny day with clouds attention a bit, the style to fit more the victor to set. So let's start with this guy. This is a policy. Make sure you select the sky layer and they were snapping and pick the rectangle tool and a snap it to the guy. Do you want to disable? Snapping? We won't need it for now for the sky color. We're gonna give it a linear radiant to make it a bit more interesting than a plane single color. So you have the Canadian tool and rather radiant over the rectangle. If you can control what you drive, you're constrained the movement to the vertical axis, and you can make a perfectly straight radiant. Don't worry too much about the position off the stops for now. Well, just that in a minute when we have more off the composition for the color, just pick a light blue for the upper stop, and for the lower stop, pick a lighter version of the same color Just a bit lighter. Don't doubled with and we're them with this guy for now. Now it would be smart to lock the layer so we can work on top without fear off accidentally selecting this rectangle. The back layer will contain pretty much the rest off the background. I decided to use a single layer. Costis composition is really simple. There is no need to use more than one. The complexity will come when we had the rest of the assets. So listen, start by making the heels that will make the ground area. So with the back layer selector, let the mental and create these waves shapes like the ones you made when you do that The rain starting at about 1/3 down the composition. Stop the path outside and continue through and close it by the lower end. We're gonna intersected inside in a minute, but for now it's beneficial to give it lose. But all three of them one below the other again. Don't worry about the exact placement. We're gonna have that just the shapes according to the rest of the assets position. Now the same you deal with the wavy shapes off the gentile. Select the inner notes and change them. Tow this move. Type to apply the drowned this as far as cooler, starting with the one higher. Give it a light green and give the other say that cartoon off the same green as you go down . No, I sent to create the classic Mallya heels that will be the main throw back at the franchise . In the background. This one's are super easy to make. Just grab the rectangle tool and draw multiple rectangles with the ends round it off. Do these all over the composition and, of course, place them below the hills we created a minute ago. But he had decisis to imply the hills at different distances. Don't have too much of them after two or three big ones and then four or five medium size in a few really small ones. A few things regarding the position where you place these heels a probably that in them too close to each other, it's preferable for them. Toe overlap them being really close also, buddy the with but not do much and the same with the roundness off the top. Once you're done, with the shapes went in to give it some color. We're not gonna complicate herself with different colors. So we have just given them different shades off lead. But before starting, giving them the color. This a bit of theory. You need to know the business natural riel life according phenomena. God, atmospheric perspective. Which happens when the density of the air part occurs. They started the light and makes objects really far away. Look a bit more washed out with lighter colors. If we really want to make this back home look nice. We're gonna have to keep this in mind at the moment off giving color to the objects far away. So what the hell is closer to you and give them a fairly mid lightness green buddy in the shade, maybe moving a bit ph of the slider to get different greens. Now we have the hell stop it further away and give them different shades of the same color . But with the slider higher so the color celebrate later. The same with the smaller hills. And you should get this feeling that the smaller heels I really far away Another good touch is to create clothes to feel a bit more the empty space on top in answer to help with the sensation off deafness, we're just gonna use the union method. Just grab the Ellipse stool and drop your leaves us and joining them together with the union. If you want, you can cut the bottom part using a rectangle in a different separation. Remember that you can remove the AM necessary, knows to make some extra adjustments to the silhouette, dropped two or three of them and place them in different parts. I like to make a least one of Oliver Hell to give it entire composition with more depth. Now it will be a good moment to make some last minute adjustments to the position and shapes off the ground hills. I just have the no tone and move them around till you have the shape you like. But don't forget that later on we may need to adjust the position and shapes off some other things so they've been freed the rest of the assets. Maybe you can adjust the color severe so they look more money is I saw that would be a good moment to adjust ingredient off the sky and make it fit with the rest of the composition. So select the sky layer and I look it using a little to make the transition happen close to the bottom where the girl feels out. No, forget that the changing color has to be really Sato. And since you have the sky shape unlocked and you might as well make some intersections with the shape that leave the composition idea. But I did everything up when you have done, don't forget to go back to look this guy layer again and we have done for now. Next lesson, I went to other couple of quick details to some of the shapes in the background. 23. Background Part 3: in this lesson, I went to other few extra details to the background. Nothing too complex, just a few final duchess that hopefully will enrich the entire composition. The very first thing that bothers me is the fact that the bigger heels don't look detailed enough. I want to have a simple pattern to the ones that are closer to us. So let's start with this one. This one is gonna be super simple. We're just gonna make some more. Isn't the lines? Just grab the rectangle tool. I make a rectangle on top of the heel and then duplicated a few times up because this is simple enough, we want to be able to go in and change the bathroom anytime we want. Still, until the shapes and heat control G two of them and then click them inside the hill for the color just because their captain off the same color. Remember, if you want, at any moment, you can double click on the group on a star, modifying it without fear. Awfully. With this, a read of the heel. You can quickly and easily adjust this patterns anything you want and that's it. We don't need any more detail than these for this simple hill. Well, maybe a simple how shallow will look really nice. So the other pen tool and make the shape on the right side off course intersected in. And because the shadow goes through different color the objects, you only do it with a low opacity black collar. Well, let's see more patterns to the bigger hills. Let's continue with this one. And because this one is a bit bigger, I want to give it a slightly more complex pattern. Picked a rectangle tool and draw a rectangle about the size to feed the field. Goto object, object the bath and with the no stone select all the notes off the rectangle and hit the avenues was done about 4 to 6 times. No silly. The two vertical knows on each side. Under these for every other pair. Once you have them all, move the number. Me to get this pattern shape. Now, just repeat the same steps that you followed with the previous feel. Obligate them, rob them and Cleveland inside the hell. Give them a darker tone of the Hugo. And, of course, a quick show. I'm gonna repeat a couple more similar patterns for the closest heels. When you can make any type of pattern we want, I just be fair, super simple street patterns like in muddy or three. The general idea here is that making the here is closer to us. Have some type off extra details. We give the illusion that all the other ones for that away I still have some detail, but that can be seen because they are too far away. The girl hell seems a bit empty. Maybe we can do something about it. Well, a full pattern, like the ones in the hill, was probably be too much, but maybe we can make a quick rascal relational top. The process is similar to the one we just followed with the rectangle, but this time we'll have the student imposition it on top of the apex of the heel and in districted in again, give it a dark of tone off the same color. Now select all the notes with no stone and using the avenues Wilton have known two or three times finally move every other. No up towards the top. To create this soul life shape, I'll repeat the same process with all the other grandma heels. But again, you can add any other path. Um, you may want the only thing you should keep in mind is to avoid an indeed agents that makes the heel toe them's and distracting. Now, for the final de there, I feel like there's a huge space in the sky area that fits every tempting. I went to us something there. And for this, I'm gonna draw some sort off mountain, don't have the mental and draw a couple of big mountain shapes Where the reason this empty space you don't need to be too careful with them because these shapes are really gonna blend in with their escape. Like I say, they want the sort of the thing, not something that changes completely the composition for the color. We're gonna do something a bit more interesting. We're gonna give it the really subtle radiant to make it look like this mountain is really far away and barely visible. So other ingredient and at the moment of picking the colors because slightly that got down off the blue you picked for the sky, but only slightly Darko, it has to be barely visible for the other stop justly with the same white. I'm not just a stop so you can barely see the A person right off the mountains. And now we have two more shapes than improve the composition and gives a bigger sense of size in a really subtle way. Now we're competing with the background illustration. Next listen, we're gonna play. So the other assets were made and I start to be their mo cup. 24. 2d Platformer Mockup Part 1: Now it's time to actually assemble everything. So he there all the assets will be making really to be placed on the back ground to finish the mo cap. But before start placing them on the level, I want to refine and unify the style more by making all outlines off the same with and also very important, making all assets that are supposed to fit a grid square have the correct size, so they feed them tile perfectly. This is a necessity. If you want to export the available assets to a game enjoying otherwise, you're gonna have really nasty problems at the moment off building your maps. So the first thing I'm gonna do is to make sure all outlines have the same with. To be honest, the step isn't a strictly necessary. You can just I buy the with off the outlines and make sure they are more or less the same. Nobody is gonna notice, especially in a markup. But I believe that this is really important to make the Earth feel a bit more professional , especially if you're gonna end up exporting the assets to an actual game. I'm gonna use I say base the width of the Outland off the bushes in the rain tiles. So I'm gonna make sure to select the outline shape. I'm gonna check this trip with Make sure you select the right shape because if you remember , we had to transform one of the strokes to a bath so we could intersected inside this square time. And we can change the week off that shape because it's not a stroke. This is the main reason why I'm using the with off the outlines in. This s it. That's OK, cause I know one of the strokes. The bathroom can be changed. In my case, a stroke with off this outline is three pixels. So gonna remember this number. And you said a sister with off every outline off the other assets, including their blocks, the items and even the enemies. But not Mom, because this was a special case for me, the labour character and neither the u I elements cause we'll be adjusting the scale a bit later on the next lesson. Okay, now that all the assets have the same out playing with, I want to make sure that you will have the right size since change in the plan, size changed the over the size of the assets. Now they don't feed perfectly into the grid square. It's just a tiny bit, almost unnoticeable. But if you use in a daily and Jane, they won't tile perfectly. So I want the essence, at least the ones that are supposed to free date That's well will be the exact size, but scaling the asset to the size of the Green Square, who let's remain the struggle slightly bigger again, almost unnoticeable. But for the sake of being pseudo, we're going to keep this truck size at the exact size it should be. Luckily, this is a really nice option in the object tool to scale objects well maintain in this trope size, which is exactly what you want. So with the objectors selector, make sure this little box here is ticked off. This will make that when you scale an object, all the stros will maintain their original size. The object is gonna be bigger, but the Strom's they're going to stay the same most of the time. You don't want this option enables. You just want to make the entire object, including the strokes bigger or smaller. But for this case, this option is exactly what we need. So you know what to do. Scale the object toe feet Exactly. To agree, Square. You're gonna have to enable the snapping options toe snap a group. And now all the assets have the exact same outlined with and I saw fit perfectly into the square. Okay, then, with all the assets ready, we can begin. I want a great into the scene that showcases everything that we made, but at the same time, Looks like it could possibly be a game with beets and multiple platforms and enemies. So let's start making the main workable the rain. You have the mental gentile. I moved to the lower Cornell, making sure that it snaps toe the corner off the grease. Well, remember what I showed you earlier about how the position from where you grab, influences their point from where it's gonna snap. So she's problems snapping to the corner off the group so mean and grabbed the group closer to the point from where you want to snap once it's in place, complicated and create a full floor. I want they beat here a two time Pete for the Keita to jump over. So they let these two times and grab the end in Dallas, we made and put one on each end. Wait, so now let's make it big. Round the platform off two by two days. Hey, I'm just gonna copy the terrain tires and expanded to cover two times rather than one and the final touch at the floating platform close to the other one. Okay, let's continue with the items and enemies. For now, all assets are in the object layer. But they didn't change that because they are all in the similar here is gonna be easy to move them and put them in the right to stack position. You see what I mean? The next lesson. I'm gonna have the looks and place them in this classic pattern that if you play the very first money game, it will be more than familia. This way we have no them back at our inspirations, not only in the efforts themselves bless O in the level of science, A lesser place, a few plays here and there. And a few enemies. And again if you played in if the matter games the plant and the pipes should be really familiar. A couple of notes. First, don't be afraid. Off movie the assets out of the green if you don't play sometime, You said that you just cause it's more comfortable to quickly a step to the right height. But they're gonna change that. Then with a lier. Mother engines do not require that. Alas, its feet agreed. Usin it, I said, it is more off a convenience at the moment of generating the content rather than a necessity. So if you feel that a time would work better off clear, don't be afraid to change it. And we have done with the level. Of course, you're free to create your own the sign. And if you're feeling extra adventurous, you may want to directly export the assets to a dial or game engine and make your own livers. But now I want to refine a couple of things and really give it the final duchess. So that's what we're gonna do in the next listen 25. 2d Platformer Mockup Part 2: another level is technically then, but I want to do a couple of things to make it feel even more complete. So what are we doing is to have just a few things in the background, fix the position off a couple of assets and more important, are some extra detail that are really gonna be definition touches first. I'm not fully satisfied with the position and colors off Sultan objects in the background. Now that we have everything put together, I feel the reckoning prove a few things in the background so fit better with the assets in front. The very first thing that bothers me is this lower Hill. I feel like the car mature should emphasize every dip it. So not just in the Corbijn. So it goes through the beat in God's attention to the fact that there is a bit there. I must gonna make the color a bit less contrasting. I dislike the shape off the second fuel as well. This waves to be different from the ones about. So I'm just in the nose because they're just a position off the top of the heel. I'm gonna have to redraw the detail on top. So he didn't taking the opportunity to redraw our tops Since I wasn't begin on any off them . This time I use more mills toe create Morley them after analysts in the back room for away . I think this hell in the back is close. Enoughto warrant the detail of the shallow and now we're making some small changes to the color and the shapes off some objects. This adjustments are all done by depending on what I see that I don't like. Sometimes you're okay with the way something looks. I left the world. You start to notice some small things that bothers you. And this is what I'm fixing here now to finish the user interface, though in this case, a weather main will be the hub. Since it's not a complete user interface, we were really shocked the A team seal, so we only need to place them there in some interesting way. First, that therefore hurt among them up. Gonna have to scale them a bit so they won't take. That's my space. Because the EU is made of smaller objects and you don't want to stroke Toby Gigantic. It's better than you go and enable back the strokes. Canon options. That's a problem for you. Right now. All items in the U I are visible because they are against a empty sky. But you don't know what's gonna be in the back later on in the game. So to solve this problem, we're gonna make some quick background shape with a rectangle talking of the rectangle tool and make a rectangle that covers the entire four hearts. I like to round off the corners with the building modifier. If you want to center it, you can use the align and distribute Taylor. Just make sure all foreheads I grouped into a single of Then you select both shapes and hit the Bhutan center centrally and center birth legally for the color. I'm going for a black color with Elsa, you can give it. Then the other guy you want, like transparent white or full white. Whatever you think, it will look good. And I believe that there is something missing to this cards. So the next step is something that you may not like. So it's after you if you want to do it or not. But I really that's gonna look great. Enter the model a group Select on Lee the shapes off the shelf. Copy the shapes, exit the group and place them outside of the group, then group the hill and moving right next to the hubs You want to make the hair way is smaller when you're happy with the results group everything. Now I feel that it feels a bit more like a really hard counter that you will see in a game with a head indicated. And that's that the hearts of the health off the flavor character. Next, let's make the classical encounter. This one is easy. Just grab going on. Duplicated now could have the rectangles from the huts. You have to enter the group copied, then make sure you do the group and placed it in the document. You want to copy this shape cause we want the exact same size and transparency, so it's faster to copy the object and then baste it outside of the group and making it yourself from the ground up. Put the going inside. You're gonna have to scale it down a bit first. Sorry it feeds. Now let's give it some numbers with the text own quite a number from 0 to 100. Don't mind the front by the 40 should be area, and it really is just fine here. This text needs to be more receiver changed to go Dwight and holding control toe scale uniformly make the entire number bigger. Now, with the number shape selected, go to the text tool and said the text too heavy in the drop down makes toe the phone type. When you're done, used the alignment. Distribute tow center they're going and text into the rectangle. Finally, you may want to group everything together and center this group, particularly with the hearts group, so they are nice and aligned. And for the final you Dale the government power up. Just have the rectangle tool and draw a benefit square with around the edges on the same cool. It's inspiring to see that the other you I elements now simply put the flower Aiken inside and used a line of this tribute to make sure the flower is center vertically and horizontally with the rectangle. I don't remember that you can hold control and shift where you select toe scale from the center. Menting in the proportions, toe better at just the flower size while staying in the exact center. Give the subject a stroke, make it a darker gray and make it fairly thick. So it's clearly visible from far away. When you're done, group everything and you see a line on this issue with a low to put this group in the exactly sentence center or the sky Human is your neighbor the sky layer to select the sky rectangle kid. I'm just playing around with the position on placement off the elements and after a while I decided that it doesn't like the position of the hill mambo, so I made it bigger. And I think this way looks way better to end this refining. Listen, I want to have a couple of new things to the composition. Help feel the empty space. I make the level more lively. So I'm just gonna draw a couple more assets if you're asking yourself when we didn't make these assets, Elio Well, the rest on small elite is that that's better left for when you have the whole picture. And now that the composition is nearly finished, I can see that we could use a couple more smaller details Still, we are not making a ton of stuff here. Just a couple of facets repeated through toe dress up the whole day with a bit more. The first thing I want to do is a simple bush toe. Have something else on the foreground. You probably can guess how we're gonna make this. We're use in their union technique. Just have a few leap says that. Make this a read of the Bush, then joined them with a union. Could the bottom with a difference, but it the unnecessary knows and give the silhouette a bit more life by pulling and pushing the carbs for this bush in particular, I think that a night shuttle detail on the front we're doing school so they have the mental and make a few shapes in front. I'll just emission need. I don't like them in every day that they don't have the same dream. Create the help line. This time it will be a good idea to use the outline creation method we've been using. I'll make the elder in separate and behind the main object. Remember that the stroke with off the outline is three big cells and that's it. in this case, I just place a single bush behind the pipe. I can already feel the foreground. I with more field. The next thing I want to have is even simpler. I went toe just the simple grass patch to put in some places just have the mental and dry, simple grass shape. In this case, I'm gonna do something that I like to do when creating these types of shapes and that is creating the lines straight and then applying the curvature with the notable. Give it a good in Gola and for the airplane. But it's no need for his separate outlined here. This is gonna be a super simple asset. So we gain nothing by complicated ourselves with a morty shaped object. So just keep with the stroke off the same color. But Valka, I remember that because this time the stroke is in front. You'll need to make this truck wait off half off the three big cells. Remember that you can also play with the input in the joint type, get the governments to show through when you're done, just duplicated and put it all over the place. We send the pipe or in front off other platforms. You can take them on a scale them a bit, flipped horizontally or even duplicate them, and put more than one together to make them look like it's a completely different batch of less. And it's finally done the complete moke up off it through the platform with details and everything. Congratulations on finish it with what you know now. It shouldn't be too hard to a playoff this to make in the assets off an excerpt from a game . Time based or not, but we're not done quite yet. Now that we've finished the mock up, I went to a level it a bit more on the next steps and how to apply this knowledge to make in an actual game and what to do next. So that's what we'll be doing next lesson 26. Basics of Exporting: okay, we have done with the mock up. Hopefully, now you have all the knowledge you need to go and make the to the blood formal you always wanted to make and why. This isn't a course on game development before the end. I want to at least give you a few pointers about how to convert thesis artistic knowledge into a real life game. Once you have all the assets, may you want of sport to those assets to a game engine. Since most enjoys won't work with Victor files, and even if they do, it's never a good idea to make a game entirely using vectors. If speed is ikenson. So I want to show you how to export those assets the right way, cause it can be a bit tricky. The way inside works on. The first thing you should know is that thinks I always export images to a PNG file format . There's no option to use any other one. The PNG file formats. It's an open known patent, the compression format designed toe and go the pixel image without losing that this type of compression formats article lossless. Well, if you want to export an image from a better software. The PNG format is as good as it gets. It's really effective at the moment, off handling size. It allows for transparency. Since it's lost less, That pixel image will always be as faithful as possible and very important. It's really popular, so in the engine will probably imported right away without the need for you to combat your image to any other format. The only thing that may need a bit off explanation is the way except Candlestick transparency in a PNG exporter. Fire. If you open the document. Tyler, by going to fight document, you see that you have a color selection option that lets you change the gold off the background off the campus by the fall, deception is said toe the standard light, but here you can change it to any color you can pick on the widget. This option is usually left for artist who prefer to work on a darker tone campus so they can work more comfortably and evaluate the colors weather. Now, if you pay attention just like with the other color selection with shit, you have the option to apply some Alfa value by default. This Slater is set of the way down. But if you move it to the left or right, nothing appears to happen. Well, this Alfa value only comes to play when you export something. Basically, if you export any image that shows the campus in some way, the Alpha Value selector affects how much off the color off the canvas is showing through. If you live deception like itwas by default all the way down, any idea of the campus that's visible on the export of image will be fully transparent. And if you move the Alfa or the way to the right, any idea of the campus misery will be the color off the campus. Now keep in mind that in 99% of the cases, you always want to keep this lighter all the way down. Since most of the time you want your images to have transparency, there can be very in neutral cases where you want to have a background color toe an asset. But in that case, it's always best to put a quickly angular shape on the back, and that way it's quicker and you have way more versatility and changing the color off the entire campus. Still, there's nothing wrong with changing the color of the canvas to work more comfortably, but at the moment off exporting. Just leave the things as they are with the ultras later on the way down the excellent sporting processing except it's actually pretty simple. If you go to file export PNG dinners, you'll open their dialogue that lets you export images. Now all these inputs and options may look a bit confusing, but you won't be touching any of these, so you don't have to worry. First of the dope, you have these four options. This basically controls what any of the campus is grab that we exported. I strongly recommend you toe. Always make sure the selection option is enabled and completely forget about the other three. It's basically the only option that sexually useful for us. When selection is selective, you'll export their rectangular area they find by the selected objects. Basically, it will export. What you have selected critical thing is that because we're working with Victor's here, we are not limited to export to the resolution defined by the size of the objects in the canvas. We can set any export insights we want, we're gonna support they really tiny object in the campus to a gigantic image for K. Whatever resolution we want, they can look at the image size options this controls the size of the image that's gonna be exported on important detail is that the width and height inputs? I looked to keep their ratio off the objects. So if I change one of them, the other will also change to the right value to maintain the ratio. There is no way to change this here because I have this election option toe on when I select this tiny circle day with a height of the image size, input will change to the actual size of the circle in the gun bus, which in this case is 100 by 100 pixels. Bet by changing the value off any of the inputs, you can change the myself of a solution. It's not dying in any way to the resolution off the object in the document. I can make the image output 10 times larger by setting it do 1000 by 1000 or 500 times larger by setting them toe 50,000 by 50,000 And the amazing thing is that because vectors are resolution independent, the circle in the L put image will be perfectly clean in the final image, no matter the size. The other important option is the final game here. You simply said the location where you want to export very important. This option won't export anything. Deception will only let you said the location and name of the image to actually export the image. You have to click on the export button, and that's what you need to know about exporting images. In the next lesson, I'll show you how to dismantle our final project and export each of the individual assets we made, so they really do create and are some level. 27. Exporting Our Assets: Okay, now that you know a bit more about exporting stuff inning save, let's dismantle our project and export all of our assets by separate so they can be important by a game and Jane, and be used to build our game. Now, I quick note, before the stuff in discourse, my main objective was to show you their techniques and methods toe create the out for it to the blood. Former. Obviously, there is no need for you to build a mock up before exporting the assets to your game. But because my main concern was making the mo cap, some of the assets may be a bit awkward or not completely optimized for disability. Have I started this project with the sole intention off exporting the assets to a game? I would have given a bit more thought to the sign off the background objects. Great. So he didn't have the project file open. And what I'm gonna do is to go one by one and export all of the assets. This will include the individual objects in the background. I want to be able to build my own background in the game, not just toe steak, an image of a static background and be done. I mean, you can do that if you want, but it's always nice to have a scrolling background. So to do that, I'm gonna have to rip apart completely the background on the rest of the mo cap and find and select the group's off objects that are gonna be a single asset in the game. For the most part, each object is gonna be exported as a single image, but in some cases I might want to group certain objects according to the way they may be used in a level. For example, I believe that these three heels on the details in their costs should be a single Essent in a remote up there, three different objects. But in the game, I want to treat them as a single asset. The same with some of the big heels. Which one? A group or the two mountains in the back, which again, and when I use a single acid. Also, don't forget that in the engine. When you build your level, you're gonna be able to flip, rotate and scale the different assets so you can get quite a mileage from a relatively small set off objects. Okay, so let's a step first. Of course, we're gonna need to unlock or lock layers, so open the layer style of make sure or layers are unlocked. In this case, I unlocked the sky layer. Now, just to make the things easier for us, we have a copy them here for the different assets that I'm not passed off the background so we can delete the ones in the mock up. So in a second, when we dismantle it looking for the little objects, he's gonna be easier and faster. There is one thing that we need to do before opening the export halo. These three heels are really important to the background level. When we made them, we didn't have in mind the vehicle Houston, for building levels in an engine. So now we need to make some weak adjustments to their shapes. Win it the tile or centrally, so we can be longer levels. Luckily, this is super easy. We're gonna follow the same procedure with with the rain tiles, but first we need to make sure they will feed the same length. And apparently they don't, as you probably see after I removed a guy rectangle. This is this is just intersect the three shapes, one by one with the sky shape. This way you make sure they will feed the right with now to make them tile or subtly, and they will step in, then duplicate these three shapes. I moved into the site so they can snap with the originals. Then you know what little at just the original Sorry transition. Smoothly with this new copy. If you need a couple of notes or change the guard of us, my chest, you need once the three heels style nicely the lead this duplicate. You have all the shapes that makes up the three heels, including the gospel leaders, and group them into a single object. And that is for the adjustments. Everything that's we can leave it like it is. So now let's export the efforts go to file export PNG image. The first thing you should do here is to make sure selection is toe on. Then let's at the location where other images we're gonna go in the file name input, make sure to give it they really for them. Otherwise it will fail. You can use the button, export us to set the location. But in my case, I already have the location said which is a further I created just to export everything here. We could give it any name we want and it will probably be a good idea to name the assets accordingly. But I'm just gonna escape this step and export oil assets with the name they have later on . I worry about the name in the PNG files in windows. Also, cuticle enter a different number in the image size inputs to get a resolution bigger than the one that appears in the gun bus. But since we are already working at the resolution we wanted, there's no need to do that. Their default resolution is just fine in this case. So now all we have to do is just leak on an asset and then click on the export Bootham. You briefly see these Progress bar and then it will be done. You have the being defined. Before that, you specify it. You should go one by one toward the assets and export them by separate. Very important. Make sure the Euler exported against the white off the canvas this way, all the assets export with the right transparency. This is extremely important because, except is basically grabbing the area of the campus delineated by the selected object. So if there is something behind the object that's showing through, he's gonna be exported as well. So always move the assets to an empty area on the campus before exporting. Okay, now the background is completely ripped about. All individual objects are now individual image fires ready to be used in a game or a tire engine. So what we're seeing now is the amazing free open source program. Time is one of the best game engine agnostic, time up editors, giving you a ton of features to handle, dies and toe export. Those times toe pretty much most of the big game engines, although it's super simple to use fully feature, and I strongly recommend you to use it if you're left and satisfied with the title handling tools in your engine. Anyway, I wanted to sketch a quick level just to show you how are assets go look in a more really life situation, of course, level the sign in game programming its way out off the scope of these course, but I thought you may be interested in checking out how our art could look in an actual level. Unless you can see this doesn't look too different than our mock up. And just so you know, making this whole never took me no more than 50 minutes. My goal with this lesson was showing you that going from a finished illustration the way ready to play level. It's really super easy with today's tools. So what we'll do next, listen, is to take a quick look at some of the tools that will further simplify the work off building A to the blood formal. 28. Awesome Tools to Make Your 2d Platformer: now that you know how to get the individual assets out of your stations, I want to talk very quickly about the different options. You have to transform those assets into an actual game. Now, if you're interested in game development, chances are that you're probably familiar with some off these tools. But still, if you find something that you didn't knew about that could help you make your to the platformer, then it's worth to go through all of them. First, I want to talk about the tool. We just saw less. Listen, thank you. Like I said back then, Tired. It's a free, open source. Very powerful time up editor. It's not a game engine. You cannot problem logic into your time maps, though you can admit that so you're enjoying can do things with it. But what it does do is to cover turn off features for creating tile maps that you're gay men's and may not have. And since the exporting format, easy in XML, it is not hard to import tile files do any game engine. So if you're left unsatisfied with the time, I really thought off your game and Jane considered chicken out tiled. It's free, powerful and easy to use, not a sec about the game. Enjoy. Instead, you can use again. I am pretty sure you're familiar with the most commonly used gay men joins for in the developers unity go dot construct gamemaker. But maybe you weren't aware that with today's technology, you can create a to the platformer blazing fast and super easy without even having to know how to program Unity is probably the most used in the angina. In a large reason is because of the huge amount off you surgery, the blue jeans and assets that you conduce with the engine unit because all of them together as assets and you can purchase them in the unity as it store, usually for family cheap ranging from 1 to $80. There are thousands old facets, and if you're like me, you can get lost in the acid store for hours, watching the amazing things the users have made and dreaming about what you could do with them. However, to me, the most interesting ones are the tools assets. This assets are extensions off the mind functionality of the engine. Enough thing gives you a framework allowing you to make the games you want without the need to program or heavily simplifying the task and one of the most relevant assets for us, it's the one card, the corgi engine, this pain asset 60 the last right down the store. But discounts aren't unusual. It's basically a gamemaker for to the platform games it already has sold the functionality you may want pre programmed. So it's just a mother of the sign in the game played. You want the features look amazing. The engine allows you to create release, move freely in greater controllers, a eyes inventory, parallax in a lot of other things, but most important, all without having to program a single line of gold. It looks really impressive, and it has a fantastic rating. So you said seem to be really happy with it. If I was interested in making a to the platformer game, I will certainly start by getting the SAS it a nice alternatives in tow. This as that card super platform to the it cost a bit cheaper $55 and it appears to offer more or less the same functionality as the Korean Jane. It also has great reviews and answer looks really good and easy to use. There are also to the platforms thin plates. This require a bit off modern to get going, and you're probably gonna have to program something there mentally. Bet they're considerably cheaper pension from Frito then or so dollars. But maybe you prefer another, more simple engine. The Construct three and Jane. It's one of the most common engines used for casual PC and mobile phone development. It doesn't require programming, and it's really popular. And just like unity, it also has a pretty big blue in store where users can sell their work. By far the most interesting looking templates seem to be the one card super platformer to the again. It has a lot off built in functionality, so you don't have to program anything. It looks really great, and it has fantastic reviews, So if you use construct usual, definitely check it out. There is also a competitive God epic platformer that also has school reviews and also looks pretty good. So you have by the Lord off options this final game engine. I want to show you it's not a general purpose engine with begins that simplifies your work . Instead, it's created exclusively to be a super easy to use to the platformer game maker. It's called let Ago, and it's tasty map that looks pretty amazing. It seems to offer the same functionality than the other engines. I want you to make a full platformer without the need to program, but I couldn't find information on whether you can export those assets to sell or not. In fact, the program seems to be more like a free for Mario maker rather than a fully feature of game engine. So investigate for that. If you want to use it every game, Engine will also have a template or Doria to make it through the blood former game I can possibly in numerator them all. So I want. But what it wanted to do with this lesson. What's to show you the new tools and options you have to make a to the platform ill in a mother of minutes that place and feels fantastic without the need to program anything? I remember 15 years ago when I got interested in game development tools like this, we're only a dream. You pretty much were required to use the really difficult. Allow programming language c++. The three engines have very little documentation. Endgame in Jane's with graphical editors were a minority, and the ones that have it usually ghost hundreds of dollars. The government's off your opinion on unity or constructor any off. The other easy two years came development tools. There is no doubt that it is. Thank to the lower in off the entry Well, that those tools provided that today we have to the platform A engines, but let us make games in minutes without programming. 29. Conclusion: congratulations on finishing the girls. Hopefully now you feel confident enough to apply everything you've learned to make your own to the blood formal. Now I want to give you a few deeps on what I think should be your next steps. What I always recommend is that you apply what you've learned not back late in your dream game right now, but they're getting even more familiar with the tools, techniques and out off these types off gains on. The best way to do it is by copying the out off your favorite to the black performers off course making sure that they have your copying can be replicated with vector graphics. It will not be smart to copy the graphics off a blood former game made with three the assets. When I say that you should copy other out, I don't mean it as a way to steal from other. At this, I mean it as a way to learn toe the key to improving. It's an artist is getting as familiar with their if you want to make as possible. So if you want to make a spooky to the bad formal, find spooky to the game art another registrations and try to replicate what you see. As best. You can copy everything that you like more than one civilian. And after you're done, only then get to create the out for your own game. If you want to expand the video horizons, which is a with school, and I still continue lemon victim out with me, I have a few other courses on the Mount correct of the sign and background, the same all by using the same product. We've been juicing insane, so it will be a nicest moved way to move forwards. You can check them out in my profile. Well, that's it for this course. I hope you have this much finance. I did, and I said units one by.