Pixel Art for Mobile Devices questions

Started by
7 comments, last by andrechanGD 10 years, 6 months ago

Hey guys. Me and my dev friend have come together to try and develop a game for Android phones.
I read that Android mobile devices have the native resolution of 480x800.

As a pixel artist by trade, does that mean that I have to draw with that resolution in mind. Coz I tried it recently, and the drawings are too big that it doesnt look anything like a 16bit era game.

So here's my question:

1)Is it a technical thing, where we have the engine stretch the art?

2)Or do I have to pseudo-pixel with Illustrator to have it ready for any resolution?

Really hope someone would give feedback.

Ive been mulling over this for a while.

(I've attached a png of the test "look" of the game on 480x800. It really really looks off. I like my tree though.)

Advertisement
As a pixel artist by trade, does that mean that I have to draw with that resolution in mind. Coz I tried it recently, and the drawings are too big that it doesnt look anything like a 16bit era game.

I'm not a pixel artist myself and I though pixel art meant something dealing with far smaller resolution and palette than what you are doing with that image?

Getting the most out of very limited pixels is what pixel art is about, isn't it? On a SNES game a tree could be around 30x30 pixels and getting the same look with sprites as huge as what you have there (like 300x300 pixels?) is near impossible as far as I understand.

So maybe you should also rethink the style a bit as you're coming from considerably lower resolutions to 480x800. Seems like you're viewing the objects pretty close which also increases the sprite sizes.

1) Depends on the kind of game you're making. Android devices have many resolutions and many aspect ratios and there's a certain design decisions you need to take with your game. The topic is discussed frequently around here and you can search for older threads about the options.

http://www.gamedev.net/index.php?s=72a5a7896882f569afdfb759397d8bce&app=googlecse#gsc.tab=0&gsc.q=android resolution

2) You mean vector graphics? See the above but note that how to deal with varying aspect ratio / resolution and choosing between pixel and vector graphics are 2 different problems and solutions that you can mix and match.

Yeah, precisely! I knew it was way off when my friend and I were talking about just going with 480x800 standard canvass.
So I guess we need to scale it down a bit, yes and have an engine that just stretches it out, yes?

Thank you for the help.

About vector graphics; I saw this one guy make a tutorial about adaptive pixel art by laying them down on grids in illustrator and making them seem like pixel art. Thus pseudo-pixel. I dunno how effective that is though but I cant afford illusrator so I'm fine with my free software.

Yeah, precisely! I knew it was way off when my friend and I were talking about just going with 480x800 standard canvass.
So I guess we need to scale it down a bit, yes and have an engine that just stretches it out, yes?

About vector graphics; I saw this one guy make a tutorial about adaptive pixel art by laying them down on grids in illustrator and making them seem like pixel art. Thus pseudo-pixel. I dunno how effective that is though but I cant afford illusrator so I'm fine with my free software.

1) I think the ideal way to do multiple resolutions is to have a game where aspect ratio doesn't matter and the camera just shows wider/narrower area if your screen has bigger/smaller resolution. But that is not possible with all kinds of games.

2) The next option is to lock the aspect ratio and block the rest out with black bars if the end device aspect ratio doesn't match. Game camera pixel size will then be scaled according to the device screen pixel size as well. In this case for the graphic content you usually pick the largest resolution available so you don't have to scale up your images which always results in loss of quality.

If you want traditional "accurate" pixel art and go for 2) then I don't recommend using raster images. Pixel art needs to be sharp and scaling them up or down always results in blurring due to resampling and your art is basically just not the same anymore as pixels get recalculated. You could perhaps also make dedicated pixel art assets for each of the resolutions if that makes sense for you and for your game project.

But the tutorial you mention about adaptive pixel art could be a fair solution. A program called Inkscape can probably do it as well and is free to use, so I recommend trying it out.

In a related topic, I picked up Lone Survivor on Steam recently. This one is done with pixel art.

How did he keep his pixels that sharp? Did the devs scale it up or is that the native resolution.
(Basically same questions as above, but applies to PC)

It's hard to tell which methods they used only based on the trailer. Based on the fact that everything moves in the same exact pixel grid by even pixels I'd say it is probably a custom shader that mostly pixelates the screen.and leaves a little variance and detail on top of the pixel definition level. It's hard to tell what they used below the shader, small sprites, big sprites, even vector graphics or 3D would be possible but I doubt it thought because it would be pretty contradicting idea. It wouldn't matter since the shader pixelates everything.

Most of the time, the retro look comes from the game using a Virtual Resolution, or Nearest-Neighbour scaling (which preserves pixelation if you're scaling to resolutions that are multiples of the original - else it doesn't map 1:1 and the result is distorted).

A virtual resolution is used to represent graphics with an appearance differently than that of the graphics context of the application - in other words, you can use it to display pixels that look bigger.

If you want your game to have a 480 x 800 resolution and still look retro\pixel-art, you can use a virtual resolution of 240 x 400. This maps in a way that the pixels will look two times bigger than they normally should.

This means you can open your painting program, create a canvas of 240 x 400 and start drawing your graphics with pixel art. When you're going to display your graphics in your game, they'll be scaled 200% to perfectly fit the 480 x 800 area.

Always do it like that, by having the engine scale the small graphics up to a bigger size.

Never draw the graphics directly with the doubled size, otherwise you would be wasting memory.


Most of the time, the retro look comes from the game using a Virtual Resolution, or Nearest-Neighbour scaling (which preserves pixelation if you're scaling to resolutions that are multiples of the original - else it doesn't map 1:1 and the result is distorted).
A virtual resolution is used to represent graphics with an appearance differently than that of the graphics context of the application - in other words, you can use it to display pixels that look bigger.
If you want your game to have a 480 x 800 resolution and still look retro\pixel-art, you can use a virtual resolution of 240 x 400. This maps in a way that the pixels will look two times bigger than they normally should.
This means you can open your painting program, create a canvas of 240 x 400 and start drawing your graphics with pixel art. When you're going to display your graphics in your game, they'll be scaled 200% to perfectly fit the 480 x 800 area.

Always do it like that, by having the engine scale the small graphics up to a bigger size.
Never draw the graphics directly with the doubled size, otherwise you would be wasting memory.

While this would make your game look more pixelated why would you target 480x800 if you're going to use VR to fake worse than that and waste 3/4th of the definition? If you want to do pixels like this a better option in Android scheme would be to target the 240x320 devices in the first place.

Also this isn't a solution to multiple resolutions/screen sizes on Android since the different resolutions aren't multiples of each other and you will get pixel art distortion. I wouldn't recommend it as it is unless you are supporting strictly one resolution only (which would lose you a major part of the android users/market).

In case you're wondering this also isn't what they used on "Lone Survivor".

For Android development per se I would recommend reading http://developer.android.com/guide/practices/screens_support.html which actually covers a lot of specific ground you are troubled with.

Thank you so much for your feedback. We appreciate it. If only my friend wasnt such a dork and asked it himself. But I guess this concerns me too coz I'm the one rendering.
We're going to test out the different methods you mentioned here.

I'll come back if we're in a dead in again. Thank you so so so much.

This topic is closed to new replies.

Advertisement