Added Timestep below Popup

Fixes #25

README.md

@@ -26,6 +26,7 @@ Monarch screens are created in individual collections and loaded through collect
 * **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.
+* **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.
 * **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)).
 
@@ -162,6 +163,8 @@ The predefined transitions provided by ```monarch.transitions.gui``` are:
 * ```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:
 
@@ -169,6 +172,7 @@ Additionally there's functionality to create a full set of transitions for commo
 * ```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.

example/example.collection

@@ -22,6 +22,11 @@ embedded_instances {
   "    type: PROPERTY_TYPE_HASH\n"
   "  }\n"
   "  properties {\n"
+  "    id: \"timestep_below_popup\"\n"
+  "    value: \"0.0\"\n"
+  "    type: PROPERTY_TYPE_NUMBER\n"
+  "  }\n"
+  "  properties {\n"
   "    id: \"transition_url\"\n"
   "    value: \"menu:/go#menu\"\n"
   "    type: PROPERTY_TYPE_URL\n"
@@ -271,6 +276,11 @@ embedded_instances {
   "    type: PROPERTY_TYPE_BOOLEAN\n"
   "  }\n"
   "  properties {\n"
+  "    id: \"timestep_below_popup\"\n"
+  "    value: \"0.0\"\n"
+  "    type: PROPERTY_TYPE_NUMBER\n"
+  "  }\n"
+  "  properties {\n"
   "    id: \"transition_url\"\n"
   "    value: \"popup:/go#popup\"\n"
   "    type: PROPERTY_TYPE_URL\n"

example/menu.gui

@@ -480,6 +480,61 @@ nodes {
   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: ""
+  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
+}
 material: "/builtins/materials/gui.material"
 layouts {
   name: "Landscape"

example/menu.gui_script

@@ -6,7 +6,9 @@ function init(self)
 
 	gui.set_text(gui.get_node("timestamp"), os.date())
 
-	self.transition = transitions.in_right_out_left(gui.get_node("root"), 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)
+
+	self.transition = transitions.fade_in_out(gui.get_node("root"), 0.6, 0)
 end
 
 function on_input(self, action_id, action)

example/popup.gui

@@ -417,6 +417,61 @@ 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: ""
+  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
+}
 material: "/builtins/materials/gui.material"
 adjust_reference: ADJUST_REFERENCE_PARENT
 max_nodes: 512

example/popup.gui_script

@@ -8,6 +8,8 @@ function init(self)
 	self.about = gui.get_node("about_button")
 	gui.set_render_order(14)
 
+	gui.animate(gui.get_node("spinner"), gui.PROP_ROTATION, vmath.vector3(0, 0, -360), gui.EASING_INOUTQUAD, 2, 0, nil, gui.PLAYBACK_LOOP_FORWARD)
+	
 	self.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)

monarch/monarch.lua

@@ -127,6 +127,7 @@ end
 --		  screen transitions
 -- 		* focus_url - URL to a script that is to be notified of focus
 --		  lost/gained events
+--		* timestep_below_popup - Timestep to set on proxy when below a popup
 function M.register(id, proxy, settings)
 	assert(id, "You must provide a screen id")
 	id = tohash(id)
@@ -141,6 +142,7 @@ function M.register(id, proxy, settings)
 		popup_on_popup = settings and settings.popup_on_popup,
 		transition_url = settings and settings.transition_url,
 		focus_url = settings and settings.focus_url,
+		timestep_below_popup = settings and settings.timestep_below_popup or 1,
 	}
 end
 
@@ -219,6 +221,18 @@ local function focus_lost(screen, next_screen)
 	end
 end
 
+local function change_timestep(screen)
+	screen.changed_timestep = true
+	msg.post(screen.proxy, "set_time_step", { mode = 0, factor = screen.timestep_below_popup })
+end
+
+local function reset_timestep(screen)
+	if screen.changed_timestep then
+		msg.post(screen.proxy, "set_time_step", { mode = 0, factor = 1 })
+		screen.changed_timestep = false
+	end
+end
+
 local function disable(screen, next_screen)
 	log("disable()", screen.id)
 	local co
