Phaser Performance with large resoluton

[olkina]

Hi!

 

I'm working on a game for mobile devices. I use Microsoft Visual Studio with Cordova project to code and debug, and I plan to use Phonegap Build to compile my game for the deployment.

 

I'm really new in JavaScript game development. (I was working on ActionScript about last 8 years and I have really good experience in Adobe AIR development.)

 

I'm writing my first game in Phaser. Because we're planning to publish our games for the modern mobile devices we've decided to use the graphics with high resolution (2048x1536).

 

The first state of my game looks nice on the PC, but in the mobile doesn't work well: I see the game elements appears on the screen (but I supposed to see the splashscreen until I finish to put the elements on the game), the background sound sounds like in Skype conversation.

 

The sound weight is 3.9 Mb, and all the graphics I use in the state are 1.7 Mb.

 

Is it possible to get to the good performance with such big resolution?

 

Maybe I have to choose another game engine?

 

I have addition problems:

 

1. The tileSprite background that I can see in PC during the debug in Ripple I don't see in the device - I see black background with green lines

 

2. I can hear the sound during debug on PC and during debug on the device, but when I compile my game with Phonegap the sound just disappears. I hear the sound of silence...

 

 

 

Olga

[rich]

That's a huge resolution, although I think the issue is more PhoneGap than Phaser to be honest. You're probably just maxing out what its webview can handle.

 

If sprites are appearing black / invisible then it's usually because the texture is unable to load onto the mobiles GPU (i.e. it's too large).

 

Have you tried using CocoonJS or CrossWalk at all?

 

I would also suspect performance is very device specific - i.e. a cheap Android tablet would struggle massively vs. a more expensive one (or an iPad).

[SolarJS]

Regarding the resolution I think you are developing for iOS / iPad. Note that the maximum texture size for these are 2048x2048 for a texture atlas to be uploaded to GPU via the browser. If you have larger textures this may be the reason your sprites are not visible.

 

It's possible to get a good speed at iOS devices with that resolutions. Android is harder to handle and may need more tweaking. You may consider to use a different feature set for PC and mobile to get the best user experience for each platform.

[olkina]

I'm checking the CocoonJS right now, thank you, Rich.

 

Also, I've changed the tile image and now I can see the tiled backgorund on my device.

 

I have to rich good performance on cheap device - so Android device is good for testing.

 

I have additional question:

 

I designed my application for large screen: 2048x1536, but when I run it on the device, I see in the debugger that  window.innerWidth = 598px (landscape layout). So phaser have to scale down all the page to fit the small window, and then it will be stratched back to 1920 - the real screen resolution of my device. ow can I avoid this double work?

[olkina]

Regarding the resolution I think you are developing for iOS / iPad. Note that the maximum texture size for these are 2048x2048 for a texture atlas to be uploaded to GPU via the browser. If you have larger textures this may be the reason your sprites are not visible.

 

It's possible to get a good speed at iOS devices with that resolutions. Android is harder to handle and may need more tweaking. You may consider to use a different feature set for PC and mobile to get the best user experience for each platform.

Hi SolarJS!

 

1. I've resized the texture for the background and it works well.

 

2. I need a slution for mobie devices only. But Android is included

 

Olga

[mariogarranz]

Are you using WebGL renderer? I noticed I have similar issues with WebGL in some mobile devices.

My guess is it's something related with texture sizes or power of two dimensions (I use some BitmapData that are not powers of 2 often), but if you're using WebGL switching to CANVAS and see if it works could be a first good step.

[SolarJS]

Hi SolarJS!

 

1. I've resized the texture for the background and it works well.

 

2. I need a slution for mobie devices only. But Android is included

 

Olga

 

Hi Olga,

 

great it worked.

 

Regarding performance it would be helpful which Android devices you are targeting at? Only tablets or phones too? What is the lowest device (tablet / phone) you game should run at?

 

Also, if you are targeting low budget devices like Samsung S3 Mini (old or new version) you may consider to have different graphic sets / save yout graphics at different resolutions. A S3 Mini has a really hard time to handle such large graphics. You could easily double or triple your frame rate by simply feeding proper scaled down graphics. A visual difference shouldn't be noticeable since the screen is small.

[olkina]

Hi Solar!

 

We are creating kids aducational games and we don't mind about Samsung Mini, but we have to support tablets. Now thw app runs on Nexus9 tablet has bad performance. The lowerst device we're going to support is iPad2.

[SolarJS]

Ok. So you have iPad 2 with 1024x768 and Nexus 9 with 2048x1536. As the iPad has faster per pixel performance than the Nexus I would lower the intern resolution you work with. The first thing I would do is run a test if the game runs significantly faster in 1024x768 at the Nexus. If so, try upscaling via CSS (which is internally done via the GPU and therefore your best bet). You may alter the smoothing options to get a more crisp visual experience. Although I doubt it can be seen that much. 

 

If the upscaled images does look too blurry and smoothing options result in a too pixelated experience you may switch to a 1x, 2x, 3x etc. graphics set. That way you run internally in 512x384. Then for iPad you use a 2x texture set, for Nexus a 3x set (although 4x would be of highest quality, but you want to gain more performance).

 

You may even speed up your game a lot by building a custom framework, but if you haven't done yet in AS3 and are new to JavaScript I definately would stay with phaser. It's solid and easy to use. So the main path would be to lower the size of images, aswell as possibly lowering the number of animations you use. Also, try to do image rendering only (no paths) and sort your rendering / use as less texture atlases as possible. This helps to reduce the number of state changes (when the GPU switches to another texture atlas). If you have only 1-3 you run you game fastest. If you have more than 10 you should rebuild your graphics set.

 

I hope that helps.

[jouniii]

I haven't found ie. 15 textures to be an issues (of course not every one is full size) on mobile webGL. Though about 10 is used at the same time. However biggest factor is the DPR size, my experience shows that about 1.25 (not full 2) is already enough to "fool" higher retina feeling and works well in many mobile devices performance wise. iPhone 6 plus and latest iPads can work fine with 1.5 - 1.75 DPR, although iPhone 6 plus would ask for 3.

 

So key really is to use proper DPR and texture atlases. If  game is heavy on effects and sprites, you may want to throttle those down with some rules (ie. based on Android version, etc)