How to use Pixel Art Sprites in Godot (beginner tutorial) 🖌

hey it's clear me today we're gonna see how you can work with pixel art games using Godot covering not only the visual aspect of it but also the mechanics here is a demo that we created to showcase some of the differences when working with pixel art games by playing the game you can see that our window here is really small and that is because we are working with a really small resolution because again we're working with a pixel art game this way we don't have to upscale anything either the sprites themselves or the scale of our game objects make it easier to see I'm going to increase the size of my window and we have a simple character that goes on left-right and we can also jump and here we have a small wall that he cannot pass through by the way this art was not created by us it was created by an artist called butch and you can find a complete tile set that we are using here in open game are dark by searching for a platformer in the forest now the first thing you have to pay attention when you are working with pixel art is to disable the filter when you are importing your arts if you don't do so you notice that some of the arts of your game or all of them are going to be really blurry and here you can see this on the rotating items that you have on top this is due to the fact of our future that the engine tries to make things look more smooth and even though this filtering has its uses especially when you're working with arts that have a really big resolution for instance when you're working on with games that use vector art when working with really low resolution pixel art this is not desired because you actually want to see the pixels and you don't want your art to be really blurry so to fix that what you want to do is go back to Godot and select the PNG or whatever format you are using that you just imported into the engine and go to the import tab and here you want to disable filter and click on report and now if we play the game again you can see that we don't have that blurriness that we had on our sprites before we still have some artifacts that we are going to get them in a second but for now we fixed our blurriness and we can proceed another thing that I have to pay attention when you are importing your arts to your game especially when you're working with pixel art is the compress mode and here you want to select lossless this way your image is not going to be compressed and if you forget to remove this what might happen is that some of your arts might have some weird artifacts in them for instance some squares that have different colors than what they used to be in your editing program so this is something that you also want to pay attention to now one thing to keep in mind when you are working with big sport games is that pixels can't be heft you can have half of a pixel or one-third of a pixel one place so is one pixel and because of that when you have a game that is using pixel art because of the movement of our player you might end up in some position that he is not is mapped to our pixel grid this means that because of the position of our player we would need 1/2 pixel but that cannot happen and if you don't configure your project correctly you might once again end up with some weird artifact in your art for instance your character might be a little stretched row might see some moving lines on your art and you prevent that from happening what we can do is go to our project settings and under hindering in quality you want to select use pixels nap under the 2d part and this is going to make sure that our art and this is only for our art our character may be in a position where he is not snapped to our pixel grid but when hindering the engine is going to make sure that our pixels are going to be snapped to our pixel grid so this means that we are not going to get any half pixel in our game which in turn is going to prevent us from having weird artifacts in our art when our game is running now I'm going to play our game once again and if you look closely to our rotating items you can see that they have all sorts of nasty things around them and that's once again thanks to the nature of how pixels work you cannot rotate a pixel and when you try to rotate a pixel image you might end up with some artifacts like you are seeing now in the screen for instance this rock we are losing some of its outline and on our sign-in in our chest we can see some pixels jumping out of the image as well in fact if you decide to take the really pure root of working with pixel art you'll never do something like this which is rotating an image what you're going to do is actually animate that image rotating and then use this animation even though this is the correct approach to go when you are working with the pixel precise games you can actually fix this by going back to our project settings and under window we want to change our trash mode from viewport to 2d the difference between them is that the 2d mode is going to increase the resolution and handle on a bigger resolution and the one that is being specified here on our width and height and the viewport on the other side is going to keep the same resolution but just upscale that to fit the whole screen now if I close this and play the game again and increase the size of our game you can see that we don't get those artifacts anymore but keep in mind that now what is happening is that we have a game that is running in a bigger resolution that it was supposed to so this is a trade after you have to keep in mind when you are working with pixel art games though if you really want to be correct and go down the more purist route what you want to do is actually instead of using the QT wretch mode you keep it on viewport this way your game is always going to be at a correct resolution even though that the window is bigger you can see some games that do not use this approach and be honest it's quite common nowadays I'm famous pixel art games that do not use this and you can see this by just looking at the rotation of their sprites is Starbound terraria started valley also does not use this type of approach so feel free to choose the one that suits battery or needs just keep in mind that these are the two approaches that you have when working with these games and lastly what we're going to see is how to handle collision when you want to have pixel perfect collisions now just by looking at our player you can see that the collision shape that we have assigned to him is not perfect and by not being perfect I mean that it's not covering only the pixels that the player has it's also covering more and that is because we're using a rectangle shape usually that's not a problem if you want to you could also use a polygon shape and enter to cover only the parts where the sprite is showing but usually you don't really need that kind of precision and you can get away with just a rectangle shape or circle shapes in most of your games though you still have to pay attention when you are working especially with a character in a platformer game that you do not go all the way to the bottom and make your players start to float on top of your platforms luckily Godot has some tools that help us to better it our collisions let's open the player scene and here if we select our collision shape 2d you can see that the size of our collision shape is exactly 9 by 11 and once again coming back to the fact that you cannot have have pixels and what not usually a sign that you have a good collision shape here is that your extents or the size of your collision shape is not a floating point but having to type your collision size here isn't really optimal because you have to keep playing around with numbers and to help you play around with your shape you can always go here to these three dots on our tool bar and select use pixels nap this way when you are working with your collision you can see that we are always is mapping to the grid or to the pixel grid and we're never going to get floating points values here so this is one thing that you can use and you could also of course use the grid snap by configuring it and activating the grid snap here so if you're working with really small pixel art you can get away using just the pixel snap now that is for our player though we also have another problem which is the collision for our map so I'm gonna go back to the game scene and here on our world you can see that we have a time map and here is where we are defining the collisions for our map in the double three-point-one you can select the time map and with that set already set you can click on it and click open editor and in this new menu we're going to be able to configure our time map so I'm going to select the one that I created beforehand and here you can see that we have the collision and each one of the cells here have a collision defined to them and I did so by using this polygon tool here and also having is nap turned on this way when we create a collision if you're working with something that is square that you can always use click around and let me delete this collision just to showcase this to you so with both these tools turn on and with the polygon tool selected I can just click around here and now we have a perfect collision shape or this title of our town set now these are the tools that you can use when working with the pics or games of course they are not limited to pics or games but they help you to create these types of games now keep in mind that this project was created using the DOE version 3.1 and as always if you have any questions feel free to leave them in the comment section and I'll see you in the next video

Channel: GDQuest

Views: 76,750

Keywords: godot pixel art, godot engine pixel art, godot pixel art blurry, godot 2d game tutorial, godot tutorial for beginners, godot game engine tutorial, godot 3 tutorial, godot 2d tutorial, godot 2d game creation, game creation tutorial, pixel art, godot engine, game development, godot game engine, indie game dev, 2d game engine

Id: dZ2zN3h1Kp4

Length: 8min 18sec (498 seconds)

Published: Wed Jan 30 2019