GUI is shaking (SOLVED)

Hi, I have one question.
in my game I’m working on, I need to have pie node graphs assigned to objects. Is there any way at all for the gui to watch the go and adapt to the movement of the camera and disappear from the screen when it is not in the field of view? if not, i will be happy for other ideas on how to program the pie graph.
Thank you in advance for your reply.

Yep sure: https://github.com/britzl/publicexamples/tree/master/examples/gui_follows_go

2 Likes

Thank you very much for the answer, I have already studied this example, but I am not sure if it would work completely. I need to move objects beyond the field of view of the camera. Is there any way to get the go position just on the screen, similar to a gui?

I don’t think the solution I proposed prevents you from doing this.

1 Like

I’m sending this message to gui:

 if not global_trading then
	 msg.post("/gui#game", "update_pos", { position = go.get_position("go1") + 
     go.get_position("1") })
end

But the pie node (white circle) is not on port position. Because camera is zoomed and little bit moved. So I want to get position of port on window (or screen). Have you any ideas how to get screen position (not world position) of object?


And thank you for your answers again @britzl.

1 Like

Have you updated your render script to draw the gui together with the sprites and other such components?

The example I shared uses a different material for the gui that is to follow game objects and this material predicate is drawn with the sprites etc

I’ll try to check it all out. I want to ask one more thing, is there a way to use the Rendercam library at the same time? I probably can’t do without the rendercam library.

Yes, you should be able to merge the two render scripts.

1 Like

Okay, thank you very much.

I have one more question, perhaps the last. I was able to combine the Rendercam library with what I wanted, so I can use the Rendercam functions at the same time and render gui objects as well as go objects at the same time. The problem is that I only want to draw some gui and leave others gui in their original state so that they do not move or shrink.

I added only these two lines to the render code:

     self.detached_gui_pred = render.predicate ({"detached_gui"})
     render.draw (self.detached_gui_pred)

Does anyone think of a way to do this part of the code:

    render.draw (self.detached_gui_pred)

apply only to specific gui nodes that I put in the table with their names in advence?

Again, thank you in advance for any suggestions.

I figured it out. Just add a second gui “collection” and set up a different material. That’s all … Defold is very great. :slight_smile:

I also noticed one thing: when I use a camera that monitors a game object (specifically the follow function in the Rendercam library), the unanchored gui shake strangely, I also tried the adjustments in the Render code, but I didn’t come up with anything.
Does anyone know what to do with it?
Here I also attach a sample video of a shaking pie node, I apologize for the poor quality.

Set the material of the GUI to highp instead of the defaults.

1 Like

Thank you so much for the answer, it still makes me the same mistake, maybe I misunderstood. Where can I set a given material GUI higher than an expensive one?

You set the position in the vp of the GUI shader to highp? It needs to be a copy and then set on the material.

vp-highp

1 Like

Thank you very much, bu It still doesn’t work, I set up the Vertex program and for sure the Fragment program, all on highp, but it’s still shaking. Can you think of anything else?

I would guess the drawing of the pie node is being rounded / it’s not anti-aliased, which makes it look weird as the game scrolls. You could switch to to clipping a square outside pie node (with a circle image set on it) but the inner clipping may still stutter weirdly.

There might be a normal game object + shader approach to make sure the pie cutout shape is smooth. Have power of 2 texture on its own atlas so the uvs are perfect.

https://www.shadertoy.com/view/XtV3Dc

You could also draw the anti-aliased pie cutout shape to a sprite buffer directly, use a custom native extension to update it fast.

2 Likes

Well thank you. I guess I’ll try to do it differently than with a pie chart, I’m afraid my knowledge isn’t enough to do something like that.

I’ll prepare some examples for you when I can in the future.

  • Solid color pie shape for go sprite
  • Pie cut out of premade circle image for go sprite
1 Like

GoPie.zip (15.7 KB)

This is naive / hacky but does work. If anyone else has better experience with shaders / math they can make it better.

I was also trying to draw pie shapes with smoothstep so there is no aliasing, it is possible for sure, but I’m still too inexperience to be able to do it right and right away. I’ll try again in the future for sure though.

With this method, you can use a sprite for your base pie shape so you can decorate it however you want easily.

Movement is smooth in the example, recording is just low fps.

3 Likes