Hi everyone, I’m fairly new to rendering for defold and need some help. I have a 3d game and I would like to make a GUI for it, which is attached to a world coordinate (let’s say health bar or interaction button over a game object). Accordingly, the camera flies around the world and rotates. I wanted the world gui on the screen to be in the correct position and looking at the camera. How would I go about doing this? What are some pitfalls with the gui? Perhaps there is some ready made minimal example I could look at?
For things that exist in the world, you’re much better off using labels and sprites inside of game objects instead of the GUI system.
2 Likes
You can read here about gui in world coordinates
About 3d it worked same, but you have new problems.
1)You need to fix distance field shader. Shader worked in pixels not in meters so df font will be blurry
varying lowp vec2 var_texcoord0;
varying lowp vec4 var_face_color;
varying lowp vec4 var_outline_color;
varying lowp vec4 var_sdf_params;
uniform mediump sampler2D texture_sampler;
void main()
{
lowp float distance = texture2D(texture_sampler, var_texcoord0).x;
lowp float sdf_edge = var_sdf_params.x;
lowp float sdf_outline = var_sdf_params.y;
lowp float sdf_smoothing = var_sdf_params.z/100.0;
lowp float alpha = smoothstep(sdf_edge - sdf_smoothing, sdf_edge + sdf_smoothing, distance);
lowp float outline_alpha = smoothstep(sdf_outline - sdf_smoothing, sdf_outline + sdf_smoothing, distance);
lowp vec4 color = mix(var_outline_color, var_face_color, alpha);
gl_FragColor = color * outline_alpha;
}
2)you need enable depth test for gui in your shader. To avoid gui rendered on top of models
3)you need to enable depth write for gui, or make your own sort of gui nodes. To avoid far gui rendered on top of near gui.
4)About look at camera. You need convert camera rotation quaternion to euler.
player.camera.rotation_euler.x, player.camera.rotation_euler.y, player.camera.rotation_euler.z = COMMON.LUME.quat_to_euler_degrees(player.camera.rotation)
--[[
https://android.googlesource.com/platform/external/jmonkeyengine/+/59b2e6871c65f58fdad78cd7229c292f6a177578/engine/src/core/com/jme3/math/Quaternion.java
Convert a quaternion into euler angles (roll, pitch, yaw)
roll is rotation around x in radians (counterclockwise)
pitch is rotation around y in radians (counterclockwise)
yaw is rotation around z in radians (counterclockwise)
--]]
function lume.quat_to_euler_degrees(q)
-- Extract the quaternion components
local x, y, z, w = q.x, q.y, q.z, q.w
local sqw = w * w;
local sqx = x * x;
local sqy = y * y;
local sqz = z * z;
-- normalized is one, otherwise is correction factor
local unit = sqx + sqy + sqz + sqw
local test = x * y + z * w;
local roll, pitch, yaw
-- singularity at north pole
if (test > 0.499 * unit) then
roll = 2 * MATH_ATAN2(x, w);
pitch = PI_HALF;
yaw = 0;
--// singularity at south pole
elseif (test < -0.499 * unit) then
roll = -2 * MATH_ATAN2(x, w);
pitch = -PI_HALF;
yaw = 0;
else
roll = MATH_ATAN2(2 * y * w - 2 * x * z, sqx - sqy - sqz + sqw); -- roll or heading
pitch = MATH_ASIN(2 * test / unit); -- pitch or attitude
yaw = MATH_ATAN2(2 * x * w - 2 * y * z, -sqx + sqy - sqz + sqw); -- yaw or bank
end
--something wrong with names
--return roll, pitch, yaw
return MATH_DEG(yaw), MATH_DEG(roll), MATH_DEG(pitch)
end
1 Like
If you need touches you need to convert coordinates. Look at rendercam it have all convert coordinates functions
Thank you so much for your reply! I’ve actually seen this post before, but I couldn’t figure out what the code for the shaders for the new world_gui material should be. I tried taking the shader code for the sprite, as they behave apart from the rotations to the camera, pretty much the way I need them to, however I couldn’t succeed. The nodes to which I assigned this material disappeared and I didn’t see them anywhere. I assume that all this is due to the fact that the “attribute mediump vec3 position” from the gui gets completely different values than from the game objects
Thank you so much for your reply! I’d like to try to do this with a gui system, as I want to use existing gui frameworks and do interactive things, not just text attached behind a game object.