Create 2D video game art with Inkscape!

1. Introduction: Hi. I missed once a pen demographic designer, and I'm here to teach you how to create your own game assets. If you have a good game idea and you just simply cannot make it because you cannot draw or cannot find, the resource is exactly you need online. Then this is your reporting it to learn it and create your own assets for your to the games . We will create more than 30 elements during the lessons, and I will give you all 30 including with the lesson so you can create and reuse the elements I'm already giving to you and start making your own. We will use the program called Escape. It's a free graphic design program and we will create first very basic things like stars and hearts. And then you want toe graphical user interface for our game because that's very important, you know, do have some bottles and stuff. Then you move and create some platforms and modify them and feed them to different environment. Then, of course, it will create a character together, and I will show you how to also give different stances to the character and, very importantly, create your spreadsheet SoHo to make basic animations using only escape and using them in your game for design program. And then we will create some more animations just to get high angle fit, a small character and the top time shooter character. And did I mention you get all of these video lessons? Then just to be more successful and have some practice about creating mutations will create some monster trucks and learn how to reuse our game assets and create easily more and more crunk contents toe our players and after, After all, in the end, we do some very heavy lifting and create two different environment for our platform game, having all the assists needy. So after the courses, I promise you, you will be able to create your own game elements reading escape. But also you can start and modify straight on with the assets I give you with the course. 2. Inkscape user interface: So what? You see, the first lessons are about escape in general, because we cannot draw our game art. We don't knowing the basic properties off escape or what escape is capable. So let's just get a bit familiar. Everything escape. And then in the next sessions, we actually start to drop something. But first get escaped from instating scapegoat or and when you install it and first open it , this is what you will see by default. These big white spaces called the canvas. Imagine it. It's like a big white table in front of you within a four page in the middle. These pages here only for printing reference. I can draw all around it so you can be really like a kid growing everywhere. Um, you can draw really everywhere, and you can create shapes and colors and everything you want. We will get to later, but first, yes, you see the toolbar. At the top part is the common bar and the Manu Bar, with several icons for saving, opening, adding new project and other items I will talk about later. This is us, like invert or any other programs, actually. So here on the top you can get the basic things. This is where you can save your project on. And here are a lot off little windows, which again talk about later is just so many drop down menus. Escape can be very deep and a bit confusing sometimes, but have no fear because we're gonna go through everything. So apart from these two lines, the menu and the common bar here under it is the control bar for the tools. Because these on the left is the tool box. This is where the magic happens. This is my favorite part of escape because we always gonna click around it. And it, for example, I'm creaking on the rectum Goto to create squares and rectum will mind that this is changing if I'm creating, If I'm clicking on the selection toe, this is changing again. So this line is the common night for the actual tools. It's changing over the time when I'm using the two. Here is where I can set my tool on, uh, here on the bottom. You can see a rainbow of colors and this is the color palette. Obviously we have quite a lot, and of course you can mix and match and make your own color. I will show it in a whole lesson. It will be only coloring, and we have a lot of fun in that Here in the right fund. These are about snapping and guides. I will talk about that later. It's very it's a very good part that you can snap your drawings. It will be particulary interesting for us when we are in tow, animating our game characters. So this is the interface of being escape, and in the next lesson, reveal drove our first object. 3. My first object: So what? I promise. Now we're gonna drove something. I know you're the director on the tool batter. Everyone is doing that in. The first thing you do is just to go around so you don't know more about it if you just look for a second. So what I'm doing here is I'm clicking on direct ago or square to and a job correctable. Then you're drawing a rectangle. You have these two boxes on the side. After drawing direct and go, you can reshape it. You can resize it, you see, And you think this little circle you can make the edges round. This is very good. If you want to draw an iPhone or if you want to have buttons very gonna get later on. So these is these roll around the edges. You remember I was talking about this. This is the changing. This part bar is changing according to the tool I'm actually using also mourning the cars that is changing to a square. So you always know which tool you are. So this is the width and the height off the square and the surrounding off the edge off the square on the corner of the square. If you have rounded edges, you can type your zero or click this one, and it's gonna be sharp again. Um, we described toe. You can use do squares like this. What's Ah? What I was talking about is that you can digitize it and do whatever we did. And this is the point that I have to talk about. How you escape is working, because when I'm creating shaped like this inning escape, you see it's one object. That's why it has these corners and everything settings. Because inning scrape, you are not using brushes in the way like use in bit my pedicure programs like Photoshopped or Korea of proto pain toe or even paint. You are not setting down a brush off pictures. You are changing object, which is calculated on the fly. So the program is calculating the size and the color and everything on object, setting it up in a four months, which is called SVG SVG. Simple vector graphics. It's a big thing now, actually, because of scalability what we were talking about in the introduction. So it's like it's very important knowing get into the game design and the Web design because s veggies are there just also so vector graphics are scalable and working on objects. So what we have now, it means that I create a square and I want to change it and want to move it, and I can. I don't have to erase it and redraw it or put it in the special groups or layers or whatever to more defined it. Like I would do it in four to shop for other programs. I just go to the selections toe. You see, it's a left and transform object. This little labels are very helpful actually in October, so I go to the selection toe. The little hand is appearing, and it means I can move my books around. Mind a little arrows. I can Thrones for my square. And if I click on it once, just once, see the other without changing. And then I can rotate where I can squeeze and distort gave and I'm growing. My right hand is always on the most my left hand. He's usually on the keyboard. It's also because I'm a gamer, and it's also because this makes working with escape just so much faster. So no I want to get my get back to my square and I pushed control Z obviously for your developer, you know this story. Guys have to go through the basics, so you just push control Z and you get this back. My favorite favorite about anything escape is controlled, by the way, because when you use control, you are in control. You can scale your on this clear by keeping his proportion to see is proportional. I'm just holding control and it's killing like this. You can rotate by giving angles, talk, talk, talk, talk. You see it's free rotation or by given angles. Why it is good for me because I can make by control perfect square rotate. And it's a time when you see it's perfectly on the edge. 45 degrees thes type off, perfect moving escape is very important. So that's for the animation. Definitely. So. That's why the control is an important key, uh, from working, and I let you go around to pay with square toe and the transform toe is mind this little You see this little plus here there's the center of rotation. If I move it aside, some of us that will be the center of rotation, even off course Outside. And the concert is working kid off course. So this was the square tool on the selection tool. One more and we can go. Another object data is a circle toe. This is the three dimensional books or cute toe. I'm not gonna go into that. You will see why we just keep the basic ones and build our images from that. I would explain that later. So no, just clear tool and circle toe. Let's make a circle. I see the same goes for it. Here are some things I can do. I can resize it. How I did with the square. I can grab this little circle if I'm outside the circle. You see, it's making a nice Pechman or pizza because it's, ah how it is cutting the circle so I can make a semi circle by holding control. But if it's semi circle or I can cut it toe a perfect degree angle so I can have any shape I want from a circle so I can have this corner shape, for example. And if I don't want it what I want to switch from Mark to segment. I just like a disk where I could get back and it's a full circle again. I'm telling this because a lot of times it's happening. You drove something like this, You forget it. Next time you want the circle, it's ending up like this and you're like, Oh my God, what's happening? Nothing happening is just The tools are remembering usually the last settings they had. So just quick on this get the full circle and move on. 4. Dealing with multiple objects: now it was working multiple objects. It's a very important part of escape because when you are drawing us, I said you are not using a brush and there is that brush or, you know, drove with a pencil. You're not even drawing your sculpting. Imagine that. It's like pieces of paper. Cut out the shape and put them, Stack them on each other and be with your image from that. So more off the drawing. We are actually building our ranging objects, which are easy to modify after that does the most. That's the most powerful finger mounting escape How easy it is to modify. You will see the eso think about it. Every time you drove something escape it gonna have multiple objects. So no, no, no. I have to show you how to work with them when I'm creating a circle. And, uh, I'm creating the square. You see, it's ah, I can select one of them. If I'm holding shift, I can select two of them. You see how the arrows are expanding here? If the two of them is selected, I can work with the two. As long as they're selected, I convert with the to and move them, scare them and everything I want until they're selected together. If I'm sure if she creaking on one off them again, it wouldn't be part of the selection anymore. How else I can select Objectify Joe some more little things with the selection tool? I can shift click, Asai said, Or I can drew selection square like when you are. Yeah, selecting your icons or in a folder is this easy? What what is in the select? Sure square will be selected. What is only touched by the square Want? So mind the big square on the top. It's not selected only if it's included. Totally same goes for the little one. Now all of them selected. I can scare them together. I can squeeze them. I can do whatever. No, I have several objects. Each of them is the same color as I said, because the tool was remembering the rascal color I used. And I will show you how to cover an object very easily. In the next last time, we will go all about the colors, so this is just the very basics. If I click on an object and like we can a color I want to assign to. It is this is quick on the object. Click on the color click on the object color so it's like this much. Okay, it's that easy. It will be very convenient and the wheat more complicated as well. In the next lesson, I will explain it. So us. You see now that tight If I if it's visible a bit more, if I move the objects on each other, they had actually stacked on each other, so I cannot see the circle on the bottom. But what if What if I want this circle on the top? No problem. These icons, when you had on the selection toe, these icons are visible. It's Ah, the selected item or items actually can be on the top or on the bottom of the stick or going up and down by one. So if I want this one up by one talk Doc, Doc and it's up or down, you see how it's stepping step by step. Uh, if I I want to do that faster, I use the page up and page down Page ob page down. You see Step one and up and down and home, and then is for stepping to the jumping to the front or to the back so it can go with each of them. One more thing about multiple objects or objects in General Inning escape is, I said, we're not using the razor. There is an eraser tool here. I guys, I have you would be honest. I rarely use it. I don't use it by because it's so easy to the delete an object and escape you quickly. You hit, delete. Done. You click on it and you hit Delete. Also, we drive, click on delete or just the ability on your keyboard, that that's easy. And if there is an object, I want to off it, and I like the shape and everything. The color. Everything is fine. Then just control C Control V. Hello. I have to object. You see if I want to make these different colors than shift Select them. Which white? Oh my God, different colors. If I want to make a new object out of this one, I can instead of copy paste, which is very nice, I can complicate it. It's the key for it is control D like double so I pushed control. De seemingly nothing happens. Just maybe a flesh, because it's replicating the object, the same object on the top off itself. You see, I have another white circle on the top and, uh, I can color the new one and to shape it by holding shift and control together. You are the sizing by the center of the object. But I can put it here. You see that I'm going to you and application this small. So this simple The simple, stupid face is just a good example what you can do with very simple objects. You see, I have the circle for the eyes, the circle for the mouth. I need this big yellow part to cover up half of the mouth, or I can do what I did. Also, he can scream. It's very nice or I can do what I did here. Make house circle. If I make him read, I think it's already looks a bit like super meat Boy. If you don't know that game, check it out. It's very fun, so it's very easy to draw a character, and this is so It's one click to re calorie to reshape it. And, uh, with this very simple objects. Now it's 123456 objects activated the tiny little character for myself. Now, you know, one toe coloring. It has a lot toe escape. A lot off according to colors, Transparency, Grady and everything. We were going to that in the next one, and then we re moving to draw stuff like this. 5. Basic color usage: so we know now how to create simple objects, how to play around with them. But what we didn't talk about yet is colors in there, and I want to tell as much as I can in this lesson about so any escape. As you might ask, you already know there are objects and we just click on the color on the polit down here, and we assign a color to that object. And, as you see in this object, I just drew Every object in escape has two car, two colors assigned. It's in the bottom left corner. You can see them feel and stroke. Feel is obviously what is inside the object. So it's a big flat color, and the stroke is an outline often object. And as you see, the stroke is also colorable, so it can be much more than just being a bean black hair line. It can do so much more, and the ethic colored line can help. Actually, your game character toe be separated from the background. Anyways, how does how toe edit the feeling Stroke colors. You can double click down here and here. The feelings throw queen the Opens. Usually I've just using shift control F because it's so convenient. And then I have this window. You, um as you see, it has three different tops. I will go over them. Short on. Uh, then you open it first. Its adjustable. Amazing. And you open it first. You see something like this ad, you be eight. And that's red, green, blue. You know, coloring. Ah, so usually have and the A is for awful, and it's ah, transparent. So I'm now editing the field color and I'm pulling off, up and down. And this makes only the fear color transparent. If I go to the stroke, paint that the stroke color offer is only working here for the stroke color. I'm showing you this because no, we jump on the bottom and here's opacity and I want you to know what's the different between off on capacity. You see, alpha is the off opacity off that color feel or stroke, must you see from full color to zero plus opacity is person teach for the whole object. So if I play around with capacity, I modified transparency off the whole object. So stroke and feel like, uh, when I opened my feeling stroke window. You saw that it was different than this because it has different color. Mounted has RGB to see em like a other stuff and what I use what I like to use for my drawing is the wheel. I like it. It's so simple, just says. Well, it's basically a color real, Uh, it's working with you and saturation. So how it goes is the hue color is around. So if I click on the circle and move around, I can pick up any type of color I like. And then inside is the full color black and white and everything in between. So different situations to make the color brighter or darker so I can pick my color on the side, and then I can modify it with the triangle inside. I think it's a good way for us to draw because it makes you creative because you can not just playing the sliders, but you see all the colors or almost all the colors at once, so you can play around and find what you need. The other thing is that it's adjustable assist. So so if you nor precision, just make this window be good. Even you can detach and make it very, very big. Usually, I just use this convenience side. Sighs, Um, one more thing about the feeling stroke window. You see this line of icons. I will not explain everything now because we need some stuff for later, but the 1st 1 and differ in the 2nd 1 as the tools to tip says, It's, Ah, no pain. So if I cross this out, there is no feel color. And also here it says no identify quick on flat color. It will be flat colored again. It's this simple. One more thing is the stroke style and what we were only work. Now it is the with off the stroke. So no, it says to six. Usually different. It's one. So let's do some crazy stuff 23 picks off with Zoom in. It's very, very thick stroke. You can play the dishes. So how the stroke changes. It's so big that it's not visible. You see stuff like this, um, endings and how the corners are reacting. I leave this up to you so you can play with it and see that these things exist. So this is the basic stuff about colors. We do also other things later with them, there is still a bit more, but feel free to play around with the veal and just what I always say to my students. These pilot is very nice. It's 256 colors, but this wheel has 70 million. So we creative and be adventurous, trying new colors every time. 6. Path operations: as I told in the previous videos in escape, we are not using a brush were not actually growing. We are building objects. So, you know, creating a little smiley or a smiley head is very easy. I just make a circle, then another circle. Then I don't click eight that, and I duplicate this, too. And then that's it. And I can you describe so I can create very simple illustrations from the Valley. Simple basic objects. What? What if I need more? Of course anymore. I cannot build everything from squares and circles the way. So as you see these air different levels off illustration escaped The first level is just building something from basic objects. The next level, what we're gonna go into now is creating a bit more complex shapes from the basic objects. And to achieve that, we will use path operations. Um, first, we have to clarify what is a path when I'm creating object. Inning escaped and you see that this white handles it's called the shape and it means that it's ah, native escape object, and you can modify it by giving different, changing, different variables. You can modify by handles you know these are these are the default objecting escaped the square, the star and the circle. And when you change an object towpath, it means that it changing the handles. And it means that you can modify the shape. And the easiest way to modify the shape is using the path operations. Past operations are simple subtraction and, uh, audition. So, for example, if I want to make this mark mouth smiling and I want to make a semi circle zoom in so received I create a rectangle over it. I select both of their machine shift and then I go both and difference or control miners. And you see, the upper object was cut out off their lower object. So once again, Ivan Victor, same goes here. If I want to cut these in the semi circles, I duplicated the square the rectangle because I knew I want to cut out off both of them. So now both of the circles are semi circles. So I have this type of laid back character or sleepy or grumpy. So this is one of the par three par operations you can use. Select an object. Yes. I like the two of Jeb difference. The other thing what we can do is the two basic math operations I want toe merge two objects together, I said, like both of them, you see there no two different objects and I push union from No. One. This is one object. It's not a group. I can move it. I can do whatever it. The point of this is that I can simplify. If I don't need all of the objects, I can simplify it. It can be one object and then I can modify to create the basic shape. In the next lesson, we were going toe to modify shape more. Now we're talking about the path operations only. So let's see something. What we can use in our games, apart from the little c p A. Sleepyhead, If you make game about that you create now little heart. I'm sure you know I usually do a heart, so I make a circle. Then I make another circle. Then I make a square. By holding control, I make a perfect square and then I hold by holding control. I rotated until it's a diamond shape. So we're standing on the edge, then see, I put the circle Put the square on the edge of the two circles Here. I have a little something here on the top. This is how we look now, and, uh, I just got this off. Both difference. So now I have this shape and these and these how I make one heart off this I select all of them and both union is this easy to create a heartening escape. And if I want to make it used in a game, obviously I create, you know, I have two lives left and I lost one. I can make this one dark like it's turned off, you know, in a game. And that's it. Very, very easy. You can create your own shapes like this. More thing I'm showing another operation first is the intersection. Intersection is is basically what it says. If I make the semi transparent, you will see better. So I have the to different circles. If I said like both of them and I push union, they merge. If I said like both of them and the push difference, then the upper one is cut out of the lower one. But if I sell it both and intersect. Then I got an eye shape because it's get what is intersected between the two objects. So this is usually how I make and I shape or relief as you see this path. Operations are pretty powerful. They help you to modify the shape, the basic default shapes of escape to create something more complex. One more rule, I didn't say, is when you merge, when you use the union and merge object, it can be us many objects as you want, so different colors and different objects, and you just select all of them path union and bomb their one object, but to do a difference. It's only working with two objects, so if I select three, it doesn't know which one toe cut out from which one. So nothing happens different. It's only happens by two objects, a lower one and the higher one. So this is doing is well, you have to know and, uh, player on with the puff operations. I was just showing you the three main one. There are also other three go around that right and tried through, for example, apple hideously leave if you want. If I this shape, you're almost at an apple and, uh, have family. And check out this operations because if you must have these, you will understand how to create more complex shapes. And in the next lesson, you really understand it even more what you create. 7. Gradient and group: in this lesson, we will talk about the colors a bit more. How to make our game elements more sweetly looking and more alive. And to achieve that we will use radiant. Radiant is basically one color seamlessly changing into another one. So your object starts one color in one end and it turns into another one on the other. And then in between. The colors are mixing, so it's easier if I just show you This is my heart and I want the light on the top. So I want a took part lighter on the bottom, on darker. I used the Grady and two is this one selected, and I pull it downwards. It's creating a drink radiant from full color toe. Fully transparency. See the opacity zero and it's the same color still is just no transparent. I see it has two little heads. It's too early to notes. Wanna square on a circle? The selected one turns blue and the selected one is the one I'm operating on. So this one is showing them with 100% opacity. This type of red and this one is the same red jersey opacity. So no, this one is selected. I click on a darker red here. I have a nice need, radiant, the further they are the smoother Grady and the closer they are the sharp, pretty you see. It's a very short radiant here. It's almost like a thin line. But if I pull them apart, it's nice and seamless, and my a little heart is not flat anymore. Check. It was like this before. I know it's this much. You see the difference. This one is not flat anymore, so it looks a bit more three D. It's it looks a bit more standing out of the background. Andi, I wanted to show you also the start til I was talking about, and I know you are the play with it, because this is what everyone is doing the first time, the opening escape. So how the startle is operating, he's it throws a star or, ah, fully gone. It's you can switch between the two here. Let's stick to the star. You can give home and corners you have. I want five is the most common one, and spoke radio can be changed. This one. It's like house by kitties and rounded and set it to point to you see the edge getting rounded and it looks like Patrick. So if I have my little star and I want to make better, I also put down this the Grady into and give it a bit off yellow orange, radiant. When I said like this one, I can use the color picker and get a color from in between Make the radiant even motor and what I have you do now I duplicate the star, color it white and make a vied to nothing radiant on the top. Mind that the Grady Int and those can be out of the objects to you See, now it's 100% white. If I pull it out, it's getting in between off the zero and 100. So no, here is about 50% transparency, you see, And like this, we make our star like it's shiny as you so I can turn the Grady and so it can come toe from other direction as well. Now I rented from the top left because usually this is very lights are coming from, so I have my little star. Also, what's in the previous one? I can make my star uh, like this is turned off on this is to a normal. If I want to make a system for, like, creating, like in this level, you only got one star. This is how you make it visible. These are turned off. This is turned on you, you and one star. Congratulations is the same What I did with the heart in the previous. Yes. Um selected. It's like active inactive. One more thing I want to show you in this lesson, Apart from the radiance, his groups, a group is imagine it is like a plastic bag when I put on my objects, which I want to handle together. So it's not like what you were showing previously that you merge, object together with the path operation union. Because if I do that, they will become one color, one object. But I select them and I go object and group or us. It says Contra Gee, if it's a group, it works together us one. I can double click it and then I'm inside that group so I can still modify the different elements. I can recalibrate. I can play with them. Whatever I want to do, I can turn them around. I can copy and paste the group. I can do whatever I want to the group. What I want to do with what I can do with a simple selected object. There's the point of the whole group. Think about the group of selection, you know, plastic bag. Really? Because if I just select different objects together us in the 1st 1st lesson, I can move them together in a group. I put them together for ah, longer time. If I don't need them off the group any more than I just go UN group or she contra Gee and they're separated object again. When I'm creating a character, for example, and curious, uh, for drawings or or games or whatever, I'm creating the head. Then I grew up the head together. Then I group the hype arms together. You, Chrissy later on, maybe are creating a character design and animation that using groups is very, very convenient. One more thing about radiance, and then I let you go and play around and create your own arts and stars with radiance. He is that there is to type of radiant. So the one I used, he's the clean our room, which means for one object straightly going to the other. But there is another type of radiant which is circular or radio one. And I can do that if I make this one flat color, I can use dead by when creating radiant he is. He had a special you know, the special tools for the Grady and Tools special comments. And I can set if I want Alina or radio, or if I want it on the field or the stroke, because you can so give Grady into the stroke. So no, I just select radio and you see it has three handles because it's like an elliptical radiant. It has a middle color, which for me I said this bright yellow one and it has an outside color, which I gonna make the dark one Dr Orange one. And this is what I can create. I can make it elliptical cross marchers I want so I can make it even like this or I can make it more circle. See, it's a different type of radiant. How it happens. Toe appear is also that if I said like the object, it says radio. That's why they are. And it shows what is the radiant If I double Greek You remember in the colors tutorial the colors Lesson. I didn't talk about all of these. This is like no color flat color. And this is the two type of Grady and we can use so I can switch between the two all the time. You see it switching from leaner the radio if I want to give the same Grady int for another object. So, for example, I have this red one and I want the Red Star with same colors. I can go and, you know, pick up the colors and play around with it, or I can assign the same Grady into the subject. How I do that is I said, like this subject and I check the number off this, Grady. And if I check the drop down or degrade the answer here and I checked this number 3078 from the drop down, I said like that And that's it. I have the same colors for my star us. I had for my heart. So Brady and some really great fun. Ah, only thing I would say is applied them we care. So don't make some very, very colorful crazy radiance most of the time. How we use it in illustration is creating a feeling off light and shadow. So exactly what I did here. He's like the two parties, the lighter the bottom part is darker. In between, you see, it's creating a lightening effect. So, like the light is coming from the top, Grady ants are great for death. It's empathize the empathize, the lightning coming from a certain direction. So go and play around the radiance and we will move on to something next one in the next lesson. 8. Modify path - the fun begins here!: what I said before the radiant lesson. There are three ways to create shapes and escape. 1st 1 is the basic level is creating simple shapes and, like I'm doing this three and he was in the squares and circles and the stars create our objects. That's okay. I think that's a basic level. But for more complex result, we should use the path operations. So the union difference intersection and then we can create more complex shapes, then just a basic one. And then there is the 3rd 1 third way to modified the path, and that is the more complex one, the heaviest one from all three. But that gets obvious to the best results. So, firstly, we can do the two ways toe create above. We can use the base, your tool, which are just going to refer to a Sapan tool because it looks like a pen. So I said, like the pan No told. Of course there is changing and they can draw on object. So one more, one more. I just leak Greek. I do straight lines, and if I order at the white dot it's closing the object. What? I can do it like Greek. Who would then I make occurred. What? And quick again. Then I make a good so I would be selected this tool. It's the edits. Path by knows, is the node stool with the note. I can modify the basic shape I just created. So it's giving no better color than it is now. Wouldn't just fine. So with the notes, I mean, this little gray squares, I can move around. So I go. You see this? It's look looks like a need. A little black need of the cars have changed. It changed its shape. Now I mean this needle I can select on modify the note off a bath. If, uh, the hand is appearing, I can quantify this part of the path between the two notes here, or I can us with the selection toe the same way I can select multiple pop, and I can even resize them or turn them around. Note. If this one you see this little icon here with four a rose. If that fun Eastern, don't. I can modify in turn around the path like I do with selection toe. If they are not turn on than our ozone a physical, so I just turned it on. I think it's not done down on default, and then I can modify. Create any shape I want. So the one way to do it is to use this tool. I will give it now no feel button stroke. And so the basic tools depend toe. It's good to create the basic shape and then modify and refine the part with the catheter to not one thing, that these nodes can have different shape and that has obviously different function. So if I click by control, you see is changing the curve by control, I can switch between the type of nodes and many to square or a circle. It means that the path on the two sides are reacting the same V, and if I click on a note, it has this note handles I cannot give also modify the path with handles. So I grabbed this little circles and they can t find my bath here. But if I click on it control, click on it again. You see it's turning into a diamond. Then the two. Then it's turning a corner and edge. Not, uh, not an arch so I can modify the to note handles differently, and I can use this us on edge. You see, if I want to continue my drawing, I just continue. So when we used to use the base here to the other one is using the The other one is using the path operations. Yeah, that's why it's the name because it's creating from object. It's creating a path. So now you see the white handles off defaulting scapula object. If I go path, object towpath, then they disappear. And with the note selection tool, I can see they are here. The nodes are appearing. So we turned the simple object into a path the other way. It can be done If, for example, now I do an intersection or any path operation exclusion, difference, union any then it turns into a path because it's ah, this is the path populations are creating more complex shapes from the object were using. And he and I have already the four different handles on the object. I can select this too, with them down a bit. And here I already have a late Alief, so it's very easy toe Modify the path. I just select a node. So and I flip it around if I want a different type of leap believe I just implicated said like this. If I want an even more different one and I want to add an extra bomb for something into it , then I can sell like this side off the leaf. This type this section off the paths DoubleClick when the hand appears and that adds on, you know I can do the same, and I can move the note and do whatever I want. I can do the same by select the two notes, creating this section off the path and then push in that if I push that on my keyboard, it's Erding. I know. So you see, it's very easy to create modifications from the same simple path and create our own and in unique shapes in the next one way will go a bit a few steps, ah, into creating a more complex subject, and we use all the tools we learned so far. So we will create a complex subject. Andi, use the colors. The Grady ends this path operations and the path modification we just learned now and after that, we will go into the graphical user interface for a bit to learn the tax tool, and then we will see a lot more coming. 9. BOOM! Create a bomb!: in this lesson, we will create something which is in a lot off small to the games, and it's a cartoon boom. We'll know this from all the box. Bonnie and other cartoons is basically a sphere and onto it there is, ah, string, which is sparkling, threatening us toe blow up. So how are we gonna create it in escape is now is that we will use all the tools we learned so far. Let's get into this and first create this fear and I'm drawing escape. I don't care first about the colors. I will recover them later or just use whatever is comfortable at the moment. So I don't use crazy pink or purple. I like for you. It's up to you. I know I want to create the base off the bomb. Then it usually has a little matter seen in their ritual. You create from, uh, rectangle beach. I transformed with bath object apart so I can modify and make it curvy on the top because usually it's like a cylinder can make it lower a bit same on the bottom. So I have the basic shape I can color it now, too dark gray or black. If I wanted to make, like a boom, I can use Grady. And so it's already looks a bit more spiritual. And I can also use a radiant under object itself. Toe black from, uh, good A and some more shine I can with some highlights on. So now it looks like a black Christmas ornament plant. It's mostly what it is. If I do this well, maybe even better. And then I just can't go with Chief control F I called feeling stroke window. I can blur these nice here. I can create lives on the top, the color off the ellipses like the lighter off these grain. This one can have a Grady and to a winner. Because if this is a cylinder the light is coming from this direction. Then this is also lighter. And I can use the same Grady and decided here. So this part is dark. This part is light. You see Have the basic shape now and now. My can you with the base here, tool have a stroke and have no feel shaved a stroke. Andi, I make it weaker and the end I can make like this. You see, you can give different cap different ending to the stroke so it can be cut off. Or it can be rounded around this perfect for now and then the stroke. Pain to change from black to something. What is a brownish rope color? I can get it from here. The bottom by not by normal, but by Ship Creek. Or I can go out here and get one. I think this one is good enough. Maybe this is a bit too long. Okay? You know, we are talking and I want to have the sparkles on the top. So with some fire, the easiest ways to make a star and like this it would be like, Oh, my God, The magical boom. Okay, that would be a nice name for a game. That's my name. Don't steal. Okay, I'm just getting so if this is a bomb, I don't want to be this perfect star by one sparkles so I can path object apart. So I create bath off the star and they think modified hand by by hand node by node to make it a random, more random sparkle thing. And this one I can also turn a stroke in the bath and I will show you why. You see No, it's nicely turned around here. A path. It's not a stroke anywhere. It is no stroke. So it turned into an object. I can push control. L you see, It's l control Ellis simplifying the bath. It's still not what I don't need. I just deleted, like with the object. They can make a different bottom part. So it looks like it's a bit thinner on the top and figure on the bottom. And then I can give this a linear Grady into from brighter on the top to darker on the bottom. It like this and just for the fun off it, I can give it the blur like it has delight on it. So now I select all of it. And the group it You have a little cartoon. Bo can't stand like this, so to make a lot of forms. So we are a little boom you can use in a game. Onda. We were trying everything what we learned so far. So it was coloring Grady and creating simple shapes, creating ah, but from a simple shape and modifying the path. And we were using some blur, and we were using a Group two group up our object at the end. And don't forget that these objects is easy to modify. So if you want to create differently, sparkle you can. If you want to modify the shape off the string, you can. It's very easy to more defined as the whole point of escape. So have fun followed this tutorial again, if you need create your own bomb or whatever game us that you need in the next few levers if you move on toe text on graphical user interface. So basically creating the bottoms on and the other surroundings for our game, and after that we will move on toe. The more complex stuff, creating platform characters, backgrounds at the tell us everything what we need to create a need little game. 10. Export Your svg file!: Now you know how to export beat map PNG's from your drawings and how you export your game assets in Britain, and it is very good if you just want to create one size off a game or if you want to create other size than you, just select all your assets, scale them up to the size you want. For example, give given height said this. Locks of the proportion is staying the same height and video scaling together and then export. Is each asset separated? That's one solution you can do. So you have different versions off your game or what you can do lately. And because off a gaming in a HTML five canvas is a big thing now, like if you want to create a Facebook game, that's it, for example, or more by gaming. Going on android and high resolution. Other high resolution smartphones is such a big thing. That's why escape is so so handing out because escapees saving toe svg by default svg means scalable vector graphics. So what I said earlier, it's vector. You just save your game element. You have to copy it and take it to ah uh, you, uh escape file. Let's see, I just did that. And vanities in the new file you just go fire, save us and you give the name off your element and that's a So if you want to save it, you just save it. Just take care that you save it. Last optimized s me, Jean. She's down here. And the difference between simple svg in escape and optimize sug although the ending is the same is that Inskeep has, Ah, some a matter that data including in the file which is useful only for escape, for example, of a ride, the guidelines and stuff. Uh, but in your gaming way of their project, you don't need that. So just save up to my desk, Yuji. And that's another thing you can do is to save PdF. And when you save a pdf that can go into any other program so you can use it in Illustrator , you can use it in flesh and create your animation from your escape growing or ah, I don't know any other program. Most of the programs can import PDS because that's the point of pdf, you know, toe communicate between all the different graphic design problems. So it's this easy. If you just save your assets in SPG, figure out it first in your program you are using. And then that's it. You don't have to very about scaling and different resolutions anymore. Because you just said the resolution and your objects will scale video. This was the part about exporting. And now we move. Want to draw something more serious again? I hope you like it. 11. Export bitmap: Now we have some nice throwing or drawings already annoying escape. And in the following lessons, we will drove a lot and even animate characters and such. But before doing all that, I will show you one more thing. Why? I always like to using escape for a lot of graphic design stuff I do and why. It's mainly good for designing your own game assets, and the reason is that you can export in any size what you created. So the main reason I using escape for my stuff, it's, ah, this flexibility and scalability it has because it is vector, um, as I was talking about in the very beginning. So how we export the, uh, image from ing scape? We can do it two ways, and, uh, there are other four months as well. But I will talk about two things. Basically, you can export it us a bit map image so it won't be vector anymore, or you can export it and save in different vector format. You have to do it two ways. When you are exporting us a bit map, you push shift control e or file export beaten up station control, then you get the export Bittman window. What a surprise! And, uh, you have a lot of options. When the something is selected, it jumps to the straight to the selection. That and you can export this part superior and your image s o far escape is only exporting PNG's you see, so you can give a fine name and everything you can. It's only exporting PNG's. It's not the really a problem, because you can open it in the little program like even paint and save It is J. Peg or BMP or whatever if you need most of the game editors, I'm always referring toa your games gamemaker because that's what the program I like and use. But I know it's the same with unity. You can they can just handle PNG's ask Good. Um, when you are exporting for a game, obviously you don't count in centimeters or stuff, so you can you believe the units in pink sauce and then the DP I the native dp i for exporting is 90 d p i dp eyes dot per inch. If you don't know this is the resolution off exported image nineties perfect. Ah, for anything on the screen and, uh, you can. You only make it higher like 306 100 150. If you want toe, export it to printing. Or if you are exporting the high resolution image, then you can scale it down. Maybe later with another program, even if it's, you know, the streak about bit map that it's, ah, not really easy to scale it up. It can only scale up a few person without losing quality, but it can scale down quite easy us. On the other hand, Vector is callable, opened up. So back to this I selected and you see it's election. I choose my file and hit export, and that's it. It's safe. I can sell it more and export them together. My selection we look like at the bone at the edge will be at the bounding books. When I'm selecting and I'm exporting an image, I usually do like this. Make a right board, send it in the back, and now the image will be so I give ah or why, transparent background. When I am working for games, I can give you transport in background. No, it's transparent. I exported, and that's it. Off course when I'm doing a sprite, I don't need this big, so I can just export exactly the books, and that's it, because it's transparent. Zero opacity. If I click away, these books disappears, so I have to draw it again and go back. Um, one more thing I actually using gamemaker, and I don't know how other editors are dealing with. It is you can make a opacity one so it's not disappearing. Or and then you don't have to deal much with the opacity because PNG opacity is sometimes a trick or what you can do. He's get a color, which is very close to the color of the off the drawing, but still a bit separate. Or you can get a color with your name like, Okay, this purple, we will be my transparent color and you just take it transparent in your editor in your game. I telling about them. Talk about this because in game maker, for example, you can take any color Toby transparent. If you take this one, then everything around will be transparent. One more thing about exporting bit map is you can export Bittman's together and create a spreadsheet. You probably know this. If you are creating a game, A spreadsheet is one image holding all the little elements. They are tired up nicely. You exported us one image. So the program is only calling the image ones. And then fastly from memory is calling out the parts you just need. And you call the different parts your program. So to do that, you only have to ask what one image and tear The image varies each section starting. So usually to achieve that the easiest to do these airway is toe make ah agreed and create the same distance Be Tween all the elements. So I can say that Ah, for example, I can say that the star is starting at 50 then the this is starting yet the start is starting at zero. Then the coin is starting it 50. Then the heart is starting 100 picks up and then starting 100 650 pixel. So where the other one is ending and that's it you have if you have a tie, said it's ah faster to use. You just have to get used to help to use Uh, that's one thing. And, uh, in the next video, I will also show you how to export and why it is too good. Export vector 12. Text tool basics: So in the previous lessons ballooned the basic drawing tools Inning escape. We already created some simple on the more complex objects, and this is fine, and we will do a lot off that in the coming lessons. But as I said, we will create all the graphical elements off your to the games and a big part of that at a different type of icons and buttons. We use eso, the graphical user interface, where they can interact apart from moving corruptor or working with objects or shooting enemies. So what will you create now? He's We will create several bottles. I will teach you how the text toward is working in escape. And then we will modify these buttons and create different versions different graphical versions to suit your game. And then I'll be sure you how you make asked me the other lessons. I suppose you just follow first what I do learn that the world and then you do your own modification and do some really word alive object you need now for your game. So if it's science picture, make it look. Science fiction. If it's if it's fantasy, make it, you know, you know what I'm talking about. So first, let's just follow with my knee. What? What is a bottle? The bottom is a very simple thing. It's basically a base shape and the Dexter. So if I want this my button, you know this I have this cornering option in the square to this is the base of my button. Then I have to put some text on it. And I do that with this tax tool. It's here in the toolbox. The letter A I just selected to see the course. It was changing to a three year as well. I click somewhere and I had my text, etc. Good. Um, if you notice the I think the most important part of the texting escape is attacks is also working us or any other object. So if you go to the selection tool you select your object, you can rotate it. You can, you know, shrink it. Um, and you can cover it with a quick so it's very, very easy to color it and move it around. So, for this is very, very easy and convenient toe put this text on your bottom on. Do you know changes and modified but I usually say about text is whenever you scale it. Please always push the controlled the control because it's not good if you scare attacks like this or this. If you want the phone typeface, you know, which is narrow than select a narrow one. Look up and select for your by by a typeface, which is narrow because different typefaces are not working if you distort them. So I always always say hello to my students and to everyone who is changing the size of the phones. Please hold control if you'll transform them like this so they keep proportion. The other important thing about text on Butters is that it has to be with contrast in the background. So if I make it, make the background this type of green than this dark blue stent out from it. If I make it very bright with white, this is standing out also nicely. But if I make it, it's a another type of green. You know it's not enough contrast, so the reader can not read it properly a lot of times, and if it will be smaller, you know it doesn't work, so just give it enough contrast, that's let my other. So the 1st 1 is Don't squeeze the text, never, never distorted and use enough contrast to really? Because the text is there is there to read? So how we change the text as well meaning escape. If the text tool is selected on then here in the toolbar you can see the according bar to this to this particular tool, and you see, you can set the type face the phone family. You can set the size of the phone. You can set a Togo if its board or normally italic. You can set alignment off the text line height and different positioning between the text. These are all for you can try out and play around with these. What do you do now is a single bottom, so I don't need movie line text. I can just use this one. We're toe text, which we use usually have four buttons. So I have the basic shape. I have the text in it. I set a nice color for it, but I'm not satisfied with the family. I can choose from here where I can push this tea here on the top, and I see all my phones which are installed on my machine so I can grow through, said whatever I need. I see how it would look. I push apply. And here it is. This is it. I used the text to and I created a very, very basic bottom. We have to show you more about the bottles and how to align them in the next lesson. 13. Align and distribute: So this is very simple, but we just created and you don't need much more toe toe create a but really, in the next lesson, we will go through out to make some, you know, more fancy looking buttons. What I talk about now is a bit different. It can be very useful when you're creating the menu, but also where you are, just drawing ties or different stuff, and you need to order them. So what do you do? He's We opened the airline and distributing though we'd I just did it. The shift Control A. Or you can open and close it with this icon here on the top, and I will show you in a second. Wise is good for So I put my tax here on the bottom and it's not in the middle. It's a bit off the toe, the left. I'm a graphic designer. See these things for more than a decade decade now, and I see that something is off, and usually people do so just to light, I said, like both of them, the text in the box on a quick this bottom, which is centering them, and then I want to also center them horizontally. Yes, it went. I mean, don't. My eyesight was good, but not perfect. And now let's make another button. So my menu will be. It's a load. I also want this in the middle. This will be sure, and this will be Let's say it quick. So I am like four different buttons. So I just said, like both of them, both of the object and then I creek, So I want to align them now. I also want to line them us a menu, so I want the buttons to be the same distance from each other. And to that, I group up each text and the background object accordingly. So I have groups for my buttons. I select all of them and then I portion in the distribute books you see, because this has been those called the line and distribute in the distribute. I push this one so it is creating gaps the same size of gaps between the objects. So it's spreading them out and distributing them out evenly. If it's too much, well, safe. You know, if it's too much, I can take this on higher. Still select or four of them spread them again and they were very, very distributed. So this is a very, very nice tool to align my, uh, objects on dim particle of when you are creating a manual, you need some order. If you don't want your text to be in the middle of the books and you want everything tow line toe this size off the side off the first text. Then you can do that, too. On how I do that, I'm using control. If you lose control, you can click on individual objects even if they are in a group. So this is now a group. You see, we were talking about this earlier. If I click on it, it acts as one object. If I control click inside, I can select one piece of the group on morning shift in control clicking over the text, and lastly, I click on the one I want to line two because he you can set relative to you were a lot of options. Usually for me, it's the basic setting is last selected, so it means whenever I want to, allowing something to something. Yes, I always select the one I want to keep in P place and align everything else to is the last one. So no, I want the new game to stand in place and everything else and like to the left aligned to this one. So everything is selected. And then I quick the line left edges and all the other button or the other texts are jumping out to the left. So this is the airline and distribute window for you now. And if you have several bottles like this, you can create a menu very, very easily for your start screen for your game in the next one. I really In the next lesson, I will show you how to create bottom states very easily. This would be very, very short lesson, and then, in a bit longer lesson, we will create a different type of bottoms. 14. Creating button states: very short lesson now about button states. It's for creating a feedback for the user. So he knows what is happening, where he is, what will happen when he's pushing the bottom. So, for example, even hearing escape if you look at the toolbox, if I'm over in the buttons, I can see the different states. I can see which one is pushed. Which one is, Ah, active and which, when I'm over on which I couldn't reach again Creek an activity. This is the same thing I want in my menu in my game, and what I can do to achieve that is like I can have a normal state and the pushed overactive state. So I just duplicate now my, uh, bottom and I can change the background color off it. For example, if it's a man, you night. So let's say this is my man. You and I make it more so it's visible. Then I know which one is active because the one in the bag with the background changes after usually there is a rule in Web design that we only change one or two things on a but not everything in game design. You can be a bit more playful. Obviously you can change about on totally grow. Things are out off it. You can do a lot of animation or anything when you were very selecting a. But it's up to you. If it fits in the game you are creating golden, just make it understandable. So this is one way to create it. If you are having a flat bottom like this, just simply change the background so they use their know where he's what I would do also if we have a button which is not flat. So to do that, I don placate the object I opened the color window on. Let's do it like this. Send it to the back. No, I have a bottle which is looking a bit three d because it has a thickness. And what else I can do is I can make, uh, my text and replicated and show it to you in a second. I can make my text also stand out a bit so I can create a letter press effect re cheese. If But if the text is pushed into surface, it has a shadow. If the light is coming from here than the shadow on the top and the brighter part on the lower edges. If I zoom out, it looks like this. So I created a three d looking bottom and I can create a button state for it because now it looks like it's really touchable, You know, it's like I can push it with my finger and it's have so much from people. People know that. Okay, this is a bottle and I can touch you. So the one ST I would do for it, it's I want to do the opposite. So I moved this one up so the butter seems it's pushed in and I would make the background off the whole bottle. Not like this. I would make the background of the whole bottle darker. So when I'm looking at it, But I see is that this one is standing out. I can even give this bit of Grady enters. So this one, this is try to Yes. So this one is standing out and it's shiny on the toe and this one is pushed down. I can even make the middle text big, darker. Just do me like crazy. So this one is pushed in. The shadow is coming from the top of it and that's another state off a bottle. This is active and this one is not active at the movement. So if I replicate this, you will see what I'm talking about. If several buttons like this, I see which one is pushed. So this is about estates and no way want to something more exciting on creating a bit more buttons like this one. A bit more complex one. 15. Button variations: So in the previous lessons we were talking about, the text will how to create simple flat buttons, how to make a bit of three D effect and Barton States, and this is all important for your game. But graphically, what is important is the setting the mood I was talking about. And I will talk about a lot while the setting the mood off your game. So if it's ah, cyber science fiction robot, whatever team game, then obviously you cannot have fluffy being buttons. And also, if it's a fantasy setting, you cannot have cyber buttons with the shiny metal plates and, you know, digital letters and stuff like this. So when graphically he you work on your game, you have to set the mood and buttons have a lot with that. So, no, I will create a different type of bottoms, just very, very simple ones that can feed to your game. And you will have, uh, basic idea off how, uh, we are developing buttons in escape. It is basically the same us. We are drawing a bit more complex objects. So what we did before with the bomb is that we create a group of objects and no, we also wear Don't text. So you, uh, first make bottom for cute, uh, funny game. I make it overly around it to make it friendly. I make it with object towpath. I make this in tow path and basically make it like jelly bean. If I would make several of these buttons so I would make a menu, what I would do is slightly modify all of the bottles. So if I would put a few wonder each other on the screen, I would make each a tiny, tiny bit modification. I would make each unique so I would have different shapes. And obviously, I would pick a color, which is very, very funny and happy. And, uh, now it will be this pink inside I put another object, lady it. I can keep it like this sharp. I can blow. It depends on what I want to achieve. Now it looks a bit like candy. If I blurt it. No, I need my text changes copy from here. And obviously I have to change the phone. So it's matching the game I have for this game. If it's this funny, I would go. You can go with the arrow keys, Actually, also in between the phones. So know what I do? I just go up and down and I look for the phone. This time. It's gonna be something. Yeah. Also looking soft and gummy on the edges. What I can do, I can give it a stroke. Pained, which can provide this time. And the inner pain can be a different color. So I can I can't play video it. Try different colors, try different styles. I can make it right and I can make a stroke. This being good on the big stroke. Or if not, then I can give it beat for shadow. One more thing I used the free hand to and I just contra el What if I simplify the shape? If it's not working, then just delete the no is You don't need Andi it this year way See, in a second, What am I doing? These? I make another shiny part on the toe. So, for example, like this I have a very simple button which is looking like rubber. And now that I said that would be one. I can cope with the same thing I can even play around and modified more. You see, just to make them a bit different on can duplicate my text. And I can hod the same color my object, and create the same effect. I can even check how much blood is in this one. 7.8. I can see here employment hate and they want to beat down. So the shine is a boat. So that's what I can do the same with the last one. I'm just working very fast here because I want to keep the lesson short and show you other things you can do. That's it. So I have course. I have to change the text and everything. But I have seen your buttons which are looking different, and they have the same style off looking like candy A war, something like that. So it's very good for a friendly girlie game is a be different is if I want to create a game, uh, read. Be technical and sharp. I can create or like science fiction. I create a button with edges, so I create. I removed the rounded edges. I use a different Carter setting, making Greysia here in the Grady End with Grady and we were talking about it. You can edit the radiant and that stops with the aid stops function. You can have not just one but several color in your radiant. Why is it good for? Because I can make stuff like this so I can sell like these notes. Make a doctor, and that's what I want to have. It looks like a metal bar. I can use this type of text again. If it's like, these can be a bit more a aggressive fund. So this one is quite OK over us to the dark. Is this dark? The brighter part is this very bright one. And the very dark part is right, This one. So it is like a shadow, and now I have a very simple bottom, and it works for my group. It works for a science fiction game or something like that on, uh, it's up to you what you create for it. What I say is, it's a good to do two things when you are looking for a new type of a bottle. You can, uh, look up interest, for example, for game user interface designs and check different bottoms ties and how other graphic designers are doing the same task. Thea Other thing you can do, he's Oh, I can make it or engine stand out. Yes, The other thing you can do is look at really things so you can you can take a look at how this is very cheesy. You can take a look at her. How bottoms really looking real life. So they look on your remote control your car around you, how they looking real light and then you will see the difference. What makes about on standing out and popping out from a button just being there being flat . But it's really up to you what you want to create. So this is, ah, friendly, cute button. This is more for serious type of game. These are flat ones, and there's one more I want to create, and that is a way we have. Ah, that's a fantasy related game. We can create a bottle, which is I would Can you defuse the freehand tool, show you what I'm doing and replicate this one intersection. I mean, it's a free hand. I made a very easy but then, for, uh, board No, you make it in between. Yes, Fit is would it can be. It can have a bigness. So it is a bit like the other. But on video, in the beginning, up to me how I want how visible I want this one on the food affect. Okay, I want to create, like it's a bit off plank, which is old and tour to make that I use this tool the basic toe create some cattle ports. That's very nice. You see, it makes a bit older route. And now I copied the text from here. What is the same method I have you doing? I looked for a phone family, which is more feeding the environment I'm looking for. So it has to be something. Uh, this would be a nice form for their fluffy butter looking for something which could be good for fantasy related game on a Be more serious. Okay. For example, this one is good. This is a Viking thing in front, and that's it. And I can do the same trick with this one sided with the previous ones so I can make a lighter part on that can make a doctor part. So what you see just created in a short period of time. Three very different type of buttons were three day, very different type of games. I would give the source code, obviously the source file for these buttons so you can modify the text and create your own from these anything you want. And I hope you learned also how I created this and once more. If you want to create your own, look up how their designers are doing it and look for your life examples and sketch it and then throw it hearing escape. No, you move on toe a bit more exciting stuff. How to create platforms for to the platform games and then for creating backgrounds and finally creating character. 16. Create a platform: after the user interface now even want to something more complicated. It is creating platforms for to the platform game. So this is very basic, que game. But creating these asset is the first step to creating more complex ones like backgrounds and full characters. And also here we will go back to the basics what we learn in the first 78 glasses. So using groups, objects, colors, Grady ants and everything to create our small objects. And in the this lesson in the coming to Leicester, we will create a very simple platform. And then we were modified to have several different platforms from one Let's start, so I usually just create a basic shape. First, it can be grass covered platform and give it a nice, radiant and then, as it is, a floating platform, give it a base, send it to the back, and I make it look like stone. Or actually, uh, girls. What I do know is I create different lighter shades, right? Us It is, you know, during away or broken on the bottom. So you wanted to have this very simple platform. Of course, it's not ready. I can what I usually do when I create something escape. And I think you should get used to this map to is that I always duplicate what I do. So I say what I have now and so I didn't lose it. And then if I'm not sure how I wanted next, but I might want to come back to this version, I just replicate and they put this next or under it. So after a while, I'm gonna have a lot of lot off the plot for modifications. And if, like, 10 changes later, I want to come back to the 1st 1 I still can. I don't lose what I created. This has me to be creative. I do the same when I create logos or icons. I do the same when I create platforms or characters. I keep the previous virgins because I have plenty of space and escape to do that. And it helps me to be creative and go back to a previous version if I need to. So I'm not why I made these duplications. I always make it replicate when I'm not sure why I made this now is because I think it's better if this one is higher. So if this one is actually you know not this big on the butter, I can give some floating notes on the same. The same read some broken of a parts from a distance. It looks like it's a floating platform. And what else I can give it to is off course if it's grassy. I don't want to draw individual pieces of grass, because why would I? If it's a cartoon a game with the platform? I don't need to. I think about Super Mario. The platforms are shiny shaped like this, more or less around that judge around edges rectangles. So it's very friendly, toy looking, actually, what I want to create. It's some grass. I just click with Busier Tool. I put it, match it to the edge off it so it looks like it has a bit off. Okay, we're hanging grass and I can do the same here. Looks like a weird hairdo, but you know what I mean? So if I look it, it's more. It's It looks a bit more random, and they also here on the top. I came to you some brush off grass because it's put Grady anti pick color from the part of the great anti need. So, for example, for this one, it needs to be this high. Then I can modify this radiant. So you see, it's seamless and this one is very light. It's off so I can create a Grady Antonin. This is how you match an object of the radiant of the order next to just get the colors underside. So if I put it higher, get again the colors from here. See, it's almost seamers and then, from almost seems, on the sides perfect. So it has some overhanging grass. It has some little pieces I can give in, some piece of grass fallen floating around. So this is like a platform which is hanging in the air. If I'm done, I can group it up. I can do different versions. Of course, it's very easy to modify. You see, I started with this one, and I have another version. This is what I had in mind. I can imagine my character jumping onto this blood for and jumping onto another one, so it's very easy to set up. Also, you will see off us. We create further, um, background than the the character and the platforms and everything, all the little details. It's very easy to put together all the look Inning escape. So even play out how it would look in this version in this version. How it would look in a landscaper portray on the mobile device. It's very, very convenient. And it's escape is a great toe for designing the layout and even designing the visuals of the levels. Okay, so create Ah, simple but simple platform like this one now and in the next lesson about that review creates on, uh, modifications on video also create different versions off the platforms you will see. 17. Tiling the platform: I'm sure you have a very simple technique toe. Keep your resources at bay. So you don't need several different type of platforms to create longer short of bathrooms from the same time. So I have No, this Brezik grass platform. It looks quite good. Okay, for my game. But what if I want double over? What if I want to third off this or what If I want 1/2 times longer than I could do, you know, duplicate, open up. My group and I could make a different version. So like, um, modify my platform and drove this injury individually so on in the etcetera, etcetera. And in the end, I would have several different assets for my game using to create the I don't know, 10 times off different the 10 types of different length platforms I need. That's one way to do it. And you can do individual, different stones at the bottom. It's It might be nice looking, but if you order the d the game for mobile or yeah, basically mobile or web, that the resources are tight. Not that they're not tight on a PC. So where the resources are tight, you know, that you have to spare wherever you can and also build. If you're a programmer, you know that that you need to build flexible. Same goes for platforms like this. So the technique I want to show you is how to slice up this platform and create a platform which is might not leave this unique looking like this one, but fallible and certainly better suiting to create any length of platform you want in your game. So it sounds good so far. How we will do that is you want something like this and hope you achieve it. He's ivy. Emerge with the union. Always is subjecting toe one. Then have you create a shape? Direct anger over this will be one end off my platform. This will be another end off my platform. So what I hear I select on the go to division with Division. I created three objects from one. And what I do is that I have one platform age here and one here. This is already a shorter version and this will be an opening part, a closing part and an intersection a middle part. So to create this in the same manner aside this one I pulled down from the ruler here. I quick and I pulled on a guideline. This blue line is not getting to be rendered. It's really a guideline. It's happened, you know. Where is the bottom? Off my off. My, uh, object. So I really do like, let's see this one. By awarding control, I make the top part over the right part straight. Then I go to the airline and distribute is the same thing. What we did with the buttons and that line these two sides, thanks to each other. I pulled this one to the edge of this bottom and I will show you why. But I mean this platform, he's yes. So no, we drove the same for this one. If I would remove these, this is already a nice little platform on its own. And it can be, but I don't remove it, but just replicated make it brown fitted here it can be dis my doctorate. So I grew this one up group, this one and this I can still make here my little floating pieces around, mind you so it can be like, you know, I can play. But I did before. So I have no three objects. Different end off. My blood borne us the end off here and here and here. And here are the same height. If I put them next to each other David match if I no, put them aside and duplicate them here. If I want a longer one, just replicate and match on duplicate match in duplicate and match and again. And here I am. I have a longer platform, you see. So it's not this crazy looking, but it's a longer platform in a small game. It won't be, uh, you cannot go any detailed anyway. If I say I told you before on, if you are not satisfied with this one, you can still make it more unique by making the middle part a bit more different. So I can, by keeping these two on the side so it will still match. I can give it a bit off. Is the exact on the bottom like it's really broken away? Stone. I can play the same thing which I did here to see in the very beginning so I can make this one dark and I can make you see this light strokes here and the same goes here on the same can go here. So now if I match it up, they are still matching on the edge because they do. But they had a bit more interesting now then, just this basic one. So this is it how I made a tile from a platform. So with starting and the closing, and in between part, you can make us long us a platform us you want for your game. So, for example, if I wanted to selectable three, I can make this long and you can have your character running and rolling all around in the next one. Really? Modify still the same basic platform to create other surroundings. So we will create a platform about snowy. And this Nandi send your stony surrounding. We will create different materials. 18. Platform mutations: So here is my simple platform, the grass one which I created earlier in the previous lesson. I was showing you how to cut it up and sliced and use it. US platform ties. No. I will show you how to create modifications from the same place for I told you earlier this one. But I have toe say it all the time. This is my escape is amazing. And vector graphics in general is an amazing thing for, uh, game designers because it's very easy to create an asset and then modify it and reshape it and refine it and use it for something different. You looking very unique while just modify the basics. So what I'm talking about that we have this blood from here which is obviously grass and ground like from Sonic Greenhill. You know what I mean? It's the basic off the basic of the platform games, so But in any platform, game is usually a part where there is snow. So how we create snow? Obviously we don't need the grass, but we might need pieces off ice. We might need using the pencil to work to create some snow. And we have to color this one as well because of snow. So if the took part is white and this can be some very light blue or gray, my grass is already looking like icicles can even make it longer and different. And then usually, although the frozen ground doesn't look like that, the whole feeling off this icy levels is blueish because blue is a cold color by the color theory. If you are designing game yourself, I, uh, suggest looking to color terror theory a bit, so nobody is a warm color. What is a cold color? There are so many things color it means socially, and you're just looking to that. You can learn a lot off useful thing for your game to express the each level better for your player. So usually it is blue because it's a cold color, so I can go for darker blue on the lighter blue in the in between, some maybe. Yes, it's too dark. Yeah, and these boards we create like shines no, and these parts is a part of the broken blood Born. If we really want this to be shiny than we have doink radiant. Actually, I can select all three of them and give them a radiant together because you can do that to make the snow part more visible. I give it a bag down so you see what I'm talking about. Dark blue one. If I would give a background color to this one, obviously it would be a spring ish light blue sky and you know happiness all around. So I have this one. It's almost the same. It was very for us to do. And it has this feeling of winter, So it's a nice addition. Toe of inter team level. What if my level is not in your team, but you know it's under the ground and it's lover is the same thing. I don't need to grass. I have the same blood for if it's love, I would make the stone not brown but love. Ah, looking. So it's like a dark a grey, stone looking object. Us. I don't know Basel it and stuff different type of stone. And then it's not this green. Obviously it can be also like a stone and can be more than love on the door or under all that nice. Go back to this. This one is like this, This one. Is this not bright enough? So no, this is like a stony one, and I can make like love is dripping here, So this time it is not grass it is and replicate. This is a tiny bit Andi. I create that sweep simple light effect from the from the It's a bit orangey, like it's glowing. So, for example, like this, I created a very simple effect off having some dripping level, um, that into this. Obviously you can give a background, which is a former gray and which has a slight orange glow on the bottom. So I hope you like this lesson. These are just a few changes you can do with the basic platform so you can yourself create the tires and assets for this type of platforms, like I created the one with the grass so caught up unending part of middle section on the start, import for it so you can make them available. I hope you enjoyed this one about the titles. Give you move on toe, creating backgrounds and characters in the next tutorial 19. Draw a top down character: so we created plus forms earlier and we learned the basics of escape and we were going forward to create a platform game. But this course is about most games you can imagine toe the environment so I not will only build a platform and game. But if you give you hand, be doing anything else you want. So now we will move on toe to create a character. How to animated in the following lessons. We will create a platform character and making walk and run and jump. But before that I want to make a top down shooter character. Why? Because it's very easy to create. You can get a very simple animation. You can make it move. Yes, very fast and easy. And you can see the movement very fast and enjoy the fruit of your work if you may. So how is a person drone from above? Usually this type of games he has ahead. He has a body. I light in the middle. I opened the Chief Control Ai opened airline distributing new I make the body a different color than head on. How I make it is that we see a bit more from the back because I think he's lean forward. If he has a gun in his hand. Then I drove the shoulder. You see a used base here to to do that, and this is the shoulder on the arm control click. I'm giving the muscles turning miss a bit. So the arm is a bit went inside. Invert Good. I told you already A lot of times, and I'm just throwing. I'm using whatever color is suitable for me at the moment. I'm concentrating now on problem getting the shape us. But as good as I can, you can. You can use references or what else I'm doing now I make a guideline. So I know what is the middle off my drawing, more or less. Here is the hand. So the shoulder is changing and I don't make him such a giant biceps. Good. And what have you do then? He's I replicate this hand. I don't say this, no in duplicate this hand, and I put it here. I can select the two of them together and group it on. Make it in the middle. So it's this simple. If I have a head here and I have the arms here for a simple shooter game. That's almost enough. I give him a gun, obviously use the same color just to keep it in context. That's it. If we have a game like this, we can make him turn and shoot looks. What I would do was well, obviously is create an animation out of this and I would do that on how I would do that. If my guys this more Yes, perfect. This is his standing position. Obviously, I will create work a bit more on the arms so I can go and do, like do it, one off them and cut it off. Here we shall see. And the vision. I have two parts. I completely skin color and make it wide because I'm a Hungarian and that's my skin color. So please feel free to use any color one. And I made this one. Ted, with you. It's like the sleeve is folded back and stuff good again, so it'll be. Maybe better. Believe it. So if he's walking, this is what I want to to then he has one black over its forward, which in this position it's really simple to create. Hey, send it to the back. Say this is his boots to the back and his other leg seems to strive backwards. So his other leg like these and that's also I just control Creek. You see, I put the rough shape there, and then I control freak and edited. So this is what I have if it's not standing but moving than the head is in the middle. But the arm is bubbling a bit, so you will see what I mean. I moved I group of the arm and the gun, and he's center of rotation. And if he's like here, backwards and this forward, then probably is turning this way a tiny bit because he's changing his fighting stance. And then I group up the old character and they just push you ve, you know, flip the character vertical, and you can see this is how it would look in on animation a bit off, moving left and right. But if I push past, you can already see it's really looking like it's moving. So is the same thing you can do in your game. You can just every second you can flip it, who are, have it us to different Sprite, and then you have once pride for standing character and the two others for the running and that. So this is a top down shooter. If it's a top down shooter, then the position has to be around here much better. Be turning former back and you can please. So if this was a very, very short one about top down, I hope you enjoyed it. This is very simple. Want to throw us for every drawing? I always say you some references, So look up in Google Hollow Man is looking on a photo from top down. Or if you live in a flat in the city, just look out from the window and take care. Look how people from top down how the head is over a bit to the front or to the back, or how the head is hoping when they have walking, how the body is turning a bit when they are walking. So always look for references to make your game a bit more really. Even if it's a cartoon character like this. In the next tutorials, I will show you how to make a proper character cartoon like characters for a platform game and explain how an animation is made longer. Animation is made in escape on how you export each part for animation. 20. Basics of character design: in the following lessons, we will create a character for two in platform game, and I will be honest with you. This is a very hard task because you have to create the character which is animated, which is quite the technical and also artistic, but very technical part of what I will show you, how we show you in the following lessons. How to create the Sprite, um, illustrations. 40 or for our animation. But apart from that, we have to create a character which is likable. Reach we are able to animate, so it's expressive. Its movement is easy to understand them to read, and now he's walking this direction. Now he's jumping. No is talking. No, he's ducking. So the different states off his movement is readable. It's also dynamic. It's not static, and it's likable to people so they can feel holding for the little character when he's falling. Then he's dying when he's running, so it's not an easy task. It could be a course on itself, and I'm not ah, full animator to teach that for you now. But what I would do us an illustrator. I will show you my character how I drove it. Um, and I will tell you the stage is how I got that. Because the first if you want the character, you get references. So you get references by going toe. Ah, just go. Go the character type you want, decide for the character and then go to the interest or dribble or Beyonce. And look how other artists are solving this problem off the For example, if you want a little Viking or little robot, you look around and you see what other people created before and get inspired. And then you make a lot of sketches on paper. I don't have a course for sure about sketching later on. Ah, but now I What? I can just tell you. Just get a pencil and the paper and draw your ideas. Play video proportion of the characters and and play with the character. Then throw a lot of them inning escape and figure out. What do you like? We try and which type of character you need and then create your own character. I did all of these stages, and I came up with a nice little guy for myself. He's like a little boy, and he will be like You will be a night So little night I feed it of you and through the It's a very simple character, the most in politics that it easier it will be to animate. Also, if you're working for a movie screen a lot of times, it's good if you are creating simple characters and you are not doing something over complicated because it wouldn't be visible anyways. And now it's also a good time to do this because people are used to retro games again. You know it's back. It's back that you are creating small characters and that you are creating, Ah, simple animations. It works a lot. So what I'm creating now is just a simple body and the small feet I double click here because I want to have boots. I'm complicating the leg and flipped it. This is just now for the having for me, the correct hurting us you see on drawing in blue. It doesn't mean the whole character will be blue. It means that I aim toe, create the shapes and then create the character I want in the color I wanted. So no, I'm just really sketching the character by creating the shapes off it. Yes, he's very, you know, a stick. Let's give him a little toward it is great. So it's visible nice and you see he has visible legs and visible arms. And that's why he will be good for me because he jumped and it will be visible. He will run and it will be visible. You know, the legs were moved and it will have me to express the animation. So the movement in the animation I want, I make the legs the arms lightly attached. Now I can duplicate him. This is the basic character I made. It has a proportions off a little boy, and it is very Tooni and childish. I don't make face expressions. Maybe I can play video that it has a hair so I can give him a mouth. Maybe that's there all I can do. So he's happy now or he's He can be angry. I can play with this mouth in the play with different expression. Let's keep you happy now, and I can make another version from him when he is looking sideways. I will definitely do that, and then I can animating how he's in the different states off movement. But also I have to give him some colors. So if I want to color him like a normal person, then he needs some cool hair, which is purple in this case, which is not a normal person color for sure, but that's it. And I cut this arm here, so I use both and division, which is cutting an object in tow. Us many pieces? Yes, I need This is a very good path operation. You remember path operations like difference. And you Union, this is the This is another one, and it's very, very useful. Why? Because now I created the hand and replicate this again. Flip it, Give him a asking color, which is like like this. You can have son. Okay, Have some are more and some legs. We need some trouser parts. You see, I'm really following the footsteps off Zelda and all the others, so I keep him very simple on Let's make the same thing here. Us cutting his boots, select the vision. Now I have to object. And it's a brown to and that can Why? It is good for me. You will see it in a second? No, it has boards on. Duplicate this with his here. No, for a darker brown. And put it in the back and I can give him See, here is whatever I started in here now. And this one I brown for the sport. Hey, make you the handle of this world is just a little circle. I just take care of these out on one line. So this is online media goes through here, you see, It's well, nine with a circle. And what else I make is I make crist on his body on the tree is very simple. Objective. Both And then I make with dessert on my keyboard. I given additional dot in addition. I know. And then I just This can be any color if it needs a crest. I don't know. So I have a little purple hair. That's a boy or girl. If it's purple contributor Good. And this is matching the little platforms I drew before. That's why I created the character like this. I will give him to you. You can name it and use it in your game for free on. You can modify it if you use it anywhere. Please let me know. I would be so exciting to see him move around. In the next tutorials, I will show you how Toe only made this character how to make him animation states. As I said earlier. So jumping, Crouching How is this all doable in escape? 21. Making character states: So we created our character and I hope you were able the golden or did you have so far to create your own? And now what we do is create different stances. What is character? What we're using her platform game. So obviously this is just a corrective and he's standing. So what we need is that he has different stances. Going one direction, going to the other direction, jumping, crouching, crawling, fighting, taking a heat. You know, there is so many things that can happen to correct. What I do now is create the standing in one direction and walking in one direction drawings and the one about jumping so just modified its first. And in the next lesson, I will do the animation. But so if I know that my character is going this way, then I you know that his face is turning These head is turning. So I'm just doing these. See, It's already the head is turning this way, but I should do with using guidelines. You know, I told you already that the guidelines are not part of the exported image. They are just there toe for you to measure. Uh uh. They're just there to measure the distances. So for example, now I see that the line hi height off the hair has to be the same, right? And the height of day. The model has to be the same. So I'm just putting down more. That's a good head is the same vague. That's nice. Show the rookie. So if I want is to be on the side, then I can because my character is very simple. I can easily change it. So I just turned both of the legs this way. This guest like these this one. I can sell it to objects and use the Noto and we don't know to leave. Two objects are selected. I can select nodes from both objects. I moved these parts together. Seymour turning need if it's turned, this leg is higher. Don't, uh, make him be thinner from the side, you know? You see, compared to this one, he's already turned in this direction. Then the arm on this ward come closer. I can make sexually one group Scott org, and make it this when I make another one. And this one I sent to the back because that's behind. No, I just flipped it. So the army's like this has now like this just made to be. But I have no, I have legs, arms, plicating this neck. So now he's from here and he's turned in this direction here. The leg is good because it turned sideways. This is turning around circle. So this leg is higher. Same goes for this. I am intimate. Lower this one. This one's higher. That's fine. What also can be that this ones in the background which are the back leg and the back arm are a bit darker. So this one his darker like green and Dr Brown Okay. And the same goes here. This one is the same dark green. This will be the same. So if I look at it, I see that this one is the back. This one is different. See, they are covering each other even met. So I have the position when he's standing. Decide this one is already a bit how you do the animation because basically what we created now is pop it with the popular about body parts. This is why I like escape. I can remember the center off rotation this little plus I just move it where the joint is the shoulder joint. And they just didn't, um, make it home, so something. So what are the moving? So this is how he look from the side. Same goes for this arm and for this leg. So it up and he spent two. So this is how we look from the side. And do I have to drown out the left version? No, because I drove only for one direction, and then I will just in my program. So even if I'm using gamemaker or amusing unity to the whatever, I'm just sleeping it in my drum in my working environment. So in my coat and that's it. I'm sparing, uh, with the sprites, and I don't have to draw everything twice. This is a very good stuff. So I just flip it to the other side. So I have this. No, I have to make him jump. If he is jumping, is jumping, lets it is this high. So it's a good one. Okay? Don't make him born. When he's jumping upwards, I can turn the body turned ahead. I can make his arms swinging upwards off the and I can make him that his leg is also banding because I want him to pull his leg up if he's pulling his leg up. Obviously his leg is getting shorter in this part of the leg. Getting shorter on. That's one thing I can delete. I can make it even more bendy to do these, you need reference. So if you know how the old Prince of Persia game was made, the designer of the game just made references videos about his brother and he used the rotoscoping technique, which means hand rowing over a video. So you take the video, take snapshots from the video and throw the figure over the video. Hear more like this. Yeah, and the same booth. This, like separated clings. Yes, much better. And I make this one use the same dark green and dark brown what I used before, and that's the beauty off it. I can get some objects and turned them around, make them a group and everything, and I can modify different objects. So, for example, this, uh, belt Now I can modify that. It's, uh, changing around his leg because his leg is coming up and coming down. You know, it's changing, so you can use a reference so you can do it yourself, My heart, how I do it just to have fun. So what I'm doing is that this is how he is jumping. This is how he's standing and then the next one I will make invoke. Basically, I will do the same thing. What I do here, I will have the guidelines for walking. I will have the A leg and arms moving around and those walking I I think I'm making right and these legs I would make bend. So you made the basic shapes what you want with the leg, basic movements and there you can find to. So exactly what I want to do now. If he's jumping up his arms were, get up like he's, you know he's doing this. And when he's falling down his like and straightened out, that's another stands I will drop. So create these two stances, the standing and jumping for your character, just for now and then we will move on to the next one to create a walk, cycle or run cycle. In this case, 22. Another guy: simple blob character: So we movinto creating animation. And I will tell you what the details about how to do that. But first, and let's make a more simple character like an enemy or something for our creature, for our hero. What I do, I just do some circles and let's make a general blob creature. You know, these mouldy blobs which are lurking in the dungeons on they not really smaller. Not really fast, Not really strong, you know, They're kind of lame enemies. So I create. It is like I just make some legs, which means bumpy circles here and then upper body, which is another lump I created from a circle. So I just turned a circle into our both with chief control, See? And then I'm creating my little creature Victor. Yes. So this is what the body looks like. I make it a little lighter, you know, meeting two keys, like yes, again and replicate. So it was just really It looks a bit like a letter. A. But you know, what I mean is a little lumpy creature. I make him a bit more Vaida on the top. When you are dealing with nose like this, you can just showed earlier. You can just play around with the no handles and I make him a little mouth. Anything to earth. That's it. And here I have a little a lumpy enemy. So I will make him move. But I will do is that he is his state. Asai told earlier, always duplicating escape because you can and you should. So if I know that this is his size, then I put the background behind him and I anticipate the amount of movement he will do. By that I mean that the maximum people move on one side Is this one and down this much so I don't need more than that. Maybe you're making beater longer, so it will be an easy character to animate. What we will do first is we said the ground. This is very standing. We were set the height of the head. First we will see how it is changing what is happening to us. And I'm not an animator. But I want to tell you what happened. You probably saw this in a lot of places. How we only made he's like promising bold. And you know that when the ball is bomb thing is a bit pushed. Then it's getting a bit longer than here on the top. It's much longer. Then it's getting shorter again, winds down, it's totally flat, and then the whole circle comes again. So it's like really bouncing when it's flat and you know, then it's getting a longer again. So we know animation. We do that. We stretch the stuff strange the character a bit to give it more dynamics and expression in this type of animation, what we can do, any escape, we can do that. And also, as I said earlier with the character in the previous lesson, we actually ate in kind of a puppet and remove the body parts around with a character like this, a jelly character. I can move him and stretch him or whatever, but I still can move the body parts around. In this case, the body parts I really move is only the I and these two legs, which are two circles. That's why I created him now. So we will see how easy it is to create an animation innings. What do you happen is I take this character and I say, like okay, This is where it starts. I want him to go this direction and I want him to vote. So I I gave him and background. This is where I will select an image and, uh, I will talk about that later. Now just drove background in more or less the size you want. Toe export the character animation. So I have my first things and now I want him to move. He's lifting his leg and I deprecate again. He's lifting more and starts to leave this one. There is one point when he is jumping India. He's lifting this like more, and he's lifting. This one has also no, he's. It starts to put this one down still lifting this. And no, he's Overman was putting this down, still lifting these as he did here I can set with the guide. I can set a maximum for it so I can say the maximum top It can go. Is this from the muscle down? It's this one. Yeah, it's a bit in the mean yes, coming down the sisters to come down to. It's slightly and then this one cannot come down more, but I can make the body come down a bit and make this letter. This one is coming down to here. The bodies coming down again. I have not much, really, just bit. This one is getting flatter. This one is coming down once again. If this one is down, it starts to bones. So the body is coming up again and the sun starts to come back. You see, I have already going up, going up, going up, jump, look being done and then going up again. So after the last one, I could cope here the 1st 1 and it's coming up again and then in the 2nd 1 And that's why it's a walking cycle. So you see, I just moved a bit. The I just moved a bit. Their legs. I can give some extra. If I having more or less, I can play with it like I want the leg to come a bit forward and I can do it like this one quick forward. If it was one here than it's to here, If it's to here, then it's three here. It's coming down here, so it's only two. It's coming down here. Total. It's only one, and then it's back to place. You know what I did? It's going out coming in and then it's coming down again and then is jumping up again and then circling, circling. I have 12 images, which is amazing, because this is what I wanted to help. It's your animation. It can be very much simple. So this animation could be like middle part up in the air and getting down part, so it could be just this simple. But the more you make, the more fluent will be our animation. Off course you are playing video games or creating the end, creating video games. You know this the frame per sec determines how fluent is the motion in for cartoons. We can say 12 16 or 24 frames per second can create a nice fluent animation, even with a few, because a lot of times you don't need all the stages and everything very fluently. But this if I would export this would make a nice bounce. Animation. Holy export. This. Now I have several options. I can, uh, put these on export than us. One image and make a sprite. However, do that I group up has duplicated, so we have enough place. I group up each on his background. Just pushing control G crazy. Okay, arrange in a more or less. I can put it even to line. I can arrange it into tool, and it doesn't matter. Yes. Um, and now I can select all of these and go to fire and export wheat map, which is letting me to export us PNG. And then I will have bomb big if I show you export beaten up. You said the resolution. Native escape is 90 dot orange. That's good for a screen resolution. And what I do it exports PNG. And so it's very easy. I just still keep the selection and you see from here export area selection. This would be exported us one image. And then I imported us a sprite in my game editor program, for example, in game maker or you unity or whatever you're using and set the ties for the Sprite set. So we created this pride set, which is one image. It makes it smaller and it makes it easier toe call. The other thing we could do is create this export wrong by one. Actually, I can do it with the shift control to call the export window. You can export them these groups one by one, and name them accordingly. Or you can select all of them. And you see that is batch export, which is, if I take it in, it will export all the objects into the folder where my finally safe with the fine name and the numbers. It's very easy and very convenient. It means in Von Creek you have 12 different images, which separately I can import into my game editor program. Also, I do that a lot of times just because it's so fast. And then with any gift editor, even online, if edit or I can sell, I can edit my animation and see how it moves So I don't have to play around and open my program yet. But I see in a GIF animation house moved in my animation, how much it is working. So this is what we did now very simple walk cycle with this group creature, and now we will movinto creating the walk cycle for our more complex character. I. I strongly recommend looking up, walk, cycle online and check some pages for animators. If you want to create a good walk cycle. I say you can. You can also, firstly create just three stances. But the more it has the better fluent animation you have create a simple character like this and have funded it. And then in the next lesson, we will go and create our complex Carter books. 23. Set up a character walk cycle: in the previous lesson, We created Walk cycle for Group for the Globe. It was rather bouncing them walking, but you got the point off. How toe create a basic animation inning escape. And now we could create something heavier reaches of walk cycle for our main character, which is a normal human character. So he has a body and the head and four limbs, even this word in his hand, and to create this it's a bit heavier because you have to take care about how the character moves better than what you did with the Blob. Um, fearfully toe modify. It also was the blob and create your own character. If you want to know more about work cycles, you could go toe the angry animator side. He's providing some great tutorials or just go go go off cycles and you will get thousands of reference images to understand. Whole walk cycle for human body or animal is building up so you will make fluent animations for a little game animation like Mobile game. You don't need 60 frame per second animation, which means you don't need very very fluent meaning. Key framing between the key frames off the movement. A key frame off the movement is the start and big. In the end of the movement, for example, you see, I did this earlier. This is a group, and if I want him to step, I would like seeing his swore down. This is the first key frame, and this is the second in between these in flash. These are called means. So whatever happening in between, obviously there is no escape is no, not an animation program. So if you want to do it in animation program, you can. You can export your character in PdF, for example, and use it in, for example, flesh or toon Boom's todo to moon animated to Boom is very good toe the animation program. What I want to say is that animation is very, very heavy trade, and you have to really take care to do it properly, and you have to learn a lot on follow guidelines and check millions of tutorials. But what I will show, you know, again in escape is how to make a simple character work. So it's one like one on other leg and the head. The head is still several objects, so I make it one, and also I put his neck around here lower turn off, snapping. This is snapping here, and if you see he can bow his head and what I need is again the guidelines of the motion. So which is the what is their very tried of top height off the head? What is the top part of the leg? But what I do now being different because I don't want him toe just voke. I want him to dash to run a bit, so I duplicated. And if he's running, he's running, then his body, these then his body has to be bending forward. It's always good to watch for reference of images or, if you do support yourself, is good to know how it works. If the body is coming here this way, because I turned it over that access up here, I will also turned the bottom part. I have to keep this separate for the lack. The head comes a bit forward and one leg to the back. One leg, two different. No, he's looking like he's just standing there, really bought. What I know is that one leg is hitting the ground and pushing the character off. You see, I can shape the individual elements as well as I did before and I can turn them around an axis. Andi, The walk cycle has different stages as well. I just realized that these brown has to be totally in the back and he's running. He's looking a bit like this and obviously one leg back then the army's going forward than this leg is the front than this arm in the back is going backwards. I also give some knees Here, You see, I don't create the joints now separate objects. So I mean, every limb is a separate group of separate object group so I can move the leg and everything. But I don't create the separate object from the lower leg in the upper part of the leg. So he's dashing forward. The arm is like this. This is the middle off the motion of it. So what happened then? This leg Go upper here and bend this like we'll go this way, show you the next key for him. So this is the middle off the movement on. So I said we put the guidelines more or less and I signed. That was the start of the head. I put this aside because I don't need this now. And what I will do is exactly the same thing. What I did with the Blob I gave it. Give it, ordered their background. So I know what I'm doing. I can change the color easily later on. I just needed now to differentiate between the different elements off the body. So no, I give a nice color That helps me to see what's happening. This blue is fine. So that's it in the next game. This arm is going forward a bit. I know it's even better if I make it like show you what is the middle of the animation? The top is this one. That is this hand is like this. This hand is like this and it's turned and obviously no, I just don't like with it. You don't need it. Have some dots. I don't need that. Just delete them. So the nodes I don't need is easy today. Yes, and this one can come up. Is it? Uh and I wanted more bend. Yes. Again. If this one is turned on, you can move. Selected nodes. So if this iconic stoned on, you can move so lefty nodes as an object. So you can Yes. So this is due in between for the top off it up off the ground. You see, the leg is bent. You make it a bit shorter looking. And I make the whole character a bit going up because he's really not touching the ground. And he's really like jumping. If you remember, it was the same up and down movement with the blow Bosvelt. So this will be when the leg is here. Then the leg is opening up and arms are opening up and they're swinging off. Imagine that the running and walking is really, like swinging and throwing yourself into one position and then switching legs and arm and then repeat again. So at the end, we will come back to this one. I move this apart because there has to be at least one or two frames between these two movement. If it's just going from this to this, it will be, you know, very well to say start, Torri, you know what I mean is gonna be not gonna be fluent, So to create this front movement. We will have to replicate this one and make it closer to this. So I just replicating on again. I was in the group and they didn't select properly. And now I do with backwards what I did. If I see that this is the height, the top then I can say that everyone is coming down on lunch in between, you see lot roughly half me and the arm. His midway from here to here. The other arm. I was down here before, so I moved here. They say I'm constantly comparing these two images and the leg was here, Standing years up. I even conduct lacatus leg. So I see. What's the difference? It's supposed to be here and support to be like this and maybe even less. Bandy. No, I did it that I don't need. Same goes for this one. It is up here. It was down there. It was standing and longer. And now it's in between. I can delete this. I think it's place obvious. Descending it lower page down. And I saw a little mistake here because maybe this like would be even. Oh, yeah. You see the bend the knees bit more. Even as you see, this is a slow process. I'm showing now really just the basics, because this is really a long thing. I could see a lot of work in this, but we are already getting there. He's going up after that. He will obviously come a bit lower again about this height and then to get that height, we could just replicate this, you see, because the hand is reaching the top here, then it's coming back. Then it's swinging and again, I think we could have this one. 24. Finish walk cycle: the middle. I duplicated again and I create something like this. Another high position. I always hold control. So I know what I'm doing. And I moved a character in the line. So what's happening here? I need some more position. So what's happening from here? From here, this leg will come forward. I move it forward like literally move it a bit and it starts to open up. And I do the same bending and everything. What I did with the other leg, I move this. This arm has to go totally in the back, police it out of the way so I can edit the like. You see the food, Same things driving forward, but really covering the boots. Nice. And if course the back leg switching a big and coming backwards and it can bend a bit. Not much, but it has to be so He's really striving. I have to put this arm out of the Vania. I couldn't make the in transparent. So just get the whole group and make mega dope a city zero. But it's fine. So this is done. It's about you. Yes, and I have another arm in the back which is no fully forward. So you see, I have to type of sleeping front leg, back and front Time and back, leg and back home. This is the same thing. Left, right, left, right. These are end of the motions. This is the between. Where the car After switching? No, we were from this one. And this one We were created in between. And then we will create another in between here. And then we will get back to our first frame. You were seeing a second how we do. And that will be a look. Obviously you can't White dragon. So I move my car. It'll be to the side from a place for the other group. And I again made them between. Go from this to this duplicate now and replicate this one. I always just decide myself, which is easier toe to use. Just make some place, okay? And obviously the arm was here. Now it's up here. It has to be in between the armies up here. It was in the back. It can be totally in between again. So it was being up to the This leg is here, and it was in the front It's a lot of movement. It can be here. But first I have to move the whole character. Don't again. Committal. So the leg was like this. They're standing almost standing here. It's like starting to go backwards. You know what I mean? Just starting and this arm and just take it away again. I will fix thing. And just in the way of the legs. This leg was also up there, so it was dire up there before it was beaten back. And now it's switching this flag. Is that punch the course. Then be here a bit. You see, from 1 to 3, totally up. 123 totally up. Same goes for the arms and the head and everything is a bit upper and know if they like here. Then again, it can be a switch because they go off and they come back. And then because they switch, they are again here in my middle position. Actually, I don't need this because it's the end and start of the loop is the same. I just wanted you to see how fluent it can be. Read eight frames only. Obviously, if you make Maurin between frames, the more flu, anti war movement and animation will be. I know that we will have this one. We can export the difference. Brides. I could talk about how the export later Asai was showing before you could select all of these and batch export. And you will get image 123 to 8. And then you have to start and grow everything to the going to the left. Okay, I'm just kidding. You don't need to drive to left because any escape, it's so easy. The you just select your animation duplicate, and then you just switch it. It doesn't. You know, it doesn't make a difference. Obviously, if you switched everything, it will go back first. So you have to switch each of them. But you get the point. It's very good because if you do everything facing, for example to the right, then you. When you finish, you just save your work, export. And then you switch everything toe left. And there you are. You have all your resources, what you need for your platform game. Okay, so this was a bit heavier tutorial. Take your time. Draw your character. Look up. How other artists and real animators, which I'm really not. I'm a graphic designer and illustrator and he's a teacher. So look up. Our real animators are doing walk cycles and learn from them. You can also look how people are moving. And if you were working for a little cartoon character, don't forget to exaggerate the movement and just polish in animation. But for start a simple animation cycle like this, one can make really big different because what I see a lot of times in games that people are just creating a figure like this and they just shuffle the legs. So one frame is this one, the other one. The leg is forward, the other one is backwards. You know, when he is going, just he's just shuffling the legs like really doing a forward moonwalking, which is not how Iran and how we play and hope for you. So take your time and look up a lot of references and then create your animation cycle, ending escape exported and use it in your game. You know, we will move on to how to create other things like backgrounds and yeah, I have a lot of surprises coming for you. 25. Understand backgrounds: We created characters on blood for earlier and as I said, we will continue now with creating backgrounds for our games. The background review drove whenever show you how to create is perfect for platform games, but it can be very good for role playing games. Andi, even possible games. Anything you want really have to show you how to use the tools. Basically, this will be a nice drawing, exercise and practice. But what? So I will tell you the mistakes I usually see in mobile games to the mobile games related to backgrounds. And I will tell you how I build the background, how to create inning skip. So first of all, what is a background and how it adds to your game? It is setting the mood and it has to be on a related to the character. I will talk about this in the next lesson, and if you really want to understand how the background is build up, its you can go back to the old Masters. And this is ah the wonder above the mist from Caspar David Friedrich, German painter, and you can see how he built up this painting because that is clearly a foreground, but the figure is standing and you see all the little details. Then there is a middle ground with this focus rocks and the trees and everything you can see that's already very far. And in the very, very far background in the distance. You see, it is even more for year blue pale mountains, and this is setting a feeling of distance. If you can create this in your background illustration, that's it. Then you said the mood that your platform game is not just in two dimensional, but he's running in a through the invention, but the space behind it is his infinite. And if we're talking about classic masters, if we go back two Sonic from the second mega drive this is the blue heels are green. Here's own Sorry. It's the same thing you can clearly see. This is the foreground. You can see every piece of grass and trees, and this is where the character is running around in. This piece is active, and then there is a middle ground. Richard is the sea and the waves and everything in this little island and in the far distance. There are the clothes And then there are the heels and you know that you can distinguish the background in the foreground and you know that. OK, everything here is active can hurt me or I can jump on it. I can use it as a platform us. Everything here in the background is clearly a background. So that's the difference between a character background and, uh, foreground in video games. And that's what already leading us to one mistake. I see a lot of games that they are not in harmony. So the character in the background drone in different stars and that I see also engaged that they're not matching clearly. And you don't know what is active on what is not. What is a platform I can jump on and what is just a decoration. Because clearly with that, I'm running around with sonic. I know that this one is out of my reach, but I know that this one I can jump on you know what I mean? Always when you drove background and you drove your objects contemplated this this matter. So this is the This is what I wanted to say about relation, off background and characters and how you build up your backgrounds, and it might be funny that I go back so far as paintings. But really, guys, you should look up on Google paintings and definitely landscapes. If you want to create a green backgrounds like this or take a lot of photos, you know, photos have the same feeling to it, that is, foreground. Mid ground background is very nice. Landscape photograph. Um, so in this one in this world, first lesson also, I want to talk about to beat the resolution we're working with. The most common for Android is Ah, 1280 by 720. This is just one of them. We have a lot of resolution that iPhone six has a much bigger resolution, and I just usually use this because this is comfortable. So it's this big. It's fitting perfectly on my screen. I can draw on it, and I can do with my sketches and everything. Um, and because this is Victor, I can modify it easily. I will talk about it later in a in a lesson. How to modify everything and how to create for the different screen resolution. That's very important for us now. in the age of mobile gaming. Okay, so in the next lesson, we will move on to actually drawing a background. I hope you enjoy this one. 26. Tiling backgrounds: As you see, I copied the character in the platform on this background shape I created. And it was just for reminding me all the time that I want and tested all the time that I want the character somehow blending and also in the same and standard from the background. It is what I was talking about in the previous lesson that the background has to support the character. So they have to be the same style. They have toe fit together. So the viewer has the feeling that OK, this is the same game. But this piece is active and these pieces inactive background. So it is now just for here s a reminder whatever you create now in this lesson, he's a simple for his background for this character. And then I will make some other versions of that and help you do that. You remember in the previous lesson we were talking about background middle ground foreground. We will do the same. So first we will have a background. Then you will have a middle ground with some objects and then in the foreground is actually my little guy and his platform and all the active elements. I just signed him like this. So this is just like a sketch for my figure. So you can imagine. You can imagine what I could create. I always do sketches on paper, but I don't scanned them. I don't make them, like, you know, perfect sketches. I will talk about vice Catches are important in another lesson. Basically, what you can do now is on a piece of paper. Just throw how you would imagine the background with everything with trees and everything and the little character in it. And what will you do now is created different parts in the background. So I want this the background part off the background. Okay, you know what I mean. So the one which is total in the background and inactive, I want it terrible. So it's repeating and I wanted to be just or trees and some mountains so I can do it like let's draw some mountains. If this is my basic shape, my basic back it on you can create nice mountains using the busier tool. Basically, you just quick If I decided the background calories, this type off sky blue can give it a radiant. This is the background. Then these mountains can be also having radiant from this color to something dark. It's transparent again. So what I have now is distant mountains and fogey mountains. Uh, and now I'm just control creaking on those heels and with the control click. You know, we were talking about this earlier, but I always have to tell you need little tricks. It control. Click. You change the node from a square toe diamond. What? The opposite. So you can add some bumps and curves to your design. Same Grady, and apply to this one. No, it is which is? The opacity is set to zero accidentally. You need to know that any escape If something is not visible, then it just might be the same color as the background or the opacity zero or the offer value off. The color is set to zero. It's something nice to know. This is what if I have the accident that something is not visible. I know where to. So I have these two type of mountains and I want some little bushy trees on the bottom and close this part, and they also want some clothes just to create this one. I've you use the spray toe. The spray tool is, um, perfect for sculpting seamlessly, seemingly random shapes. So exactly when I want to create a little folk, I just so like this object and go to the spray toe. I set up the read the amount A rotation off the object at the circle. It doesn't matter. The mornings irritation, the more random irritated the objects will be scatter and focuses also for random izing you're spraying and these green icons are for if I want to create copies of the same object if I want to make loans or if I want to create one single object after I didn't spring. So now I just want to create some clothes. I make them red, so I'm they will be visible in my design and scare is nicely set. Did I make a bit lower? And I would amount to me and that these are individual objects. If I zoom in, I see that these clouds are nicely at the table by speech. The view too. Old line. You see how many objects I have with control? Five icij beg of you Not that can play with them What I usually do close like this. I when I'm happy with the shape I just magic together. Give it a nice color, not very wide, but I with the color picker. I Yes, just I need a little bright blue. Make it a bit more bread. Okay, Done. And let's make another type of clothes because making using always the same object is not a very good idea. I think you always have to have some a bit off extra work to make your game seem a bit more under So you can do like three different clouds randomly changing stuff like this. You know what I'm talking about? So don't always repeat the same club, but even like now it's, it seems a bit more random. So it's working. And now if you use the same exact mental to create the forest here, and that's just being taking this, making it even smaller, making the amount even more, it will slow down your machine. But don't be afraid overseas. You see, I make the brush bigger, which means that Biggin amount of stuff is coming out every second I'm holding the mouth, but they were scattered in a bigger amount in bigger silver fees, just roughly going on even more. I just tried toe randomly, having fun with these dots and really just connect everything so none of them is standing on its own. And then I just fix it. And now, just to make it even be good, I have a bigger bull, he said. Like that, and I feel of this bottom part. We just bigger balls. It won't be visible. You will see in a second what I'm creating. Basically, I want to create one shape, which looks varied on them to have the effect off. Yeah, hold on them before Dusty's. I just selected all these hundreds of objects, and now I control. Plus, I merge them into one object that's perfect, And then I create for us color from it. I can, because it's a far distant. I can also create a color between the green and the blue. So I pick a nice, alive blue green Andi. I make it a bit bluish by using the color of the bacon on. That's nice and here on the background, I can again, and another layer of these and give some off is green in disappear. I sent it too much to the back. Yes, and I can give this one a brighter color. Us. It is coming towards us. So something like this and here is one little trick I want to show you because I want this one this very background, very dark, far of a background. I want this one repeating. So what I do, he's I da placate my object se times here I duplicate my object. I check where it is God exactly here and where I can just do it like this. And then I move it on the other side. And I use division to cut it into two pieces. And this one comes here. Shift control Ai aligned. I opened the line window and that comes to the side. So what's happening? I have to make some trees also here. So the forest is continuing. But what is happening now? If I select all these, make it wrong group. So it's easier. Easier to move If I select all these and I tied it, it's just one image. I have an endless, fallible background and now I can put my foreground on it. So this is how you make a valuable background the three kids to match up the two sides off the image. So I was cutting it in half here, taking this part and putting it on the other side, and it's seamlessly tiling and you can make him understand game whatever platform game you would like to create. So I have no this one more thing I would do is just maybe a little more off this three life things in the middle. So just he had a few of them. Basically, that's it. So just just make it repeat a woman. Just make it like a forest in the background. So that's it. I have this one on this one. I merge together as well. Control Plus the ship Contra G. I opened with control G. I closed the group again. So everything is in the group. Let's see how my character is looking on this one. If I want them to be this march in the front home, I put it in the front, so starting to look fine. I imagine him jumping around and he's clearly visible and that's neat. I still miss a middle ground, so why you just create some threes and rubraca bushes and flowers and descended for the media ground in the next one, and I will show you how we arranged it. 27. Foreground and background relation: we have, ah, tiling background, and I just put the character in the platform money just to see how they match. And they're quite okay because you see that the character in the platform is quite bright, and, uh, it has a lot of little details, as the background doesn't have much. I mean, the clouds and the trees have some, but they're still insignificantly a lower in detail and variation than the foreground elements and active elements. The only thing I miss from this picture is some middle ground element to build some even more distance. If you remember the picture and how it was made in Sonic or if you're checking out their dreams, middle ground elements can end a lot off that to another wise to the game. So how we do that is we are very resourceful again. On review. Create some object which can be reused along the game. How you imagined that? No, I'm just doing slam. Uh, I'm just doing some sketches. Imagine them a sketches. I imagine that the little figure is jumping Ah, in front of big trees or under big trees. So that's the background then this is the this is the middle ground. So my character is still visible. My character is still visible. He can jump. It's like these, you know, just just playing around. You can jump to place to play from place to place and have this three behind, and that's it. So let's make some big trees. How usually created? Three. He's I make a sketch like you. What? Just so before. So what? Three has a trunk and it has, Ah, the leaves on the top with chief control. See, I create both. You remember objective path. I create a path from the where I just drew. I make some modification, so it's a bit thinner on the top than it is on the bottom. Not much, really. Just and then I duplicated. I duplicated again. I'm basically roughly building some branches. You know, The basic rule for three, if you want to draw a tree, is it looks very random. That's one thing, but it has a lot of small rules that keep this seemingly random thing into a need algorithm , actually, so I can't say it's more or less happening. This is a yes fine. And here will be just the top of the tree. I can make the three going from this background green into another green, you see, and what I usually do to May to draw my objects. Hi. Save Now I duplicate this. I select all the elements I duplicated, and the emerges together with bath unit. So they are one object and I can easily modify. And for example, here I want to make a bit off. You know this. We call this like an armpit for the three branch. You know, like it has a thicker lower part. I can make a band. I can't make this branch coming lower. Rip it up for it's and finishing. See, branches are always seen over towards the end because they grow from a base which is thicker, and then they go through them. So I'm just mortifying now with no that it or tool. I just modify the three a bit. I take all the nodes up to this level and say, It's okay, and I have still the one which I just edited. So what I do and replicate that again and I just play around, Uh, I flip this, I said, like both of them and they had done together. I do. You leave this part, make this one longer. I bend the three a bit and again I merged them together and delete the nodes I don't need. I don't need these. Have one continuous line and they try to put up everything at least this height again. I'm just working very roughly here because I know that until here I recovered it with leaves off the tree. That's it. But this one I have to make very proper, because this will be always visible. Nice. So what I have is to a different type of trees. And I have you with the spray tool again. Have you at some Levi bushy parts on the talk first. Now just roughly. Looks like a broccoli. I know, but trees are big brokerages. Anyway, I don't make the took part. I can finish it and I can make it. But I don't need it now because I imagined this trees visible only around here. And that's it. I have the drunk, I have the branches. Let's move everything a bit sideways. Okay, Thing goes again. I said that this object and let's pray another nice broccoli and What more thing I do is a create a leaf it control. Click ideally, the notes if the note handles so I haven't imagined it looks like a water drop. And I said, like these push them together. I have a shape of relief and this is how this pray tool is working. You see the rotation If I started to 14 their bit random. If I said toe 56 they go around everywhere. I don't want that what I want. I want that bitch randomness. So what I can create is less all right. It was like 15 or something have on these direction and just a few leaves. It's visible that it's a three, and then I individually can turn them that just to make it visible that it's three. So sometimes I can spray in some more leaves. And then I select another early if I want, and I do the same on the other side. Just a few can even do it by hand. Replicate and create some other, please. Yes, if we play the same game here, I believe, leave too much nice even play that they're not touching the three. Yes, and then I said, like this one And they do It is here. I cannot even more on the talk. Just read it between and I just a bit more so. I have the feeling that it's a three and and that its a three and it has some leaves, some lose lives on. Guy was here, just here and there, you see, just for showing doesn't have to be perfect. It doesn't have to be everywhere, and I will do the same thing here. I just I anyone Nice. You see, I'm doing what I'm doing now is exactly what I always talk about. Why escape is great for us. A game designer because you created something, reused it and modified it to give the trunk and the branches and then you. You then created the leaves by making them totally random looking, no image editing movies together. I don't need them anymore. Just wanted. Plus, that's a lot. It will take some time. Yes, on No, I make the branches and the trunks, so I just I know my trees will look more or less about decide size. So then I know that I have to make it lower because I want them higher. Same goes for these three. Make feel free. Make free to create as much trees as you want. Of course. Modified the ones. I will also us everything. I would give you also this flat in this file so you can modify, build, create your own trees. It's a lot of funding escape. That's it. I also make it lower and how I cover it. He's starting from his bottom color into a darker three branch color. Three branches are not always or necessarily brown us. We know it and they're more of a dark green or it depends on the lightning. They can even be blue. Whatever you like. I go with this. It seems like a shadowy, um, three. He was the same. Perfect. So, no, I just have to tree standing. Let's see how that works. Just opening to merge it into one group. So I just have ah, I group up my tease just to see what I do and replicated Chief Control G control. Plus, So I have exact the same position. Is that the same size flat, sir face And I use it us a clip, so I see. Okay, my game is looking like now and I move my trees us I want and I see that I can change the top So they're covering more and the bottom can be nice. Ah, this need this little guys in the front Let's see how he looks and he's jumping in front of the trees, you see is standing out nicely. So my point is that I created some trees for the middle and this trees feel free to use them anywhere. So the point is, now I have this little when I finish them in the way the big ones are just giving them this nice Grady. And you can use any color. You can have them. You're away. That's for now. I make them like this. And also in the in the top, I can add, uh, some additional more media ground Ellen pens, which are some other trees. If I say these are this type of lighter color, then I can use this type of darker to create a feeling off that the three still continuing . That leaves are still continuing in the you were seeing a second. What I mean is justice. You see him and then I just feet this part as though No, my three. You look like it's also continuing in the back. Yeah, I had some left like this. So this is my three. I will play the same game here. So you understand what I'm creating and creating more depth with my three In a way, that and it's too dark. So I created yeah, under so fighting off my trees and I had them again. I can make them a group. You can make more threes also, I just replicate them. That's why John bag like this, they're like you see, you have the feeling that the trees are covered perfectly good. And then there is some background still. So that's good. More I can create. I can create some stones in the style of this one, and I can create some bushes. But what I'm also missing is some foreground. So if I know that this part of the background is this big, then I just got beat out. Chief, Culturally, I call the Enlightenment window and that's it. Now we have some grassy parts and I will line the same signed the same color, which I have here which is a bit yellow with greenish but to help me to create little bombs and later and good our species. But is the point of being resourceful is what I said in the beginning off. This lesson is that I can have these elements separately and I can reuse them. It's just a little broken. Some store in some grass I created. I can have the little trees. I can create another piece off rock using the same color which is here. The second group and another type off row could be tired. One. See, I'm just using the baby to just create some lighter parts and dark reports and such and somebody toe broken off rocks again. And a group it s O So we have some tiny resources, are stones and broke. And if we use these, we can have a feeling off. Really something going 28. Backgrund mutations: I hope you know, we're getting a bit used to me saying that how amazing things kept for this flexibility and how you can create very where style object and just modifying them for your need. And, uh, you should You should think about it a lot and think how you convey use pieces. So you remember we created this platform actually from this basic platform, changing only the colors and the bit the grass hanging rush to changing toe bicycles. And we created different feeling. It looks like it's Isis, so let's do the same for the background. We just have the basic background we knew. Roughly the size is here where the ground ends. Here are the mountains, so I just I took it from Iran. Duplicated. I asked my little fellow toe, Go on the side. Actually, you can stand here, my friend. Let's care these things together. He's standing already. Well, then I support and I don't need that. These and I don't need these Also the front one. What I do now is tryingto figure out how a nice apart will look being having the same amount of objects in the front, middle and the background. So it is a record of my mutation off the spring. Uh, for Ste. Said the So you do The home was the same just to be different. If I have these. Yes, I said, These color of the background is very spring. If I make it like this on changing a bit, it's getting colder, darker, a bit windy and wintry. My clothes are not fluffy and happy like in the summer, I can draw my own clouds waving in the rings very flat ones by if I want any close What I would do now He is just doing this. I drove a line with dependency, which is the free, and to I pushed control. L you know, just to if you see control l is removing some notes which I don't need even flat out some I don't want any edges on my club. Then I moved to make some more ordered us here and I finish it also on this part. So what I have is the cloud which can end here and start here. Yes, it's exactly the same method we used with the trees. I tell you one thing which I didn't say before. But if you think about it, you will understand it. Why am I doing it? Doing it like this. But it is not nice. So why am I doing it? That on the tile on the repeating tile? I'm not simply stop here Where the edges stopping Because this is recognizable easier easily that this is repeating. If I would also stop the clouds here, everyone noticed that this is repeating and this is the edge of repetition. But if I cut my clothes if my cut my clothes, you made this London. If I cut my clothes a bit more then I can do the same. What I did with the trees in the previous from the line of trees in the background. So I just complicate this and I can have people feeling that they can not exactly put their finger on it. Uh, that varies the edge off the screen. And for this one, what I want applicator them. Oh, even better leave your marriage so nicely. Just playing with the clouds of it. Yes, it's it on to you, but I do know is a got this one off and I got this one off And if I put this here and it still continues, yes. So I need it to be different now. But I still have the feeling that these a repetition repeating can make them Grady and white too bright And go for the bluish colors now because it's of in the background. Obviously, the top of the mountains cannot be blue. This much blue has to be right. Escape has this amazing stuff that this is going the radiance air going from white toe blue transparent. So the in between there is still a tiny bit of blue there Same goes here. I applied the same Grady. And if I find it, it was this one. Yes, the latest, obviously. And what I also do I play a bit with the mountains. Remember? We were making them a big policy on the top. Be curved. We do the opposite now. I want some. Really? Sure. And I see and read the monitors control cleat. I can remove edges. This one can be so I can keep So we have some different type of mount. There's no sharper. And maybe I told her even I can play with that. Obviously, the ground cannot be. That car cannot be, uh, green anymore. It has to be white or in this case, something like very light. Very, very light blue because they're still in the background. They just make it fade out. That's nice. So this is my tiling background now, very wintery. I just group it for you and through how it goes nice. And what is my foreground is now being different. I have this little guy I can if you can obviously program it, you can make some falling snow. I'm not throwing it. Uh, just throwing it now how it would look in your game. I said it even toe one of Jack. This is how fooling snow would cover up the background and everything. But obviously it's not an object we need, because that's just doable from cold. Just other little particle. And that's it. And I have my fight, uh, surface. And no, I see it that I have to make the background a bit more darker in the front because I needed to stand out. So also, for these two mountains have to give some different color. I have to do something with it because I want this to stand out more so I want maybe in the back I want to create maybe in the back. I want to create a layer of darkness as well. Let's just try that it's discover. Make it even more die. How does that look? Nice Stands up nice. And the background The blue sky can make much, much brighter. And then these clothes, I can make a swell little switch. The views, these clothes I can make stand up because now they are toe visible. You see, I have this cold feeling out down here. And what I create us the background here on the bottom. He's I make it white. I say, like this is the front off it. I will use the same Grady enriches here It's 5194 four. Yes, here I have it. And then set it up for myself. And the objects I create are again the stones I created before I can't have this thing. And the stone is it as well What? I can draw a new ones. It doesn't really matter because no bigger for change. Change. You see, it's very easy. I'm relocating them and that's it. These two. I just want to make them stand out more one. You see, I'm picking colors from everywhere, and I'm using a color palette feeding. And also here in the close background. Because it's a nice and windy place. I can create big icicles. Just not threes but icicles. I know how you make that. Like, really begin broken ones. They look like ice crystals, and you can create some additional alarms off snow maybes Call her. Okay. A different type of snow like this. So that's it. What we did. No, I just don't pull them apart because they won't be visible on divide. They are. Okay. So what we did is just a few very simple shapes. He was usable on this winter one. Of course, if we want the three, you can go back the three shape we have here and create a pine tree in this situation. Appointee wouldn't be that alive. I would give it a different color. I don't need this branch on the left. What? I do it like this. Like it's broken one. See whole pine trees going up for no one. I just created like these make the bottom part. I'm really just drawing with. Then do it, merge it, do the same again. We'll see it in a second through the same again. It's really just playing with the shape. And then I can't put these, make it a bit smaller and put it on the toe. Reusing elementary was in elements all the time. Helping you It doesn't mean that you are not creating anything new. It means that you are using your resources. If this is the bottom, can make even older looking. - And I'm just picking some other colors. So I have the feeling that it's a windy cord winter background. I'm just speaking here. Good. The ends again. I have a pine tree and I can put it also here, and that's it. I have the same effect I had before. My platforms are working. My character is very visible. You can jump over places and go to places. So this is a different one. If you can compare the two of them. This is a winter scene, and this is one for ah, very lively forest on. This is how I usually do. I just modify and think about it and try to make a bottle a solution. So if I have an object a stone which is here, stone here it can be a piece of ice. If I ever three here, which is all alive in the big oak tree, I can make a blue frozen unfriendly three off that in here. I can even make this whole thing a bit called flat color and baked in the background. Maybe that one is even working better for me. So just doing this one and then make a flat one of these. So it's going more in the background. You can create again, play with the three. See, I'm having ideas all the time. When I'm doing, it's up to you only how you put your trees down in your game Editori. So my platforms are even more visible on my characters, even more visible. If the trees after that, it's up to you to decide. So I hope you enjoyed also this tutorial. And do you really want to something else next 29. Modularity - the best Inkscape can do for your game!: I know I was talking about this a lot already, but you have to know one more thing to using Escape, and I cannot say it enough. And this is using escape for achieving modularity. Modularity is that you create one asset and you modify the beat and you use it. It's not coming out of laziness. It's coming out off creativity and being resourceful, so you can be a, um, some assets, and then we combined them in any way you want. And this is what I do when I create. So if you remember how I created the figure, the little character for a platform game is the same. I created it, modified it, modified it, modify it. And until I had the final form, then I used it for the animation. No, I want to show something different. If let's say I'm creating a monster truck game and I drove my monster truck. I just started with some cubes. So let's just start for a few minutes. Let's create simple monster truck. Replicate this now to make the window really doing this Very simple. Now I just want to show, Then I'm having you get out. So This is what they have now, and I can give it a bumper on the back, obvious like and color it much, much nicer Just for now, that's have Ah, no, I said off monster truck, and I'm creating some views just really for the fun off it duplicate. And I wouldn't shift and control to resize the real. It's one type of real, and you can group it to make the real monster talk. Let's putting some suspensions se So I have this, uh, car body now and they want another car and I have make it to pick up. So what I do is I'm not very good in car, So if it's not pick up. I'm sorry, guys. It's what I mean that the back is closed. So, uh, let's make it another car like one dark purple, if I can get it. So in just a few seconds, I'm just creating a monster truck. I can make some flames on it or anything I want. It's really up to me and I throw some friends with depends. Heel, toe. Just work right off play so that easier more of them together control. L. I plead and I replicate this, select them and I do part in their section. So I cut it off. Okay, so I have another truck to pick up this time and I modify my other truck again and they make somebody company all set up. I hope that are such a monster Trucks? I don't think so, But let's do that. And then let's make the seat visible just to make it more different. I could even make the pilot visible this time, but it doesn't and because it's somebody it can be. Or is this time duck? So I have three different cars and I have one type of real attire precisely, and I can make a difference. It's more than I can duplicate this tire again, the whole thing and make some little bumps by getting's toe guidelines from the ruler. So I know where is the middle? See, I was putting the guidelines in the middle, just according to the arrows off the transformation arrows of the circle. No, I made one bomb and I just put the center of rotation in the middle. I replicated and I turn it that replicated and I turned to replicate and I do and it. And then I duplicate three and again and again needed to. So I did. In this. I made this slightly bigger. It looks like a tractor wheels. So what? I have No, I'm not. I have no is one to three different type off tires and three different type off cars, car bodies, guesses, eso. What I do is that I could have the style of this car with this wheel and I could tell this one with this and I could have this one yet these and I would have three card, and that would be very happy, but yes. You see, I ordered the modified this and it was very easy. I created three imitations by modifying and being thinking, escape, uh, in tow. Make it make my assets reusable. So I was creating these tires and these three different cars just using this. But what I can do is I could reuse this tires again so I can make this car different with different tires and with a simple click, I could make it red. This one I could make once more with different tires. Just complicate and put it in place, and I could recovery totally different and draw something. Going to write something on it. Right, Mr Truck, Whatever. You get my point. So delight. So I could have and then again a different monster truck. And then again and then again, So from the pre made things like really like Lego. I have three cars and three type of tires, very simple ones. But by combining them, I can create totally new cars for my game. So I don't have to redrow everything from the beginning. I can just do whatever I feel like. I can do modifications so easily and no, I have six totally different cars. Obviously the parts are almost the same. But the point, if it is that they are very similar but still different, I hope you understand. What? What does it mean? In terms of development, it means that you can give more content to your player very, very easily. You can build your assets, you can create mutations. So let's make this like a military type thing. I just select this splashes, uh, with control. Plus I merge them together. I take this group. I met him together with control plus again. Then I select and they go intersection again. Here I am. It's painted. It's military. So I have six cars in minutes created from these three different cars and three different tires. And if you know more than more can be done so it can be nine. It can be more if I color. I can use these books with different type of wheels and different colors, and that's it. And it's just so simple. I just, um, constantly shuffling a few different elements to create a very, very different process for my game. So this lesson was about being modeler, bidding, escape, create and reuse your assets, constantly saving what you have. I give you this also this cute Montel Monster trucks. If you want to create a game like this, I would be very happy with that. And, uh, so you can. You can create your own ah, more do it up front. You can create robots, little particles and rockets and guns. It's very easy to build, like so you make every particle possible upfront every part, and then you combine them in a manner, and this will also help you to be creative because you have new ideas coming up new things coming up Because this is your game and your creativity, so you can do anything with it. Ah, now we will move on to some other parts of escape. I hope you enjoyed it so far.