Monarch animated transition > Graphical glitch

Hi!

I’m currently toying with Monarch transitions to understand how it works, overall I get the principle but in a specific context, a graphical glitch occurs and I can’t figure out why.

As you can see in this video, the background (space/planet) is displayed for a very short time (1 frame?) before the fade-in animation (black filter):

The background is a collection (like in the Monarch advanced example)
image
put at the bottom of the stack in the loader.script:

function on_message(self, message_id, message, sender)
	if message_id == hash("show_screen_home") then
		monarch.show(("background"), { no_stack = true })
		monarch.show("screen_home")
		print("SCREEN_HOME TRIGGERED!")
	end
end

screen_home.script (the code is weirdly displayed here but still there):

function init(self)
	msg.post(".", "acquire_input_focus")
	gui.set_render_order(1)
		
	self.transition_black_filter = transitions.create(gui.get_node("black_filter"))
		.show_in(transitions.fade_out, gui.EASING_LINEAR, 3, 0)
		.show_out(transitions.fade_in, gui.EASING_LINEAR, 3, 0)
		.back_in(transitions.fade_out, gui.EASING_LINEAR, 3, 0)
		.back_out(transitions.fade_in, gui.EASING_LINEAR, 3, 0)
	
end

and

function on_message(self, message_id, message, sender)

	self.transition_black_filter.handle(message_id, message, sender)

end

I suppose there is something wrong with the way I manage the background collection, but I don’t what.

Is there a trick, an option/property, a work-around or just another way to proceed to prevent the background from being displayed before the fade-in?

What if you add some kind of fade in animation to the background as well?

When I do that:
1/ the background transition is played
2/ when it’s finished, the screen_home transition is played

I didn’t change anything in loader.script:

function on_message(self, message_id, message, sender)
	if message_id == hash("show_screen_home") then
		monarch.show(("background"), { no_stack = true })
		monarch.show("screen_home")
		print("SCREEN_HOME TRIGGERED!")
	end
end

Both screens are “shown” at the same time, but the 1st transition seems prioriraty and the 2nd transition has to “wait”.

When I switch the order in the loader.script (just to be sure)…

monarch.show("screen_home")
monarch.show(("background"), { no_stack = true })

… then the screen_home transition is played first, and then the background transition:

I must say the result is pretty cool :grin: but unfortunately this is not the expected result.

When I set the background transition duration to 0sec (instant), then the glitch is back :pensive:

Note that this is just a series of tests where I’m trying to understand how monarch works, piece by piece.

In an actual project, I could easily avoid this issue by not having this type of transition, or not having a “shared” background collection at all… but still… I’d really like to know if there is something I’m doing wrong or if the issue comes from Monarch itself.

Monarch is designed to load and show screens in sequence optionally with transitions. The scenario you are using with should work. There is a branch that is currently being tested where the screen loading code has been changed to make flicker and glitches disappear. Please give the branch a try. Also open a ticket on GitHub with a repro case of the branch doesn’t solve it for you.

Looks like the new branch fixed the “simultaneous transition” issue (background + screen_home), but also created a new glitch with a popup transition (that didn’t exist with the default branch, I just checked that to be sure):

I’ll create a ticket on Github and return to the default branch :grin:

edit: