Update ci-workflow.yml

Fixes #

.github/workflows/ci-workflow.yml

@@ -0,0 +1,19 @@
+name: CI
+
+on: [push]
+
+jobs:
+    build_and_run:
+        name: Build and run
+        runs-on: ubuntu-latest
+        steps:
+          - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
+          - uses: actions/setup-java@99b8673ff64fbf99d8d325f52d9a5bdedb8483e9
+            with:
+                java-version: '21.0.5+11.0.LTS'
+                distribution: 'temurin'
+          - name: Run.sh
+            env:
+                DEFOLD_USER: bjorn.ritzl@gmail.com
+                DEFOLD_AUTH: foobar
+            run: ./.test/run.sh

.gitignore

@@ -8,3 +8,7 @@ build
 .cproject
 builtins
 .internal
+luacov.report.out
+/.editor_settings
+manifest.private.der
+manifest.public.der

.luacheckrc

@@ -1,42 +0,0 @@
-std = "max"
-files['.luacheckrc'].global = false
-unused_args = false
-
-globals = {
-  "sys",
-  "go",
-  "gui",
-  "label",
-  "render",
-  "crash",
-  "sprite",
-  "sound",
-  "tilemap",
-  "spine",
-  "particlefx",
-  "physics",
-  "factory",
-  "collectionfactory",
-  "iac",
-  "msg",
-  "vmath",
-  "url",
-  "http",
-  "image",
-  "json",
-  "zlib",
-  "iap",
-  "push",
-  "facebook",
-  "hash",
-  "hash_to_hex",
-  "pprint",
-  "init",
-  "final",
-  "update",
-  "on_input",
-  "on_message",
-  "on_reload",
-  "window",
-  "unityads"
-}

.luacov

@@ -0,0 +1,74 @@
+local reporter = require "luacov.reporter.defold"
+
+--- Default values for configuration options.
+-- For project specific configuration create '.luacov' file in your project
+-- folder. It should be a Lua script setting various options as globals
+-- or returning table of options.
+-- @class module
+-- @name deftest.coverage.configuration
+return {
+
+  --- Reporter class to use when creating a report. Default: DefaultReporter from reporter.lua
+  reporter = reporter,
+
+  --- Filename to store collected stats. Default: "luacov.stats.out".
+  statsfile = "luacov.stats.out",
+
+  --- Filename to store report. Default: "luacov.report.out".
+  reportfile = "luacov.report.out",
+
+  --- Enable saving coverage data after every `savestepsize` lines?
+  -- Setting this flag to `true` in config is equivalent to running LuaCov
+  -- using `luacov.tick` module. Default: false.
+  tick = false,
+
+  --- Stats file updating frequency for `luacov.tick`.
+  -- The lower this value - the more frequently results will be written out to the stats file.
+  -- You may want to reduce this value (to, for example, 2) to avoid losing coverage data in
+  -- case your program may terminate without triggering luacov exit hooks that are supposed
+  -- to save the data. Default: 100.
+  savestepsize = 100,
+
+  --- Run reporter on completion? Default: true.
+  runreport = true,
+
+  --- Delete stats file after reporting? Default: false.
+  deletestats = true,
+
+  --- Process Lua code loaded from raw strings?
+  -- That is, when the 'source' field in the debug info
+  -- does not start with '@'. Default: true.
+  codefromstrings = true,
+
+  --- Lua patterns for files to include when reporting.
+  -- All will be included if nothing is listed.
+  -- Do not include the '.lua' extension. Path separator is always '/'.
+  -- Overruled by `exclude`.
+  -- @usage
+  -- include = {
+  --    "mymodule$",      -- the main module
+  --    "mymodule%/.+$",  -- and everything namespaced underneath it
+  -- }
+  include = {},
+
+  --- Lua patterns for files to exclude when reporting.
+  -- Nothing will be excluded if nothing is listed.
+  -- Do not include the '.lua' extension. Path separator is always '/'.
+  -- Overrules `include`.
+  exclude = { "^test%/.+$", "^deftest%/.+$" },
+
+  --- Table mapping names of modules to be included to their filenames.
+  -- Has no effect if empty.
+  -- Real filenames mentioned here will be used for reporting
+  -- even if the modules have been installed elsewhere.
+  -- Module name can contain '*' wildcard to match groups of modules,
+  -- in this case corresponding path will be used as a prefix directory
+  -- where modules from the group are located.
+  -- @usage
+  -- modules = {
+  --    ["some_rock"] = "src/some_rock.lua",
+  --    ["some_rock.*"] = "src"
+  -- }
+  modules = {},
+
+}

.test/run.sh

@@ -8,27 +8,35 @@ fi
 echo "${PLATFORM}"
 
 # {"version": "1.2.89", "sha1": "5ca3dd134cc960c35ecefe12f6dc81a48f212d40"}
