Search Unity

What Resolution should I be painting sprites in?

Discussion in '2D' started by BradBitsbard, Feb 1, 2014.

  1. BradBitsbard

    BradBitsbard

    Joined:
    Jan 24, 2014
    Posts:
    45
    Hey guys, I'm making a platformer at the moment. I've been an artist for a couple of years now and I've finally decided to set out and make a complete video game. The sprites I'm going for will not be pixelated, they'll be detailed paintings. My question is, are there some general standards at which I should keep these sprite paintings to be safe? I don't want to realize the resolution of these things are destroying the game's performance 5 months down the line if you guys know what I mean.

    Anyone have any input?
     
  2. Dave-xP

    Dave-xP

    Joined:
    Nov 8, 2013
    Posts:
    106
    You want to make a 2D game, right?
    Then don't care about performance, that will be your last problem.

    You can use what ever resolution you want.
    When you use the sprites in unity at a scale of 1,1,1 then 100 pixels = 1 vector/meter.
     
  3. BradBitsbard

    BradBitsbard

    Joined:
    Jan 24, 2014
    Posts:
    45
    Yes Dave, it will all be in 2D, thank you mate that puts some fears to rest :)

     
  4. Invertex

    Invertex

    Joined:
    Nov 7, 2013
    Posts:
    894
    All depends on the style you want. Do you want it to look all pixely and "retro", or modern? It's all up to you! As Dave said, performance will be your last problem with 2D these days.
     
  5. ad48hp

    ad48hp

    Joined:
    Sep 18, 2013
    Posts:
    8
    Spammer.
     
  6. CarterG81

    CarterG81

    Joined:
    Jul 25, 2013
    Posts:
    1,716
    I advise to ignore all of the advice in this thread. No one here seems to understand one of the major rules in creating art. Any art. But especially for games. The "especially" because of the various resolutions a sprite can be rendered at.



    No matter what your end result is, unless it is literally like 32x32 tiny pixel guys or pixel art, then:

    ALWAYS Create it as big as possible.

    You can always shrink something without losing any quality. You can't enlarge it without losing quality. There are few exceptions to this rule (Pixel Art, specific Vector art).

    This is a major rule in anything you draw or create, art wise. Whether it is game art or a photoshop piece of artwork- always draw it as large as possible, or as large as is feasible.
     
  7. CarterG81

    CarterG81

    Joined:
    Jul 25, 2013
    Posts:
    1,716
    I'd like to further add that regardless of how people flaunt that "it doesn't matter the resolution", that is entirely not true. You will be hard pressed to try to animate tons of sprites at 30fps when it is the size of 8192 x 8192. Not because you cannot do it (it will animate flawlessly) but because 2D images which animate that large consume enormous amounts of memory.

    I'd know. I once tried to animate a Dragon about that size in the most basic way possible, and my beast of a machine struggled to load it. Animate it? Fine. Load it? The memory required for one unique Dragon was upwards of hundreds of MB's. Even the best computer will not be able to load, reload, or stream enormous resolution images in the milliseconds needed to change animations during runtime.

    This was the culprit!
    $glcus.png

    You will find that it is next to impossible to have very many massive sprites, fully animated, all while loaded in mobile memory.

    Most PC systems these days have 4GB to 8GB of memory, so it is hardly a problem even if you have tons of sprites and resources in memory. However, I don't know how Unity handles all of this stuff. Of course, unless I'm mistaken Unity doesn't even allow enormously large textures anyway. Few engines do.


    However, that is a simple fix. Draw them as large as possible, and if you have performance problems which can't be avoided by things like cutting them into smaller pieces which form the whole- shrink them. You can do the same thing other games do, so there shouldn't be any real problem.
    Also depending on how they're drawn, you may or may not be able to actually have them smaller than they appear. This is a technique I did with my "Dragon" to save on resources. I created the images in a massive size, shrunk them to a size slightly below how they'd appear, then enlarged them during runtime with a small bit of quality loss. The quality loss IMO was worth the large performance boost for that particular game.


    You also might want to look into something called... Vector art? I don't know if it's a particular kind or what, but it is the type of artwork which can be resized without problem. The characters don't look very painterly, and often are very cartoony. However, it is wonderful to be able to resize them so readily.
     
    Last edited: Feb 2, 2014
  8. BradBitsbard

    BradBitsbard

    Joined:
    Jan 24, 2014
    Posts:
    45
    Badass looking dragon mate!

    Yes I quickly noticed this memory problem lol. I made all the sprites 4k in max size and after I just had a couple of trees on screen the game was already using over 100mb of video memory. Now 100mb may not sound like much, but a couple of trees aren't much either! I plan to populate scenes full of trees, bushes, butterflies and all kinds of things so this can very quickly add up.

    I have however, lowered the max size now to 1k and I can't see any actual visual loss of quality in my sprites now, unless I were to actually make them extremely large on-screen.

    So for now 1k seems to be a good spot and I'll leave 4k for sprites that literally have to be really large (ie a castle or something along those lines). Also even though it may be a little more work, I am definitely going for the painterly style for my game as I feel vector doesn't feel serious enough.

    Thank you for the advice everyone :)

     
  9. CarterG81

    CarterG81

    Joined:
    Jul 25, 2013
    Posts:
    1,716
    If a tree is 4k resoultion or even 1k, and you want to fit many of them on screen...what resolution are you aiming at for the user?

    I am trying to imagine how you would fit all of that on the screen at once.

    Is it a fighting game like Street Fighter?
     
    Manacoon likes this.
  10. Kurius

    Kurius

    Joined:
    Sep 29, 2013
    Posts:
    412
    Well do you want your game to run on mobile devices? Specifically do you want your game to run on Android devices?
    Note that a vast array of devices exists, with different hardware capabilities. The crappier Android phones will experience a force close if ANY image in your game is larger than 1024x1024. This is due to memory constraints. The more powerful phones can handle images up to 2048x2048.

    With that said, I recommend you initially draw your sprites at 2048x2048, and call them your high res sprites. Then downsize those in half to 1024x1024, and call those your standard res sprites, then downsize those to 512x512 or less, and call those your low res sprites.
     
    Morten-V-Jensen likes this.
  11. CarterG81

    CarterG81

    Joined:
    Jul 25, 2013
    Posts:
    1,716
    There is no point not to draw your sprites in an insane resolution. If your "high res" sprites are 2048x2048, then draw them all at LEAST 4096x4096.

    Then shrink them to the largest possible version you'd need (2048x2048).

    I cannot stress this enough, for ANY form of digital painting.

    There is never a reason not to draw them ridiculously larger than you will ever need. You can always shrink them. You can rarely enlarge them without detail loss.

    Real artists will draw in insane resolutions because of this reason. Unless your system struggles with performance in Photoshop, you draw at least twice as large as you will ever need. In the end, you never know what will come of the art, what your needs will be, or perhaps what will happen in the future.
     
    ghisaionela and Manacoon like this.
  12. CarterG81

    CarterG81

    Joined:
    Jul 25, 2013
    Posts:
    1,716
    I'd just like to add another suggestion, for non-digital art.


    When scanning artwork, scan it to the maximum resolution you can. There is never a need to choose anything lower than the highest resolution you can scan the image in.

    You can always shrink it.
     
    Manacoon likes this.
  13. BradBitsbard

    BradBitsbard

    Joined:
    Jan 24, 2014
    Posts:
    45
    It's just a platformer mate, and I want everything to be hand-painted like in the Rayman games and such. The many trees are going to be part of the background. 1K has been working brilliantly so far though, and the scene now reaches about 100mb video memory in use at a time, which I think just about any modern computer can handle, so -fingers crossed- it looks like things are going to be fine :)

     
  14. ad48hp

    ad48hp

    Joined:
    Sep 18, 2013
    Posts:
    8
    If you want a cinema game use 8K
    If you want a high quality game used for generations USE 4K=4096x2048
    If you want a normal game use 1080p
    If you want testing speed only game use 360p.
     
  15. InfinityCoder88

    InfinityCoder88

    Joined:
    Oct 4, 2013
    Posts:
    241
    Hi Jaxobz, did you figured out what is the best resolution for mobile 2D game ? I have the same issue ;)
     
  16. WackyWavingInflatableArmFlailingTubeMan

    WackyWavingInflatableArmFlailingTubeMan

    Joined:
    Feb 21, 2015
    Posts:
    16
  17. Magnumstar

    Magnumstar

    Joined:
    Oct 3, 2015
    Posts:
    303
    If you draw these sprites so large and you need them smaller in the scene, do you just adjust the scale or change the PPU?
     
  18. Kurius

    Kurius

    Joined:
    Sep 29, 2013
    Posts:
    412
    If you're making a mobile game, do not bring in a huge sprite that you end up downsizing. The system will experience a permanent performance hit when loading that huge sprite into memory. For mobile, keep each sprite smaller than 1024x1024. It will still look amazing even on high resolution devices.
     
  19. larku

    larku

    Joined:
    Mar 14, 2013
    Posts:
    1,411
    I think this thread totally misses the point raised by CarterG81 - he's not suggesting you bundle the largest possible size sprites with your game. You should create the SOURCE imagery at a large (but still practical) size. Then specify in Unity what the resolution should be - this will be done at build/import time, not runtime so there is no runtime overhead in having large source imagery (just specify the correct size in Unity!)

    The idea is, when you need to make a build for the latest 16k screens you can just change the resolution specified in Unity rather than recreate all your imagery again (or suffer with poor quality graphics).
     
    Last edited: May 11, 2016
  20. Magnumstar

    Magnumstar

    Joined:
    Oct 3, 2015
    Posts:
    303
    When you say specify the size at build time what do you mean. How? Scale, PPU?
     
  21. larku

    larku

    Joined:
    Mar 14, 2013
    Posts:
    1,411
    Westland and Kurius like this.
  22. CallRJ

    CallRJ

    Joined:
    Mar 19, 2017
    Posts:
    1
    Hello, I'm also looking to create art for a 2D game. From this thread, I have gathered that I should make my canvas large and scale it back in unity to maximise performance while retaining detail. However, the question I would like to add is what resolution should I paint at. I have set my canvas too (width) 1024 x (height) 1024 due to Kurius's input but I was wondering what impact "resolution" would have on performance and if there is any standard number to set this to for the sake of game design.Most my photoshop experience is with physical printing which I normally set to 300 ppi. Just curious how this variable translates over to game design and this thread seemed like a good place to ask the question.
     
  23. DanielQuick

    DanielQuick

    Joined:
    Dec 31, 2010
    Posts:
    3,137
    Kurius's comment was about sprite size, not canvas size.
     
  24. Kurius

    Kurius

    Joined:
    Sep 29, 2013
    Posts:
    412
    @CallRJ 300ppl in the printing world would roughly equate to a canvas of 2048x2048. Nevertheless, if you want to target cheap Android devices then I'd keep your canvas approx 1024x1024. Your canvas size influences your graphical asset sizes and thus performance. Personally I still keep my canvas size as 960x640 (equal to iPhone 4) because that screen ratio scales nicely with minor cropping required. And to the naked eye, my games still look great on an HD device like a Galaxy S7.
     
    chiazam and Magnumstar like this.
  25. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    Hello, please am developing a game for IOS(apple). Am using Photoshop to design my sprites/ asserts. I was wondering when you said 1024x1024 , is it size of the background you are referring to ? or is size the individual sprites such my main character you are referring to . Sorry am a novice
     
  26. Kurius

    Kurius

    Joined:
    Sep 29, 2013
    Posts:
    412
    @chiazam imagine your screen is 1024x1024. If you want your character to be as big as half of the screen, then make your character have 512 height, and maybe 256 width.
     
  27. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    Ok , thank you very much. Please what would be the recommended screen resolution If am developing mfor IOS ,apart from 1024 x1024?
     
  28. Kurius

    Kurius

    Joined:
    Sep 29, 2013
    Posts:
    412
    I always build my mobile games at 960x640 (which is iPhone4 resolution). Unfortunately with mobile games you always have to consider the crappiest phones that people are still using. But still my games scale nicely and still look good on iPhone7, iPad, and even Samsung Galaxy Note.
    With 960x640, if your background image is 1024x1024, you can can switch the phone's orientation horizontal/portrait and still have your background image nicely fill the screen (just cropped differently depending on phone orientation).
     
  29. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    Thank you very much. You just helped me alot
     
  30. kapopixel

    kapopixel

    Joined:
    Apr 2, 2017
    Posts:
    47
    @Kurius thank you for your informative messages, it really helps. If you do not mind, can I ask is there a specific reason why you choose the lowest resolution (iPhone 4 960x640) and let them scale in higher resolutions? Instead of choosing the highest one (iPad) and let them shrink in lower resolutions? As far as I know, if you scale sprites they do not look good but shrinking them is just fine.
    Or how does it sound preparing them for a middle-sized resolution (let's say iPhone 6s resolution) and let them shrink for iPhone4 and scale for iPad so catch a middle file size with middle quality range?
     
  31. Kurius

    Kurius

    Joined:
    Sep 29, 2013
    Posts:
    412
    @beyazfil you can definitely use a middle-sized resolution, but I wouldn't use a high-resolution. This probably relates more to old Android phones than it does to old iPhones, but the basic idea is that old phones have limited GPU power and limited RAM, and so they can experience performance issues if having to constantly process scaled-down high resolution graphics. The worst case scenario is that they experience Out Of Memory errors when trying to accommodate high resolution graphics. A side issue is that old phones might not even have enough physical storage to even download a game with a large overall package size (which correlates with how many high resolution high file size graphics are in your game).
    Check out this game of mine which is designed for iPhone4, and see how it still looks good on high-resolution devices...
    http://www.kuriusgames.com/goldminerrescue/
     
    Last edited: Jun 30, 2017
  32. kapopixel

    kapopixel

    Joined:
    Apr 2, 2017
    Posts:
    47
    @Kurius I get your point, thank you for the elaborate explanation. Gold Miner Rescue is fun game by the way :)
     
  33. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    Hello, what if am using adobe illustrator to create my 2d assets and maps should I go for a much lower resolution , Seeing as Vector act doesn't scale down well but scales up well?
     
  34. Kurius

    Kurius

    Joined:
    Sep 29, 2013
    Posts:
    412
    @chiazam If you're importing vector graphics into Unity, then I'm not sure how that behaves on old phones. However if you convert your vector art to PNG before you import it into your unity project, then downsize your PNG files as discussed in this thread.
     
  35. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    Alright, I guess I would using photoshop
     
  36. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    By the way, sorry totally a novice . If am using creating a background in illustrator or photoshop. I would set my height to 960 and width to 640, right?
     
  37. Kurius

    Kurius

    Joined:
    Sep 29, 2013
    Posts:
    412
    No you want to set your background to 1024x1024, to handle all kinds of phone aspect ratios. Expect some cropping when your game scales to different phones. Cropping is preferred over stretching.
     
  38. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    Even if my game orientation i would use would horizontal and not portrait?, the game am making is an endless runner
     
    Last edited: Jul 3, 2017
  39. Kurius

    Kurius

    Joined:
    Sep 29, 2013
    Posts:
    412
    Think about what happens when Unity scales your game to an iPhone7 screen for example. IPhone7 resolution is 1920x1080. So if unity scales by height, then it will nicely proportionately stretch your game's 640 height to match 1080 height. In other words, unity will multiply your height and width by approximately 1.6875 because 640*1.6875=1080. That means it will also multiply your width by 1.6875 which scales your width to 1139. Now your 1024x1024 background actually isn't wide enough to fill 1139. So the trick I do is I permanently set the scale in the inspector to be 1.12 width and 1.12 height. This performs a preemptive mild stretch of your background image so that it's really a 1147x1147 background. Now you may ask, why not make the original PNG as 1147x1147. Well now we get into the topic of Power of 2 graphics. Optimal performance in old phones can be achieved by providing graphics who's dimensions are a mathematical power of 2. For example 32x32 or 64x64 or 128x128 or 256x256 or 512x512 or 1024x1024 etc
     
    Last edited: Jul 3, 2017
  40. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    So guessing, when am designing my game UI , I should also use 1024 x 1024.
     
  41. Kurius

    Kurius

    Joined:
    Sep 29, 2013
    Posts:
    412
    Not necessarily. You should still design UI elements for 960x640 because everything in your game will be automatically scaled up by a factor of 1.6875 if player is using iPhone7 for example. You'll program your UI buttons to move to the edges of the screen when scaling, etc
     
    Last edited: Jul 3, 2017
  42. larku

    larku

    Joined:
    Mar 14, 2013
    Posts:
    1,411
    IMO you should not think about pixel sizes, you work to aspect ratios and ensure your game works on all aspect ratios you expect to support.

    When I design a UI I build it at 16:9, and test it at 16:9, 5:4, 9:16, 4:5 and 1:1 just for giggles. This is obviously supporting both landscape and portrait. If you're only interested in landscape then only test at 16:9, 5:4 and 1:1. These are the ratios you're likely to encounter in the wild.

    Your source textures/images should be as large as is practical and use the import settings in Unity to scale to the desired size for each platform/build/release. This allows you to increase or decrease the size without needing to recreate the textures again.

    When I say *as large as practical* I'm considering that maybe I want to do a release later to support 4K screens etc - wouldn't it be great to just set the sizes larger in the import settings and voila crispy sharp textures! Obviously you'll want to keep things practical though.
     
    CarterG81 likes this.
  43. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    Ok, thank you very much. By the way am not designing for landscape mode ,am designing my game for portrait mode . So what aspect ratio should I use ?.
     
  44. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    "You'll program your UI buttons to move to the edges of the screen when scaling, etc" , please I don't really understand, can you please explain
     
  45. larku

    larku

    Joined:
    Mar 14, 2013
    Posts:
    1,411
    For portrait mode I'd test it works on 9:16 and 4:5 (and 1:1 if you're strange like I am).

    I'd assume he means you'd use anchors to keep items in appropriate places.

    If you haven't already, head over to the learn section and see how UI's are put together: https://unity3d.com/learn There's quite a lot on UI: https://unity3d.com/learn/tutorials/topics/user-interface-ui
     
  46. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    Thank you very much, I would upload an image of my UI, so that you can see what an working with
     
  47. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    Game Main menu UI.png

    Check out my design, its just a white background with four UI buttons, i designed it in illustrator, the default screen i used was 1280 x 720. Would this work
     
    larku likes this.
  48. larku

    larku

    Joined:
    Mar 14, 2013
    Posts:
    1,411
    I'd anchor the play button screen center, the pause button to the upper left and for the three buttons there are two typical options.

    You can anchor the 3 buttons in the centre or anchor the outside two to their respective corners and the middle one to the centre - this will resize and look nice on all aspect ratios.

    Also consider using horizontal layouts for the buttons!
     
  49. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    Alright thank you very much
     
  50. chiazam

    chiazam

    Joined:
    Jun 20, 2017
    Posts:
    20
    "Also consider using horizontal layouts for the buttons!" - please could you explain more