Sign in to follow this  
can2nac

hidden GUI objects slow game render?

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

Share this post


Link to post
Share on other sites

I added obj.floating = false to GUI obj hide function and obj.floating = true to GUI obj show function and got 50 fps per second. Is this a correct approach to deal with GUI elems hidden/visible states?

Share this post


Link to post
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 !
 

 

Share this post


Link to post
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.   

Share this post


Link to post
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 :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.