Label looks more transparent in build than editor

So I’ll try to summarise this to the best of my ability, as I was not able to recreate this problem in a fresh project, though that might simply be accounted for by me not remembering something.

First two images, the first is a screenshot from the editor and the second is from the build (HTML5):
Editor, Build

Now it is only in one scene of mine that this happens, every other label in another scene is fine. But that is surely because I tried to have some UI render behind game objects in that specific scene. I don’t have experience in graphics programming and shaders so the way I achieved this was by slightly rearranging the render script that was provided by @britzl orthographic camera asset, it now looks like the following:

Render Script
local camera = require "orthographic.camera"

camera.ORTHOGRAPHIC_RENDER_SCRIPT_USED = true

local CLEAR_COLOR = hash("clear_color")

local IDENTITY = vmath.matrix4()

function init(self)
	self.tile_pred = render.predicate({"tile"})
	self.gui_pred = render.predicate({"gui"})
	self.text_pred = render.predicate({"text"})
	self.inventory_text_pred = render.predicate({"font"})
	self.inventory_pred = render.predicate({"inventory"})
	self.particle_pred = render.predicate({"particle"})

	self.clear_color = vmath.vector4(0, 0, 0, 0)
	self.clear_color.x = sys.get_config("render.clear_color_red", 0)
	self.clear_color.y = sys.get_config("render.clear_color_green", 0)
	self.clear_color.z = sys.get_config("render.clear_color_blue", 0)
	self.clear_color.w = sys.get_config("render.clear_color_alpha", 0)
end

function update(self)
	-- clear color
	render.set_depth_mask(true)
	render.clear({[render.BUFFER_COLOR_BIT] = self.clear_color, [render.BUFFER_DEPTH_BIT] = 1, [render.BUFFER_STENCIL_BIT] = 0})
	render.set_depth_mask(false)

	-- set default blend state
	render.enable_state(render.STATE_BLEND)
	render.set_blend_func(render.BLEND_SRC_ALPHA, render.BLEND_ONE_MINUS_SRC_ALPHA)

	-- draw inventory in screen space using an orthographic projection
	render.disable_state(render.STATE_DEPTH_TEST)
	render.disable_state(render.STATE_CULL_FACE)
	render.enable_state(render.STATE_STENCIL_TEST)
	render.set_viewport(0, 0, render.get_window_width(), render.get_window_height())
	render.set_view(IDENTITY)
	render.set_projection(vmath.matrix4_orthographic(0, render.get_window_width(), 0, render.get_window_height(), -1, 1))
	render.draw(self.inventory_pred)
	render.draw(self.inventory_text_pred)
	render.disable_state(render.STATE_STENCIL_TEST)
	
	-- draw world per camera
	local cameras = camera.get_cameras()
	if #cameras > 0 then
		render.disable_state(render.STATE_DEPTH_TEST)
		render.disable_state(render.STATE_CULL_FACE)
		render.disable_state(render.STATE_STENCIL_TEST)
		for _,camera_id in ipairs(cameras) do
			local viewport = camera.get_viewport(camera_id)
			render.set_viewport(viewport.x, viewport.y, viewport.z, viewport.w)
			render.set_view(camera.get_view(camera_id))
			render.set_projection(camera.get_projection(camera_id))
			render.draw(self.tile_pred)
			render.draw(self.particle_pred)
			render.draw_debug3d()
		end
	end

	-- draw gui in screen space using an orthographic projection
	render.disable_state(render.STATE_DEPTH_TEST)
	render.disable_state(render.STATE_CULL_FACE)
	render.enable_state(render.STATE_STENCIL_TEST)
	render.set_viewport(0, 0, render.get_window_width(), render.get_window_height())
	render.set_view(IDENTITY)
	render.set_projection(vmath.matrix4_orthographic(0, render.get_window_width(), 0, render.get_window_height(), -1, 1))
	render.draw(self.gui_pred)
	render.draw(self.text_pred)
	render.disable_state(render.STATE_STENCIL_TEST)
end

function on_message(self, message_id, message)
	if message_id == CLEAR_COLOR then
		self.clear_color = message.color
	end
end

In this script, I created two predicates, namely font and inventory, which are meant to be rendered behind game objects. Font in this case covers all the labels as I have also created a new material for it to match the predicate, it can be viewed as analogous to the text predicate. Similarly, inventory corresponds to the GUI predicate, a new material was created here as well. But the only difference in these materials is that their tag is different to match the according render script predicates, all of the vertex programs etc. are the same as in the default font (in my case font-df) and GUI material.

All in all, I’m really unsure where this difference in transparency between editor and build stems from, I’d appreciate help in figuring this out I’ll try to provide all the information necessary. :pray:

I’m using Defold version 1.2.186 on Windows.

Make a duplicate of your project and prune it carefully on its own version control (while double checking the problem persists between removing aspects of it) until you can reduce it while still maintaining this issue. If you can share that then we can for sure help better. Or send the full project to @britzl to inspect though isolated version that still has the issue would be better.

Some things to look at otherwise:

  • Verify the node uses the correct layers in the GUI.
  • Verify the node has the right order in hierarchy.
  • Verify the node has full transparency set.
  • Try using a GUI material that has mipmaps disabled.
  • If you are scaling the node in question try setting it to scale of 1,1,1 and see if it still happens.

The editor and engine uses their own methods and rules for rendering while they both are similar the engine is still the important one to get right. Editor also doesn’t use compression when rendering assets in its viewport while the engine will if you have it enabled. HTML5 target also is technically a bundled build (I’m pretty sure) compared to desktop builds and so is handled a little differently.

5 Likes

Thanks for the response! And it actually looks like it was just due to the scaling on the elements … weird, but I it works now :slight_smile:

1 Like

I forgot to mention that distance field fonts when scaled down can look blurry/greyed due to how the smoothing works. You can slightly counteract this by reducing the overall smoothing in the fragment program of the material.

2021-11-18 09_11_30-distance-field-font-test

In font-df.fp

    lowp float sdf_edge      = var_sdf_params.x;
    lowp float sdf_outline   = var_sdf_params.y;
    lowp float sdf_smoothing = var_sdf_params.z * 0.6;
    lowp float sdf_shadow    = var_sdf_params.w;
4 Likes