@@ -227,6 +241,11 @@ local function disable(screen, next_screen)
 		change_context(screen)
 		release_input(screen)
 		focus_lost(screen, next_screen)
+		if next_screen and next_screen.popup then
+			change_timestep(screen)
+		else
+			reset_timestep(screen)
+		end
 		screen.co = nil
 		if cb then cb() end
 	end)
@@ -241,6 +260,7 @@ local function enable(screen, previous_screen)
 		change_context(screen)
 		acquire_input(screen)
 		focus_gained(screen, previous_screen)
+		reset_timestep(screen)
 		screen.co = nil
 		if cb then cb() end
 	end)
@@ -257,13 +277,16 @@ local function show_out(screen, next_screen, cb)
 		change_context(screen)
 		release_input(screen)
 		focus_lost(screen, next_screen)
+		reset_timestep(screen)
 		-- if the next screen is a popup we want the current screen to stay visible below the popup
 		-- if the next screen isn't a popup the current one should be unloaded and transitioned out
-		local next_is_popup = next_screen and not next_screen.popup
+		local next_is_popup = next_screen and next_screen.popup
 		local current_is_popup = screen.popup
-		if (next_is_popup and not current_is_popup) or (current_is_popup) then
+		if (not next_is_popup and not current_is_popup) or (current_is_popup) then
 			transition(screen, M.TRANSITION.SHOW_OUT, { next_screen = next_screen.id })
 			unload(screen)
+		elseif next_is_popup then
+			change_timestep(screen)
 		end
 		screen.co = nil
 		active_transition_count = active_transition_count - 1
@@ -299,6 +322,7 @@ local function show_in(screen, previous_screen, reload, cb)
 			async_load(screen)
 		end
 		stack[#stack + 1] = screen
+		reset_timestep(screen)
 		transition(screen, M.TRANSITION.SHOW_IN, { previous_screen = previous_screen and previous_screen.id })
 		acquire_input(screen)
 		focus_gained(screen, previous_screen)
@@ -327,6 +351,7 @@ local function back_in(screen, previous_screen, cb)
 			log("back_in() loading screen", screen.id)
 			async_load(screen)
 		end
+		reset_timestep(screen)
 		if previous_screen and not previous_screen.popup then
 			transition(screen, M.TRANSITION.BACK_IN, { previous_screen = previous_screen.id })
 		end
@@ -350,6 +375,9 @@ local function back_out(screen, next_screen, cb)
 		change_context(screen)
 		release_input(screen)
 		focus_lost(screen, next_screen)
+		if next_screen and screen.popup then
+			reset_timestep(next_screen)
+		end
 		transition(screen, M.TRANSITION.BACK_OUT, { next_screen = next_screen and next_screen.id })
 		unload(screen)
 		screen.co = nil

monarch/screen.script

@@ -4,6 +4,7 @@ go.property("screen_proxy", msg.url("#collectionproxy"))
 go.property("screen_id", hash(""))
 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())
 
@@ -18,7 +19,8 @@ function init(self)
 			popup = self.popup,
 			popup_on_popup = self.popup_on_popup,
 			transition_url = self.transition_url,
-			focus_url = self.focus_url
+			focus_url = self.focus_url,
+			timestep_below_popup = self.timestep_below_popup,
 		}
 	)
 end

monarch/transitions/gui.lua

@@ -88,6 +88,22 @@ function M.scale_out(node, from, easing, duration, delay, cb)
 	gui.animate(node, gui.PROP_SCALE, ZERO_SCALE, easing, duration, delay, cb)
 end
 
+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 for a node
 -- @return Transition instance
 function M.create(node)
@@ -255,4 +271,16 @@ function M.in_left_out_left(node, duration, delay, easing)
 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