Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

2D Game Art Optimizations or Gotcha's

Discussion in '2D' started by Matt-K, Mar 4, 2019.

  1. Matt-K

    Matt-K

    Joined:
    Sep 10, 2018
    Posts:
    79
    Hey everyone,

    My wife is new to making game art and we have been hurrying through mockups and using temporary things for getting mechanics fleshed out.

    However, as we approach a more final version of the game, I was wondering if anyone has tips/links/advice for optimizing 2D Game Art. We're using Illustrator. Here's some of the stuff she has made.
    Asset 97.png Regular Torpedo Sprite.png

    This is not a detailed question as much as a place for everyone to share their experiences with game art and share educational resources if any.

    Thanks!!
    Pudgy
     
  2. Vryken

    Vryken

    Joined:
    Jan 23, 2018
    Posts:
    2,106
    https://tinypng.com is my go-to place for reducing image file sizes. The images come out looking exactly the same as well.
     
  3. Matt-K

    Matt-K

    Joined:
    Sep 10, 2018
    Posts:
    79
    That's a really wonderful resource! I'm going to use that!

    This is my first time implementing game art into a game that was made by a game artist, she is new and so am I. It's been a real learning experience lol. Everything I've done so far has been coursework with pre-made game art that's been optimized or I haven't had to question anything.
     
  4. kdgalla

    kdgalla

    Joined:
    Mar 15, 2013
    Posts:
    4,616
    I wouldn't really bother with that, actually. When you build your project, Unity will convert all of the sprites to its own internal format, so any png or jpeg compression you apply to the assets you import won't make any difference. Even if you could pack your own compressed files into a build, though, Unity would still have to decompress them in order to use them at run-time, so they would still take-up the same amount of RAM/VRAM as if you didn't compress them at all. You don't really get any benefit from importing heavily-compressed files at all.

    The only compression that actually matters in your build is the compression setting in the Unity editor's image import settings for that image. Even still, I wouldn't bother with that either, unless you start having RAM or VRAM usage problems.

    If you want to optimize a project, always use the profiler to see where your bottlenecks are.
     
    TonyLi likes this.
  5. Nivbot

    Nivbot

    Joined:
    Mar 21, 2015
    Posts:
    65
    I would make animated sprites in different body sections that fit together and can be moved seemlessly. You can look up Spriter type image files to see what I mean, then use Anima. It’ll
    Make her life and yours much easier
     
  6. RichardKain

    RichardKain

    Joined:
    Oct 1, 2012
    Posts:
    1,261
    His wife is using Illustrator. That means she's constructing her 2D art assets using vectors, not pixels.

    The export process from Illustrator should be robust enough to get you PNGs that fit within standard game constraints. Basically, make sure the export resolution is less than the height of your target game resolution. Also, export your art assets around the resolution you intend to display them at. If a particular asset isn't ever going to be scaled up, you can just export it at the percentage of the screen resolution that you intend for it to fill. If it is an asset that is going to be scaled up, you can export it at a higher resolution, or export two different versions at two different resolutions. Unity has level-of-detail tools that you can use for extreme cases.

    Aside from that, you will want to consider the transparencies that will be required. As an example, take the fern graphic you posted. That particular asset would not be very performance-friendly, as Unity would generate a much more complex mesh in order to handle all of its tiny internal transparent parts. You probably wouldn't want to put too many instances of that sprite on screen at any given time. The torpedo, on the other hand, would require very few internal transparent pieces, and would be quite efficient.

    I would also point out that there is a distinct difference in style between the two graphics. This is usually used to separate graphics within a game. Strong outline elements like the torpedo usually indicate direct interaction, while the fern is more likely to be used as part of a background element.
     
  7. Matt-K

    Matt-K

    Joined:
    Sep 10, 2018
    Posts:
    79
    I am putting everything we've made into a mockup of what the full game will be to start profiling and troubleshooting stuff. Thanks for your feedback! I won't add the TinyPNG into my workflow, but maybe for a web application it would be handy.
     
  8. Matt-K

    Matt-K

    Joined:
    Sep 10, 2018
    Posts:
    79
    We've discussed this and we use this for animations. She was pretty overwhelmed at trying to draw/sketch keyframes and I was happy to let her know there are easier ways lol. We're learning a lot quickly and I'm grateful for your input!!
     
  9. Matt-K

    Matt-K

    Joined:
    Sep 10, 2018
    Posts:
    79
    Resolution: After doing a bit of research, you've clued me in to what would have been disappointing later on lol. I think, we'll have many different resolutions for target devices and load those based on the device.

    Transparencies: I read somewhere recently about overdraw in Unity and that you can have issues with this. Someone related it to a profiler issue with too many Draw Calls and they related the issue to transparencies. Looking closely at that fern, I see there are a few screens and multiplies. So those transparencies are going to be expensive? I'm going to load up a scene full of this stuff and see what it does to the FPS.

    Differences: Yes I bought a lot of sprites and got free assets to quickly mock up the game. We're going to rework the torpedo to remove the black outline. I don't fully understand your comment about the outline indicating direct interaction, perhaps because I'm not an artist. The artist who produced this torpedo actually puts a thick black outline on every asset he makes. My wife doesn't put outlines on anything, it looks nice all in all. I like the Torpedo lol. It doesn't stick out (the outline) when scaled down for a mobile game.

    You really gave a lot of thought and info here and I'm grateful.
     
  10. RichardKain

    RichardKain

    Joined:
    Oct 1, 2012
    Posts:
    1,261
    Certain visual approaches, such as high contrast, can help certain elements within a scene stand out from the rest of the scene. In video games in particular, this kind of visual trick is important. In complicated scenes, a player needs to be able to distinguish what is important, and what is not. Outlining certain elements, while not outlining others, is a common approach for communicating what is important. And usually, what is important is any element in a scene that can interact with the player. It's not unusual to see a game where the player, the enemies, and collectible items all have outlines, while all of the background visual elements don't. Outlines help to increase contrast for individual elements, which helps them seem to "pop" out from the background.

    It is not the only method to achieve this, of course. Strong or contrasting colors are another method. Likewise, using bolder, brighter colors on foreground elements, while the background gets softer, more muted tones is another way of achieving the same effect.
     
  11. Matt-K

    Matt-K

    Joined:
    Sep 10, 2018
    Posts:
    79
    I see what you're saying now. We'll have a playable beta here by week's end hopefully and I'm curious to see what's off/missing. We may have to reassess our approach or at least find a more creative way of drawing attention to certain details. For instance we're hiding collectibles among the fern/plant life and inside some sunken ships etc.. We're using a not so obvious glimmer particle and I'm going to make a kind of faint golden aura type of thing.

    Can you elaborate more on transparencies from your earlier post?
     
  12. RichardKain

    RichardKain

    Joined:
    Oct 1, 2012
    Posts:
    1,261
    Overdrawing is an issue with performance for transparent pixel elements. (such as Sprites) However, Unity actually has an existing default solution for this, that is automatically generated. By default, Unity will create 3D elements for its transparent sprites, and have those elements conform to the shapes of the non-transparent areas of the sprite. This allows Unity to minimize the number of transparent pixels that it needs to draw, and thus improve performance for large numbers of transparent sprites.

    The trade-off with this approach is that very complex sprite shapes will result in a larger number of polygons being generated for the Sprite. A sprite like the fern you posted would result in quite a few polygons, given all the long, slender fronds with gently sloping curves. Thankfully, numerous polygons aren't the same bottleneck these days that they once were. So the hit to performance wouldn't be all that great, but it is possibly something to think about. Dividing a sprite like that up into sub-sprites might help you to optimize it better. (One sprite for the stalk, several sprites for the fronds, combine them together as a pre-fab using the standard object hierarchy)

    The torpedo, by comparison, has a relatively simple shape with very few internal transparencies, so a mesh generated for its sprite would be fairly simple and have a low-polycount, so it should perform just fine.

    Performing a stress-test on these things is a good idea, cook up some script that just spams thousands of instances on the screen at the same time, and let them bounce around a little. If the frame-rate doesn't dip under that sort of load, then there is nothing to worry about. Modern GPUs are extremely good at handling tons of polygons, so there usually isn't much of a problem with Unity's default approach.