Using container size to set lower layer resolutions
Shri

Gio,

 

When running my corners game on an iphone, it sometimes refuses to take touch input (hangs).

I assume this has to do with the amount of memory being taken up by the various layers in the game. Anyway, my attempt at solving this is to change the layer resolution based on if it is a mobile browser.

 

In your Match3 example code, there is this following section:

 if (wade.getContainerHeight() <= 768)        {            self.isMobile = true;            wade.setLayerResolutionFactor(this.layers.background, 0.75);            wade.setLayerResolutionFactor(this.layers.boardBack, 0.75);            wade.setLayerResolutionFactor(this.layers.board, 0.75);            wade.setLayerResolutionFactor(this.layers.boardFront, 0.75);            wade.setLayerResolutionFactor(this.layers.front, 0.75);        }

So I went ahead and duplicated this bit in my code.

My quesiton is, is checking the container height still a good way to do it, or is there a newer better method you would suggest ?

Also, is setting the resolution to 0.75 based on some test, or is it just something you have tried that works ?

 

Also, there is a set of lines in the code:

wade.setLayerRenderMode(self.layers.background, "webgl");

To set the render mode of the various layers to webgl.

Is that also something I should be doing in my code, or is that done automatically with wade 2.1 ?

 

Lastly, you set a variable isMobile to either true or false, but I can't see it being used anywhere ?

 

As usual, any help is appreciated.

 

cheers,

Shri

1 Comment
Gio

Hi Shri

 

It's complicated. There are multiple ways of doing it, and the best way ultimately depends on what you're trying to achieve.

 

In the code above, we weren't really trying to determine whether you were running on mobile or not, but whether the screen was big enough to warrant the use of full high-res canvases (which can impact performance).

 

If you're actually trying to determine whether you're on mobile or not, then you may apply this detailed regular expression to the browser's user agent.

 

So why 0.75? You can set your resolution factor to anything you like, and generally speaking, lower resolution factors mean fewer resources. However, that's not always true in all browsers. In Chrome for example, when the canvas size on the screen is much larger than the number of pixels in the canvas (say you've got a 160x90 canvas that's stretched to cover a 1920x1080 area of the screen), the browser starts applying some very clever image resampling algorithms to the canvas to make it look nice even if it's really low resolution. This can be VERY slow.

 

So I would never go below 0.5 with resolution factors, just in case: when the resolution factor is 0.5 or higher, the resizing is done with simple bilinear filtering, which is likely to be hardware-accelerated and fast on pretty much all platforms.

 

Regarding webgl, yes you have to set it yourself, the default render mode is always 2d canvas. If your layer(s) can benefit from being webgl, and they don't do any special drawing that requires a 2d canvas context, then setting them to webgl should improve performance. On iOS < 8 this doesn't matter anyway, because webgl is not supported and WADE will fall back to canvas rendering anyway, regardless of what you set. On Android and newer iOS however, it can make a huge difference.

 

Generally speaking though, I would first run a profile in Chrome to see exactly what is being slow. Even though it may not be the same things that are slow on an iPhone, it may be a good indication of any major performance bottlenecks - it may be that it's unrelated to the resolution of the layers.

Post a reply
Add Attachment
Submit Reply
Login to Reply