Games Optimisations Tips

Discussion in 'Learning Javascript' started by Jonforum, Mar 16, 2018.

  1. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,474
    Likes Received:
    1,191
    Location:
    Canada / Québec
    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: Mar 16, 2018
    #1
  2. Kvothe

    Kvothe The Bloodness Veteran

    Messages:
    92
    Likes Received:
    379
    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'))
     
    #2
    Jonforum likes this.
  3. elpeleq42

    elpeleq42 Veteran Veteran

    Messages:
    355
    Likes Received:
    147
    Location:
    Brazil
    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.
     
    #3
    Jonforum likes this.
  4. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,474
    Likes Received:
    1,191
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    #4
    Kvothe likes this.
  5. kickthenoin_ci

    kickthenoin_ci ini_kun Member

    Messages:
    26
    Likes Received:
    59
    Location:
    south korea
    First Language:
    Korean
    Primarily Uses:
    RMMV
    Nice article.
    If you allowed, I hope to introduce this article and translate it in Korean.
     
    #5
  6. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,474
    Likes Received:
    1,191
    Location:
    Canada / Québec
    First Language:
    French
    Primarily Uses:
    RMMV
    yes , just don't forget to include source
     
    #6
  7. Eliaquim

    Eliaquim Veteran Veteran

    Messages:
    116
    Likes Received:
    18
    Location:
    Brazil - Rio de Janeiro
    First Language:
    Portuguese - Br
    Primarily Uses:
    RMMV
    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?
     
    #7
  8. Jonforum

    Jonforum Veteran Veteran

    Messages:
    1,474
    Likes Received:
    1,191
    Location:
    Canada / Québec
    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.
     
    #8
    Eliaquim likes this.
  9. Eliaquim

    Eliaquim Veteran Veteran

    Messages:
    116
    Likes Received:
    18
    Location:
    Brazil - Rio de Janeiro
    First Language:
    Portuguese - Br
    Primarily Uses:
    RMMV
    Ok! Thank you!!
     
    #9

Share This Page