Help me to improve mobile performances :)

[Aymeric]

Hey guys,

 

The first part of the project is almost completed, and I'm glad to have done it with Pixi.js! Has a AIR (Flash) developer, I'm now back in love with the web

 

The game is a kind of a Whac-a-Mole. It's running fine on computers (Canvas and WebGL), however I've some performances issues on mobile. I don't have the right to share the link of my project (no visual must be seen)... But please have a look on the source code: html, TypeScript, JS genated by TS (they might be some French words, I'm sorry).

 

I didn't make a game for the web since a while (in fact it's my first in JS), so these are some issues/feedbacks. Sorry for my noob knowldege of the HTML5 world

 

Assets Management

I've created 5 assets sizes, depending the screen resolutions, I load the corresponding one. And then positionning everything dynamically via a scale factor. I've lots of SpriteSheets which could be optimized if pixi.js would support the trim/crop options from TexturePacker. i know that I can do it manually, which should reduce my assets sizes, but won't changes performances. Am I right?

 

Assets Sizes

I heard that canvas can't handle correctly big assets. My main character has width:526 and height:719. I know it's a bit big, but when we load let say the SpriteSheet for the iPhone it's scale done by 0.5 or even 0.333 so it should be ok?

 

Animations

They aren't doing anything fancy. The SpriteSheet is just displayed (it doesn't move), I wait a little bit on its end animation and when the timer is completed I replace it by an other animation. If it has been touched I change it directly to an other animation again. When I see the MovieClip example, I can't understand why mine aren't running fine...

 

Viewport

What is the current state of the html viewport tag? From what I've tried, if you don't put it, the retina is considered but everything is running very very low. If you put it, I suppose that the retina isn't enabled and so I've better performances. I've some issues to set up the correct scale for my application when I launch it on mobile (due to the viewport...).

 

Mobile

The button for cutting the sound doesn't work correctly. If I touch it, it changes its state but come back to its previous state. Dafuq !?

 

Audio

I used buzz library which works fine! However on Android (on my Nexus 7, last system version), a sound can't loop. I tried also without this lib, no way... It isn't possible to loop a sound on Android (Chrome) !?

 

iOS7

It comes with its bug on Safari http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review I'm not able to remove the icons at the bottom even if I've scrolled... very annoying.

 

Pixi issue

Some feedbacks on what might be bugs:

- if you've a look on my code source, you will see that I don't (mostly) use a for / for each loop to remove all the children of a DisplayObjectContainer. Indeed, I'd some bugs: some of them weren't remove! If I called the loop several times it was ok.

- line 1009 of TS' file. I had to put the this.addChild(this._impact); before this.addChild(this._mcOutTouched); If I made the opposite, I've an error: Uncaught TypeError: Cannot call method 'updateTransform' of undefined pixi.js line 12 coming from the Main.animate and I don't have any ideas why!?

 

That's it! Any help is greatly appreciated

[Aymeric]

Forgot some informatinos:

 

Retina

I enable the retina on mobile this way:

static GetStageWidth():number {       return $(window).width() * ((<any>window).devicePixelRatio || Math.round(window.screen.availWidth / document.documentElement.clientWidth));}

Obviously if I remove it, it loads downscale assets and everything looks pixelated. But it seems that I've better performances, but it isn't crazy...

 

Mobile

When I'm touching a button/MC, I've a black screen coming and leaving very very quickly. No issue on desktop's canvas.

[ooflorent]

Some performance tips:

• Don't scale your sprites at runtime! Create scaled versions of them during the game initialization.
• Cast your asset positions to integers. Be careful because pixi's transformation multiplies position and scale (which can result in a floating number!).
• Trim your assets. The lesser empty pixels are dawn, the faster your game is rendered. 

[alex_h]

 

Mobile

When I'm touching a button/MC, I've a black screen coming and leaving very very quickly. No issue on desktop's canvas.

 

I've seen that before, I think it was when the developer had forgotten to add the preventDefault call on touch events that you normally put in to prevent overscroll. In this case it was triggering something along the lines of a browser feature to highlight the users selection on touch, so calling preventDefault on the touch event stopped it from happening.

 

Sorry if that is a bit vague, it was a while back now!

[Aymeric]

Thanks for the answer guys! I will give them a try and let you know