Jump to content

hidden GUI objects slow game render?


can2nac
 Share

Recommended Posts

How GUI objects slow game render? 

Hi,

i have pretty much GUI panels in RPG game (nav bar, loot panel, inventory, dialogs, quests, stats etc). All of the are a background and a set me.GUI_Object + some labels (up to a 50 objects per a single panel). All together they dropped the refresh rate from 50 down to 40 frames. The thing is that they are not in Viewport i.e. position is  -100000;0 , but game still thinks that they are in Viewport (obj.inViewport=true;) despite thier actual position. Floating is set to true for them by me. According to line 13162 in melon.js they will always be inViewport:

melon.js, line 13162

// check if object is visible

obj.inViewport = isFloating || viewport.isVisible(obj.getBounds());

// update our object
isDirty = ((obj.inViewport || obj.alwaysUpdate) && obj.update(dt)) || isDirty;

So if obj is floating it will be always inViewport. Why? 

What is a proper way to temporarely remove GUI objects from the viewport?

 

best

Link to comment
Share on other sites

Hello,

well technically checking for `floating` is not wrong, as floating objects are meant to stay in the viewport space coordinates. Now admittedly we could check for the object bounds and it would solve the issue I suppose, but since floating were meant to be "always" visible, checking for `floating` is a shortcut, and giving it an offscreen location does not sound right to me anyway.

so my recommendation would be to actually add or remove them from the world container,  and this is actually what we do for the debug panel :

https://github.com/melonjs/melonJS/blob/master/plugins/debug/debugPanel.js#L491-L516

also I would recommend using a user-defined container for all you GUI elements. Not only it's then easier to add or remove them from the root world container (also, assuming you actually need to update but not draw your UI Elements, you can still trick it by overriding the drawing function, and add a visibility test yourself when you want to show or hide any elements).

below is a very basic example of an UI Container:

https://github.com/melonjs/melonJS/blob/master/examples/UI/js/entities/UIContainer.js

 

Hoping this will help !
 

 

Link to comment
Share on other sites

i have already tried to do this way but forgot to set keepalive to true. Will have some time to try such approach tomorrow.

BTW why giving offscreen position doesn't sound like a good idea to you? It seem like a common approach at least in web dev.   

Link to comment
Share on other sites

8 hours ago, can2nac said:

BTW why giving offscreen position doesn't sound like a good idea to you? It seem like a common approach at least in web dev.   

well, again it was more because of the shortcut we used (checking for the boolean) and the assumption we took that those object would always be in the current viewport area. And checking against one boolean is way cheaper that checking if a rect is fitting or overlapping another one :)

but ok, fair enough, it does not cost that much to actually modify that to make it more "generic" (I would say), I created a ticket here , let's see if other developer/contributors have any objection on this :)

Link to comment
Share on other sites

  • 2 months later...

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...