I'm working on an mobile phone game, and don't have the luxury of being able to use vector graphics. I'd like the game to be playable on a wide range of devices from 2560x1600 tablets to 320x240 phones. Ideally I want a single set of graphical assets for all resolutions.

Vector data is not supported on a wide range of mobile devices, that's why I'm limited.

As a general rule, I'll be creating everything for a high end device and be scaling down when the game loads which gives me basic linear filtering.

Are there any particular guidelines I should follow when creating scalable graphics? Fonts are a particular headache. I've noticed that smoother fonts with soft edges seem to scale a better than sharp fonts. These are the kinds of tips that I'm after.

  • I'm a complete newb to design but surely you create them exactly the same way: with vectors. You just export them as .png or whatever at each resolution instead of using an svg, no?
    – OGHaza
    Mar 14 '14 at 10:19
  • @OGHaza I don't know what the resolution will be, there are probably 30-40 different phone resolutions now, and I'm not manually creating graphics for all of those. The scaling will happen on the phone once the game knows the resolution. Mar 14 '14 at 10:21
  • Riiiiight, sorry misunderstood!
    – OGHaza
    Mar 14 '14 at 10:23
  • 1
    You would still be better of doing it with vectors and then take a really high res version you resample down. Granted now your vector drawings could have lots of free artistry in the mix. Fonts always as hinted vectors please.
    – joojaa
    Mar 14 '14 at 12:09
  • 1
    This could be a huge mistake. Have you checked what happens to a raster image when you simply "squish" it down 200, 300, or 400%? Details can plug and vanish. This is why vector data is often preferred.
    – Scott
    Mar 14 '14 at 14:29

I am skeptical about the idea that "vectors aren't supported." I am certain that libraries exist for all mobile platforms: vectors are only ever viewed as raster images.

{edit for clarity:} While the "mipmap" discussion below refers to 3d rendering, the mipmaps themselves are "raster" textures to be applied during rendering. There is no reason one cannot use the mipmap concept as assets in a pixel-based 2d render without a 3d pipeline... {end edit}

In any event, the most common alternative is a mipmap, either calculated on the fly (cpu intensive, less control), or pre-rendered and stored (more storage). Mipmaps are usually used for 3d level of detail (LOD) where the best assets are only required for things closest to the viewport.

If you have a pre-rendered graphic(s) with multiple sizes in it, you can choose the proper asset to use based upon the viewport size. This also allows for a low/med/high user preference if they encounter unsuitable performance. Additionally, you can package the assets by size and perhaps leave out the highest pixel dimension set for devices that are storage limited.

Because scaling always involves quality loss, it is probably beneficial to pre-render the assets so that you can fix them up for quality.

( http://en.wikipedia.org/wiki/Mipmap )

In 3D computer graphics, mipmaps (also MIP maps) are pre-calculated, optimized collections of images that accompany a main texture, intended to increase rendering speed and reduce aliasing artifacts.

"aliasing artifacts" = Scott's "huge mistake" comment.

  • 2d mipmaps (all GPU has this) = hardware accelerated sparse pixel quadtree
  • 3d mipmaps (post-2020 generation GPU) = hardware accelerated sparse voxel octree
  • 1
    Note that I get that you want a single set, but this is the reason for the supremacy of vector and 3d modeling in gaming and graphics.
    – horatio
    Mar 14 '14 at 15:23
  • 1
    If you look at, for example, the Candy Crush Saga installer, you'll see they use bitmaps, spritesheets and bitmap fonts. They've put a lot of time, money and effort into producing a game that can be played on almost any and every device. If the worlds biggest grossing company in the mobile games market takes that route then I feel I should follow their lead. Mar 14 '14 at 16:12
  • @WillCalderwood following the lead of 'biggest grossing' software companies is not any sort of guarantee for building quality solutions. (See also: Microsoft, IBM, etc.)
    – DA01
    Mar 14 '14 at 17:30
  • But, all that said, it sounds like you're determined to not use scalable files, so I would ask what your question is, then? It sounds like you've already decided to use raster image sprites.
    – DA01
    Mar 14 '14 at 17:31
  • @DA01 My question is how to create raster graphics that scale well, for example, fonts with soft edges. I was wondering if anyone else had some tips. Mar 14 '14 at 17:43

I tend to focus on iOS mainly, but mobile safari has supported SVG for a while now. Apparently Android's browser on Honeycomb and up also supports SVG. I tend to only use SVG for most of my icons in mobile iOS work.

The alternative is to use raster, of course. If you want to use only one image for all devices, then you need to make a really large image, as you can scale down easily, but not up (and have it look good).


If your question is

are there scalable image formats that aren't vector?

Then the answer is no, not really. If it's not vector (we'll lump 3D modeling into that) then it's raster. Raster images have a finite number of pixels so can only be scaled up to that point. You can scale down from that with some success, but not usually up very much before it starts looking poor.

  • Trying to get performance out of an HTML5 canvas is hit and miss + it involves working in Javascript, which is horrible :-) And people complain about mobile fragmentation, but when you multiply that by the range of possible browsers, what they support and don't support, and how they render what they do render... it's horrible. I took a brief trip down that route and decided it wasn't worth it. Mar 14 '14 at 17:27
  • I'm talking about SVG--not canvas.
    – DA01
    Mar 14 '14 at 17:28
  • Sorry, misunderstood. I've not come across SVG. I'll take a look. Mar 14 '14 at 17:41
  • SVG = Scalable Vector Graphic. You can make them in Adobe Illustrator, though many prefer Inkscape (it's open source + natively handles SVG quite nicely). You can then use them just as you'd use a PNG or GIF, except that they are vector, so will scale up to any size you'd like.
    – DA01
    Mar 14 '14 at 17:52
  • Looks like over 20% of android phones are still on earlier versions than Honeycomb, so SVG isn't really an option. It also looks like it wouldn't be great for things like particle effects. While it's an option I might have a play with sometime, it doesn't look like it's a real option just yet. It also looks like some SVG implementations don't take advantage of the GPU yet + it's not what GPUs were designed for. I discovered graphics through the CPU destroys battery life. Mar 15 '14 at 11:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.