Monarch doesn't trigger sequenced transitions correctly

[M.Alkhatib]

Hello fellow Defolders!

I’m new to Defold, and Lua in general. I came here to port a nice and complete game I’ve made using libGDX and I really like Defold so far, it’s simple, extensive, and has great compatibility and performance.

Now, I’m using many extensions to help me reduce the stress, including: Monarch, Druid, Defold-Saver, and Defold-Lang.

So far, I can say that the only thing that’s missing is really just beginner-friendly documentation. Not just for Monarch, but for most extensions.

So, my current issue is that I’m stuck with Monarch, I’m trying to re-create an effect of a fading-in initial-screen that then automatically switches (fades-out) to the next screen (e.g. the “menu”).

However, it seems like I’m handling it wrongly. The main framework I have is really simple, we have the main “controller” that includes the collection-proxies for the screen and the built-in monarch script for each parent of the proxies (e.g. /monarch/screen_proxy.script), and of course a simple script that handles the switching of the screens.

This is is the simple snippet that controls everything:

function on_message(self, message_id, message, sender)
    if message_id == hash("switch") then
        monarch.show(message.scene)
    end
end

And my main “init” function looks like this:

function init(self)
    lang.init()
    druid.set_text_function(lang.txp)
    monarch.debug()
    msg.post(".", "acquire_input_focus")
    msg.post("#", "switch", { scene = "initial" })
end

And so far everything’s great… the “initial” screen initializes and shows correctly:

function init(self)
    self.transition = transitions.create()
    self.transition.show_in(gui.get_node("root"), transitions.fade_in, gui.EASING_LINEAR, 0.7, 0)
    self.transition.show_in(gui.get_node("logo"), transitions.slide_in_left, gui.EASING_LINEAR, 0.3, 0)
    self.transition.show_out(gui.get_node("logo"), transitions.slide_out_right, gui.EASING_LINEAR, 0.3, 0)
    self.transition.show_out(gui.get_node("root"), transitions.fade_out, gui.EASING_LINEAR, 0.7, 0)
    monarch.on_transition("initial", self.transition)
    monarch.add_listener()
end

function final()
    monarch.remove_listener()
end

function on_message(self, message_id, message, sender)
    monarch.on_message(message_id, message, sender)
    if message_id == monarch.SCREEN_TRANSITION_IN_FINISHED then
        msg.post("main:/scene", "switch", { scene = "menu" })
    end
end

So, where’s the issue you might ask? Now, the issue comes whenever the “initial” screen wants to fade-out and the “menu” screen wants to fade-in… Then the transition just bugs-out.

And in case you’re wondering, here’s how I initialize my menu screen:

function init(self)
    self.transition = transitions.create(gui.get_node("root"))
    self.transition.show_in(transitions.fade_in, gui.EASING_LINEAR, 0.5, 0)
    self.transition.back_in(transitions.fade_in, gui.EASING_LINEAR, 0.5, 0)
    self.transition.show_out(transitions.fade_out, gui.EASING_LINEAR, 0.5, 0)
    self.transition.back_out(transitions.fade_out, gui.EASING_LINEAR, 0.5, 0)
    monarch.on_transition("menu", self.transition)
    monarch.add_listener()
end

... SOME OTHER CODE HERE ...

function final(self)
    monarch.remove_listener()
end

function on_message(self, message_id, message, sender)
    monarch.on_message(message_id, message, sender)
end

So, hopefully the professionals among the community can already see the issue (Though it might not be a code-issue but rather a structural one)… If not, maybe a minimal, reproductible example would help?

You can download it here:
Defold-Monarch-Issue.zip (1.9 MB)

I really hope that we may find a solution together, thanks!