Games Optimisations Tips

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,623
Reaction score
1,437
First Language
French
Primarily Uses
RMMV
Some good tips here for optimise your project.
absolutely essential to memorize.
Performance Tips rmmv
*Global
  • Only optimize when you need to! PIXI can handle a fair amount of content off the bat.
  • The WebGL renderer is way faster than the canvas renderer. Use WebGL where you can!
  • Be mindful of the complexity of your scene. The more objects you add the slower things will end up.
  • Pixi renders things from back to front in the order they appear in the scene
  • Being mindful of this order can help, for example: sprite / graphic / sprite / graphic is slower than sprite / sprite / graphic / graphic.
  • Some older mobile devices run things a little slower. passing in the option 'legacy:true' to the renderer can help with performance
  • Culling, PIXI does not cull anything, we have left this to you and your application.
*Sprites
  • Use spritesheets where possible to minimize total textures (texturePacker)
  • Sprites can be batched with up to 16 different textures (dependent on hardware)
  • This is the fastest way to render content
  • On older devices use smaller low res textures
  • Add the extension @0.5x.png to the 50% scale-down so PIXI will double them automatically
  • Draw order can be important
*Graphics
  • Graphics fastest when they are not modified constantly (not including the transform, alpha or tint!)
  • Separate Graphic instances are not batched
  • Using 300 or more graphics objects can be slow, in this instance use sprites, if you can create a texture to share between them.
*Textures
  • Textures are automatically managed by a Texture Garbage Collector
  • You can also manage them yourself by using texture.destroy()
  • If you plan to destroyed more than one at once add a random delay to their destruction to remove freezing.
  • delayed texture destroy if you plan to delete a lot of textures yourself.
*Tinting
  • Tinting is totally FREE in the WebGL renderer, there is literally no overhead. So go nuts!
  • Tinting has a one time setup cost when using the canvas renderer per texture. Animating tints can be slow on the canvas renderer.
*Text
  • Avoid changing it on every frame as this can be expensive (each time it draws to a canvas and then uploads to GPU)
  • Bitmap Text gives much better performance for dynamically changing text.
  • Text resolution matches the renderer resolution, to increase resolution yourself you can textDouble the font size & scale it down to 50%.
*Masks
  • Masks can be expensive if too many are used. 100s of masks will really slow things down
  • Axis aligned Rectangle Masks are the fastest (as the use scissor rect)
  • Graphics masks are second fastest (as they use the stencil buffer)
  • Sprite masks are the third fastest (they uses filters) - really expensive do not use too many in your scene!
*Filters
  • Release memory : displayObject.filters = null
  • If you know the size of them: displayObject.filterArea = new PIXI.Rectangle(x,y,w,h). This can speeds things up as it means the object does not need to be measured.
  • Filters are expensive. Using too many will start to slow things down!
*CacheAsBitmap
  • Setting cacheAsBitmap to true turns an object into a sprite by caching it as a texture.
  • spriteCache, It has a one time cost when it is activated as it draws the object to a texture.
  • Avoid changing this on elements frequently.
  • If you have a complicated item that has lots of sprites / filters AND do not move then this will speed up rendering!
  • Do not need apply to sprites as they are already textures
  • Do not use if the object where its children are constantly changing as this will slow things down
*Measuring
  • Constantly getting the width and height of objects can be slow for complex objects.
  • Getting width and heights of Sprites is fast!
  • If an object does not change often, use and store the bounds of an object by calling myObject.getBounds()
*Interaction
  • If an object has no interactive children use interactiveChildren = false the interaction manager will then be able to avoid crawling through the object.
  • Set hitArea = new PIXI.Rectangle(x,y,w,h). As above should stop the interaction manager from crawling through the object
__________________________________________________________
Destroying Objects
All PIXI objects have a .destroy() method that cleans up any references it holds (to allow for garbage collection), as well as potentially cleaning up GPU memory. Once you are finished with an object and want to get rid of it, you should call the .destroy() method.

When destroying textures, make sure to consider if you need to also destroy the BaseTexture that it uses to represent the source image. If so, you need to pass true as the first parameter to ensure that WebGL and CPU memory for the base image is also cleaned up.

References: Texture.destroy, BaseTexture.destroy

Masking
There are two forms of masking supported: "vector" masking which uses a Graphics object to draw a masking shape, and "alpha" masking which uses a Sprite that represents the masking area. When using a Sprite it may be useful to sometimes draw the shape and colors that are needed at runtime. You can do this in a few ways:

  1. Draw the shape with a Graphics object, call graphics.generateTexture() and then use that texture to create a new Sprite.
  2. Draw the desired mask to a <canvas/> element, then create a texture from that canvas with Texture.fromCanvas(canvas);
References: Texture.fromCanvas, Graphics, DisplayObject.generateTexture, DisplayObject.mask

Resizing Renderer
It's very common use-case in PixiJS to want to create a canvas that resizes to the full width and height of either the window or the parentNode. PixiJS, however, does not handle window resize events internally, so the user must handle these and tell the renderer to resize. Here are two examples of how to implement resizing of the canvas. Note: these examples require some CSS to property handle resize.


by Ivan Popelyshev && Matt Karl
http://pixijs.download/dev/docs/index.html
https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips
 
Last edited:

Kvothe

The Bloodness
Veteran
Joined
Jan 21, 2014
Messages
149
Reaction score
557
First Language
Brazil
Primarily Uses
N/A
Good articles :) Maybe someday I'll create a topic about some opt. for programmers (what avoid, what use (of course, I'll use some 'third fonts'))
 

peq42_

Yeet
Veteran
Joined
Feb 5, 2016
Messages
484
Reaction score
288
First Language
Portuguese(BR)
Primarily Uses
RMMV
Great post!
I think it should be fixed both here and on others javascript subforums. Really useful for everyone.
 

kickthenoin_ci

ini_kun
Member
Joined
Feb 11, 2017
Messages
26
Reaction score
59
First Language
Korean
Primarily Uses
RMMV
Nice article.
If you allowed, I hope to introduce this article and translate it in Korean.
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
1,678
Reaction score
1,095
First Language
Portuguese - Br
Primarily Uses
RMMZ
Great work!!!
One question:
There are some plugins that shows a choice for you to use canvas/webgl or auto(default).
So, if webgl is faster than canvas, do you advice me to put this configuration in plugins to always web gl?
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,623
Reaction score
1,437
First Language
French
Primarily Uses
RMMV
Don't worry about that's, by default it allway webGL, only if the environment not allowed the game will run in canvas mode.
Some old technologie not support webGL.
 

Eliaquim

Hakuen Studio
Veteran
Joined
May 22, 2018
Messages
1,678
Reaction score
1,095
First Language
Portuguese - Br
Primarily Uses
RMMZ
Don't worry about that's, by default it allway webGL, only if the environment not allowed the game will run in canvas mode.
Some old technologie not support webGL.
Ok! Thank you!!
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Profile Posts

Why is there so much month left at the end of money? D=
Hello humans! How goes your day in this journey of living? I hope it is good, for I am human like you, and I am feeling great! Worship the altar.
Sand is basically small rocks

Forum statistics

Threads
105,617
Messages
1,015,009
Members
137,283
Latest member
cieluz
Top