From 9cdf4817e8ab773fd75db919f3ea0bffd31e8db9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Ritzl?= Date: Thu, 28 Dec 2017 00:02:10 +0100 Subject: [PATCH] Added popup_on_popup flag to screens --- README.md | 29 ++- example/confirm.collection | 37 ++++ example/confirm.gui | 367 +++++++++++++++++++++++++++++++++++++ example/confirm.gui_script | 35 ++++ example/example.collection | 73 ++++++++ example/popup.gui_script | 11 +- game.project | 3 + monarch/monarch.lua | 75 ++++++-- monarch/screen.script | 13 +- 9 files changed, 615 insertions(+), 28 deletions(-) create mode 100644 example/confirm.collection create mode 100644 example/confirm.gui create mode 100644 example/confirm.gui_script diff --git a/README.md b/README.md index b75e319..16f54de 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,7 @@ Monarch screens are created in individual collections and loaded through collect * **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). +* **Popup on Popup (boolean)** - Check this if the screen is a [popup](#popups) and it can be shown on top of other 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)). @@ -76,14 +77,36 @@ You navigate back in the screen hierarchy in one of two ways: 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. ## Popups -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. 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]``` -* A call to ```monarch.show(D)``` +* 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 show 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]``` + + ## 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: diff --git a/example/confirm.collection b/example/confirm.collection new file mode 100644 index 0000000..68a8307 --- /dev/null +++ b/example/confirm.collection @@ -0,0 +1,37 @@ +name: "confirm" +scale_along_z: 0 +embedded_instances { + id: "go" + data: "components {\n" + " id: \"confirm\"\n" + " component: \"/example/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 + } +} diff --git a/example/confirm.gui b/example/confirm.gui new file mode 100644 index 0000000..388c0fa --- /dev/null +++ b/example/confirm.gui @@ -0,0 +1,367 @@ +script: "/example/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: "" + 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: "" + 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: "" + 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: "" + 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: "" + 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 +} +material: "/builtins/materials/gui.material" +adjust_reference: ADJUST_REFERENCE_PARENT +max_nodes: 512 diff --git a/example/confirm.gui_script b/example/confirm.gui_script new file mode 100644 index 0000000..78e3e54 --- /dev/null +++ b/example/confirm.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") + self.yes = gui.get_node("yes_button") + self.no = gui.get_node("no_button") + gui.set_render_order(15) + + 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) + .back_in(transitions.scale_in, gui.EASING_OUTBACK, 0.3, 0) + .back_out(transitions.scale_out, gui.EASING_INBACK, 0.3, 0) +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") + monarch.show(monarch.data(hash("confirm")).next, nil, nil, function() + print("next screen show done") + end) + elseif gui.pick_node(self.no, action.x, action.y) then + print("no") + monarch.back(function() + print("back from popup done") + end) + end + end +end + +function on_message(self, message_id, message, sender) + self.transition.handle(message_id, message, sender) +end diff --git a/example/example.collection b/example/example.collection index 3044edd..88296c7 100644 --- a/example/example.collection +++ b/example/example.collection @@ -380,3 +380,76 @@ embedded_instances { z: 1.0 } } +embedded_instances { + id: "confirm" + 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: \"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: \"transition_url\"\n" + " value: \"confirm:/go#confirm\"\n" + " type: PROPERTY_TYPE_URL\n" + " }\n" + "}\n" + "embedded_components {\n" + " id: \"collectionproxy\"\n" + " type: \"collectionproxy\"\n" + " data: \"collection: \\\"/example/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 + } +} diff --git a/example/popup.gui_script b/example/popup.gui_script index 592f546..735b3fb 100644 --- a/example/popup.gui_script +++ b/example/popup.gui_script @@ -5,7 +5,8 @@ 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")) .show_in(transitions.scale_in, gui.EASING_OUTBACK, 0.3, 0) @@ -18,17 +19,17 @@ 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() 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 diff --git a/game.project b/game.project index 05d43ac..b05c6b4 100644 --- a/game.project +++ b/game.project @@ -25,3 +25,6 @@ bundle_identifier = com.example.todo [library] include_dirs = monarch +[physics] +world_count = 5 + diff --git a/monarch/monarch.lua b/monarch/monarch.lua index c59480a..aa1b2ee 100644 --- a/monarch/monarch.lua +++ b/monarch/monarch.lua @@ -80,12 +80,15 @@ end -- release input focus of the game object where the proxy is attached. -- @param id Unique id of the screen -- @param proxy URL to the collection proxy containing the screen --- @param popup true the screen is a popup --- @param transition_url Optional URL to a script that is --- responsible for the screen transitions --- @param focus_url Optional URL to a script that is to be notified of --- focus lost/gained events -function M.register(id, proxy, popup, transition_url, focus_url) +-- @param settings Settings table for screen. Accepted values: +-- * popup - true the screen is a popup +-- * popup_on_popup - true if this popup can be shown on top of +-- another popup or false if an underlying popup should be closed +-- * transition_url - URL to a script that is responsible for the +-- screen transitions +-- * focus_url - URL to a script that is to be notified of focus +-- lost/gained events +function M.register(id, proxy, settings) assert(not screens[id], ("There is already a screen registered with id %s"):format(tostring(id))) assert(proxy, "You must provide a collection proxy URL") local url = msg.url(proxy) @@ -93,9 +96,10 @@ function M.register(id, proxy, popup, transition_url, focus_url) id = id, proxy = proxy, script = msg.url(), - popup = popup, - transition_url = transition_url, - focus_url = focus_url, + popup = settings and settings.popup, + popup_on_popup = settings and settings.popup_on_popup, + transition_url = settings and settings.transition_url, + focus_url = settings and settings.focus_url, } end @@ -172,6 +176,34 @@ local function focus_lost(screen, next_screen) end end +local function disable(screen, next_screen) + log("disable()", screen.id) + local co + co = coroutine.create(function() + screen.co = co + change_context(screen) + release_input(screen) + focus_lost(screen, next_screen) + screen.co = nil + if cb then cb() end + end) + coroutine.resume(co) +end + +local function enable(screen, previous_screen) + log("enable()", screen.id) + local co + co = coroutine.create(function() + screen.co = co + change_context(screen) + acquire_input(screen) + focus_gained(screen, previous_screen) + screen.co = nil + if cb then cb() end + end) + coroutine.resume(co) +end + local function show_out(screen, next_screen, cb) log("show_out()", screen.id) local co @@ -295,16 +327,21 @@ function M.show(id, options, data, cb) -- transition out local top = stack[#stack] if top then - -- if top is popup then close it - if top.popup then - stack[#stack] = nil - show_out(top, screen) - top = stack[#stack] - end - -- unload and transition out from top - -- unless we're showing the same screen as is already visible - if top and top.id ~= screen.id then - show_out(top, screen) + -- keep top popup visible if new screen can be shown on top of a popup + if top.popup and screen.popup_on_popup then + disable(top, screen) + else + -- close all popups + while top.popup do + stack[#stack] = nil + show_out(top, screen) + top = stack[#stack] + end + -- unload and transition out from top + -- unless we're showing the same screen as is already visible + if top and top.id ~= screen.id then + show_out(top, screen) + end end end diff --git a/monarch/screen.script b/monarch/screen.script index 1d61ad3..8387d6b 100644 --- a/monarch/screen.script +++ b/monarch/screen.script @@ -3,13 +3,24 @@ local monarch go.property("screen_proxy", msg.url("#collectionproxy")) go.property("screen_id", hash("")) go.property("popup", false) +go.property("popup_on_popup", false) go.property("transition_url", msg.url()) go.property("focus_url", msg.url()) function init(self) monarch = require "monarch.monarch" - monarch.register(self.screen_id, self.screen_proxy, self.popup, self.transition_url, self.focus_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") + monarch.register( + self.screen_id, + self.screen_proxy, + { + popup = self.popup, + popup_on_popup = self.popup_on_popup, + transition_url = self.transition_url, + focus_url = self.focus_url + } + ) end function final(self)