Scaling pixel art

Javi · November 2012

http://research.microsoft.com/en-us/um/people/kopf/pixelart/

http://en.wikipedia.org/wiki/Image_scaling

john26 · November 2012

The wikipedia article is interesting. I'd be interested to know what scheme Gideros uses. However, the wiki article only covers whole number multiples x2, x3 etc. Even simple pixel doubling/tripling... is acceptable in that case, especially if you want a "retro" look. With Android devices in particular (and the new iPhone 5) we face the much harder challenge of fractional scaling especially x1.5 in my experience.

moopf · November 2012

@john26 Why on earth would you scale things on the iPhone 5 by fractions?

john26 · November 2012

If you wrote the game for iphone 3GS or 4 you need fractional scaling for iPhone 5 (1136/960 = 1.1833)

moopf · November 2012

Sorry John but that's absolute rubbish. Width is still the same and Gideros would scale to the lowest of the two scales so it would choose the scale dictated by the width and would retain perfect x2 scaling. Unless you're using Stretch scale mode in which case you need to stop as it would always look awful as all your graphics would be stretched.

Anyway on the iPhone 5 you should just be using the extra height to extend your gameplay area - that's the way to use it.

There is a case that stretching to an iPad would need fractional scaling but again, if you have any kind of interest in visual quality, you'd clamp it using pixel perfect scaling and use the extra space. The same can be said for a lot of Android screen dimensions as well.

john26 · November 2012

Well, if you are happy to write a new version for every popular resolution, then you obviously don't need scaling. Some don't have time to do this and so use the scaling options supported by Gideros. Both approaches are reasonable.

You can't always "use extra height to extend the gameplay area". That works for scrolling games but some games have a fixed grid. Consider a chess game, for example. You can't add extra rows to the chessboard!

zvardin · November 2012

I think the idea would be to have something that looks nice like a background that extends etc in those cases.

moopf · November 2012

@john26 It's not about writing a "new version for every popular resolution" at all. And it's also not about discarding scaling. Let me try to explain...

I use scaling in Gideros but try to ensure where possible that it's clamped to multiples (you can alter scaling mode at runtime and if it's within tolerances I clamp to pixel perfect, e.g. x1 x2 x3 etc., otherwise I allow free scaling using letterbox mode). Even in letterbox I'm using the extra space as well.

Whilst you may not be able to add extra rows to a chessboard, presumably you have some onscreen GUI that could be altered to take into account the extra space, or you could space out the board from the GUI etc. The point is that with thought, there are always ways you can alter your interface to look right on multiple ratios.

In web design there's something called 'responsive design' which entails producing a design that re-flows and changes automatically depending on the size of the screen the user is viewing the site on. Exactly the same sorts of principles need to be used in app development where you're dealing with multiple screens of different ratios. It's not about writing a new version for each resolution at all, it's about building flexibility into how you lay things out.

The problem is that it takes a bit more work if you want to get your app looking nice on the widest range of devices possible. Which is why lots of amateur devs just don't bother and just rely on scaling to get them by which, in my opinion, is only half of the solution for dealing with different ratio screens. It's a reasonable approach, absolutely, but it's not a complete approach and solely relying upon that does not give you the best possible results.

john26 · November 2012

Amateur devs like Zeptolab? Cut the Rope levels are mostly single screen and stretch right across the device. On my PlayBook, Om Nom is noticeably taller and thinner than he is on an iPad . Cut the Rope does have icons but these are superimposed on the playing area: many mobile apps do not have separate rows of icons you could reconfigure. Another example is Train Yard which, like chess, is based on a fixed grid leaving few alternatives other than scaling.

Regarding whole number scaling, it depends on your base resolution. Many games are designed on the iPhone 4 resolution 640x960. There are few devices which have 2x this resolution, probably none with 3x and many with 0.8-1.5 times. You can't always avoid fractions.

For scrolling games, of course, there is no problem either not scaling or using whole numbers.

moopf · November 2012

