What size should your assets be? | HD 2D GAME ART

how big should your assets be most monitors have a resolution of either 1080P or 4K so those are the dimensions of the entire screen let's say that we want our game to locate in 1920 by 1080 so 1080p if we look at any individual asset on our screen let's say this push it covers around one tenth of the width of the screen and one tenth of the height of the screen one-tenth of the width is 192 pixels and one tenth of the height is 108 pixels so if you want your game to not look like a blur mess you need your bush to be at least 192 pixels wide 108 pixels high if you have a lower resolution than that but still keep the bush at the same size then it's going to be blurry because you're telling the game to display more information than actually exists if you have a higher resolution but still maintain the same size then you're giving your graphics card more information than it needs why is this more information than it needs well if your game and the monitor you're playing on is 1920x1080 and that will be the maximum amount of pixels your monitor can physically display so if your asset is 256 by 512 pixels but only occupies 110 of this screen then it can't display those pixels even if that information is there your monitor can't show it so in its most simplest form to figure out how big your assets need to be you first decide the resolution of your game by looking at the consoles or screen you want your game to be played on then you look at how big you want an asset to be in your game in relation to the screen and you make a rough estimate for what the pixel's dimensions need to be how do you know how big you want an asset to be in game well the best approach is to probably look at the asset you're creating in relation to your character a tree is generally going to be quite large but the bush will be quite small so creating the asset with the character in mind will generally give you a disinvestment of scale is this it not quite the second thing that can be beneficial to stick to is to make your Dimensions at powers of two so 8 16 32 64 128 256 Etc so your height might be 128 pixels and you're with 256. this has in the past been a requirement due to Graphics limitations Modern Hardware however can handle uneven sizes but it still tends to be faster if your textures maintain that powers of two because it's faster for the graphics card to multiply and divide powers of two if you're not compressing your textures then this is less of a thing as I said Modern Hardware can handle uneven sizes but if you're wondering where you would often see these powers of two for tile maps for instance this is really the reason one important thing to consider when deciding on your asset Dimensions is that you consider all potential use cases so we're going to talk a bit about scale sometimes you might be using a Sprite partly in the foreground where it would look quite large but then also use the same asset in the background where it will look slightly smaller then you might have to import the texture to fit the larger of those sizes it might also be zooming into an area of the game and thus potentially want the option to do so without blur or like in my situation I always use the mushroom character in my videos so my animation is made in a 4K document even though it's something like 256 by 256 in-game if you're an artist you might be very familiar with the idea of drawing as big as you can and then exporting it as a smaller resolution you can generally always scale down an image and it will still look sharp whereas you can get into trouble trying to scale up an image that is 2 small so to be on the safe side and perhaps even trying to Future proof your art you might be inclined to draw a rock in 2K by 2K even though you only need it to be 128 by 128. this can still be somewhat common to do here but I want to give a few reasons for why you should be careful when doing it first and foremost if you're scaling down an image significantly you're drawing information that will no longer be visible in game so when you scale it down you might end up with details that originally made sense but that the small scale that you have exported it to it just looks strange there are also some other issues with scaling especially if you use line art if you use line art and you scale your asset the line art will also be increased so you get this odd look where some assets look as if they have very thick line art whereas other assets have very thin there are also sometimes cases where you might be fine with having an asset that is technically too low resolution thus that might be obscured perhaps you even have some atmospheric perspective and a blur Shader to make the background sort of hazy and now you barely see the asset well then having that asset be a really large texture might actually be a waste of memory you can barely see it anyway so reducing the size of that asset might give you some performance boost generally this means that you don't want to scale the assets too much outside of their actual size drawing at least closer to the resolution you need it for will generally help you ensure that it looks good at that resolution the second and perhaps even bigger thing is that a lot of people or at least me will generally zoom in and try and ensure that everything looks good and if I have an asset that is 10 times as big as it will actually look in-game then I'll be making details and fixing mistakes that are never going to be visible in game anyway which I've done many times in the past and I don't recommend it all of this means that at its core you kind of want to think about what fits your scene and make a choice that it's somewhat close to how it's going to be displayed and if you want to be on the safe side then make it twice as big as you need it generally if you go too wrong you'll notice it and while it will take time to fix a mistake that you could have prevented you'll also waste time if you consistently care too much about optimal workflow and never get anything done suppose you have an asset that is partly on screen but partly hidden and you walk and discover more of it should this asset now be 2014 pixels tall well maybe but this is where we are getting into more complex territory for starters for every spriter asset that you show you're going to have to load that into memory now if we look at this tree assets we'll see that this area of the asset is what the player will see but this entire texture even the empty space is stored into memory what makes it even worse is that even if we only show a portion of this asset we still need to load the entire thing into memory and deal with this entire texture so you can imagine if you start having assets that are really big and you're telling your graphics card to load that into memory and then draw it on the screen that it might start running into difficulties then you can even notice this as small like spikes now this sounds as if you can never have big assets but in my experience you can kind of get away with anything below 4096 by 4096 which is quite a common size for sprite sheets but what can you do if you want to have something like a tree that is fairly large portions of it are going to be outside of the screen and it's white at the top and thin at the bottom so you get a lot of empty texture that you need to load into memory well if you make the tree in different actions so you make the trunk a thin but tall asset and then for the top of the leaves you make it one short but wide asset now if we compare the texture sizes that we need in order to display this asset we can see that we have made overall texture smaller but even more than that we have reduced amount of space that we need to load into memory and draw on screen we can go even further if we look at the leaves here we have this really quite large texture but if we instead make this into smaller Leaf textures now it obviously looks a bit different but if we look at what happens in our engine we have reduced our memory usage even further how well since this texture is already in our memory the graphics card doesn't need to reload that texture into memory several times we'll just repeat it so we can significantly prove how much memory we need to use if we make big Assets in our scene out of several smaller textures you can see how much less memory this tree uses versus this one I would say that the biggest benefit of this situation where I'm making leaves into several smaller assets is that you can add a foliage Shader onto it to make it look rather cool and generally the performance benefits and this kind of circumstances negligible but the principle of it can be used in circumstances where it will be useful to illustrate this idea suppose you want to make several small Leaf textures instead of reducing the same Leaf texture now since each texture is unique you actually need to load each of them into memory and suddenly you lose performance again but something else also happens and in order to explain this we need to talk a bit about draw calls so I've mentioned how you have your texture like this rock you load it into your graphics card then you call for the graphics card to draw the texture on the screen this is one draw call suppose you now want another type of rock in your scene well now the graphics card also needs to load that into memory draw that texture on the screen and now you have two draw calls so we can see that if we start having a lot of different Assets in nursing suddenly we need to store a lot of things in our memory and we need to draw a lot of things one after another but if you have one texture that we repeat then we load that texture into memory and we say draw and we draw the texture at all different locations at once so we get one tiny texture and one single draw call Hope you're starting to see why a lot of games use the same texture and repeat them but if all our textures are relatively small and we have a lot of different textures there will still be a lot of draw calls each draw call is small but there's still a lot of them so one workaround is to play each of these textures into one image a Sprite sheet or a texture Atlas so now we can pretend that this Sprite and this bright are really the same image so we can draw them at the same time now if our spreadsheet becomes big then we can potentially even manage large parts of our scene using only one draw call in essence this is one of the benefits of using tile Maps it generally organizes everything under one draw call and one Sprite renderer so if you don't want to think too much about asset sizes and performance a tile map can force you to have performance in mind from the start even if you don't want to use the tile map you still want to avoid empty space in your assets and make modular assets that are made up of smaller textures that can be reused this makes it possible to repeat them and most engines will batch all assets that are similar onto the same draw call and optimize the regime for you but how this is an will generally depend on your engine being at least a bit familiar with how your engine works will help you be a bit more relaxed in terms of performance for instance Godot renders the entire scene in painter's order so it first Paints the backmost layer then it continues until it Paints the foremost layer why is this important well it means that there are potential Paths of wasted performance to be had first of all you know how I mentioned that patching means you can draw the same texture in one single draw call well if you have your texture in the background and then the same texture in the foreground you can no longer do that even though it's the same texture patching is no longer possible the reason for this is that the engine will first draw the backmost layer then it will draw the platforming area and then the foreground because of these platforming Textures in between the foreground and the background the dough will have to make three individual draw calls for each layer even though it's in part using the same texture so you'll have this type of individual workarounds or benefits that might be specific to your engine in unit for instance you can customize this by to reduce the empty space that you have this will reduce problems of overdraw which is the engine having to read and redraw the same pixel over and over again Unity also has a texture Packer which can help you reduce the empty space in your character sprites and this is largely because it's a 3D engine and auto 2D engine and here's the thing if I know roughly how the engine works then I can check to see where I'm running into issues it might be lagging because I have too many Sprites well then I can just remove some Sprites and see if the performance improves or add more Sprites and see if it gets even worse because your bottleneck or performance might not even be related to a graphics card it could be your CPU and optimizing your graphics in that instance might be a waste of time and you continue doing this type of debugging now another thing to note here is that I've mainly shown you conceptually what to look for one of your Bachelor leaves to reduce exercises that might generally be beneficial but since we split the asset we also introduced another draw call generally batching is going to be significantly faster but is still worth to note overall none of this is entirely straightforward it's a bit playing around and getting a feel for it here are some of the important terms that I mentioned and some that I didn't mention and I recommend that you read up more on it in relation to your engine and how it handles textures internally this is just really a beginner's overview so that you know what to look for know what to search for I really hope I didn't make any errors when discussing all of this if I did please comment down below and I'll try to paint the corrections also please comment if you feel that I missed anything my knowledge is largely based on uniting though because those are the engines I've worked with oh and if you've seen any of my videos in the past you might sometimes see that I'm not exactly following all of my own advice here for instance I don't always stick to powers of two I sometimes make my assets too big and have to scale them down resulting a strange looking Lionheart and bad performance sometimes I copy portion of my assets and rotate them in my drawing software resulting in blurring my assets that have nothing to do with engine but it's just due to bad workflow in procreate generally this isn't the end of the world no one has even mentioned it yet even though it's fairly obvious to me I don't think you should worry too much if you make sure to Target roughly the resolution you're making a game for it'll be 90 of the way there and if you're working with pixel art then that is in part A whole other kind of worms but Adam's Eunice has a great video on how to get the right camera is 4 pixel art so you should watch that one it's actually interesting if you're making a high definition game as well thanks for watching bye

Channel: Nonsensical 2D

Views: 98,775

Keywords:

Id: MrPoCGHM80E

Length: 12min 9sec (729 seconds)

Published: Sat Feb 25 2023