Stretching game size

[Solidus]

Hi guys,

 

I'm starting to ensure that all my games maintain their original aspect ratio no matter what device they are played with.  However, I am wondering if you all think a 480x320 game should be scaled up to fit tablets devices, or if it should be kept smaller.  Oftentimes the lower resolution graphics can look pathetic on larger screens.

 

What does everyone else do?  Keep the game smaller and nicer... or increase the size to fit the screen?

[Dream Of Sleeping]

I've made one game that uses large images and fits the entire screen, but that was just aimed at desktop. I followed this tutorial http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

 

For now I'm gonna make some simple games and not worry about scaling but when I do want to scale again II was thinking about giving the user the option of high, low, or medium quality images.

[rich]

I'd say it depends on the game and what you can get away with re: performance. There's no "one rule fits all" for this sort of question. For our Wolfblood game (see the Game Showcase forum here) it runs at 1024 x 672 and scales down, there are no low-res assets. For other games we've done with lots of heavy animation and motion we did the exact opposite.

[Ryguy]

For me it's been a bit of a coin toss. You never -really- know how performance is going to be until you're moving things around on the screen, do you? I try to aim for iPhone resolution and then just scale up on bigger screens. It doesn't look half bad on an iPad, though I know it could be better. Some day, perhaps.

[@99golems]

i make my games for iphone 4 size (320 x 480) and scale up or down via css.

 

This works pretty damn well in most cases, but android stock browser performance with a css-scaled canvas is pretty poor. Also I don't think many browsers can do nearest-neighbor when scaling images up/down, and so larger tablets get a little bit of antialiasing and blurriness around the edges. 

 

Here's a good summary of scaling canvases by Dominic Szablewski of impactjs fame: http://phoboslab.org/log/2012/09/drawing-pixels-is-hard

[Solidus]

I have some games that I've made at 640x960 and they do run slower, but DANG they can look pretty good scaled up

 

I agree it's totally dependent on the game. Thank you all for the feedback.

[digitalicarus]

Be sure to try css3d transforms first, then fall back. If you don't the scaling won't be GPU bound and your game performance can suffer somewhat significantly. Here's one way to do it: https://github.com/digitalicarus/caster/blob/master/js/shared.js#L67

 

Also, scaling can be configured a bit in some browsers via some css properties: https://github.com/digitalicarus/caster/blob/master/index.html#L30

 

In action: http://digitalicarus.com/game/caster/

 

Good luck!

[rich]

Be sure to try css3d transforms first, then fall back. If you don't the scaling won't be GPU bound and your game performance can suffer somewhat significantly.

 

I've heard that said a few times, including in a Mozilla article, but I don't believe it's actually true. If the canvas is going to render via the GPU I'm not convinced that scaling the game via CSS3 or normal just width/height makes any difference, it's still GPU accelerated. It's not like it can be doubly GPU accelerated, and I don't believe it would fall back to non-GPU rendering either as changing the viewport scale is quite trivial for the GPU really. But I'd be happy to be proved wrong!

[digitalicarus]

You know, you may be right. I should be careful about giving advice that's not completely confirmed. I've recently possibly fooled myself into believing this when I was working on lighting for my ray caster and disabled the css scaling property. The frame rate was much better so I decided right then to try the 3d versions of the transforms instead. When I switched to 3d I saw an improvement in frame rate, but this isn't a very scientific test.

 

When I look at the transforms W3C spec there's nothing specific about how these routines should be performed, just a prescription for the properties and the behavior. So, like other things, it's up to the browser vendors to implement acceleration for various properties. 

 

So, at this point, both of our assertions are conjecture. I would like to know the truth. I'm trying to comb through the webkit source just to see what the truth is for that browser but I'm unfamiliar with it and get lost easily.

 

https://github.com/WebKit/webkit/tree/master/Source/WebCore/platform/graphics/transforms

 

I'm not super sure if I'm interpreting this right, but it does seem that at the point where a scale operation object is instantiated that it's normalized to the same object and that any missing z value is replaced with 1.

https://github.com/WebKit/webkit/blob/master/Source/WebCore/platform/graphics/transforms/ScaleTransformOperation.cpp#L40

 

It also looks like they have abstracted the creation of this object via two prototypes and that if something in the code omits the z value that it is again invoked with a default of 1.

https://github.com/WebKit/webkit/blob/master/Source/WebCore/platform/graphics/transforms/ScaleTransformOperation.h#L34

 

So, even though I'm not 100% sure that I read it correctly I'm willing to concede in the case of webkit. The point still stands that browsers can implement the specs with a variety of approaches. That's one down (I hope), who wants to help with Gecko and the others?

 

Thanks for keeping me honest rich.

[rich]

I think where it all came about from is that for web sites using a css3 transform used to force the element to render via the GPU. But the canvas is already doing that, it is the GPU compositing it to the display (not the browser). I will run a few tests here and see. Maybe it works in some specific browsers like Firefox? I still feel its an html5 myth though

[digitalicarus]

I don't think that canvas content rendering and overall webpage compositing are necessarily a connected process. According to this Mozilla graphics team blog applying 3d transforms doesn't even necessarily indicate that there will be GPU acceleration, only that the browser will put that object in another layer which can make compositing faster: http://mozillagfx.wordpress.com/2013/07/22/hardware-acceleration-and-compositing/

 

I think the CSS transform is a process that runs outside of regular canvas rendering, but we should look to the authorities (people writing the code) or the code itself before drawing conclusions.

[rich]

I don't trust asking anyone unless they are actually responsible for writing the rendering code themselves. But I do think it should be pretty easy to confirm with a few simple tests. I just wish I had longer days to do so

[digitalicarus]

That's what I meant: the authors of the browsers.