@john26 Just tried it on by Acer 7" tablet and it's clear that they have stretched the backgrounds to accomodate a taller, thinner screen, but that's just an example of them being flexible with their design. On level 2 for instance on my iPhone Om Nom sits on a cardboard plinth that rests directly on the bottom of the screen. On my Acer it doesn't, it's sitting higher up. On my daughter's Samsung phone he sits in a slightly different position again. What they look like they've done is stretch the background to fit but position everything else in the same relative areas so, essentially the play area retains the same dimensions regardless of the device, as do the images. So no, they're not doing the simple thing that you suggest, at least not from what I can see.

On Nom doesn't really look taller and thinner on the Acer or my daughter's Samsung either, in fact all the foreground stuff looks to be the same kind of ratio as on my iPhone and I'd expect to see everything looking a bit stretched if they were doing as you say - you'd see circles as elipses etc. which I'm not seeing.

Haven't tried Train Yard, but you certainly can center your vertically and horizontally play area within the rest of your GUI without stretching, just takes some thought.

I'm not saying that you can always avoid fractions, I am saying that you can limit where fractional scaling would happen with the methods I've outlined. Just stretching the screen width or height ways is not a solution I'd ever be happy with though - only solutions that retained the aspect ratios of my images where I wanted to (but, as with Cut the Rope, you're then still free to stretch imagery that will work OK, like their background etc.)

Javi · November 2012

In any case, I think these algorithms are really good to upscale old graphics/sprites, not necessarily in real time.

moopf · November 2012

In any case, I think these algorithms are really good to upscale old graphics/sprites, not necessarily in real time.

Sorry the thread got sidetracked. I think they're getting good results with their algorithm but I do like the retention of the pixels with the Hq4x method - that looks really neat.

Javi · November 2012

Sorry the thread got sidetracked. I think they're getting good results with their algorithm but I do like the retention of the pixels with the Hq4x method - that looks really neat.

I agree, the Hqx algorithm is really good, probably the best.
It'd be great to have a Photoshop plugin with these scaling filters...

moopf · November 2012

I agree, the Hqx algorithm is really good, probably the best.
It'd be great to have a Photoshop plugin with these scaling filters...

Just had a quick look and I can't seem to find one. Shame, it looks really useable!

Javi · November 2012

Scale2x and Scale3x plugins for GIMP:

https://sites.google.com/site/khomsanph/weblog/scale2x-and-scale3x-gimp-plugins-with-fast-pixel-operation

Scale2x, Scale3x, 2xSaI, Super2xSaI and SuperEagle plugin for Paint.NET:

http://forums.getpaint.net/index.php?/topic/22560-pixel-art-scaling-plug-in-beta-release/

Scale2x and Hqx binaries:

http://scale2x.sourceforge.net/download.html
http://code.google.com/p/hqx/downloads/list

john26 · November 2012

@Javi: sorry to hijack the thread! Yes, hqx looks great. I wonder if that's what Gideros implements when you set filtering=true for textures.

@moopf: you appear to be right, Om Nom is not squashed but simply repositioned depending on the screen width/aspect ratio. I suspect Box2D is running the same world irrespective of screen size/shape with distances in metres. The object positions are then scaled to pixels depending on screen size. This is the recommended approach described on the Box2D website. It seems actual bitmaps are scaled the same in both directions, possibly with whole number scaling.

Thanks for the discussion, it has helped to clarify my thoughts on scaling.

Javi · November 2012

@Javi: sorry to hijack the thread! Yes, hqx looks great. I wonder if that's what Gideros implements when you set filtering=true for textures.

There is no problem at all, to open new discussions is the purpouse of any forum.

For sure Gideros is using linear/bilinear or trilinear scaling, these algorithms are great to upscale "pixel art" but it wouldn't be a good idea to use them to scale all images (and it's only possible to scale up in integer multiples of 2 and 3).

Mells · November 2012

@Javi Thank you for sharing those links.

I don't want to hijack this discussion, @moopf @john26 @Javi I'd be interested to get your opinion on the following discussion :
Working with scale ratios & resolutions in mind.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Scaling pixel art

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Scaling pixel art

Comments