Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411640 Posts in 69394 Topics- by 58449 Members - Latest Member: pp_mech

May 14, 2024, 12:27:28 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperArt (Moderator: JWK5)Scaling Pixel Art for mobile games
Pages: [1]
Print
Author Topic: Scaling Pixel Art for mobile games  (Read 6930 times)
Yomic
Level 0
**



View Profile WWW
« on: September 14, 2013, 01:57:56 PM »

I've had some trouble with my android game:

If I filter the images (using libgdx's texture packer) using nearest filtering I get some pixel distortion where it will stretch parts of the image's pixels very unevenly.  It doesn't help even when I try to maintain aspect ratio either.  The odd stretching issue is still there.

If I filter the images using linear filtering, everything stretches fine but everything is a little bit blurrier... not ideal for pixellated games.

Does anyone know what most mobile developers usually do as far as art and filters to accommodate all the different screen sizes?  I'm not keen to the idea of making art for all the different screen densities, because I'm just small time and it would probably take more than 4 times the amount of time to work on each piece of art.

Even if the latter is the best solution I'm open to any suggestions!
Logged

gggfhfdh
Level 9
****



View Profile
« Reply #1 on: September 14, 2013, 02:04:50 PM »

developing a pixel art game for android just seems like the biggest pain in the ass for this reason
Logged
Gregg Williams
Level 10
*****


Retromite code daemon


View Profile WWW
« Reply #2 on: September 14, 2013, 02:19:10 PM »

Just have one size of graphics, ideally being the original resolution version. Draw your entire scene to an OpenGL Framebuffer, than draw it again enlarged and centered using OpenGL nearest neighbor scaling by a whole number. Letterbox/Pillarbox everything else.

If you don't scale by exact whole numbers, or if you use any sort of filtering your just undoing the whole point of PA to start with.

Unfortunately this does make it very difficult and annoying to deal with on platforms like Android.
Logged

surt
Level 7
**


Meat by-product.


View Profile
« Reply #3 on: September 14, 2013, 02:30:30 PM »

Same thing on all platforms with varying resolution, not just Android.

Design the game that you can adjust the displayed play area some way from the ideal size without adversely affecting gameplay.
Render with the positive integer scaling factor that results in the closest to ideal play area size.

There's no magic to make PA not look like poo when badly scaled.
Logged

Real life would be so much better with permadeath.
PJ Gallery - OGA Gallery - CC0 Scraps
Yomic
Level 0
**



View Profile WWW
« Reply #4 on: September 14, 2013, 04:47:20 PM »

Thanks for all the helpful suggestions!  I've got some work ahead of me now to re-do all my scaling code.
Logged

PompiPompi
Level 10
*****



View Profile WWW
« Reply #5 on: September 14, 2013, 08:34:39 PM »

Since you are doing pixel art, you should probably pick the lowest screen resolution you support or at least the lowest resolution you support without scaling down(as a fallback).
Let's say your virtual game resolution is 320x240.
If you have a screen with a resolution of 1280x800(like my Note phone) the ratio of the virtual screen will not match the ratio of the device resolution.
If you scale the resolution uniformly(the same for width and height) you could match the virtual screen resolution to the device resolution and still keep the same ratio.
The small issue will be that you will have blank areas that are not covered by your virtual screen.
You will have to fill those areas somehow. Either leave them black or decorate them(you could also adjust the virtual screen but that would be more complex).

So given the example, the scaling factor would be:
scale = min(1280/320, 800/240) = min(4, 3.333...) = 3.333...
In this case your scale up will be 3 and a third.
Your new resolution will be: (1066.67, 800).
Well, there is of course an issue here. There isn't really a third of pixel.
The result of such scaling will be that some of your virtual pixels will be wider than others.
If that is not acceptable there is another solution.
Instead of scaling by 3.333..., you can scale up by 3(a normal number).
This will leave you blank areas on both the sides and the top\bottom.
Again, you can leave those blank areas black or decorate them. Maybe put the touch buttons there.

Anyway, there are plenty solutions and it really depends on your requirements and the devices you are willing to support.
Hope this helps.
Logged

Master of all trades.
Yomic
Level 0
**



View Profile WWW
« Reply #6 on: September 15, 2013, 05:50:35 AM »

I think the problem with the latter solution is that on mobile devices, users likely expect you to use most of the screen.  While I can see letter boxing either height OR width, doing both would probably make with some unhappy users.  This makes me think pixellated games just might not be very well suitable for mobile, unless you just scale the GUI to the screen and then scale sprites/BG/non-square-objects onto the screen at whole number ratios (also leaving some unused spaces on certain aspect ratios).
Logged

PompiPompi
Level 10
*****



View Profile WWW
« Reply #7 on: September 15, 2013, 09:25:37 AM »

You can always fill the blank spaces with more of the game contents.
Scale by a whole number but if there are extra pixels just draw more of the game there.
Logged

Master of all trades.
Gregg Williams
Level 10
*****


Retromite code daemon


View Profile WWW
« Reply #8 on: September 15, 2013, 11:11:22 AM »

Yeah if you have a game with scrolling its often easier to just calculate a larger view port, then scale up to fill the entire screen. Of course this is also assuming you can scale up at all. We've run into plenty of problems where are source pixel art is already semi high resolution like 640x480 and 1:1, then you suddenly need to put that on a 1024x600 display..

Just be glad you don't have TV safe zones to deal with as well.
Logged

Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic