Jump to content

How render() works?


Aaron Wang
 Share

Recommended Posts

30 minutes ago, xerver said:
  • This is browser js, everything is blocking. The js context is blocked until js stops running.
  • The entire canvas is painted, it is also cleared (but that behavior is configurable)
  • Can you be more specific?

When I'm making changes, will it be faster if I try to reuse PIXI objects as much as possible, and only update objects' properties? Will it be slower if I just remove all children and add new ones from scratch? As you can imagine, create new ones from scratch will be simpler for the logic, but I'm afraid it will impact performance.

What impact performance the most? Number of objects? Layers of objects? Size of objects? Size of canvas?

How does Sprite compare with Graphics and Text on performance?

Is there a best practice or anti-pattern guide for performance?

Thanks.

 

 

 

Link to comment
Share on other sites

Quote

When I'm making changes, will it be faster if I try to reuse PIXI objects as much as possible, and only update objects' properties?

Of course, allocation is expensive.

Quote

Will it be slower if I just remove all children and add new ones from scratch?

If you are adding/removing the same object you are wasting time you didn't need to spend so I wouldn't do that.

Quote

As you can imagine, create new ones from scratch will be simpler for the logic, but I'm afraid it will impact performance.

Actually, if you use object pooling the complexity is relatively the same.

Quote

What impact performance the most? Number of objects? Layers of objects? Size of objects? Size of canvas?

Depends on your application. Most of the draw performance things are just general OpenGL and JavaScript best practices, not much pixi-specific stuff. We do automatic batching while walking the scene tree by not calling gl draw until we need to flush the batch (texture change, max batch size, etc). Just follow gl/js best practices and you will be good to go.

Quote

How does Sprite compare with Graphics and Text on performance?

They don't compare, they do different things and solve different problems in different ways. Sprite is for drawing a texture, graphics for primitives, text for writting text using the browser text engine.

Quote

Is there a best practice or anti-pattern guide for performance?

Like I said, nearly all of it is just general OpenGL and JS best practices. Only things to keep in mind, as in any game app, are to reduce allocations and reduce draw calls. We also provide .destroy() methods to all pixi objects to ensure we lose references (so it can be garbage collected) and to cleanup GL memory if necessary.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...