+# Get SHA1 of the current Defold stable release
 SHA1=$(curl -s http://d.defold.com/stable/info.json | sed 's/.*sha1": "\(.*\)".*/\1/')
 echo "Using Defold dmengine_headless version ${SHA1}"
 
-#DMENGINE_URL="http://d.defold.com/archive/${SHA1}/engine/linux/dmengine_headless"
+# Create dmengine_headless and bob.jar URLs
 DMENGINE_URL="http://d.defold.com/archive/${SHA1}/engine/${PLATFORM}/dmengine_headless"
 BOB_URL="http://d.defold.com/archive/${SHA1}/bob/bob.jar"
+DMENGINE_FILE=dmengine_headless_${SHA1}
+BOB_FILE=bob_${SHA1}.jar
 
-echo "Downloading ${DMENGINE_URL}"
-curl -o dmengine_headless ${DMENGINE_URL}
-chmod +x dmengine_headless
-
-echo "Downloading ${BOB_URL}"
-curl -o bob.jar ${BOB_URL}
-
-if [ -n "${DEFOLD_AUTH}" ] && [ -n "${DEFOLD_USER}" ]; then
-	echo "Running bob.jar - resolving dependencies"
-	java -jar bob.jar --auth "${DEFOLD_AUTH}" --email "${DEFOLD_USER}" resolve
+# Download dmengine_headless
+if ! [ -f ${DMENGINE_FILE} ]; then
+	echo "Downloading ${DMENGINE_URL} to ${DMENGINE_FILE}"
+	curl -L -o ${DMENGINE_FILE} ${DMENGINE_URL}
+	chmod +x ${DMENGINE_FILE}
 fi
 
-echo "Running bob.jar - building"
-java -jar bob.jar --debug build
+# Download bob.jar
+if ! [ -f ${BOB_FILE} ]; then
+	echo "Downloading ${BOB_URL} to ${BOB_FILE}"
+	curl -L -o ${BOB_FILE} ${BOB_URL}
+fi
 
-echo "Starting dmengine_headless"
-./dmengine_headless
+# Fetch libraries
+echo "Running ${BOB_FILE} - resolving dependencies"
+java -jar ${BOB_FILE} --auth "foobar" --email "john@doe.com" resolve
+
+echo "Running ${BOB_FILE} - building"
+java -jar ${BOB_FILE} --debug build --settings=test.settings
+
+echo "Starting ${DMENGINE_FILE}"
+./${DMENGINE_FILE}

.travis.yml

@@ -1,27 +0,0 @@
-sudo: required
-
-script:
-  - sudo unlink /usr/bin/gcc && sudo ln -s /usr/bin/gcc-5 /usr/bin/gcc
-  - gcc --version
-
-addons:
-  apt:
-    sources:
-    - ubuntu-toolchain-r-test
-    packages:
-    - gcc-5
-    - g++-5
-
-language: java
-
-jdk:
-  - oraclejdk8
-
-#DEFOLD_AUTH=auth token
-env:
-  global:
-    - secure: "1rVLsDcb7dFdgyB9D1JQDr4JhWSosoMvgYgrqZNPxJ/Du3qtY3bk6dgQim+g2fDMQpDOPCQ/EhmhtrLJrIgBhhvOcsrVKT8gl9ZnATw5tHGI6XTw3eod8WgsU8owlc7CaT3XaUgwVshmW3oB/257SDf6kHwsCv/gAJuCEL5RZp76BhTWsfyeDCgz5XXgWx4a21tcIWz96jxEsrYQKLLV2ne55CxU5Hw9IMU7Ig7pkGoYCf1g+iUEA39NC8nIrQibUoJj3yNB2u3ZFwGf2LuDjjkSIsyYWn1LzA2fQYw5uAcjiQ/aDkj6sAEvwrWsIsJhOon5cQBFIU6cIIN2oK3A7BA0zJj0EsTFPUMIeryyoqiuLUDoIvHD/eEqouNduP6Kml02Ql0pDZnjDy/+nzp2e7VA5Sd9Xg1XKd1mmHKx4nc2U+IcIDZWAerFKcqQqeZSwzz5igv07w5zYZ99KCSBMH2K/2H/CNekHa6SQQ29mC8D3lDXOfwEq3fAhsabgUGe2uAgUY1nKwJBKEi7r+KEROBr5ydkWenzbCXv3GNNsuCHKpNFuoZv3QMyjUjlPBxZVndNLSv85juhkBx6wXAh8CxTt78Y8GV0xI8oazSM065gpDmENGVqyO1bUn2CZF8YRC4MLfHK+245QN82ui+YOqVudTX8RGWnX0GFUncjaRQ="
-    - DEFOLD_USER=bjorn.ritzl@king.com
-
-script:
-  - "./.test/run.sh"

README.md

@@ -1,6 +1,13 @@
+![](docs/logo.jpg)
+
+[![Build Status](https://travis-ci.com/britzl/monarch.svg?branch=master)](https://travis-ci.org/britzl/monarch)
+[![Code Coverage](https://codecov.io/gh/britzl/monarch/branch/master/graph/badge.svg)](https://codecov.io/gh/britzl/monarch)
+[![Latest Release](https://img.shields.io/github/release/britzl/monarch.svg)](https://github.com/britzl/monarch/releases)
+
 # Monarch
 Monarch is a screen manager for the [Defold](https://www.defold.com) game engine.
 
+
 # Installation
 You can use Monarch in your own project by adding this project as a [Defold library dependency](http://www.defold.com/manuals/libraries/). Open your game.project file and in the dependencies field under project add:
 
@@ -8,152 +15,180 @@ https://github.com/britzl/monarch/archive/master.zip
 
 Or point to the ZIP file of a [specific release](https://github.com/britzl/monarch/releases).
 
+
 # Usage
 Using Monarch requires that screens are created in a certain way. Once you have one or more screens created you can start navigating between the screens.
 
-## Creating screens
-Monarch screens are created in individual collections and loaded through collection proxies. The recommended setup is to create one game object per screen and per game object attach a collection proxy component and an instance of the ```screen.script``` provided by Monarch. The screen.script will take care of the setup of the screen. All you need to do is to make sure that the script properties on the ```screen.script``` are correct:
+## Editor Script
+Right click in on a`.gui` file in the outline and selected the menu item, it creates a `.collection` and a `.gui_script` with the same name as the `.gui` file. It adds the file with some basic setup done to them, adding the selected gui script to the created gui scene and in turns adds the gui scene to the newly created collection.
 
-* **Screen Proxy (url)** - The URL to the collection proxy component containing the actual screen. Defaults to ```#collectionproxy```.
+<img src="/docs/editor_script.gif" width="200px">
+
+## Creating screens
+Monarch screens are created in individual collections and either loaded through collection proxies or created through collection factories.
+
+### Collection proxies
+For proxies the recommended setup is to create one game object per screen and per game object attach a collection proxy component and an instance of the `screen_proxy.script` provided by Monarch. The `screen_proxy.script` will take care of the setup of the screen. All you need to do is to make sure that the script properties on the script are correct:
+
+* **Screen Proxy (url)** - The URL to the collection proxy component containing the actual screen. Defaults to `#collectionproxy`.
 * **Screen Id (hash)** - A unique id that can be used to reference the screen when navigating your app.
 * **Popup (boolean)** - Check this if the screen should be treated as a [popup](#popups).
-* **Transition Url (url)** - Optional URL to call when the screen is about to be shown/hidden. Use this to trigger a transition (see the section on [transitions](#transitions)).
-* **Focus Url (url)** - Optional URL to call when the screen gains or loses focus (see the section on [screen focus](#screen-focus-gainloss)).
+* **Popup on Popup (boolean)** - Check this if the screen is a [popup](#popups) and it can be shown on top of other popups.
+* **Timestep below Popup (number)** - Timestep to set on screen proxy when it is below a popup. This is useful when pausing animations and gameplay while a popup is open.
+* **Screen Keeps Input Focus When Below Popup (boolean)** - Check this if the screen should keep input focus when it is below a popup.
+* **Others Keep Input Focus When Below Screen (boolean)** - Check this if other screens should keep input focus when below this screen.
+* **Transition Url (url)** - **DEPRECATED** Optional URL to post messages to when the screen is about to be shown/hidden. Use this to trigger a transition (see the section on [transitions](#transitions)).
+* **Focus Url (url)** - **DEPRECATED** Optional URL to post messages to when the screen gains or loses focus (see the section on [screen focus](#screen-focus-gainloss)).
+* **Receiver Url (url)** - **DEPRECATED** Optional URL to post messages to using `monarch.post()`.
+* **Preload (boolean)** - Check this if the screen should be preloaded and kept loaded at all times. For a collection proxy it means that it will be async loaded but not enabled at all times while not visible. This can also temporarily be achieved through the `monarch.preload()` function.
 
-![](docs/setup.png)
+![](docs/setup_proxy.png)
+
+### Collection factories
+For factories the recommended setup is to create one game object per screen and per game object attach a collection factory component and an instance of the `screen_factory.script` provided by Monarch. The `screen_factory.script` will take care of the setup of the screen. All you need to do is to make sure that the script properties on the script are correct:
+
+* **Screen Factory (url)** - The URL to the collection factory component containing the actual screen. Defaults to `#collectionfactory`.
+* **Screen Id (hash)** - A unique id that can be used to reference the screen when navigating your app.
+* **Popup (boolean)** - Check this if the screen should be treated as a [popup](#popups).
+* **Popup on Popup (boolean)** - Check this if the screen is a [popup](#popups) and it can be shown on top of other popups.
+* **Screen Keeps Input Focus When Below Popup (boolean)** - Check this if the screen should keep input focus when it is below a popup.
+* **Others Keep Input Focus When Below Screen (boolean)** - Check this if other screens should keep input focus when below this screen.
+* **Transition Id (hash)** - **DEPRECATED** Optional id of the game object to send a message to when the screen is about to be shown/hidden. Use this to trigger a transition (see the section on [transitions](#transitions)).
+* **Focus Id (hash)** - **DEPRECATED** Optional id of the game object to send a message to when the screen gains or loses focus (see the section on [screen focus](#screen-focus-gainloss)).
+* **Preload (boolean)** - Check this if the screen should be preloaded and kept loaded at all times. For a collection factory this means that its resources will be dynamically loaded at all times. This can also temporarily be achieved through the `monarch.preload()` function.
+
+![](docs/setup_factory.png)
+
+Note: Monarch supports dynamic collection factories (ie where the "Load Dynamically" checkbox is checked).
+
+## Nesting screens
+Sometimes it might be desirable to have a screen that contains one or more sub-screens or children, for instance popups that are used only by that screen. Monarch supports nested screens only when the parent screen is created via a collection factory. If the parent screen is loaded via a collection proxy the sub/child-screens won't be able to receive any input.
 
 ## Navigating between screens
 The navigation in Monarch is based around a stack of screens. When a screen is shown it is pushed to the top of the stack. When going back to a previous screen the topmost screen on the stack is removed. Example:
 
 * Showing screen A
-* Stack is ```[A]```
+* Stack is `[A]`
 * Showing screen B
-* Stack is ```[A, B]``` - (B is on top)
+* Stack is `[A, B]` - (B is on top)
 * Going back
-* Stack is ```[A]```
+* Stack is `[A]`
 
 ### Showing a new screen
 You show a screen in one of two ways:
 
-1. Post a ```show``` message to the ```screen.script```
-2. Call ```monarch.show()``` (see below)
+1. Post a `show` message to the screen script (either `screen_proxy.script` or `screen_factory.script`)
+2. Call `monarch.show()` (see below)
 
 Showing a screen will push it to the top of the stack and trigger an optional transition. The previous screen will be hidden (with an optional transition) unless the screen to be shown is a [popup](#popups).
 
+NOTE: You must ensure that the `init()` function of the screen script (either `screen_proxy.script` or `screen_factory.script`) has run. The `init()` function is responsible for registering the screen and it's not possible to show it until this has happened. A good practice is to delay the first call by posting a message to a controller script or similar before calling `monarch.show()` the first time:
+
+	function init(self)
+		msg.post("#", "show_first_screen")
+	end
+
+	function on_message(self, message_id, message, sender)
+		monarch.show(hash("first_screen"))
+	end
+
 #### Preventing duplicates in the stack
-You can pass an optional ```clear``` flag when showing a screen (either as a key value pair in the options table when calling ```monarch.show()``` or in the message). If the clear flag is set Monarch will search the stack for the screen in question. If the screen already exists in the stack and the ```clear``` flag is set Monarch will remove all screens between the current top and the screen in question. Example:
+You can pass an optional `clear` flag when showing a screen (either as a key value pair in the options table when calling `monarch.show()` or in the message). If the clear flag is set Monarch will search the stack for the screen in question. If the screen already exists in the stack and the `clear` flag is set Monarch will remove all screens between the current top and the screen in question. Example:
 
-* Stack is ```[A, B, C, D]``` - (D is on top)
-* A call to ```monarch.show(B, { clear = true })``` is made
-* Stack is ```[A, B]```
+* Stack is `[A, B, C, D]` - (D is on top)
+* A call to `monarch.show(B, { clear = true })` is made
+* Stack is `[A, B]`
 
-As opposed to if the ```clear``` flag was not set:
+As opposed to if the `clear` flag was not set:
 
-* Stack is ```[A, B, C, D]``` - (D is on top)
-* A call to ```monarch.show(B, { clear = false })``` is made
-* Stack is ```[A, B, C, D, B]``` - (B is on top)
+* Stack is `[A, B, C, D]` - (D is on top)
+* A call to `monarch.show(B, { clear = false })` is made
+* Stack is `[A, B, C, D, B]` - (B is on top)
+
+#### Showing a screen without adding it to the stack
+Monarch can also show a screen without adding it to the stack. This can be used to for instance load a collection containing a background that you want to have visible at all times. You show and hide such a screen like this:
+
+	-- show the background without adding it to the stack
+	monarch.show(hash("background"), { no_stack = true })
+
+	-- hide the background
+	monarch.hide(hash("background"))
 
 ### Going back to a previous screen
 You navigate back in the screen hierarchy in one of two ways:
 
-1. Post a ```back``` message to the ```screen.script```
-2. Call ```monarch.back()``` (see below)
+1. Post a `back` message to the screen script (either `screen_proxy.script` or `screen_factory.script`)
+2. Call `monarch.back()` (see below)
 
 
 ## Input focus
-Monarch will acquire and release input focus on the game objects containing the proxies to the screens and ensure that only the top-most screen will ever have input focus.
+Monarch will acquire and release input focus on the game objects containing the proxies to the screens and ensure that only the top-most screen will ever have input focus. The screen settings above provide a `Screen Keeps Input Focus When Below Popup` and `Others Keep Input Focus When Below Screen` setting to override this behavior so that a screen can continue to have focus. This is useful when you have for instance a tabbed popup where the tabs are in a root screen and the content of the individual tabs are separate screens. In this case you want the tabs to have input as well as the tab content.
+
 
 ## Popups
-A screen that is flagged as a popup (see list of screen properties above) will be treated slightly differently when it comes to navigation. If a popup is at the top of the stack (ie currently shown) and another screen or popup is shown then the current popup will be removed from the stack. This means that it is not possible to have a popup anywhere in the stack but the top. This also means that you cannot navigate back to a popup since popups can only exist on the top of the stack. Another important difference between normal screens and popups is that when a popup is shown on top of a non-popup the current top screen will not be unloaded and instead remain visible in the background.
+A screen that is flagged as a popup (see [list of screen properties](#creating-screens) above) will be treated slightly differently when it comes to navigation.
+
+### Popup on normal screen
+If a popup is shown on top of a non-popup the current top screen will not be unloaded and instead remain visible in the background:
+
+* Stack is `[A, B]`
+* A call to `monarch.show(C)` is made and C is a popup
+* Stack is `[A, B, C]` and B will still be visible
+
+### Popup on popup
+If a popup is at the top of the stack and another popup is shown the behavior will depend on if the new popup has the Popup on Popup flag set or not. If the Popup on Popup flag is set the underlying popup will remain visible.
+
+* Stack is `[A, B, C]` and C is a popup
+* A call to `monarch.show(D)` is made and D is a popup with the popup on popup flag set
+* Stack is `[A, B, C, D]`
+
+If the Popup on Popup flag is not set then the underlying popup will be closed, just as when showing a normal screen on top of a popup (see above).
+
+* Stack is `[A, B, C]` and C is a popup
+* A call to `monarch.show(D)` is made and D is a popup without the popup on popup flag set
+* Stack is `[A, B, D]`
+
+### Screen on popup
+If a screen is shown on top of one or more popups they will all be removed from the stack:
+
+* Stack is `[A, B, C, D]` and C and D are popups
+* A call to `monarch.show(E)` is made and E is not a popup
+* Stack is `[A, B, E]`
 
-* Stack is ```[A, B]```
-* A call to ```monarch.show(C)``` is made and C is a popup
-* Stack is ```[A, B, C]```
-* A call to ```monarch.show(D)```
-* Stack is ```[A, B, D]```
 
 ## 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. The Transition Url property described above should be the URL to a script with an ```on_message``` handlers for the following messages:
+You can add optional transitions when navigating between screens. This is [described in detail here](/README_TRANSITIONS.md).
 
-* ```transition_show_in```
-* ```transition_show_out```
-* ```transition_back_in```
-* ```transition_back_out```
-
-When a transition is completed it is up to the developer to send a ```transition_done``` message back to the sender to indicate that the transition is completed and that Monarch can continue the navigation sequence. Monarch comes with a system for setting up transitions easily in a gui_script. Example:
-
-	local transitions = require "monarch.transitions.gui"
-
-	function init(self)
-		-- create transitions for the node 'root'
-		-- the node will slide in/out from left and right with
-		-- a specific easing, duration and delay
-		self.transition = transitions.create(gui.get_node("root"))
-			.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
-			.show_out(transitions.slide_out_left, gui.EASING_INQUAD, 0.6, 0)
-			.back_in(transitions.slide_in_left, gui.EASING_OUTQUAD, 0.6, 0)
-			.back_out(transitions.slide_out_right, gui.EASING_INQUAD, 0.6, 0)
-	end
-
-	function on_message(self, message_id, message, sender)
-		self.transition.handle(message_id, message, sender)
-	end
 
 ## Screen focus gain/loss
-Monarch will send focus gain and focus loss messages if a Focus Url was provided when the screen was created. The focus gained message will contain the id of the previous screen and the focus loss message will contain the id of the next screen. Example:
+Monarch will send focus gain and focus loss messages if a focus change listener has been set using `monarch.on_focus_change(screen_id, fn)` 
 
+DEPRECATED: ~~Monarch will send focus gain and focus loss messages if a `Focus Url` (proxy) or `Focus Id` (collectionfactory) was provided when the screen was created.~~
+
+The focus gained message will contain the id of the previous screen and the focus loss message will contain the id of the next screen. Example:
+
+```lua
 	local monarch = require "monarch.monarch"
 
-	function on_message(self, message_id, message, sender)
-		if message_id == monarch.FOCUS_GAINED then
-			print("Focus gained, previous screen: ", message.id)
-		elseif message_id == monarch.FOCUS_LOST then
-			print("Focus lost, next screen: ", message.id)
-		end
+	function init(self)
+		monarch.on_focus_changed("foobar", function(message_id, message, sender)
+			if message_id == monarch.FOCUS.GAINED then
+				print("Focus gained, previous screen: ", message.id)
+			elseif message_id == monarch.FOCUS.LOST then
+				print("Focus lost, next screen: ", message.id)
+			end
+		end)
 	end
 
+	function on_message(self, message_id, message, sender)
+		monarch.on_message(message_id, message, sender)
+	end
+```
+
+
 ## Callbacks
-Both the ```monarch.show()``` and ```monarch.back()``` functions take an optional callback function that will be invoked when the ```transition_show_in``` (or the ```transition_back_in``` in the case of a ```monarch.back()``` call) transition is completed. The transition is considered completed when a ```transition_done``` message has been received (see section on [transitions](#transitions) above).
+Both the `monarch.show()` and `monarch.back()` functions take an optional callback function that will be invoked when the `transition_show_in` (or the `transition_back_in` in the case of a `monarch.back()` call) transition is completed. The transition is considered completed when a `transition_done` message has been received (see section on [transitions](#transitions) above).
+
 
 ## Monarch API
-
-### monarch.show(screen_id, [options], [data], [callback])
-Show a Monarch screen
-
-**PARAMETERS**
-* ```screen_id``` (hash) - Id of the screen to show.
-* ```options``` (table) - Options when showing the new screen (see below).
-* ```data``` (table) - Optional data to associate with the screen.  Retrieve using ```monarch.data()```.
-* ```callback``` (function) - Function to call when the new screen is visible.
-
-The options table can contain the following fields:
-
-* ```clear``` (boolean) - If the clear flag is set Monarch will search the stack for the screen that is to be shown. If the screen already exists in the stack and the clear flag is set Monarch will remove all screens between the current top and the screen in question.
-* ```reload``` (boolean) - If the reload flag is set Monarch will reload the collection proxy if it's already loaded (this can happen if the previous screen was a popup).
-
-### monarch.back([data], [callback])
-Go back to a previous Monarch screen
-
-**PARAMETERS**
-* ```data``` (table) - Optional data to associate with the screen you are going back to.  Retrieve using ```monarch.data()```.
-* ```callback``` (function) - Function to call when the previous screen is visible.
-
-
-### monarch.data(screen_id)
-Get the data associated with a screen (from a call to ```monarch.show()``` or ```monarch.back()```).
-
-**PARAMETERS**
-* ```screen_id``` (hash) - Id of the screen to get data for
-
-**RETURN**
-* ```data``` (table) - Data associated with the screen.
-
-
-### monarch.screen_exists(screen_id)
-Check if a Monarch screen exists.
-
-**PARAMETERS**
-* ```screen_id``` (hash) - Id of the screen to get data for
-
-**RETURN**
-* ```exists``` (boolean) - True if the screen exists.
+The full [Monarch API is documented here](/README_API.md).

README_API.md

@@ -0,0 +1,265 @@
+
+# Monarch API
+
+## monarch.show(screen_id, [options], [data], [callback])
+Show a Monarch screen. Note that the screen must be registered before it can be shown. The `init()` function of the screen script (either `screen_proxy.script` or `screen_factory.script`) takes care of registration. This operation will be added to the queue if Monarch is busy.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to show.
+* `options` (table) - Options when showing the new screen (see below).
+* `data` (table) - Optional data to associate with the screen.  Retrieve using `monarch.data()`.
+* `callback` (function) - Optional function to call when the new screen is visible.
+
+The options table can contain the following fields:
+
+* `clear` (boolean) - If the `clear` flag is set Monarch will search the stack for the screen that is to be shown. If the screen already exists in the stack and the clear flag is set Monarch will remove all screens between the current top and the screen in question.
+* `reload` (boolean) - If the `reload` flag is set Monarch will reload the collection proxy if it's already loaded (this can happen if the previous screen was a popup).
+* `no_stack` (boolean) - If the `no_stack` flag is set Monarch will load the screen without adding it to the screen stack.
+* `sequential` (boolean) - If the `sequential` flag is set Monarch will start loading the screen only after the previous screen finished transitioning out.
+* `pop` (number) - If `pop` is set to a number, Monarch will pop that number of screens from the stack before adding the new one.
+
+## monarch.replace(screen_id, [options], [data], [callback])
+Replace the top of the stack with a new screen. Equivalent to calling `monarch.show()` with `pop = 1`. It takes the same parameters as `monarch.show()`.
+
+
+## monarch.hide(screen_id, [callback])
+Hide a screen that has been shown using the `no_stack` option. If used on a screen that was shown without the `no_stack` option it will only hide it if the screen is on top of the stack and the behavior will be exactly like if `monarch.back()` had been called. This operation will be added to the queue if Monarch is busy.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to hide.
+* `callback` (function) - Optional function to call when the screen has been hidden.
+
+**RETURN**
+* `success` (boolean) - True if the process of hiding the screen was started successfully.
+
+
+## monarch.clear([callback])
+Clear the stack of screens completely. Any visible screen will be hidden by navigating back out from them. This operation will be added to the queue if Monarch is busy.
+
+**PARAMETERS**
+* `callback` (function) - Optional function to call when the stack has been cleared.
+
+
+## monarch.back([options], [data], [callback])
+Go back to a previous Monarch screen. This operation will be added to the queue if Monarch is busy.
+
+**PARAMETERS**
+* `options` (table) - Options when showing the new screen (see below).
+* `data` (table) - Optional data to associate with the screen you are going back to.  Retrieve using `monarch.data()`.
+* `callback` (function) - Optional function to call when the previous screen is visible.
+
+The options table can contain the following fields:
+
+* `sequential` (boolean) - If the `sequential` flag is set Monarch will start loading the screen only after the previous screen finished transitioning out.
+
+
+## monarch.preload(screen_id, [options], [callback])
+Preload a Monarch screen. This will load but not enable the screen. This is useful for content heavy screens that you wish to be able to show without having to wait for it load. This operation will be added to the queue if Monarch is busy.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to preload.
+* `options` (table)
+* `callback` (function) - Optional function to call when the screen is preloaded.
+
+The options table can contain the following fields:
+
+* `keep_loaded` (boolean) - If the `keep_loaded` flag is set Monarch will keep the screen preloaded even after a `hide()` or `back()` navigation event that normally would unload the screen.
+
+
+## monarch.is_preloading(screen_id)
+Check if a Monarch screen is preloading (via monarch.preload() or the Preload screen setting).
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to check
+
+**RETURN**
+* `preloading` (boolean) - True if the screen is preloading.
+
+
+## monarch.when_preloaded(screen_id, callback)
+Invoke a callback when a screen has been preloaded.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to check
+* `callback` (function) - Function to call when the screen has been preloaded.
+
+
+## monarch.unload(screen_id, [callback])
+Unload a preloaded Monarch screen. A preloaded screen will automatically get unloaded when hidden, but this function can be useful if a screen has been preloaded and it needs to be unloaded again without actually hiding it. This operation will be added to the queue if Monarch is busy.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to unload.
+* `callback` (function) - Optional function to call when the screen is unloaded.
+
+
+## monarch.top([offset])
+Get the id of the screen at the top of the stack.
+
+**PARAMETERS**
+* `offset` (number) - Optional offset from the top of the stack, ie -1 to get the previous screen
+
+**RETURN**
+* `screen_id` (string|hash) - Id of the requested screen
+
+
+## monarch.bottom([offset])
+Get the id of the screen at the bottom of the stack.
+
+**PARAMETERS**
+* `offset` (number) - Optional offset from the bottom of the stack
+
+**RETURN**
+* `screen_id` (string|hash) - Id of the requested screen
+
+
+## monarch.data(screen_id)
+Get the data associated with a screen (from a call to `monarch.show()` or `monarch.back()`).
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to get data for
+
+**RETURN**
+* `data` (table) - Data associated with the screen.
+
+
+## monarch.screen_exists(screen_id)
+Check if a Monarch screen exists.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to get data for
+
+**RETURN**
+* `exists` (boolean) - True if the screen exists.
+
+
+## monarch.is_busy()
+Check if Monarch is busy showing and/or hiding a screen.
+
+**RETURN**
+* `busy` (boolean) - True if busy hiding and/or showing a screen.
+
+
+## monarch.is_top(screen_id)
+Check if a Monarch screen is at the top of the view stack.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to check
+
+**RETURN**
+* `exists` (boolean) - True if the screen is at the top of the stack.
+
+
+## monarch.is_visible(screen_id)
+Check if a Monarch screen is visible.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to check
+
+**RETURN**
+* `exists` (boolean) - True if the screen is visible.
+
+
+## monarch.set_timestep_below_popup(screen_id, timestep)
+Set the timestep to apply for a screen when below a popup.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to change timestep setting for
+* `timestep` (number) - Timestep to apply
+
+
+## monarch.add_listener([url])
+Add a URL that will be notified of navigation events.
+
+**PARAMETERS**
+* `url` (url) - URL to send navigation events to. Will use current URL if omitted.
+
+
+## monarch.remove_listener([url])
+Remove a previously added listener.
+
+**PARAMETERS**
+* `url` (url) - URL to remove. Will use current URL if omitted.
+
+
+## monarch.post(screen_id, message_id, [message])
+Post a message to a visible screen. The screen must have set a message listener using `monarch.on_post()`.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen to post message to
+* `message_id` (string|hash) - Id of the message to send
+* `message` (table|nil) - Optional message data to send
+
+**RETURN**
+* `result` (boolean) - True if the message was sent
+* `error` (string|nil) - Error message if unable to send message
+
+
+## monarch.on_transition(screen_id, fn)
+Set a function to be called when a screen should transition in our out. The function will receive (message_id, message, sender) with `message_id` being one of the transition constants. 
+IMPORTANT! You must call `monarch.on_message(message_id, message, sender)` from the same script as this function was called.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen
+* `fn` (function) - The function to call when a transition should start
+
+
+## monarch.on_focus_change(screen_id, fn)
+Set a function to be called when a screen gains or loses focus. The function will receive (message_id, message, sender) with `message_id` being one of the focus change constants. 
+IMPORTANT! You must call `monarch.on_message(message_id, message, sender)` from the same script as this function was called.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen
+* `fn` (function) - The function to call screen focus changes
+
+
+## monarch.on_post(screen_id, fn_or_url)
+Set either a function to be called when `msg.post()` is called on a specific screen or a URL where the message is sent.
+
+IMPORTANT! If you provide a function you must also make sure to call `monarch.on_message(message_id, message, sender)` from the same script as this function was called.
+
+**PARAMETERS**
+* `screen_id` (string|hash) - Id of the screen
+* `fn_or_url` (function) - The function to call or URL to send message to
+
+
+## monarch.has_missing_resources(screen_id)
+Check if a screen has any missing resources. If the screen is loaded by a collection proxy with Load Dynamically this will use `collectionproxy.missing_resources()`. For other cases this function will always return false.
+
+**RETURN**
+* `result` (boolean) - true if the screen has missing resources
+
+
+## monarch.debug()
+Enable verbose logging of the internals of Monarch.
+
+
+## monarch.SCREEN_TRANSITION_IN_STARTED
+Message sent to listeners added using `monarch.add_listener()` when a screen has started to transition in.
+
+**PARAMETERS**
+* `screen` (hash) - Id of the screen
+* `previous_screen` (hash) - Id of the previous screen (if any)
+
+
+## monarch.SCREEN_TRANSITION_IN_FINISHED
+Message sent to listeners added using `monarch.add_listener()` when a screen has finished to transition in.
+
+**PARAMETERS**
+* `screen` (hash) - Id of the screen
+* `previous_screen` (hash) - Id of the previous screen (if any)
+
+
+## monarch.SCREEN_TRANSITION_OUT_STARTED
+Message sent to listeners added using `monarch.add_listener()` when a screen has started to transition out.
+
+**PARAMETERS**
+* `screen` (hash) - Id of the screen
+* `next_screen` (hash) - Id of the next screen (if any)
+
+
+## monarch.SCREEN_TRANSITION_OUT_FINISHED
+Message sent to listeners added using `monarch.add_listener()` when a screen has finished to transition out.
+
+**PARAMETERS**
+* `screen` (hash) - Id of the screen
+* `next_screen` (hash) - Id of the next screen (if any)

README_TRANSITIONS.md

@@ -0,0 +1,143 @@
+# 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:
+
+```lua
+local transitions = require "monarch.transitions.gui"
+local monarch = require "monarch.monarch"
+
+function init(self)
+	-- create transitions for the node 'root'
+	-- the node will slide in/out from left and right with
+	-- a specific easing, duration and delay
+	local transition = transitions.create(gui.get_node("root"))
+		.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
+		.show_out(transitions.slide_out_left, gui.EASING_INQUAD, 0.6, 0)
+		.back_in(transitions.slide_in_left, gui.EASING_OUTQUAD, 0.6, 0)
+		.back_out(transitions.slide_out_right, gui.EASING_INQUAD, 0.6, 0)
+
+	monarch.on_transition("foobar", transition)
+end
+
+function on_message(self, message_id, message, sender)
+	monarch.on_message(message_id, message, sender)
+	-- you can also check when a transition has completed:
+	if message_id == monarch.TRANSITION.DONE and message.transition == monarch.TRANSITION.SHOW_IN then
+		print("Show in done!")
+	end
+end
+```
+
+It is also possible to assign transitions to multiple nodes:
+
+```lua
+function init(self)
+	local transition = transitions.create() -- note that no node is passed to transition.create()!
+		.show_in(gui.get_node("node1"), transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
+		.show_in(gui.get_node("node2"), transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
+end
+```
+
+The predefined transitions provided by `monarch.transitions.gui` are:
+
+* `slide_in_right`
+* `slide_in_left`
+* `slide_in_top`
+* `slide_in_bottom`
+* `slide_out_right`
+* `slide_out_left`
+* `slide_out_top`
+* `slide_out_bottom`
+* `scale_in`
+* `scale_out`
+* `fade_in` - Set node alpha to fully transparent (i.e. 0.0) and fade to fully opaque (i.e. 1.0)
+* `fade_out` - Set node alpha to fully opaque (i.e. 1.0) and fade to fully transparent (i.e. 0.0)
+
+Additionally there's functionality to create a full set of transitions for common transition styles:
+
+* `transitions.in_right_out_left(node, duration, [delay], [easing])`
+* `transitions.in_left_out_right(node, duration, [delay], [easing])`
+* `transitions.in_left_out_left(node, duration, [delay], [easing])`
+* `transitions.in_right_out_right(node, duration, [delay], [easing])`
+* `transitions.fade_in_out(node, duration, [delay], [easing])`
+
+**PARAMETERS**
+* `node` (node) - Gui node to animate.
+* `duration` (number) - Transition duration in seconds.
+* `delay` (number) - Transition delay in seconds.
+* `easing` (table) - Easing table, created from a function provided by `monarch.transitions.easings`
+
+**RETURN**
+* `instance` - The created transition instance
+
+
+## Custom transitions
+You can create and use your own transition as long as the provided transition function has the following function signature:
+
+	custom_transition(node, to, easing, duration, delay, cb)
+
+**PARAMETERS**
+* `node` (node) - Gui node to animate.
+* `to` (vector3) - Target position.
+* `easing` (number) - One of gui.EASING_* constants.
+* `duration` (number) - Transition duration in seconds.
+* `delay` (number) - Transition delay in seconds.
+* `cb` (function) - This function must be called when the transition is completed.
+
+
+## Dynamic orientation and resized windows
+When using dynamic screen orientation together with gui layouts or using transitions on a platform where the window can be resized it's important to make sure that the created transitions adapt to the change in orientation or window size. The transition system takes care of layout changes automatically, but when it comes to changes in window size you need to notify the transition manually:
+
+```lua
+local transitions = require "monarch.transitions.gui"
+
+function init(self)
+	self.transition = transitions.create(gui.get_node("root"))
+end
+
+function on_message(self, message_id, message, sender)
+	if message_id == hash("my_resize_message") then
+		transition.window_resized(message.width, message.height)
+	end
+end
+```
+
+## Screen stack info and transitions
+The transition message sent transition listener script contains additional information about the transition. For the `transition_show_in` and `transition_back_out` messages the message contains the previous screen id:
+
+```lua
+function on_message(self, message_id, message, sender)
+	if message_id == hash("transition_show_in") or message_id == hash("transition_back_out") then
+		print(message.previous_screen)
+	end
+end
+```
+
+For the `transition_show_out` and `transition_back_in` messages the message contains the next screen id:
+
+```lua
+function on_message(self, message_id, message, sender)
+	if message_id == hash("transition_show_out") or message_id == hash("transition_back_in") then
+		print(message.next_screen)
+	end
+end
+```
+
+This information can be used to create dynamic transitions where the direction of the transition depends on the previous/next screen.

assets/logo.atlas

@@ -0,0 +1,6 @@
+images {
+  image: "/assets/images/logo.png"
+}
+margin: 0
+extrude_borders: 0
+inner_padding: 0

example/advanced/about.collection

@@ -4,7 +4,7 @@ embedded_instances {
   id: "go"
   data: "components {\n"
   "  id: \"about\"\n"
-  "  component: \"/example/about.gui\"\n"
+  "  component: \"/example/advanced/about.gui\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"

example/advanced/about.gui

@@ -1,4 +1,4 @@
-script: "/example/about.gui_script"
+script: "/example/advanced/about.gui_script"
 fonts {
   name: "example"
   font: "/assets/example.font"
@@ -48,7 +48,7 @@ nodes {
   yanchor: YANCHOR_NONE
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -103,7 +103,7 @@ nodes {
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
   parent: "root"
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -172,7 +172,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
   parent: "ok_reload_button"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -235,7 +235,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: true
   parent: "root"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -284,7 +284,7 @@ nodes {
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
   parent: "root"
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -353,7 +353,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
   parent: "ok_clear_button"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -402,7 +402,7 @@ nodes {
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
   parent: "root"
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -471,7 +471,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: true
   parent: "ok_clearreload_button"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -520,7 +520,7 @@ nodes {
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
   parent: "root"
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -589,7 +589,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
   parent: "ok_button"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -598,6 +598,12 @@ nodes {
   text_leading: 1.0
   text_tracking: 0.0
 }
+layers {
+  name: "below"
+}
+layers {
+  name: "text"
+}
 material: "/builtins/materials/gui.material"
 adjust_reference: ADJUST_REFERENCE_PARENT
 max_nodes: 512

example/advanced/about.gui_script

@@ -5,11 +5,13 @@ function init(self)
 	msg.post(".", "acquire_input_focus")
 	gui.set_render_order(15)
 
-	self.transition = transitions.create(gui.get_node("root"))
+	local transition = transitions.create(gui.get_node("root"))
 		.show_in(transitions.slide_in_top, gui.EASING_OUTQUAD, 0.6, 0)
 		.show_out(transitions.slide_out_top, gui.EASING_INQUAD, 0.6, 0)
 		.back_in(transitions.slide_in_top, gui.EASING_OUTQUAD, 0.6, 0)
 		.back_out(transitions.slide_out_top, gui.EASING_INQUAD, 0.6, 0)
+
+	monarch.on_transition("about", transition)
 end
 
 function on_input(self, action_id, action)
@@ -27,5 +29,5 @@ function on_input(self, action_id, action)
 end
 
 function on_message(self, message_id, message, sender)
-	self.transition.handle(message_id, message, sender)
+	monarch.on_message(message_id, message, sender)
 end

example/advanced/advanced.collection

@@ -1,10 +1,10 @@
-name: "example"
+name: "advanced"
 scale_along_z: 0
 embedded_instances {
   id: "menu"
   data: "components {\n"
-  "  id: \"screen\"\n"
-  "  component: \"/monarch/screen.script\"\n"
+  "  id: \"screen_factory\"\n"
+  "  component: \"/monarch/screen_factory.script\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"
@@ -21,22 +21,15 @@ embedded_instances {
   "    value: \"menu\"\n"
   "    type: PROPERTY_TYPE_HASH\n"
   "  }\n"
-  "  properties {\n"
-  "    id: \"transition_url\"\n"
-  "    value: \"menu:/go#menu\"\n"
-  "    type: PROPERTY_TYPE_URL\n"
-  "  }\n"
-  "  properties {\n"
-  "    id: \"focus_url\"\n"
-  "    value: \"menu:/go#menu\"\n"
-  "    type: PROPERTY_TYPE_URL\n"
+  "  property_decls {\n"
   "  }\n"
   "}\n"
   "embedded_components {\n"
-  "  id: \"collectionproxy\"\n"
-  "  type: \"collectionproxy\"\n"
-  "  data: \"collection: \\\"/example/menu.collection\\\"\\n"
-  "exclude: false\\n"
+  "  id: \"collectionfactory\"\n"
+  "  type: \"collectionfactory\"\n"
+  "  data: \"prototype: \\\"/example/advanced/menu.collection\\\"\\n"
+  "load_dynamically: true\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"
@@ -72,7 +65,7 @@ embedded_instances {
   id: "main"
   data: "components {\n"
   "  id: \"main\"\n"
-  "  component: \"/example/main.script\"\n"
+  "  component: \"/example/advanced/advanced.script\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"
@@ -84,10 +77,12 @@ embedded_instances {
   "    z: 0.0\n"
   "    w: 1.0\n"
   "  }\n"
+  "  property_decls {\n"
+  "  }\n"
   "}\n"
   "components {\n"
   "  id: \"gui\"\n"
-  "  component: \"/example/debug.gui\"\n"
+  "  component: \"/example/advanced/debug.gui\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"
@@ -99,6 +94,8 @@ embedded_instances {
   "    z: 0.0\n"
   "    w: 1.0\n"
   "  }\n"
+  "  property_decls {\n"
+  "  }\n"
   "}\n"
   ""
   position {
@@ -122,7 +119,7 @@ embedded_instances {
   id: "pregame"
   data: "components {\n"
   "  id: \"screen\"\n"
-  "  component: \"/monarch/screen.script\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"
@@ -139,16 +136,13 @@ embedded_instances {
   "    value: \"pregame\"\n"
   "    type: PROPERTY_TYPE_HASH\n"
   "  }\n"
-  "  properties {\n"
-  "    id: \"transition_url\"\n"
-  "    value: \"pregame:/go#pregame\"\n"
-  "    type: PROPERTY_TYPE_URL\n"
+  "  property_decls {\n"
   "  }\n"
   "}\n"
   "embedded_components {\n"
   "  id: \"collectionproxy\"\n"
   "  type: \"collectionproxy\"\n"
-  "  data: \"collection: \\\"/example/pregame.collection\\\"\\n"
+  "  data: \"collection: \\\"/example/advanced/pregame.collection\\\"\\n"
   "exclude: false\\n"
   "\"\n"
   "  position {\n"
@@ -185,7 +179,7 @@ embedded_instances {
   id: "game"
   data: "components {\n"
   "  id: \"screen\"\n"
-  "  component: \"/monarch/screen.script\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"
@@ -202,84 +196,13 @@ embedded_instances {
   "    value: \"game\"\n"
   "    type: PROPERTY_TYPE_HASH\n"
   "  }\n"
-  "  properties {\n"
-  "    id: \"transition_url\"\n"
-  "    value: \"game:/go#game\"\n"
-  "    type: PROPERTY_TYPE_URL\n"
+  "  property_decls {\n"
   "  }\n"
   "}\n"
   "embedded_components {\n"
   "  id: \"collectionproxy\"\n"
   "  type: \"collectionproxy\"\n"
-  "  data: \"collection: \\\"/example/game.collection\\\"\\n"
-  "exclude: false\\n"
-  "\"\n"
-  "  position {\n"
-  "    x: 0.0\n"
-  "    y: 0.0\n"
-  "    z: 0.0\n"
-  "  }\n"
-  "  rotation {\n"
-  "    x: 0.0\n"
-  "    y: 0.0\n"
-  "    z: 0.0\n"
-  "    w: 1.0\n"
-  "  }\n"
-  "}\n"
-  ""
-  position {
-    x: 0.0
-    y: 0.0
-    z: 0.0
-  }
-  rotation {
-    x: 0.0
-    y: 0.0
-    z: 0.0
-    w: 1.0
-  }
-  scale3 {
-    x: 1.0
-    y: 1.0
-    z: 1.0
-  }
-}
-embedded_instances {
-  id: "popup"
-  data: "components {\n"
-  "  id: \"screen\"\n"
-  "  component: \"/monarch/screen.script\"\n"
-  "  position {\n"
-  "    x: 0.0\n"
-  "    y: 0.0\n"
-  "    z: 0.0\n"
-  "  }\n"
-  "  rotation {\n"
-  "    x: 0.0\n"
-  "    y: 0.0\n"
-  "    z: 0.0\n"
-  "    w: 1.0\n"
-  "  }\n"
-  "  properties {\n"
-  "    id: \"screen_id\"\n"
-  "    value: \"popup\"\n"
-  "    type: PROPERTY_TYPE_HASH\n"
-  "  }\n"
-  "  properties {\n"
-  "    id: \"popup\"\n"
-  "    value: \"true\"\n"
-  "    type: PROPERTY_TYPE_BOOLEAN\n"
-  "  }\n"
-  "  properties {\n"
-  "    id: \"transition_url\"\n"
-  "    value: \"popup:/go#popup\"\n"
-  "    type: PROPERTY_TYPE_URL\n"
-  "  }\n"
-  "}\n"
-  "embedded_components {\n"
-  "  id: \"collectionproxy\"\n"
-  "  type: \"collectionproxy\"\n"
-  "  data: \"collection: \\\"/example/popup.collection\\\"\\n"
+  "  data: \"collection: \\\"/example/advanced/game.collection\\\"\\n"
   "exclude: false\\n"
   "\"\n"
   "  position {\n"
@@ -316,7 +239,7 @@ embedded_instances {
   id: "about"
   data: "components {\n"
   "  id: \"screen\"\n"
-  "  component: \"/monarch/screen.script\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"
@@ -339,15 +262,22 @@ embedded_instances {
   "    type: PROPERTY_TYPE_BOOLEAN\n"
   "  }\n"
   "  properties {\n"
-  "    id: \"transition_url\"\n"
-  "    value: \"about:/go#about\"\n"
-  "    type: PROPERTY_TYPE_URL\n"
+  "    id: \"popup_on_popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"preload\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  property_decls {\n"
   "  }\n"
   "}\n"
   "embedded_components {\n"
   "  id: \"collectionproxy\"\n"
   "  type: \"collectionproxy\"\n"
-  "  data: \"collection: \\\"/example/about.collection\\\"\\n"
+  "  data: \"collection: \\\"/example/advanced/about.collection\\\"\\n"
   "exclude: false\\n"
   "\"\n"
   "  position {\n"
@@ -380,3 +310,139 @@ embedded_instances {
     z: 1.0
   }
 }
+embedded_instances {
+  id: "confirm"
+  data: "components {\n"
+  "  id: \"screen\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"confirm\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup_on_popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"others_keep_input_focus_when_below_screen\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionproxy\"\n"
+  "  type: \"collectionproxy\"\n"
+  "  data: \"collection: \\\"/example/advanced/confirm.collection\\\"\\n"
+  "exclude: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "background"
+  data: "components {\n"
+  "  id: \"screen_factory\"\n"
+  "  component: \"/monarch/screen_factory.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"background\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionfactory\"\n"
+  "  type: \"collectionfactory\"\n"
+  "  data: \"prototype: \\\"/example/advanced/background.collection\\\"\\n"
+  "load_dynamically: false\\n"
+  "dynamic_prototype: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/advanced/advanced.script

@@ -0,0 +1,14 @@
+local monarch = require "monarch.monarch"
+
+function init(self)
+	monarch.debug()
+	msg.post("@render:/", "clear_color", { color = vmath.vector4(0.4, 0.6, 0.8,1.0) })
+	msg.post("#", "init_monarch") -- wait until init() has been called for all screen.script instances
+end
+
+function on_message(self, message_id, message, sender)
+	if message_id == hash("init_monarch") then
+		monarch.show(hash("background"), { no_stack = true })
+		monarch.show(hash("menu"))
+	end
+end

example/advanced/background.collection

@@ -0,0 +1,42 @@
+name: "background"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "embedded_components {\n"
+  "  id: \"sprite\"\n"
+  "  type: \"sprite\"\n"
+  "  data: \"tile_set: \\\"/assets/logo.atlas\\\"\\n"
+  "default_animation: \\\"logo\\\"\\n"
+  "material: \\\"/builtins/materials/sprite.material\\\"\\n"
+  "blend_mode: BLEND_MODE_ALPHA\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 320.0
+    y: 568.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/advanced/confirm.collection

@@ -0,0 +1,37 @@
+name: "confirm"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"confirm\"\n"
+  "  component: \"/example/advanced/confirm.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/advanced/confirm.gui

@@ -0,0 +1,373 @@
+script: "/example/advanced/confirm.gui_script"
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 568.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 350.0
+    y: 200.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.4
+    y: 0.4
+    z: 0.4
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "root"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: "below"
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+nodes {
+  position {
+    x: 85.0
+    y: -65.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 150.0
+    y: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "yes_button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "root"
+  layer: "below"
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "YES"
+  font: "example"
+  id: "yes_text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "yes_button"
+  layer: "text"
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+nodes {
+  position {
+    x: -85.0
+    y: -65.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 150.0
+    y: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "no_button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "root"
+  layer: "below"
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "NO"
+  font: "example"
+  id: "no_text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "no_button"
+  layer: "text"
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "Are you sure?"
+  font: "example"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "root"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+layers {
+  name: "below"
+}
+layers {
+  name: "text"
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/advanced/confirm.gui_script

@@ -0,0 +1,41 @@
+local monarch = require "monarch.monarch"
+local transitions = require "monarch.transitions.gui"
+
+function init(self)
+	msg.post(".", "acquire_input_focus")
+	self.yes = gui.get_node("yes_button")
+	self.no = gui.get_node("no_button")
+	gui.set_render_order(15)
+
+	local transition = transitions.create(gui.get_node("root"))
+		.show_in(transitions.scale_in, gui.EASING_OUTBACK, 0.3, 0)
+		.show_out(transitions.scale_out, gui.EASING_INBACK, 0.3, 0)
+		.back_in(transitions.scale_in, gui.EASING_OUTBACK, 0.3, 0)
+		.back_out(transitions.scale_out, gui.EASING_INBACK, 0.3, 0)
+
+	monarch.on_transition("confirm", transition)
+end
+
+function on_input(self, action_id, action)
+	if action_id == hash("touch") and action.released then
+		if gui.pick_node(self.yes, action.x, action.y) then
+			print("yes")
+			if monarch.data("confirm").next then
+				monarch.show(monarch.data("confirm").next, nil, nil, function()
+					print("next screen show done")
+				end)
+			else
+				print("no next screen in data")
+			end
+		elseif gui.pick_node(self.no, action.x, action.y) then
+			print("no")
+			monarch.back(nil, nil, function()
+				print("back from popup done")
+			end)
+		end
+	end
+end
+
+function on_message(self, message_id, message, sender)
+	monarch.on_message(message_id, message, sender)
+end

example/advanced/debug.gui

@@ -1,4 +1,4 @@
-script: "/example/debug.gui_script"
+script: "/example/advanced/debug.gui_script"
 fonts {
   name: "example"
   font: "/assets/example.font"

example/advanced/game.collection

@@ -4,7 +4,7 @@ embedded_instances {
   id: "go"
   data: "components {\n"
   "  id: \"game\"\n"
-  "  component: \"/example/game.gui\"\n"
+  "  component: \"/example/advanced/game.gui\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"

example/advanced/game.gui

@@ -1,4 +1,4 @@
-script: "/example/game.gui_script"
+script: "/example/advanced/game.gui_script"
 fonts {
   name: "example"
   font: "/assets/example.font"
@@ -48,7 +48,7 @@ nodes {
   yanchor: YANCHOR_NONE
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -103,7 +103,7 @@ nodes {
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
   parent: "root"
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -172,7 +172,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
   parent: "win_button"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -235,7 +235,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
   parent: "root"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -244,6 +244,12 @@ nodes {
   text_leading: 1.0
   text_tracking: 0.0
 }
+layers {
+  name: "below"
+}
+layers {
+  name: "text"
+}
 material: "/builtins/materials/gui.material"
 adjust_reference: ADJUST_REFERENCE_PARENT
 max_nodes: 512

example/advanced/game.gui_script

@@ -3,15 +3,12 @@ local transitions = require "monarch.transitions.gui"
 
 function init(self)
 	msg.post(".", "acquire_input_focus")
-	
+
 	local data = monarch.data(hash("game"))
 	gui.set_text(gui.get_node("level"), tostring(data.level))
 
-	self.transition = transitions.create(gui.get_node("root"))
-		.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
-		.show_out(transitions.slide_out_left, gui.EASING_INQUAD, 0.6, 0)
-		.back_in(transitions.slide_in_left, gui.EASING_OUTQUAD, 0.6, 0)
-		.back_out(transitions.slide_out_right, gui.EASING_INQUAD, 0.6, 0)
+	local transition = transitions.in_right_out_left(gui.get_node("root"), 0.6, 0)
+	monarch.on_transition("game", transition)
 end
 
 function on_input(self, action_id, action)
@@ -25,5 +22,5 @@ function on_input(self, action_id, action)
 end
 
 function on_message(self, message_id, message, sender)
-	self.transition.handle(message_id, message, sender)
+	monarch.on_message(message_id, message, sender)
 end

example/advanced/menu.collection

@@ -0,0 +1,120 @@
+name: "menu"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"menu\"\n"
+  "  component: \"/example/advanced/menu.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "popup"
+  data: "components {\n"
+  "  id: \"screen\"\n"
+  "  component: \"/monarch/screen_factory.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"popup\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup_on_popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"transition_id\"\n"
+  "    value: \"/go\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"focus_id\"\n"
+  "    value: \"/go\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionfactory\"\n"
+  "  type: \"collectionfactory\"\n"
+  "  data: \"prototype: \\\"/example/advanced/popup.collection\\\"\\n"
+  "load_dynamically: false\\n"
+  "dynamic_prototype: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/advanced/menu.gui

@@ -0,0 +1,784 @@
+script: "/example/advanced/menu.gui_script"
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "root"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: "below"
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+nodes {
+  position {
+    x: 320.0
+    y: 568.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "startgame_button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "root"
+  layer: "below"
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "START GAME"
+  font: "example"
+  id: "startgame_text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "startgame_button"
+  layer: "text"
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+nodes {
+  position {
+    x: 499.0
+    y: 1078.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "about_button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "root"
+  layer: "below"
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "ABOUT"
+  font: "example"
+  id: "about_text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "about_button"
+  layer: "text"
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+nodes {
+  position {
+    x: 138.0
+    y: 1078.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "back_button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "root"
+  layer: "below"
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "BACK"
+  font: "example"
+  id: "back_text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "back_button"
+  layer: "text"
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 1024.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "<text>"
+  font: "example"
+  id: "timestamp"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "root"
+  layer: "text"
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 272.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 40.0
+    y: 40.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.6
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "spinner"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "root"
+  layer: "below"
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+layers {
+  name: "below"
+}
+layers {
+  name: "text"
+}
+material: "/builtins/materials/gui.material"
+layouts {
+  name: "Landscape"
+  nodes {
+    position {
+      x: 568.0
+      y: 320.0
+      z: 0.0
+      w: 1.0
+    }
+    rotation {
+      x: 0.0
+      y: 0.0
+      z: 0.0
+      w: 1.0
+    }
+    scale {
+      x: 1.0
+      y: 1.0
+      z: 1.0
+      w: 1.0
+    }
+    size {
+      x: 200.0
+      y: 50.0
+      z: 0.0
+      w: 1.0
+    }
+    color {
+      x: 1.0
+      y: 1.0
+      z: 1.0
+      w: 1.0
+    }
+    type: TYPE_BOX
+    blend_mode: BLEND_MODE_ALPHA
+    texture: ""
+    id: "startgame_button"
+    xanchor: XANCHOR_NONE
+    yanchor: YANCHOR_NONE
+    pivot: PIVOT_CENTER
+    adjust_mode: ADJUST_MODE_FIT
+    parent: "root"
+    layer: "below"
+    inherit_alpha: true
+    slice9 {
+      x: 0.0
+      y: 0.0
+      z: 0.0
+      w: 0.0
+    }
+    clipping_mode: CLIPPING_MODE_NONE
+    clipping_visible: true
+    clipping_inverted: false
+    alpha: 1.0
+    overridden_fields: 1
+    template_node_child: false
+    size_mode: SIZE_MODE_MANUAL
+  }
+  nodes {
+    position {
+      x: 977.0
+      y: 570.0
+      z: 0.0
+      w: 1.0
+    }
+    rotation {
+      x: 0.0
+      y: 0.0
+      z: 0.0
+      w: 1.0
+    }
+    scale {
+      x: 1.0
+      y: 1.0
+      z: 1.0
+      w: 1.0
+    }
+    size {
+      x: 200.0
+      y: 50.0
+      z: 0.0
+      w: 1.0
+    }
+    color {
+      x: 1.0
+      y: 1.0
+      z: 1.0
+      w: 1.0
+    }
+    type: TYPE_BOX
+    blend_mode: BLEND_MODE_ALPHA
+    texture: ""
+    id: "about_button"
+    xanchor: XANCHOR_NONE
+    yanchor: YANCHOR_NONE
+    pivot: PIVOT_CENTER
+    adjust_mode: ADJUST_MODE_FIT
+    parent: "root"
+    layer: "below"
+    inherit_alpha: true
+    slice9 {
+      x: 0.0
+      y: 0.0
+      z: 0.0
+      w: 0.0
+    }
+    clipping_mode: CLIPPING_MODE_NONE
+    clipping_visible: true
+    clipping_inverted: false
+    alpha: 1.0
+    overridden_fields: 1
+    template_node_child: false
+    size_mode: SIZE_MODE_MANUAL
+  }
+  nodes {
+    position {
+      x: 150.0
+      y: 570.0
+      z: 0.0
+      w: 1.0
+    }
+    rotation {
+      x: 0.0
+      y: 0.0
+      z: 0.0
+      w: 1.0
+    }
+    scale {
+      x: 1.0
+      y: 1.0
+      z: 1.0
+      w: 1.0
+    }
+    size {
+      x: 200.0
+      y: 50.0
+      z: 0.0
+      w: 1.0
+    }
+    color {
+      x: 1.0
+      y: 1.0
+      z: 1.0
+      w: 1.0
+    }
+    type: TYPE_BOX
+    blend_mode: BLEND_MODE_ALPHA
+    texture: ""
+    id: "back_button"
+    xanchor: XANCHOR_NONE
+    yanchor: YANCHOR_NONE
+    pivot: PIVOT_CENTER
+    adjust_mode: ADJUST_MODE_FIT
+    parent: "root"
+    layer: "below"
+    inherit_alpha: true
+    slice9 {
+      x: 0.0
+      y: 0.0
+      z: 0.0
+      w: 0.0
+    }
+    clipping_mode: CLIPPING_MODE_NONE
+    clipping_visible: true
+    clipping_inverted: false
+    alpha: 1.0
+    overridden_fields: 1
+    template_node_child: false
+    size_mode: SIZE_MODE_MANUAL
+  }
+  nodes {
+    position {
+      x: 568.0
+      y: 570.0
+      z: 0.0
+      w: 1.0
+    }
+    rotation {
+      x: 0.0
+      y: 0.0
+      z: 0.0
+      w: 1.0
+    }
+    scale {
+      x: 1.0
+      y: 1.0
+      z: 1.0
+      w: 1.0
+    }
+    size {
+      x: 200.0
+      y: 100.0
+      z: 0.0
+      w: 1.0
+    }
+    color {
+      x: 1.0
+      y: 1.0
+      z: 1.0
+      w: 1.0
+    }
+    type: TYPE_TEXT
+    blend_mode: BLEND_MODE_ALPHA
+    text: "<text>"
+    font: "example"
+    id: "timestamp"
+    xanchor: XANCHOR_NONE
+    yanchor: YANCHOR_NONE
+    pivot: PIVOT_CENTER
+    outline {
+      x: 1.0
+      y: 1.0
+      z: 1.0
+      w: 1.0
+    }
+    shadow {
+      x: 1.0
+      y: 1.0
+      z: 1.0
+      w: 1.0
+    }
+    adjust_mode: ADJUST_MODE_FIT
+    line_break: false
+    parent: "root"
+    layer: "text"
+    inherit_alpha: true
+    alpha: 1.0
+    outline_alpha: 1.0
+    shadow_alpha: 1.0
+    overridden_fields: 1
+    template_node_child: false
+    text_leading: 1.0
+    text_tracking: 0.0
+  }
+}
+layouts {
+  name: "Portrait"
+}
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/advanced/menu.gui_script

@@ -6,11 +6,10 @@ function init(self)
 
 	gui.set_text(gui.get_node("timestamp"), os.date())
 
-	self.transition = transitions.create(gui.get_node("root"))
-		.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
-		.show_out(transitions.slide_out_left, gui.EASING_INQUAD, 0.6, 0)
-		.back_in(transitions.slide_in_left, gui.EASING_OUTQUAD, 0.6, 0)
-		.back_out(transitions.slide_out_right, gui.EASING_INQUAD, 0.6, 0)
+	gui.animate(gui.get_node("spinner"), gui.PROP_ROTATION, vmath.vector3(0, 0, -360), gui.EASING_INOUTQUAD, 2, 0, nil, gui.PLAYBACK_LOOP_FORWARD)
+
+	local transition = transitions.fade_in_out(gui.get_node("root"), 0.6, 0)
+	monarch.on_transition("menu", transition)
 end
 
 function on_input(self, action_id, action)
@@ -21,7 +20,7 @@ function on_input(self, action_id, action)
 			end)
 		elseif gui.pick_node(gui.get_node("about_button"), action.x, action.y) then
 			monarch.show(hash("about"), nil, nil, function()
-			print("showing about done")
+				print("showing about done")
 			end)
 		elseif gui.pick_node(gui.get_node("back_button"), action.x, action.y) then
 			monarch.back()
@@ -30,7 +29,7 @@ function on_input(self, action_id, action)
 end
 
 function on_message(self, message_id, message, sender)
-	self.transition.handle(message_id, message, sender)
+	monarch.on_message(message_id, message, sender)
 	if message_id == monarch.FOCUS.GAINED then
 		gui.set_text(gui.get_node("timestamp"), os.date())
 	end

example/advanced/popup.collection

@@ -4,7 +4,7 @@ embedded_instances {
   id: "go"
   data: "components {\n"
   "  id: \"popup\"\n"
-  "  component: \"/example/popup.gui\"\n"
+  "  component: \"/example/advanced/popup.gui\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"

example/advanced/popup.gui

@@ -1,4 +1,4 @@
-script: "/example/popup.gui_script"
+script: "/example/advanced/popup.gui_script"
 fonts {
   name: "example"
   font: "/assets/example.font"
@@ -48,7 +48,7 @@ nodes {
   yanchor: YANCHOR_NONE
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -103,7 +103,7 @@ nodes {
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
   parent: "root"
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -172,7 +172,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
   parent: "ok_button"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -221,7 +221,7 @@ nodes {
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
   parent: "root"
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -290,7 +290,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
   parent: "cancel_button"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -339,7 +339,7 @@ nodes {
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
   parent: "root"
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -408,7 +408,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
   parent: "about_button"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -417,6 +417,67 @@ nodes {
   text_leading: 1.0
   text_tracking: 0.0
 }
+nodes {
+  position {
+    x: 184.0
+    y: 136.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 10.0
+    y: 10.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "spinner"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "root"
+  layer: "below"
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+}
+layers {
+  name: "below"
+}
+layers {
+  name: "text"
+}
 material: "/builtins/materials/gui.material"
 adjust_reference: ADJUST_REFERENCE_PARENT
 max_nodes: 512

example/advanced/popup.gui_script

@@ -5,30 +5,34 @@ function init(self)
 	msg.post(".", "acquire_input_focus")
 	self.ok = gui.get_node("ok_button")
 	self.cancel = gui.get_node("cancel_button")
-	gui.set_render_order(15)
+	self.about = gui.get_node("about_button")
+	gui.set_render_order(14)
 
-	self.transition = transitions.create(gui.get_node("root"))
+	gui.animate(gui.get_node("spinner"), gui.PROP_ROTATION, vmath.vector3(0, 0, -360), gui.EASING_INOUTQUAD, 2, 0, nil, gui.PLAYBACK_LOOP_FORWARD)
+
+	local transition = transitions.create(gui.get_node("root"))
 		.show_in(transitions.scale_in, gui.EASING_OUTBACK, 0.3, 0)
 		.show_out(transitions.scale_out, gui.EASING_INBACK, 0.3, 0)
 		.back_in(transitions.scale_in, gui.EASING_OUTBACK, 0.3, 0)
 		.back_out(transitions.scale_out, gui.EASING_INBACK, 0.3, 0)
+	monarch.on_transition("popup", transition)
 end
 
 function on_input(self, action_id, action)
 	if action_id == hash("touch") and action.released then
 		if gui.pick_node(self.ok, action.x, action.y) then
 			print("ok")
-			monarch.show(hash("pregame"), nil, nil, function()
-				print("pregame show done")
+			monarch.show(hash("confirm"), nil, { next = hash("pregame") }, function()
+				print("confirm show done")
 			end)
 		elseif gui.pick_node(self.cancel, action.x, action.y) then
 			print("cancel")
-			monarch.back(function()
+			monarch.back(nil, nil, function()
 				print("back from popup done")
 			end)
-		elseif gui.pick_node(gui.get_node("about_button"), action.x, action.y) then
+		elseif gui.pick_node(self.about, action.x, action.y) then
 			print("about")
-			monarch.show(hash("about"), {clear=true, reload=true}, nil, function()
+			monarch.show(hash("about"), { clear = true, reload = true }, nil, function()
 				print("about show done")
 			end)
 		end
@@ -36,5 +40,5 @@ function on_input(self, action_id, action)
 end
 
 function on_message(self, message_id, message, sender)
-	self.transition.handle(message_id, message, sender)
+	monarch.on_message(message_id, message, sender)
 end

example/advanced/pregame.collection

@@ -4,7 +4,7 @@ embedded_instances {
   id: "go"
   data: "components {\n"
   "  id: \"pregame\"\n"
-  "  component: \"/example/pregame.gui\"\n"
+  "  component: \"/example/advanced/pregame.gui\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"

example/advanced/pregame.gui

@@ -1,4 +1,4 @@
-script: "/example/pregame.gui_script"
+script: "/example/advanced/pregame.gui_script"
 fonts {
   name: "example"
   font: "/assets/example.font"
@@ -48,7 +48,7 @@ nodes {
   yanchor: YANCHOR_NONE
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -103,7 +103,7 @@ nodes {
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
   parent: "root"
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -172,7 +172,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
   parent: "play_button"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -221,7 +221,7 @@ nodes {
   pivot: PIVOT_CENTER
   adjust_mode: ADJUST_MODE_FIT
   parent: "root"
-  layer: ""
+  layer: "below"
   inherit_alpha: true
   slice9 {
     x: 0.0
@@ -290,7 +290,7 @@ nodes {
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
   parent: "back_button"
-  layer: ""
+  layer: "text"
   inherit_alpha: true
   alpha: 1.0
   outline_alpha: 1.0
@@ -299,6 +299,12 @@ nodes {
   text_leading: 1.0
   text_tracking: 0.0
 }
+layers {
+  name: "below"
+}
+layers {
+  name: "text"
+}
 material: "/builtins/materials/gui.material"
 adjust_reference: ADJUST_REFERENCE_PARENT
 max_nodes: 512

example/advanced/pregame.gui_script

@@ -5,12 +5,9 @@ function init(self)
 	msg.post(".", "acquire_input_focus")
 	self.play = gui.get_node("play_button")
 	self.back = gui.get_node("back_button")
-	
-	self.transition = transitions.create(gui.get_node("root"))
-		.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
-		.show_out(transitions.slide_out_left, gui.EASING_INQUAD, 0.6, 0)
-		.back_in(transitions.slide_in_left, gui.EASING_OUTQUAD, 0.6, 0)
-		.back_out(transitions.slide_out_right, gui.EASING_INQUAD, 0.6, 0)
+
+	local transition = transitions.in_right_out_left(gui.get_node("root"), 0.6, 0)
+	monarch.on_transition("pregame", transition)
 end
 
 function on_input(self, action_id, action)
@@ -22,7 +19,7 @@ function on_input(self, action_id, action)
 			end)
 		elseif gui.pick_node(self.back, action.x, action.y) then
 			print("back")
-			monarch.back(function()
+			monarch.back(nil, nil, function()
 				print("back from pregame done")
 			end)
 		end
@@ -30,5 +27,5 @@ function on_input(self, action_id, action)
 end
 
 function on_message(self, message_id, message, sender)
-	self.transition.handle(message_id, message, sender)
+	monarch.on_message(message_id, message, sender)
 end

example/basic/basic.collection

@@ -0,0 +1,289 @@
+name: "basic"
+scale_along_z: 0
+embedded_instances {
+  id: "screen1"
+  data: "components {\n"
+  "  id: \"screen_proxy\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"screen1\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionproxy\"\n"
+  "  type: \"collectionproxy\"\n"
+  "  data: \"collection: \\\"/example/basic/screen1.collection\\\"\\n"
+  "exclude: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "basic"
+  data: "components {\n"
+  "  id: \"basic\"\n"
+  "  component: \"/example/basic/basic.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "screen2"
+  data: "components {\n"
+  "  id: \"screen_proxy\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"screen2\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionproxy\"\n"
+  "  type: \"collectionproxy\"\n"
+  "  data: \"collection: \\\"/example/basic/screen2.collection\\\"\\n"
+  "exclude: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "popup1"
+  data: "components {\n"
+  "  id: \"screen_proxy\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"popup1\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionproxy\"\n"
+  "  type: \"collectionproxy\"\n"
+  "  data: \"collection: \\\"/example/basic/popup1.collection\\\"\\n"
+  "exclude: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "popup2"
+  data: "components {\n"
+  "  id: \"screen_proxy\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"popup2\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionproxy\"\n"
+  "  type: \"collectionproxy\"\n"
+  "  data: \"collection: \\\"/example/basic/popup2.collection\\\"\\n"
+  "exclude: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/basic/basic.script

@@ -0,0 +1,12 @@
+local monarch = require "monarch.monarch"
+
+function init(self)
+	msg.post(".", "acquire_input_focus")
+	msg.post("#", "show_screen1")
+end
+
+function on_message(self, message_id, message, sender)
+	if message_id == hash("show_screen1") then
+		monarch.show("screen1")
+	end
+end

example/basic/popup1.collection

@@ -0,0 +1,39 @@
+name: "popup1"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"popup1\"\n"
+  "  component: \"/example/basic/popup1.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/basic/popup1.gui

@@ -1,4 +1,4 @@
-script: "/example/menu.gui_script"
+script: "/example/basic/popup1.gui_script"
 fonts {
   name: "example"
   font: "/assets/example.font"
@@ -11,8 +11,8 @@ background_color {
 }
 nodes {
   position {
-    x: 0.0
-    y: 0.0
+    x: 320.0
+    y: 568.0
     z: 0.0
     w: 1.0
   }
@@ -29,14 +29,14 @@ nodes {
     w: 1.0
   }
   size {
-    x: 0.0
-    y: 0.0
+    x: 400.0
+    y: 400.0
     z: 0.0
     w: 1.0
   }
   color {
-    x: 1.0
-    y: 1.0
+    x: 0.5019608
+    y: 0.6
     z: 1.0
     w: 1.0
   }
@@ -62,11 +62,14 @@ nodes {
   alpha: 1.0
   template_node_child: false
   size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
-    x: 320.0
-    y: 568.0
+    x: 0.0
+    y: 100.0
     z: 0.0
     w: 1.0
   }
@@ -84,7 +87,7 @@ nodes {
   }
   size {
     x: 200.0
-    y: 50.0
+    y: 100.0
     z: 0.0
     w: 1.0
   }
@@ -97,7 +100,7 @@ nodes {
   type: TYPE_BOX
   blend_mode: BLEND_MODE_ALPHA
   texture: ""
-  id: "startgame_button"
+  id: "showpopup2"
   xanchor: XANCHOR_NONE
   yanchor: YANCHOR_NONE
   pivot: PIVOT_CENTER
@@ -116,7 +119,10 @@ nodes {
   clipping_inverted: false
   alpha: 1.0
   template_node_child: false
-  size_mode: SIZE_MODE_MANUAL
+  size_mode: SIZE_MODE_AUTO
+  custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -151,9 +157,9 @@ nodes {
   }
   type: TYPE_TEXT
   blend_mode: BLEND_MODE_ALPHA
-  text: "START GAME"
+  text: "SHOW POPUP 2"
   font: "example"
-  id: "startgame_text"
+  id: "showtext"
   xanchor: XANCHOR_NONE
   yanchor: YANCHOR_NONE
   pivot: PIVOT_CENTER
@@ -171,7 +177,7 @@ nodes {
   }
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
-  parent: "startgame_button"
+  parent: "showpopup2"
   layer: ""
   inherit_alpha: true
   alpha: 1.0
@@ -180,11 +186,14 @@ nodes {
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
-    x: 499.0
-    y: 1078.0
+    x: 0.0
+    y: -100.0
     z: 0.0
     w: 1.0
   }
@@ -202,7 +211,7 @@ nodes {
   }
   size {
     x: 200.0
-    y: 50.0
+    y: 100.0
     z: 0.0
     w: 1.0
   }
@@ -215,7 +224,7 @@ nodes {
   type: TYPE_BOX
   blend_mode: BLEND_MODE_ALPHA
   texture: ""
-  id: "about_button"
+  id: "closepopup"
   xanchor: XANCHOR_NONE
   yanchor: YANCHOR_NONE
   pivot: PIVOT_CENTER
@@ -234,7 +243,10 @@ nodes {
   clipping_inverted: false
   alpha: 1.0
   template_node_child: false
-  size_mode: SIZE_MODE_MANUAL
+  size_mode: SIZE_MODE_AUTO
+  custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -269,9 +281,9 @@ nodes {
   }
   type: TYPE_TEXT
   blend_mode: BLEND_MODE_ALPHA
-  text: "ABOUT"
+  text: "CLOSE"
   font: "example"
-  id: "about_text"
+  id: "closetext"
   xanchor: XANCHOR_NONE
   yanchor: YANCHOR_NONE
   pivot: PIVOT_CENTER
@@ -289,7 +301,7 @@ nodes {
   }
   adjust_mode: ADJUST_MODE_FIT
   line_break: false
-  parent: "about_button"
+  parent: "closepopup"
   layer: ""
   inherit_alpha: true
   alpha: 1.0
@@ -298,61 +310,9 @@ nodes {
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
-}
-nodes {
-  position {
-    x: 138.0
-    y: 1078.0
-    z: 0.0
-    w: 1.0
-  }
-  rotation {
-    x: 0.0
-    y: 0.0
-    z: 0.0
-    w: 1.0
-  }
-  scale {
-    x: 1.0
-    y: 1.0
-    z: 1.0
-    w: 1.0
-  }
-  size {
-    x: 200.0
-    y: 50.0
-    z: 0.0
-    w: 1.0
-  }
-  color {
-    x: 1.0
-    y: 1.0
-    z: 1.0
-    w: 1.0
-  }
-  type: TYPE_BOX
-  blend_mode: BLEND_MODE_ALPHA
-  texture: ""
-  id: "back_button"
-  xanchor: XANCHOR_NONE
-  yanchor: YANCHOR_NONE
-  pivot: PIVOT_CENTER
-  adjust_mode: ADJUST_MODE_FIT
-  parent: "root"
-  layer: ""
-  inherit_alpha: true
-  slice9 {
-    x: 0.0
-    y: 0.0
-    z: 0.0
-    w: 0.0
-  }
-  clipping_mode: CLIPPING_MODE_NONE
-  clipping_visible: true
-  clipping_inverted: false
-  alpha: 1.0
-  template_node_child: false
-  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: true
 }
 nodes {
   position {
@@ -375,70 +335,7 @@ nodes {
   }
   size {
     x: 200.0
-    y: 100.0
-    z: 0.0
-    w: 1.0
-  }
-  color {
-    x: 0.0
-    y: 0.0
-    z: 0.0
-    w: 1.0
-  }
-  type: TYPE_TEXT
-  blend_mode: BLEND_MODE_ALPHA
-  text: "BACK"
-  font: "example"
-  id: "back_text"
-  xanchor: XANCHOR_NONE
-  yanchor: YANCHOR_NONE
-  pivot: PIVOT_CENTER
-  outline {
-    x: 1.0
-    y: 1.0
-    z: 1.0
-    w: 1.0
-  }
-  shadow {
-    x: 1.0
-    y: 1.0
-    z: 1.0
-    w: 1.0
-  }
-  adjust_mode: ADJUST_MODE_FIT
-  line_break: false
-  parent: "back_button"
-  layer: ""
-  inherit_alpha: true
-  alpha: 1.0
-  outline_alpha: 1.0
-  shadow_alpha: 1.0
-  template_node_child: false
-  text_leading: 1.0
-  text_tracking: 0.0
-}
-nodes {
-  position {
-    x: 320.0
-    y: 1024.0
-    z: 0.0
-    w: 1.0
-  }
-  rotation {
-    x: 0.0
-    y: 0.0
-    z: 0.0
-    w: 1.0
-  }
-  scale {
-    x: 1.0
-    y: 1.0
-    z: 1.0
-    w: 1.0
-  }
-  size {
-    x: 200.0
-    y: 100.0
+    y: 40.0
     z: 0.0
     w: 1.0
   }
@@ -450,9 +347,9 @@ nodes {
   }
   type: TYPE_TEXT
   blend_mode: BLEND_MODE_ALPHA
-  text: "<text>"
+  text: "THIS IS POPUP 1"
   font: "example"
-  id: "timestamp"
+  id: "id"
   xanchor: XANCHOR_NONE
   yanchor: YANCHOR_NONE
   pivot: PIVOT_CENTER
@@ -479,6 +376,9 @@ nodes {
   template_node_child: false
   text_leading: 1.0
   text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
 }
 material: "/builtins/materials/gui.material"
 adjust_reference: ADJUST_REFERENCE_PARENT

example/basic/popup1.gui_script

@@ -0,0 +1,16 @@
+local monarch = require "monarch.monarch"
+
+function init(self)
+	msg.post(".", "acquire_input_focus")
+	gui.set_render_order(14)
+end
+
+function on_input(self, action_id, action)
+	if action_id == hash("touch") and action.pressed then
+		if gui.pick_node(gui.get_node("showpopup2"), action.x, action.y) then
+			monarch.show("popup2")
+		elseif gui.pick_node(gui.get_node("closepopup"), action.x, action.y) then
+			monarch.back()
+		end
+	end
+end

example/basic/popup2.collection

@@ -0,0 +1,39 @@
+name: "popup2"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"popup2\"\n"
+  "  component: \"/example/basic/popup2.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/basic/popup2.gui

@@ -0,0 +1,385 @@
+script: "/example/basic/popup2.gui_script"
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 568.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 400.0
+    y: 400.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.5019608
+    y: 0.7019608
+    z: 0.7019608
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "root"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "showpopup2"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "root"
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "SHOW POPUP 2"
+  font: "example"
+  id: "showtext"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "showpopup2"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 40.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "THIS IS POPUP 2"
+  font: "example"
+  id: "id"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "root"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: -100.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "closepopup"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "root"
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "CLOSE"
+  font: "example"
+  id: "closetext"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "closepopup"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/basic/popup2.gui_script

@@ -0,0 +1,16 @@
+local monarch = require "monarch.monarch"
+
+function init(self)
+	msg.post(".", "acquire_input_focus")
+	gui.set_render_order(15)
+end
+
+function on_input(self, action_id, action)
+	if action_id == hash("touch") and action.pressed then
+		if gui.pick_node(gui.get_node("showpopup2"), action.x, action.y) then
+			monarch.show("popup2")
+		elseif gui.pick_node(gui.get_node("closepopup"), action.x, action.y) then
+			monarch.back()
+		end
+	end
+end

example/basic/screen1.collection

@@ -0,0 +1,37 @@
+name: "screen1"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"screen1\"\n"
+  "  component: \"/example/basic/screen1.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/basic/screen1.gui

@@ -0,0 +1,325 @@
+script: "/example/basic/screen1.gui_script"
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 568.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "showscreen2"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "SHOW SCREEN 2"
+  font: "example"
+  id: "showscreen2text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "showscreen2"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 320.0
+    y: 10.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 40.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "THIS IS SCREEN 1"
+  font: "example"
+  id: "id"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_S
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 320.0
+    y: 450.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "showpopup1"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "SHOW POPUP 1"
+  font: "example"
+  id: "showpopup1text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "showpopup1"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/basic/screen1.gui_script

@@ -0,0 +1,15 @@
+local monarch = require "monarch.monarch"
+
+function init(self)
+	msg.post(".", "acquire_input_focus")
+end
+
+function on_input(self, action_id, action)
+	if action_id == hash("touch") and action.pressed then
+		if gui.pick_node(gui.get_node("showscreen2"), action.x, action.y) then
+			monarch.show("screen2")
+		elseif gui.pick_node(gui.get_node("showpopup1"), action.x, action.y) then
+			monarch.show("popup1")
+		end
+	end
+end

example/basic/screen2.collection

@@ -0,0 +1,37 @@
+name: "screen2"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"screen2\"\n"
+  "  component: \"/example/basic/screen2.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/basic/screen2.gui

@@ -0,0 +1,325 @@
+script: "/example/basic/screen2.gui_script"
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 568.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "backbutton"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "BACK"
+  font: "example"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "backbutton"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 320.0
+    y: 10.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 40.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "THIS IS SCREEN 2"
+  font: "example"
+  id: "id"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_S
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 320.0
+    y: 450.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "showpopup1"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "SHOW POPUP 1"
+  font: "example"
+  id: "showpopup1text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "showpopup1"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/basic/screen2.gui_script

@@ -0,0 +1,15 @@
+local monarch = require "monarch.monarch"
+
+function init(self)
+	msg.post(".", "acquire_input_focus")
+end
+
+function on_input(self, action_id, action)
+	if action_id == hash("touch") and action.pressed then
+		if gui.pick_node(gui.get_node("backbutton"), action.x, action.y) then
+			monarch.back()
+		elseif gui.pick_node(gui.get_node("showpopup1"), action.x, action.y) then
+			monarch.show("popup1")
+		end
+	end
+end

example/example.display_profiles

@@ -0,0 +1,14 @@
+profiles {
+  name: "Landscape"
+  qualifiers {
+    width: 1136
+    height: 640
+  }
+}
+profiles {
+  name: "Portrait"
+  qualifiers {
+    width: 640
+    height: 1136
+  }
+}

example/main.script

@@ -1,14 +0,0 @@
-local monarch = require "monarch.monarch"
-
-function init(self)
-	self.wait = true
-	msg.post("@render:/", "clear_color", { color = vmath.vector4(0.4, 0.6, 0.8,1.0) })
-end
-
-function update(self)
-	-- Ensure that the initial screen has had enough time to register
-	if self.wait == true and monarch.screen_exists(hash("menu")) then
-		self.wait = false
-		monarch.show(hash("menu"))
-	end	
-end

example/slidingwindow/slidingwindow.collection

@@ -0,0 +1,159 @@
+name: "slidingwindow"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"slidingwindow\"\n"
+  "  component: \"/example/slidingwindow/slidingwindow.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "window1"
+  data: "components {\n"
+  "  id: \"screen_proxy\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"window1\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionproxy\"\n"
+  "  type: \"collectionproxy\"\n"
+  "  data: \"collection: \\\"/example/slidingwindow/window1.collection\\\"\\n"
+  "exclude: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "window2"
+  data: "components {\n"
+  "  id: \"screen_proxy\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"window2\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionproxy\"\n"
+  "  type: \"collectionproxy\"\n"
+  "  data: \"collection: \\\"/example/slidingwindow/window2.collection\\\"\\n"
+  "exclude: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/slidingwindow/slidingwindow.script

@@ -0,0 +1,28 @@
+local monarch = require "monarch.monarch"
+
+function init(self)
+	monarch.debug()
+	msg.post("@render:/", "clear_color", { color = vmath.vector4(0.4, 0.6, 0.8,1.0) })
+	msg.post("#", "init_monarch") -- wait until init() has been called for all screen.script instances
+	monarch.add_listener()
+end
+
+function final(self)
+	monarch.remove_listener()
+end
+
+function on_message(self, message_id, message, sender)
+	if message_id == hash("init_monarch") then
+		monarch.show(hash("window1"))
+	elseif message_id == monarch.SCREEN_TRANSITION_IN_STARTED then
+		print("Monarch screen transition in started", message.screen)
+	elseif message_id == monarch.SCREEN_TRANSITION_IN_FINISHED then
+		print("Monarch screen transition in finished", message.screen)
+	elseif message_id == monarch.SCREEN_TRANSITION_OUT_STARTED then
+		print("Monarch screen transition out started", message.screen)
+	elseif message_id == monarch.SCREEN_TRANSITION_OUT_FINISHED then
+		print("Monarch screen transition out finished", message.screen)
+	elseif message_id == monarch.SCREEN_TRANSITION_FAILED then
+		print("Monarch screen transition failed")
+	end
+end

example/slidingwindow/window1.collection

@@ -0,0 +1,39 @@
+name: "window1"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"window1\"\n"
+  "  component: \"/example/slidingwindow/window1.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/slidingwindow/window1.gui

@@ -0,0 +1,261 @@
+script: "/example/slidingwindow/window1.gui_script"
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 568.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 640.0
+    y: 1136.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.3019608
+    y: 0.3019608
+    z: 0.3019608
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "bg"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_STRETCH
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "bg"
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "WINDOW 2"
+  font: "example"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "button"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 338.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 2.0
+    y: 2.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "WINDOW 1"
+  font: "example"
+  id: "title"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "bg"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/slidingwindow/window1.gui_script

@@ -0,0 +1,35 @@
+local monarch = require "monarch.monarch"
+local transitions = require "monarch.transitions.gui"
+
+function init(self)
+	msg.post(".", "acquire_input_focus")
+
+	local DURATION = 0.3
+	local transition = transitions.create(gui.get_node("bg"))
+	.show_in(transitions.slide_in_right, gui.EASING_LINEAR, DURATION, 0)
+	.show_out(transitions.slide_out_left, gui.EASING_LINEAR, DURATION, 0)
+	.back_in(transitions.slide_in_left, gui.EASING_LINEAR, DURATION, 0)
+	.back_out(transitions.slide_out_right, gui.EASING_LINEAR, DURATION, 0)
+
+	monarch.on_transition("window1", transition)
+
+	monarch.on_focus_changed("window1", function(message_id, message)
+		if message_id == monarch.FOCUS.GAINED then
+			print("window1 gained focus")
+		elseif message_id == monarch.FOCUS.LOST then
+			print("window1 lost focus")
+		end
+	end)
+end
+
+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

example/slidingwindow/window2.collection

@@ -0,0 +1,39 @@
+name: "window2"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"window2\"\n"
+  "  component: \"/example/slidingwindow/window2.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

example/slidingwindow/window2.gui

@@ -0,0 +1,261 @@
+script: "/example/slidingwindow/window2.gui_script"
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 568.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 640.0
+    y: 1136.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.3019608
+    y: 0.3019608
+    z: 0.3019608
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "bg"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_STRETCH
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "button"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  parent: "bg"
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_MANUAL
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 50.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "BACK"
+  font: "example"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "button"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+nodes {
+  position {
+    x: 0.0
+    y: 338.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 2.0
+    y: 2.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "WINDOW 2"
+  font: "example"
+  id: "title"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "bg"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+  custom_type: 0
+  enabled: true
+  visible: true
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

example/slidingwindow/window2.gui_script

@@ -0,0 +1,27 @@
+local monarch = require "monarch.monarch"
+local transitions = require "monarch.transitions.gui"
+
+function init(self)
+	msg.post(".", "acquire_input_focus")
+
+	local DURATION = 0.3
+	local transition = transitions.create(gui.get_node("bg"))
+	.show_in(transitions.slide_in_right, gui.EASING_LINEAR, DURATION, 0)
+	.show_out(transitions.slide_out_left, gui.EASING_LINEAR, DURATION, 0)
+	.back_in(transitions.slide_in_left, gui.EASING_LINEAR, DURATION, 0)
+	.back_out(transitions.slide_out_right, gui.EASING_LINEAR, DURATION, 0)
+
+	monarch.on_transition("window2", transition)
+end
+
+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.back()
+		end
+	end
+end
+
+function on_message(self, message_id, message, sender)
+	monarch.on_message(message_id, message, sender)
+end

game.project

@@ -1,10 +1,11 @@
 [project]
 title = Monarch
 version = 0.9
-dependencies = https://github.com/britzl/deftest/archive/1.2.1.zip
+dependencies#0 = https://github.com/britzl/deftest/archive/2.7.0.zip
+dependencies#1 = https://github.com/defold/lua-language-server/releases/download/v0.0.3/release.zip
 
 [bootstrap]
-main_collection = /example/example.collectionc
+main_collection = /example/advanced/advanced.collectionc
 
 [input]
 game_binding = /input/game.input_bindingc
@@ -12,6 +13,8 @@ game_binding = /input/game.input_bindingc
 [display]
 width = 640
 height = 1136
+dynamic_orientation = 1
+display_profiles = /example/example.display_profilesc
 
 [script]
 shared_state = 1
@@ -25,3 +28,6 @@ bundle_identifier = com.example.todo
 [library]
 include_dirs = monarch
 
+[physics]
+world_count = 5
+

monarch/editor-script/make_monarch.editor_script

@@ -0,0 +1,154 @@
+local M = {}
+
+local collection_template
+local gui_script_content
+local gui_file_content
+
+local function ends_with(str, ending)
+    return ending == "" or str:sub(-#ending) == ending
+end
+
+local function file_exists(name)
+    local f=io.open(name,"r")
+    if f~=nil then io.close(f) return true else return false end
+end
+
+local function get_filename(path)   
+    local main, filename, extension = path:match("(.-)([^\\/]-%.?([^%.\\/]*))$")
+    return main, filename
+end
+
+local function create_files(file_path)
+    -- Construct paths
+    local path = editor.get(file_path, "path")
+    local main, filename = get_filename(path)
+    local basename = filename:match("(.+)%..+")
+    local target_collection_path = "." .. main .. basename .. ".collection"
+    local target_gui_script_path = "." .. main .. basename .. ".gui_script"
+    local target_gui_path = "." .. main .. basename .. ".gui"
+
+    -- Create the files if they don't exists
+    if not file_exists(target_collection_path) then
+        local collection_content = collection_template(path, basename)
+        local collection = io.open(target_collection_path, "w")
+        collection:write(collection_content)
+        collection:close()
+    end
+    if not file_exists(target_gui_script_path) then
+        local gui_script = io.open(target_gui_script_path, "w")
+        gui_script:write(gui_script_content)
+        gui_script:close()
+
+        -- Put the gui_script path into the gui file
+        local gui_file = io.open("." .. path, "rb")
+        local gui_text = gui_file:read("*a")
+        gui_file:close()
+
+        gui_text = string.gsub(gui_text, 'script: "%.*"', [[script: "]] .. main .. basename .. ".gui_script" .. [["]])
+
+        gui_file = io.open("." .. path, "w")
+        gui_file:write(gui_text)
+        gui_file:close()
+    end
+    if not file_exists(target_gui_path) then
+        local gui_content = gui_template(path)
+        local gui = io.open(target_gui_path, "w")
+        gui:write(gui_content)
+        gui:close()
+    end
+end
+
+function M.get_commands()
+    return {
+        {
+            label="Create Monarch Scene From...",
+            locations = {"Assets"},
+            query = {
+                selection = {type = "resource", cardinality = "one"}
+            },
+            active = function(opts)
+                local path = editor.get(opts.selection, "path")
+                return ends_with(path, ".gui")
+            end,
+            run = function(opts)
+                create_files(opts.selection)
+            end
+        }
+    }
+end
+
+gui_template = function(gui_script)
+    return [[script: "]].. gui_script .. [["
+    material: "/builtins/materials/gui.material"
+    adjust_reference: ADJUST_REFERENCE_PARENT
+    ]] 
+end
+
+gui_script_content = [[local monarch = require "monarch.monarch"
+
+function init(self)
+    msg.post(".", "acquire_input_focus")
+end
+
+function final(self)
+end
+
+function update(self, dt)
+end
+
+function on_message(self, message_id, message, sender)
+end
+
+function on_input(self, action_id, action)
+end
+
+function on_reload(self)
+end
+]]
+
+
+collection_template = function(gui_script, name)
+    return [[name: "]].. name .. [["
+    scale_along_z: 0
+    embedded_instances {
+        id: "go"
+        data: "components {\n"
+        "  id: \"monarch\"\n"
+        "  component: \"]].. gui_script .. [[\"\n"
+        "  position {\n"
+        "    x: 0.0\n"
+        "    y: 0.0\n"
+        "    z: 0.0\n"
+        "  }\n"
+        "  rotation {\n"
+        "    x: 0.0\n"
+        "    y: 0.0\n"
+        "    z: 0.0\n"
+        "    w: 1.0\n"
+        "  }\n"
+        "}\n"
+        ""
+        position {
+            x: 0.0
+            y: 0.0
+            z: 0.0
+        }
+        rotation {
+            x: 0.0
+            y: 0.0
+            z: 0.0
+            w: 1.0
+        }
+        scale3 {
+            x: 1.0
+            y: 1.0
+            z: 1.0
+        }
+    }
+    ]]
+
+end
+
+
+
+return M

monarch/screen.script

@@ -1,15 +1,31 @@
 local monarch
 
 go.property("screen_proxy", msg.url("#collectionproxy"))
-go.property("screen_id", hash(""))
+go.property("screen_id", hash("UNIQUE ID HERE"))
 go.property("popup", false)
+go.property("popup_on_popup", false)
+go.property("timestep_below_popup", 1)
 go.property("transition_url", msg.url())
 go.property("focus_url", msg.url())
 
 
 function init(self)
+	print("WARNING - screen.script is deprecated. Please use screen_proxy.script")
 	monarch = require "monarch.monarch"
-	monarch.register(self.screen_id, self.screen_proxy, self.popup, self.transition_url, self.focus_url)
+	local url = msg.url()
+	assert(not self.popup_on_popup or (self.popup_on_popup and self.popup), "Popup on Popups can only be set if the Popup flag is set")
+	assert(self.screen_proxy ~= url, "You must specify either a proxy URL")
+	assert(self.timestep_below_popup >= 0, "Timestep must be positive")
+
+	local settings = {
+		popup = self.popup,
+		popup_on_popup = self.popup_on_popup,
+		transition_url = self.transition_url ~= url and self.transition_url or nil,
+		focus_url = self.focus_url ~= url and self.focus_url or nil,
+		timestep_below_popup = self.timestep_below_popup,
+	}
+
+	monarch.register_proxy(self.screen_id, self.screen_proxy, settings)
 end
 
 function final(self)
@@ -23,11 +39,6 @@ function on_message(self, message_id, message, sender)
 		monarch.back()
 	elseif message_id == hash("back") then
 		monarch.back()
-	elseif message_id == monarch.TRANSITION.SHOW_IN
-		or message_id == monarch.TRANSITION.SHOW_OUT
-		or message_id == monarch.TRANSITION.BACK_IN
-		or message_id == monarch.TRANSITION.BACK_OUT then
-			msg.post(sender, monarch.TRANSITION.DONE)
 	else
 		monarch.on_message(message_id, message, sender)
 	end

monarch/screen_factory.script

@@ -0,0 +1,45 @@
+local monarch
+
+go.property("screen_factory", msg.url("#collectionfactory"))
+go.property("screen_id", hash("UNIQUE ID HERE"))
+go.property("popup", false)
+go.property("popup_on_popup", false)
+go.property("screen_keeps_input_focus_when_below_popup", false)
+go.property("others_keep_input_focus_when_below_screen", false)
+go.property("transition_id", hash("__DEPRECATED__"))
+go.property("focus_id", hash("__DEPRECATED__"))
+go.property("preload", false)
+
+
+function init(self)
+	monarch = require "monarch.monarch"
+	assert(not self.popup_on_popup or (self.popup_on_popup and self.popup), "Popup on Popups can only be set if the Popup flag is set")
+	assert(self.screen_factory ~= msg.url(), "You must specify either a factory URL")
+
+	local settings = {
+		popup = self.popup,
+		popup_on_popup = self.popup_on_popup,
+		screen_keeps_input_focus_when_below_popup = self.screen_keeps_input_focus_when_below_popup,
+		others_keep_input_focus_when_below_screen = self.others_keep_input_focus_when_below_screen,
+		transition_id = self.transition_id,
+		focus_id = self.focus_id,
+		auto_preload = self.preload,
+	}
+	monarch.register_factory(self.screen_id, self.screen_factory, settings)
+end
+
+function final(self)
+	monarch.unregister(self.screen_id)
+end
+
+function on_message(self, message_id, message, sender)
+	if message_id == hash("show") then
+		monarch.show(self.screen_id, { clear = message.clear })
+	elseif message_id == hash("hide") then
+		monarch.back()
+	elseif message_id == hash("back") then
+		monarch.back()
+	else
+		monarch.on_message(message_id, message, sender)
+	end
+end

monarch/screen_proxy.script

@@ -0,0 +1,52 @@
+local monarch
+
+go.property("screen_proxy", msg.url("#collectionproxy"))
+go.property("screen_id", hash("UNIQUE ID HERE"))
+go.property("popup", false)
+go.property("popup_on_popup", false)
+go.property("timestep_below_popup", 1)
+go.property("screen_keeps_input_focus_when_below_popup", false)
+go.property("others_keep_input_focus_when_below_screen", false)
+go.property("transition_url", msg.url("#__DEPRECATED__"))
+go.property("focus_url", msg.url("#__DEPRECATED__"))
+go.property("receiver_url", msg.url("#__DEPRECATED__"))
+go.property("preload", false)
+
+
+function init(self)
+	monarch = require "monarch.monarch"
+	local url = msg.url()
+	assert(not self.popup_on_popup or (self.popup_on_popup and self.popup), "Popup on Popups can only be set if the Popup flag is set")
+	assert(self.screen_proxy ~= url, "You must specify either a proxy URL")
+	assert(self.timestep_below_popup >= 0, "Timestep must be positive")
+
+	local settings = {
+		popup = self.popup,
+		popup_on_popup = self.popup_on_popup,
+		transition_url = self.transition_url ~= url and self.transition_url or nil,
+		focus_url = self.focus_url ~= url and self.focus_url or nil,
+		receiver_url = self.receiver_url ~= url and self.receiver_url or nil,
+		timestep_below_popup = self.timestep_below_popup,
+		screen_keeps_input_focus_when_below_popup = self.screen_keeps_input_focus_when_below_popup,
+		others_keep_input_focus_when_below_screen = self.others_keep_input_focus_when_below_screen,
+		auto_preload = self.preload,
+	}
+
+	monarch.register_proxy(self.screen_id, self.screen_proxy, settings)
+end
+
+function final(self)
+	monarch.unregister(self.screen_id)
+end
+
+function on_message(self, message_id, message, sender)
+	if message_id == hash("show") then
+		monarch.show(self.screen_id, { clear = message.clear })
+	elseif message_id == hash("hide") then
+		monarch.back()
+	elseif message_id == hash("back") then
+		monarch.back()
+	else
+		monarch.on_message(message_id, message, sender)
+	end
+end

monarch/transitions/easings.lua

@@ -0,0 +1,26 @@
+local M = {}
+
+
+local function create(name)
+	assert(gui["EASING_OUT" .. name])
+	assert(gui["EASING_IN" .. name])
+	return {
+		IN = gui["EASING_OUT" .. name],
+		OUT = gui["EASING_IN" .. name],
+	}
+end
+
+
+function M.BACK() return create("BACK") end
+function M.BOUNCE() return create("BOUNCE") end
+function M.CIRC() return create("CIRC") end
+function M.CUBIC() return create("CUBIC") end
+function M.ELASTIC() return create("ELASTIC") end
+function M.EXPO() return create("EXPO") end
+function M.QUAD() return create("QUAD") end
+function M.QUART() return create("QUART") end
+function M.QUINT() return create("QUINT") end
+function M.SINE() return create("SINE") end
+
+
+return M

monarch/transitions/gui.lua

@@ -1,106 +1,224 @@
 local monarch = require "monarch.monarch"
+local easings = require "monarch.transitions.easings"
 
 local M = {}
 
-local WIDTH = tonumber(sys.get_config("display.width"))
-local HEIGHT = tonumber(sys.get_config("display.height"))
-
-local LEFT = vmath.vector3(-WIDTH * 2, 0, 0)
-local RIGHT = vmath.vector3(WIDTH * 2, 0, 0)
-local TOP = vmath.vector3(0, HEIGHT * 2, 0)
-local BOTTOM = vmath.vector3(0, - HEIGHT * 2, 0)
+local WIDTH = nil
+local HEIGHT = nil
+local LEFT = nil
+local RIGHT = nil
+local TOP = nil
+local BOTTOM = nil
 
 local ZERO_SCALE = vmath.vector3(0, 0, 1)
 
-function M.instant(node, to, easing, duration, delay, url)
-	msg.post(url, monarch.TRANSITION.DONE)
+local LAYOUT_CHANGED = hash("layout_changed")
+
+-- Notify the transition system that the window size has changed
+-- @param width
+-- @param height
+function M.window_resized(width, height)
+	WIDTH = width
+	HEIGHT = height
+	LEFT = vmath.vector3(-WIDTH, 0, 0)
+	RIGHT = vmath.vector3(WIDTH, 0, 0)
+	TOP = vmath.vector3(0, HEIGHT, 0)
+	BOTTOM = vmath.vector3(0, - HEIGHT, 0)
 end
 
-local function slide_in(direction, node, to, easing, duration, delay, url)
+M.window_resized(tonumber(sys.get_config("display.width")), tonumber(sys.get_config("display.height")))
+
+
+function M.instant(node, to, easing, duration, delay, cb)
+	cb()
+end
+
+local function slide_in(direction, node, to, easing, duration, delay, cb)
 	local from = to + direction
 	gui.set_position(node, from)
-	gui.animate(node, gui.PROP_POSITION, to, easing, duration, delay, function()
-		msg.post(url, monarch.TRANSITION.DONE)
-	end)
+	gui.animate(node, gui.PROP_POSITION, to, easing, duration, delay, cb)
 end
 
-function M.slide_in_left(node, to, easing, duration, delay, url)
-	return slide_in(LEFT, node, to.pos, easing, duration, delay, url)
+function M.slide_in_left(node, to, easing, duration, delay, cb)
+	return slide_in(LEFT, node, to.pos, easing, duration, delay, cb)
 end
 
-function M.slide_in_right(node, to, easing, duration, delay, url)
-	slide_in(RIGHT, node, to.pos, easing, duration, delay, url)
+function M.slide_in_right(node, to, easing, duration, delay, cb)
+	slide_in(RIGHT, node, to.pos, easing, duration, delay, cb)
 end
 
-function M.slide_in_top(node, to, easing, duration, delay, url)
-	slide_in(TOP, node, to.pos, easing, duration, delay, url)
+function M.slide_in_top(node, to, easing, duration, delay, cb)
+	slide_in(TOP, node, to.pos, easing, duration, delay, cb)
 end
 
-function M.slide_in_bottom(node, to, easing, duration, delay, url)
-	slide_in(BOTTOM, node, to.pos, easing, duration, delay, url)
+function M.slide_in_bottom(node, to, easing, duration, delay, cb)
+	slide_in(BOTTOM, node, to.pos, easing, duration, delay, cb)
 end
 
 
-local function slide_out(direction, node, from, easing, duration, delay, url)
+local function slide_out(direction, node, from, easing, duration, delay, cb)
 	local to = from + direction
 	gui.set_position(node, from)
-	gui.animate(node, gui.PROP_POSITION, to, easing, duration, delay, function()
-		msg.post(url, monarch.TRANSITION.DONE)
-	end)
+	gui.animate(node, gui.PROP_POSITION, to, easing, duration, delay, cb)
 end
 
-function M.slide_out_left(node, from, easing, duration, delay, url)
-	slide_out(LEFT, node, from.pos, easing, duration, delay, url)
+function M.slide_out_left(node, from, easing, duration, delay, cb)
+	slide_out(LEFT, node, from.pos, easing, duration, delay, cb)
 end
 
-function M.slide_out_right(node, from, easing, duration, delay, url)
-	slide_out(RIGHT, node, from.pos, easing, duration, delay, url)
+function M.slide_out_right(node, from, easing, duration, delay, cb)
+	slide_out(RIGHT, node, from.pos, easing, duration, delay, cb)
 end
 
-function M.slide_out_top(node, from, easing, duration, delay, url)
-	slide_out(TOP, node, from.pos, easing, duration, delay, url)
+function M.slide_out_top(node, from, easing, duration, delay, cb)
+	slide_out(TOP, node, from.pos, easing, duration, delay, cb)
 end
 
-function M.slide_out_bottom(node, from, easing, duration, delay, url)
-	slide_out(BOTTOM, node, from.pos, easing, duration, delay, url)
+function M.slide_out_bottom(node, from, easing, duration, delay, cb)
+	slide_out(BOTTOM, node, from.pos, easing, duration, delay, cb)
 end
 
-function M.scale_in(node, to, easing, duration, delay, url)
+function M.scale_in(node, to, easing, duration, delay, cb)
 	gui.set_scale(node, ZERO_SCALE)
-	gui.animate(node, gui.PROP_SCALE, to.scale, easing, duration, delay, function()
-		msg.post(url, monarch.TRANSITION.DONE)
-	end)
+	gui.animate(node, gui.PROP_SCALE, to.scale, easing, duration, delay, cb)
 end
 
-function M.scale_out(node, from, easing, duration, delay, url)
+function M.scale_out(node, from, easing, duration, delay, cb)
 	gui.set_scale(node, from.scale)
-	gui.animate(node, gui.PROP_SCALE, ZERO_SCALE, easing, duration, delay, function()
-		msg.post(url, monarch.TRANSITION.DONE)
-	end)
+	gui.animate(node, gui.PROP_SCALE, ZERO_SCALE, easing, duration, delay, cb)
 end
 
---- Create a transition for a node
--- @return Transition instance
-function M.create(node)
-	assert(node, "You must provide a node")
+function M.fade_out(node, from, easing, duration, delay, cb)
+	local to = gui.get_color(node)
+	to.w = 1
+	gui.set_color(node, to)
+	to.w = 0
+	gui.animate(node, gui.PROP_COLOR, to, easing, duration, delay, cb)
+end
 
+function M.fade_in(node, from, easing, duration, delay, cb)
+	local to = gui.get_color(node)
+	to.w = 0
+	gui.set_color(node, to)
+	to.w = 1
+	gui.animate(node, gui.PROP_COLOR, to, easing, duration, delay, cb)
+end
+
+
+
+--- Create a transition
+-- @return Transition instance
+local function create()
 	local instance = {}
 
 	local transitions = {
-		[monarch.TRANSITION.SHOW_IN] = M.instant,
-		[monarch.TRANSITION.SHOW_OUT] = M.instant,
-		[monarch.TRANSITION.BACK_IN] = M.instant,
-		[monarch.TRANSITION.BACK_OUT] = M.instant,
+		[monarch.TRANSITION.SHOW_IN] = { urls = {}, transitions = {}, in_progress_count = 0, },
+		[monarch.TRANSITION.SHOW_OUT] = { urls = {}, transitions = {}, in_progress_count = 0, },
+		[monarch.TRANSITION.BACK_IN] = { urls = {}, transitions = {}, in_progress_count = 0, },
+		[monarch.TRANSITION.BACK_OUT] = { urls = {}, transitions = {}, in_progress_count = 0, },
 	}
 
-	local initial_data = {}
-	initial_data.pos = gui.get_position(node)
-	initial_data.scale = gui.get_scale(node)
+	local current_transition = nil
+
+	local function create_transition(transition_id, node, fn, easing, duration, delay)
+		assert(transition_id, "You must provide a valid transition id")
+		assert(node, "You must provide a node")
+		assert(fn, "You must provide a transition function")
+
+		local t = transitions[transition_id]
+		-- find if there's already a transition for the node in
+		-- question and if so update it instead of creating a new
+		-- transition
+		for _,transition in ipairs(t.transitions) do
+			if transition.node == node then
+				transition.fn = fn
+				transition.easing = easing
+				transition.duration = duration
+				transitions.delay = delay
+				return
+			end
+		end
+		-- create new transition
+		t.transitions[#t.transitions + 1] = {
+			node = node,
+			node_data = {
+				pos = gui.get_position(node),
+				scale = gui.get_scale(node),
+			},
+			fn = fn,
+			easing = easing,
+			duration = duration,
+			delay = delay,
+			id = transition_id
+		}
+	end
+
+	local function finish_transition(transition_id)
+		local t = transitions[transition_id]
+		if #t.urls > 0 then
+			local message = { transition = transition_id }
+			while #t.urls > 0 do
+				local url = table.remove(t.urls)
+				msg.post(url, monarch.TRANSITION.DONE, message)
+			end
+		end
+		current_transition = nil
+	end
+
+	local function check_and_finish_transition(transition_id)
+		local t = transitions[transition_id]
+		if t.in_progress_count == 0 then
+			finish_transition(transition_id)
+		end
+	end
+
+	local function start_transition(transition_id, url)
+		url = url or msg.url()
+		local t = transitions[transition_id]
+		table.insert(t.urls, url)
+		if t.in_progress_count == 0 then
+			current_transition = t
+			current_transition.id = transition_id
+			if #t.transitions > 0 then
+				for i=1,#t.transitions do
+					local transition = t.transitions[i]
+					t.in_progress_count = t.in_progress_count + 1
+					transition.fn(transition.node, transition.node_data, transition.easing, transition.duration, transition.delay or 0, function()
+						t.in_progress_count = t.in_progress_count - 1
+						check_and_finish_transition(transition_id)
+					end)
+				end
+			else
+				check_and_finish_transition(transition_id)
+			end
+		end
+	end
 
 	-- Forward on_message calls here
 	function instance.handle(message_id, message, sender)
-		if transitions[message_id] then
-			transitions[message_id](sender)
+		if message_id == LAYOUT_CHANGED then
+			for _,t in pairs(transitions) do
+				for _,transitions in pairs(t.transitions) do
+					transitions.node_data.pos = gui.get_position(transitions.node)
+				end
+			end
+			-- replay the current transition if the layout changes
+			-- this will ensure that things are still hidden if they
+			-- were transitioned out
+			if current_transition then
+				for _,transition in pairs(current_transition.transitions) do
+					local node = transition.node
+					transition.fn(transition.node, transition.node_data, transition.easing, 0, 0)
+				end
+				if current_transition.in_progress_count > 0 then
+					finish_transition(current_transition.id)
+				end
+			end
+		elseif message_id == monarch.TRANSITION.SHOW_IN
+		or message_id == monarch.TRANSITION.SHOW_OUT
+		or message_id == monarch.TRANSITION.BACK_IN
+		or message_id == monarch.TRANSITION.BACK_OUT then
+			start_transition(message_id, sender)
 		end
 	end
 
@@ -110,41 +228,130 @@ function M.create(node)
 	-- @param easing Easing function to use
 	-- @param duration Transition duration
 	-- @param delay Transition delay
-	function instance.show_in(fn, easing, duration, delay)
-		transitions[monarch.TRANSITION.SHOW_IN] = function(url)
-			fn(node, initial_data, easing, duration, delay or 0, url)
-		end
+	function instance.show_in(node, fn, easing, duration, delay)
+		create_transition(monarch.TRANSITION.SHOW_IN, node, fn, easing, duration, delay)
 		return instance
 	end
 
 	-- Specify the transition function when this node is transitioned
 	-- from when showing another screen
-	function instance.show_out(fn, easing, duration, delay)
-		transitions[monarch.TRANSITION.SHOW_OUT] = function(url)
-			fn(node, initial_data, easing, duration, delay or 0, url)
-		end
+	function instance.show_out(node, fn, easing, duration, delay)
+		create_transition(monarch.TRANSITION.SHOW_OUT, node, fn, easing, duration, delay)
 		return instance
 	end
 
 	--- Specify the transition function when this node is transitioned
 	-- to when navigating back in the screen stack
-	function instance.back_in(fn, easing, duration, delay)
-		transitions[monarch.TRANSITION.BACK_IN] = function(url)
-			fn(node, initial_data, easing, duration, delay or 0, url)
-		end
+	function instance.back_in(node, fn, easing, duration, delay)
+		create_transition(monarch.TRANSITION.BACK_IN, node, fn, easing, duration, delay)
 		return instance
 	end
 
 	--- Specify the transition function when this node is transitioned
 	-- from when navigating back in the screen stack
-	function instance.back_out(fn, easing, duration, delay)
-		transitions[monarch.TRANSITION.BACK_OUT] = function(url)
-			fn(node, initial_data, easing, duration, delay or 0, url)
-		end
+	function instance.back_out(node, fn, easing, duration, delay)
+		create_transition(monarch.TRANSITION.BACK_OUT, node, fn, easing, duration, delay)
 		return instance
 	end
 
+	return setmetatable(instance, {
+		__call = function(t, ...)
+			return instance.handle(...)
+		end
+	})
+end
+
+function M.create(node)
+	local instance = create()
+	-- backward compatibility with the old version of create
+	-- where a single node was used
+	if node then
+		local show_in = instance.show_in
+		local show_out = instance.show_out
+		local back_in = instance.back_in
+		local back_out = instance.back_out
+		instance.show_in = function(fn, easing, duration, delay)
+			return show_in(node, fn, easing, duration, delay)
+		end
+		instance.show_out = function(fn, easing, duration, delay)
+			return show_out(node, fn, easing, duration, delay)
+		end
+		instance.back_in = function(fn, easing, duration, delay)
+			return back_in(node, fn, easing, duration, delay)
+		end
+		instance.back_out = function(fn, easing, duration, delay)
+			return back_out(node, fn, easing, duration, delay)
+		end
+	end
 	return instance
 end
 
+
+--- Create transition where the screen slides in from the right when shown and out
+-- to the left when hidden (and the reverse when going back)
+-- @param node
+-- @param duration
+-- @param delay Optional. Defaults to 0
+-- @param easing Optional. A constant from monarch.transitions.easing
+-- @return Transition instance
+function M.in_right_out_left(node, duration, delay, easing)
+	assert(node, "You must provide a node")
+	assert(duration, "You must provide a duration")
+	easing = easing or easings.QUAD()
+	return M.create(node)
+	.show_in(M.slide_in_right, easing.OUT, duration, delay or 0)
+	.show_out(M.slide_out_left, easing.IN, duration, delay or 0)
+	.back_in(M.slide_in_left, easing.OUT, duration, delay or 0)
+	.back_out(M.slide_out_right, easing.IN, duration, delay or 0)
+end
+
+
+function M.in_left_out_right(node, duration, delay, easing)
+	assert(node, "You must provide a node")
+	assert(duration, "You must provide a duration")
+	easing = easing or easings.QUAD()
+	return M.create(node)
+	.show_in(M.slide_in_left, easing.OUT, duration, delay or 0)
+	.show_out(M.slide_out_right, easing.IN, duration, delay or 0)
+	.back_in(M.slide_in_right, easing.OUT, duration, delay or 0)
+	.back_out(M.slide_out_left, easing.IN, duration, delay or 0)
+end
+
+
+function M.in_right_out_right(node, duration, delay, easing)
+	assert(node, "You must provide a node")
+	assert(duration, "You must provide a duration")
+	easing = easing or easings.QUAD()
+	return M.create(node)
+	.show_in(M.slide_in_right, easing.OUT, duration, delay or 0)
+	.show_out(M.slide_out_right, easing.IN, duration, delay or 0)
+	.back_in(M.slide_in_right, easing.OUT, duration, delay or 0)
+	.back_out(M.slide_out_right, easing.IN, duration, delay or 0)
+end
+
+
+function M.in_left_out_left(node, duration, delay, easing)
+	assert(node, "You must provide a node")
+	assert(duration, "You must provide a duration")
+	easing = easing or easings.QUAD()
+	return M.create(node)
+	.show_in(M.slide_in_left, easing.OUT, duration, delay or 0)
+	.show_out(M.slide_out_left, easing.IN, duration, delay or 0)
+	.back_in(M.slide_in_left, easing.OUT, duration, delay or 0)
+	.back_out(M.slide_out_left, easing.IN, duration, delay or 0)
+end
+
+
+function M.fade_in_out(node, duration, delay, easing)
+	assert(node, "You must provide a node")
+	assert(duration, "You must provide a duration")
+	easing = easing or easings.QUAD()
+	return M.create(node)
+	.show_in(M.fade_in, easing.OUT, duration, delay or 0)
+	.show_out(M.fade_out, easing.IN, duration, delay or 0)
+	.back_in(M.fade_in, easing.OUT, duration, delay or 0)
+	.back_out(M.fade_out, easing.IN, duration, delay or 0)
+end
+
+
 return M

monarch/utils/async.lua

@@ -0,0 +1,47 @@
+local M = {}
+
+local NOT_STARTED = "not_started"
+local YIELDED = "yielded"
+local RESUMED = "resumed"
+local RUNNING = "running"
+
+function M.async(fn)
+	local co = coroutine.running()
+	
+	local state = NOT_STARTED
+
+	local function await(fn, ...)
+		state = RUNNING
+		fn(...)
+		if state ~= RUNNING then
+			return
+		end
+		state = YIELDED
+		local r = { coroutine.yield() }
+		return unpack(r)
+	end
+
+	local function resume(...)
+		if state ~= RUNNING then
+			state = RUNNING
+			local ok, err = coroutine.resume(co, ...)
+			if not ok then
+				print(err)
+				print(debug.traceback())
+			end
+		end
+	end
+
+	if co then
+		return fn(await, resume)
+	else
+		co = coroutine.create(fn)
+		return resume(await, resume)
+	end
+end
+
+return setmetatable(M, {
+	__call = function(t, ...)
+		return M.async(...)
+	end
+})

monarch/utils/callback_tracker.lua

@@ -0,0 +1,57 @@
+local M = {}
+
+
+function M.create()
+	local instance = {}
+
+	local callback = nil
+	local callback_count = 0
+	local all_callbacks_done = false
+
+	local function is_done()
+		return callback_count == 0
+	end
+
+	local function invoke_if_done()
+		if all_callbacks_done then
+			print("Warning: The same callback will be invoked twice from the callback tracker!")
+		end
+		if callback_count == 0 and callback then
+			all_callbacks_done = true
+			local ok, err = pcall(callback)
+			if not ok then print(err) end
+		end
+	end
+
+	--- Create a callback function and track when it is done
+	-- @return Callback function
+	function instance.track()
+		callback_count = callback_count + 1
+		local done = false
+		return function()
+			if done then
+				return false, "The callback has already been invoked once"
+			end
+			done = true
+			callback_count = callback_count - 1
+			invoke_if_done()
+			return true
+		end
+	end
+
+	--- Call a function when all callbacks have been triggered
+	-- @param cb Function to call when all 
+	function instance.when_done(cb)
+		callback = cb
+		invoke_if_done()
+	end
+
+	return instance
+end
+
+
+return setmetatable(M, {
+	__call = function(_, ...)
+		return M.create()
+	end
+})

test.settings

@@ -0,0 +1,2 @@
+[bootstrap]
+main_collection = /test/test.collectionc

test/cowait.lua

@@ -1,38 +1,31 @@
 local M = {}
 
-
-local instances = {}
-
-local function create(fn)
-	local instance = {
-		co = coroutine.running(),
-		fn = fn,
-	}
-	table.insert(instances, instance)
-	coroutine.yield(instance.co)
-end
-
-	
-
 function M.seconds(amount)
-	local time = socket.gettime() + amount
-	create(function()
-		return socket.gettime() >= time
-	end)
-end
-
-
-function M.eval(fn)
-	create(fn)
-end
-
-function M.update()
-	for k,instance in pairs(instances) do
-		if instance.fn() then
-			instances[k] = nil
-			coroutine.resume(instance.co)
+	local co = coroutine.running()
+	assert(co, "You must run this from within a coroutine")
+	timer.delay(amount, false, function()
+		local ok, err = coroutine.resume(co)
+		if not ok then
+			print(err)
 		end
-	end
+	end)
+	coroutine.yield()
+end
+
+function M.eval(fn, timeout)
+	local co = coroutine.running()
+	assert(co, "You must run this from within a coroutine")
+	local start = socket.gettime()
+	timer.delay(0.02, true, function(self, handle, time_elapsed)
+		if fn() or (timeout and socket.gettime() > (start + timeout)) then
+			timer.cancel(handle)
+			local ok, err = coroutine.resume(co)
+			if not ok then
+				print(err)
+			end
+		end
+	end)
+	coroutine.yield()
 end
 
 return setmetatable(M, {

test/cowait.script

@@ -1,5 +0,0 @@
-local cowait = require "test.cowait"
-
-function update(self, dt)
-	cowait.update()
-end

test/data/background.collection

@@ -0,0 +1,22 @@
+name: "default"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

test/data/child.collection

@@ -0,0 +1,22 @@
+name: "child"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

test/data/focus1.collection

@@ -1,10 +1,10 @@
-name: "menu"
+name: "focus1"
 scale_along_z: 0
 embedded_instances {
   id: "go"
   data: "components {\n"
-  "  id: \"menu\"\n"
-  "  component: \"/example/menu.gui\"\n"
+  "  id: \"focus1\"\n"
+  "  component: \"/test/data/focus1.gui\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"

test/data/focus1.gui

@@ -0,0 +1,131 @@
+script: "/test/data/focus1.gui_script"
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 568.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "box"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "1"
+  font: "example"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "box"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

test/data/focus1.gui_script

@@ -0,0 +1,9 @@
+local monarch = require "monarch.monarch"
+
+function on_message(self, message_id, message, sender)
+	if message_id == monarch.FOCUS.GAINED then
+		_G.focus1_gained = true
+	elseif message_id == monarch.FOCUS.LOST then
+		_G.focus1_lost = true
+	end
+end

test/data/popup1.collection

@@ -0,0 +1,37 @@
+name: "popup1"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"popup1\"\n"
+  "  component: \"/test/data/popup1.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

test/data/popup1.gui

@@ -0,0 +1,131 @@
+script: ""
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 568.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "box"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "POPUP 1"
+  font: "example"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "box"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

test/data/popup2.collection

@@ -0,0 +1,37 @@
+name: "popup2"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"popup2\"\n"
+  "  component: \"/test/data/popup2.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

test/data/popup2.gui

@@ -0,0 +1,131 @@
+script: ""
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 568.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "box"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "POPUP 2"
+  font: "example"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "box"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

test/data/screen1.gui

@@ -96,7 +96,7 @@ nodes {
   }
   type: TYPE_TEXT
   blend_mode: BLEND_MODE_ALPHA
-  text: "1"
+  text: "FOCUS 1"
   font: "example"
   id: "text"
   xanchor: XANCHOR_NONE

test/data/screen1.gui_script

@@ -1,5 +1,11 @@
+local monarch
+
 function init(self)
-	print("init - screen1")
+	monarch = require "monarch.monarch"
+	print("init - screen1", msg.url())
+	monarch.on_post("screen1", function(message_id, message, sender)
+		_G.screen1_on_post = message or true
+	end)
 end
 
 function final(self)
@@ -7,6 +13,8 @@ function final(self)
 end
 
 function on_message(self, message_id, message, sender)
-	-- Add message-handling code here
-	-- Remove this function if not needed
+	monarch.on_message(message_id, message, sender)
+	if message_id == hash("foobar") then
+		_G.screen1_on_message = message or true
+	end
 end

test/data/screen2.collection

@@ -35,3 +35,66 @@ embedded_instances {
     z: 1.0
   }
 }
+embedded_instances {
+  id: "child"
+  data: "components {\n"
+  "  id: \"screen_proxy\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"child\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionproxy\"\n"
+  "  type: \"collectionproxy\"\n"
+  "  data: \"collection: \\\"/test/data/child.collection\\\"\\n"
+  "exclude: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

test/data/screen2.gui_script

@@ -1,5 +1,11 @@
+local monarch
+
 function init(self)
-	print("init - screen2")
+	monarch = require "monarch.monarch"
+	print("init - screen2", msg.url())
+	monarch.on_post("screen2", function(message_id, message, sender)
+		_G.screen2_on_post = message or true
+	end)
 end
 
 function final(self)
@@ -7,6 +13,8 @@ function final(self)
 end
 
 function on_message(self, message_id, message, sender)
-	-- Add message-handling code here
-	-- Remove this function if not needed
+	monarch.on_message(message_id, message, sender)
+	if message_id == hash("foobar") then
+		_G.screen2_on_message = message or true
+	end
 end

test/data/screen_preload.collection

@@ -0,0 +1,37 @@
+name: "screen_preload"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"screen_preload\"\n"
+  "  component: \"/test/data/screen_preload.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

test/data/screen_preload.gui

@@ -0,0 +1,131 @@
+script: "/test/data/screen_preload.gui_script"
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 697.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "box"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "PRELOAD"
+  font: "example"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "box"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

test/data/screen_preload.gui_script

@@ -0,0 +1,5 @@
+function init(self)
+	local monarch = require "monarch.monarch"
+	local data = monarch.data(hash("screen_preload"))
+	if data then data.count = data.count + 1 end
+end

test/data/screens.collection

@@ -4,7 +4,7 @@ embedded_instances {
   id: "screen1"
   data: "components {\n"
   "  id: \"screen\"\n"
-  "  component: \"/monarch/screen.script\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"
@@ -21,6 +21,13 @@ embedded_instances {
   "    value: \"screen1\"\n"
   "    type: PROPERTY_TYPE_HASH\n"
   "  }\n"
+  "  properties {\n"
+  "    id: \"receiver_url\"\n"
+  "    value: \"screen1:/go\"\n"
+  "    type: PROPERTY_TYPE_URL\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
   "}\n"
   "embedded_components {\n"
   "  id: \"collectionproxy\"\n"
@@ -62,7 +69,7 @@ embedded_instances {
   id: "screen2"
   data: "components {\n"
   "  id: \"screen\"\n"
-  "  component: \"/monarch/screen.script\"\n"
+  "  component: \"/monarch/screen_factory.script\"\n"
   "  position {\n"
   "    x: 0.0\n"
   "    y: 0.0\n"
@@ -79,11 +86,446 @@ embedded_instances {
   "    value: \"screen2\"\n"
   "    type: PROPERTY_TYPE_HASH\n"
   "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionfactory\"\n"
+  "  type: \"collectionfactory\"\n"
+  "  data: \"prototype: \\\"/test/data/screen2.collection\\\"\\n"
+  "load_dynamically: false\\n"
+  "dynamic_prototype: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "popup1"
+  data: "components {\n"
+  "  id: \"screen\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"popup1\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
   "}\n"
   "embedded_components {\n"
   "  id: \"collectionproxy\"\n"
   "  type: \"collectionproxy\"\n"
-  "  data: \"collection: \\\"/test/data/screen2.collection\\\"\\n"
+  "  data: \"collection: \\\"/test/data/popup1.collection\\\"\\n"
+  "exclude: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "popup2"
+  data: "components {\n"
+  "  id: \"screen\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"popup2\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"popup_on_popup\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionproxy\"\n"
+  "  type: \"collectionproxy\"\n"
+  "  data: \"collection: \\\"/test/data/popup2.collection\\\"\\n"
+  "exclude: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "transition1"
+  data: "components {\n"
+  "  id: \"screen\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"transition1\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"transition_url\"\n"
+  "    value: \"transition1:/go\"\n"
+  "    type: PROPERTY_TYPE_URL\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionproxy\"\n"
+  "  type: \"collectionproxy\"\n"
+  "  data: \"collection: \\\"/test/data/transition1.collection\\\"\\n"
+  "exclude: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "listener1"
+  data: ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "listener2"
+  data: ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "background"
+  data: "components {\n"
+  "  id: \"screen_factory\"\n"
+  "  component: \"/monarch/screen_factory.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"background\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionfactory\"\n"
+  "  type: \"collectionfactory\"\n"
+  "  data: \"prototype: \\\"/test/data/background.collection\\\"\\n"
+  "load_dynamically: false\\n"
+  "dynamic_prototype: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "screen_preload"
+  data: "components {\n"
+  "  id: \"screen\"\n"
+  "  component: \"/monarch/screen_factory.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"screen_preload\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"preload\"\n"
+  "    value: \"true\"\n"
+  "    type: PROPERTY_TYPE_BOOLEAN\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionfactory\"\n"
+  "  type: \"collectionfactory\"\n"
+  "  data: \"prototype: \\\"/test/data/screen_preload.collection\\\"\\n"
+  "load_dynamically: false\\n"
+  "dynamic_prototype: false\\n"
+  "\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}
+embedded_instances {
+  id: "focus1"
+  data: "components {\n"
+  "  id: \"screen_proxy\"\n"
+  "  component: \"/monarch/screen_proxy.script\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"screen_id\"\n"
+  "    value: \"focus1\"\n"
+  "    type: PROPERTY_TYPE_HASH\n"
+  "  }\n"
+  "  properties {\n"
+  "    id: \"focus_url\"\n"
+  "    value: \"focus1:/go#focus1\"\n"
+  "    type: PROPERTY_TYPE_URL\n"
+  "  }\n"
+  "  property_decls {\n"
+  "  }\n"
+  "}\n"
+  "embedded_components {\n"
+  "  id: \"collectionproxy\"\n"
+  "  type: \"collectionproxy\"\n"
+  "  data: \"collection: \\\"/test/data/focus1.collection\\\"\\n"
   "exclude: false\\n"
   "\"\n"
   "  position {\n"

test/data/transition1.collection

@@ -0,0 +1,37 @@
+name: "transition1"
+scale_along_z: 0
+embedded_instances {
+  id: "go"
+  data: "components {\n"
+  "  id: \"transition1\"\n"
+  "  component: \"/test/data/transition1.gui\"\n"
+  "  position {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "  }\n"
+  "  rotation {\n"
+  "    x: 0.0\n"
+  "    y: 0.0\n"
+  "    z: 0.0\n"
+  "    w: 1.0\n"
+  "  }\n"
+  "}\n"
+  ""
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale3 {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+  }
+}

test/data/transition1.gui

@@ -0,0 +1,131 @@
+script: "/test/data/transition1.gui_script"
+fonts {
+  name: "example"
+  font: "/assets/example.font"
+}
+background_color {
+  x: 0.0
+  y: 0.0
+  z: 0.0
+  w: 0.0
+}
+nodes {
+  position {
+    x: 320.0
+    y: 697.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  type: TYPE_BOX
+  blend_mode: BLEND_MODE_ALPHA
+  texture: ""
+  id: "root"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  adjust_mode: ADJUST_MODE_FIT
+  layer: ""
+  inherit_alpha: true
+  slice9 {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 0.0
+  }
+  clipping_mode: CLIPPING_MODE_NONE
+  clipping_visible: true
+  clipping_inverted: false
+  alpha: 1.0
+  template_node_child: false
+  size_mode: SIZE_MODE_AUTO
+}
+nodes {
+  position {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  rotation {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  scale {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  size {
+    x: 200.0
+    y: 100.0
+    z: 0.0
+    w: 1.0
+  }
+  color {
+    x: 0.0
+    y: 0.0
+    z: 0.0
+    w: 1.0
+  }
+  type: TYPE_TEXT
+  blend_mode: BLEND_MODE_ALPHA
+  text: "transition 1"
+  font: "example"
+  id: "text"
+  xanchor: XANCHOR_NONE
+  yanchor: YANCHOR_NONE
+  pivot: PIVOT_CENTER
+  outline {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  shadow {
+    x: 1.0
+    y: 1.0
+    z: 1.0
+    w: 1.0
+  }
+  adjust_mode: ADJUST_MODE_FIT
+  line_break: false
+  parent: "root"
+  layer: ""
+  inherit_alpha: true
+  alpha: 1.0
+  outline_alpha: 1.0
+  shadow_alpha: 1.0
+  template_node_child: false
+  text_leading: 1.0
+  text_tracking: 0.0
+}
+material: "/builtins/materials/gui.material"
+adjust_reference: ADJUST_REFERENCE_PARENT
+max_nodes: 512

test/data/transition1.gui_script

@@ -0,0 +1,10 @@
+local transitions = require "monarch.transitions.gui"
+
+function init(self)
+	self.transition = transitions.in_right_out_left(gui.get_node("root"), 1)
+end
+
+function on_message(self, message_id, message, sender)
+	print(message_id)
+	self.transition.handle(message_id, message, sender)
+end

test/msg.lua

@@ -0,0 +1,80 @@
+local mock = require "deftest.mock.mock"
+
+
+local M = {}
+
+
+local recipients = {}
+
+local history = {}
+
+local function url_to_key(url)
+	if type(url) == "string" then
+		url = msg.url(url)
+	end
+	local ok, err = pcall(function() return url.socket end)
+	if not ok then
+		return url
+	end
+	if url.socket then
+		return hash_to_hex(url.socket or hash("")) ..  hash_to_hex(url.path or hash("")) ..  hash_to_hex(url.fragment or hash(""))
+	else
+		return url
+	end
+end
+
+local function get_recipient(url)
+	local key = url_to_key(url)
+	recipients[key] = recipients[key] or {}
+	return recipients[key]
+end
+
+local function post(url, message_id, message)
+	local data = { url = url, message_id = message_id, message = message }
+	history[#history + 1] = data
+	local recipient = get_recipient(url)
+	recipient[#recipient + 1] = data
+	msg.post.original(url, message_id, message or {})
+end
+
+function M.mock()
+	recipients = {}
+	history = {}
+	mock.mock(msg)
+	msg.post.replace(post)
+end
+
+function M.unmock()
+	mock.unmock(msg)
+end
+
+
+
+function M.messages(url)
+	return url and get_recipient(url) or history
+end
+
+function M.first(url)
+	local messages = url and get_recipient(url) or history
+	return messages[1]
+end
+
+function M.last(url)
+	local messages = url and get_recipient(url) or history
+	return messages[#messages]
+end
+
+function M.filter(url, fn)
+	local t = {}
+	local messages = M.messages(url)
+	for i=1,#messages do
+		local message = messages[i]
+		if fn(message) then
+			t[#t + 1] = message
+		end
+	end
+	return t
+end
+
+
+return M

test/test.collection

@@ -16,20 +16,7 @@ embedded_instances {
   "    z: 0.0\n"
   "    w: 1.0\n"
   "  }\n"
-  "}\n"
-  "components {\n"
-  "  id: \"cowait\"\n"
-  "  component: \"/test/cowait.script\"\n"
-  "  position {\n"
-  "    x: 0.0\n"
-  "    y: 0.0\n"
-  "    z: 0.0\n"
-  "  }\n"
-  "  rotation {\n"
-  "    x: 0.0\n"
-  "    y: 0.0\n"
-  "    z: 0.0\n"
-  "    w: 1.0\n"
+  "  property_decls {\n"
   "  }\n"
   "}\n"
   "embedded_components {\n"
@@ -37,6 +24,7 @@ embedded_instances {
   "  type: \"collectionfactory\"\n"
   "  data: \"prototype: \\\"/test/data/screens.collection\\\"\\n"
   "load_dynamically: false\\n"
+  "dynamic_prototype: false\\n"
   "\"\n"
   "  position {\n"
   "    x: 0.0\n"

test/test.script

@@ -1,9 +1,16 @@
 local deftest = require "deftest.deftest"
 
 local test_monarch = require "test.test_monarch"
+local test_callback_tracker = require "test.test_callback_tracker"
+local test_transitions = require "test.test_transitions"
 
 
 function init(self)
 	deftest.add(test_monarch)
-	deftest.run()
+	deftest.add(test_callback_tracker)
+	deftest.add(test_transitions)
+	deftest.run({ 
+		coverage = { enabled = true },
+		pattern = "",
+	})
 end

test/test_callback_tracker.lua

@@ -0,0 +1,69 @@
+local unload = require "deftest.util.unload"
+local cowat = require "test.cowait"
+local callback_tracker = require "monarch.utils.callback_tracker"
+
+return function()
+
+	describe("callback tracker", function()
+		before(function()
+			callback_tracker = require "monarch.utils.callback_tracker"
+		end)
+
+		after(function()
+			unload.unload("monarch%..*")
+		end)
+
+
+		it("should be able to tell when all callbacks are done", function()
+			local tracker = callback_tracker.create()
+			local t1 = tracker.track()
+			local t2 = tracker.track()
+
+			local done = false
+			tracker.when_done(function() done = true end)
+			
+			assert(not done, "It should not be done yet - No callback has completed")
+			t1()
+			assert(not done, "It should not be done yet - Only one callback has completed")
+			t2()
+			assert(done, "It should be done now - All callbacks have completed")
+		end)
+
+		it("should indicate if a tracked callback has been invoked more than once", function()
+			local tracker = callback_tracker.create()
+			local t = tracker.track()
+			local ok, err = t()
+			assert(ok == true and err == nil, "It should return true when successful")
+			ok, err = t()
+			assert(ok == false and err, "It should return false and a message when invoked multiple times")
+		end)
+
+		it("should not be possible to track the same callback more than one time", function()
+			local tracker = callback_tracker.create()
+			local t1 = tracker.track()
+			local t2 = tracker.track()
+
+			local done = false
+			tracker.when_done(function() done = true end)
+
+			assert(not done, "It should not be done yet - No callback has completed")
+			t1()
+			t1()
+			assert(not done, "It should not be done yet - Even if one callback has been invoked twice")
+			t2()
+			assert(done, "It should be done now - All callbacks have completed")
+		end)
+
+		it("should handle when callbacks are done before calling when_done()", function()
+			local tracker = callback_tracker.create()
+			local t1 = tracker.track()
+			local t2 = tracker.track()
+			t1()
+			t2()
+
+			local done = false
+			tracker.when_done(function() done = true end)
+			assert(done, "It should be done now - All callbacks have completed")
+		end)
+	end)
+end