Sign in to follow this  
Aymeric

Help me to improve mobile performances :)

Recommended Posts

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 :D

 

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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

 

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.