[SOLVED] Clear steps to use the monarch transition feature

BassamMasry · August 1, 2025, 3:23pm

Hello everyone!

I am using monarch for screen management and have trying to do transitions for more than an hour and half now
The documentation is not clear unfortunately, and the previously answered questions already were close to the answers, without specifying anything for people to use as a reference afterwards.
My scene is switched correctly but there are two problems:

There is no transition, be it slide_in or fade_in
There screen I switched to does not acquire focus

I do get DEBUG:SCRIPT: Message: hash: [transition_show_in] which I think means that the transition started, but it never ends.

Here is the current hierarchy of my project:

Here are the current scripts:

-- intro.gui_script
local monarch = require("monarch.monarch")
local defork = require("defork.defork")

local current_node = 0

local function show_text()
	defork.setCurrentNode(current_node)
	local text_node = gui.get_node("text")
	gui.set_text(text_node, defork.getText())
end

function init(self)
	print("Intro screen init")
	msg.post(".", "acquire_input_focus")
	defork.load("/assets/story/intro.json")
	current_node = defork.getStartNodeID()
	show_text()
end

function on_input(self, action_id, action)
	if action.pressed then
		print("Key pressed")
		local options = defork.getOptions(current_node)
		if not options then
			monarch.back()
			msg.post("main:/controller#main_controller", "show_intro2")
		end
		current_node = options[1].pid
		show_text()
	end
end

-- fader.gui_script
local transitions = require "monarch.transitions.gui"
local monarch = require("monarch.monarch")

local transition

function init(self)
	monarch.add_listener(".")
	
	transition = transitions.create(gui.get_node("root"))
	.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.8, 0)
	.show_out(transitions.slide_in_right, gui.EASING_INQUAD, 0.8, 0)
	.back_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.8, 0)
	.back_out(transitions.slide_in_right, gui.EASING_INQUAD, 0.8, 0)

	msg.post("#", "ready")
	
end

function on_message(self, message_id, message, sender)
	print("Message: ", message_id)
	if message_id == hash("show_first_screen") then
		monarch.show("intro")
	elseif message_id == hash("show_intro") then
		monarch.show("intro")
	elseif message_id == hash("show_intro2") then
	elseif message_id == hash("ready") then
		monarch.on_transition("intro", transition)
		msg.post(".", "show_first_screen")
	end
	-- you can also check when a transition has completed:
	if message_id == monarch.TRANSITION.DONE then
		print("Show in done!")
	end
end

-- main_controller.script
function init(self)
	msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })
	msg.post("@render:", "clear_color", { color = vmath.vector4(1, 0, 0, 0) } )
end

Thank you in advance for your help

britzl · August 1, 2025, 5:51pm

You are not forwarding messages to Monarch.

github.com/britzl/monarch

example/slidingwindow/window1.gui_script

master


      
          
          function on_input(self, action_id, action)
          	if action_id == hash("touch") and action.released then
          		if gui.pick_node(gui.get_node("button"), action.x, action.y) then
          			monarch.show("window2")
          		end
          	end
          end
          
          function on_message(self, message_id, message, sender)
          	monarch.on_message(message_id, message, sender)
          end

github.com/britzl/monarch

README_TRANSITIONS.md

master

# Transitions
You can add optional transitions when navigating between screens. The default behavior is that screen navigation is instant but if you have defined a transition for a screen Monarch will wait until the transition is completed before proceeding.

Transitions are configured through the `monarch.on_transition(screen_id, fn)` function. The function defines for which screen to configure transitions and sets a function to be called when a transition should be started. This function must accept (message_id, message, sender) as arguments, with `message_id` defining which type of transition to start:

* `transition_show_in` (constant defined as `monarch.TRANSITION.SHOW_IN`)
* `transition_show_out` (constant defined as `monarch.TRANSITION.SHOW_OUT`)
* `transition_back_in` (constant defined as `monarch.TRANSITION.BACK_IN`)
* `transition_back_out` (constant defined as `monarch.TRANSITION.BACK_OUT`)

When a transition is completed it is up to the developer to send a `transition_done` (constant `monarch.TRANSITION.DONE`) message back to the sender to indicate that the transition is completed and that Monarch can continue the navigation sequence.

## Transition URL
This property is deprecated and will be removed in a future version of Monarch.

~~It is also possible to configure transitions through the `Transition Url` (proxy) or `Transition Id` (collectionfactory) property. This property must be the URL/Id to a script with an `on_message` handlers for the transition messages mentioned above.~~


## Predefined transitions
Monarch comes with a system for setting up transitions easily in a gui_script using the `monarch.transitions.gui` module. Example:

This file has been truncated. show original

BassamMasry · August 1, 2025, 7:24pm

What a noob mistake
Sorry for that, and thank you for pointing this out!
I did not notice the examples in the GitHub repository.
So for those who will search for answers afterwards, the GitHub repo contains excellent examples.