- Joined
- Mar 28, 2016
- Messages
- 1,623
- Reaction score
- 1,439
- 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.
- 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 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 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 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.
- 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 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!
- 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!
- 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
- 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()
- 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:
- Draw the shape with a Graphics object, call graphics.generateTexture() and then use that texture to create a new Sprite.
- Draw the desired mask to a <canvas/> element, then create a texture from that canvas with Texture.fromCanvas(canvas);
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:
Maybe someday I'll create a topic about some opt. for programmers (what avoid, what use (of course, I'll use some 'third fonts'))
