3
0
mirror of https://github.com/britzl/monarch.git synced 2025-06-27 02:17:53 +02:00

Handle layout change and window resize for transitions

This commit is contained in:
Björn Ritzl 2018-03-19 22:56:12 +01:00
parent a25e6d1ba5
commit a4cef48239
5 changed files with 300 additions and 11 deletions

View File

@ -166,6 +166,21 @@ You can create and use your own transition as long as the provided transition fu
* ```delay``` (number) - Transition delay in seconds. * ```delay``` (number) - Transition delay in seconds.
* ```cb``` (function) - This function must be called when the transition is completed. * ```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:
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
self.transition.window_resized(message.width, message.height)
end
end
## Screen focus gain/loss ## 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 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:

View File

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

View File

@ -481,5 +481,243 @@ nodes {
text_tracking: 0.0 text_tracking: 0.0
} }
material: "/builtins/materials/gui.material" 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: ""
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: ""
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: ""
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: ""
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 adjust_reference: ADJUST_REFERENCE_PARENT
max_nodes: 512 max_nodes: 512

View File

@ -4,7 +4,7 @@ version = 0.9
dependencies = https://github.com/britzl/deftest/archive/1.2.1.zip dependencies = https://github.com/britzl/deftest/archive/1.2.1.zip
[bootstrap] [bootstrap]
main_collection = /test/test.collectionc main_collection = /example/example.collectionc
[input] [input]
game_binding = /input/game.input_bindingc game_binding = /input/game.input_bindingc
@ -12,6 +12,8 @@ game_binding = /input/game.input_bindingc
[display] [display]
width = 640 width = 640
height = 1136 height = 1136
dynamic_orientation = 1
display_profiles = /example/example.display_profilesc
[script] [script]
shared_state = 1 shared_state = 1

View File

@ -2,16 +2,32 @@ local monarch = require "monarch.monarch"
local M = {} local M = {}
local WIDTH = tonumber(sys.get_config("display.width")) local WIDTH = nil
local HEIGHT = tonumber(sys.get_config("display.height")) local HEIGHT = nil
local LEFT = nil
local LEFT = vmath.vector3(-WIDTH * 2, 0, 0) local RIGHT = nil
local RIGHT = vmath.vector3(WIDTH * 2, 0, 0) local TOP = nil
local TOP = vmath.vector3(0, HEIGHT * 2, 0) local BOTTOM = nil
local BOTTOM = vmath.vector3(0, - HEIGHT * 2, 0)
local ZERO_SCALE = vmath.vector3(0, 0, 1) local ZERO_SCALE = vmath.vector3(0, 0, 1)
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 * 2, 0, 0)
RIGHT = vmath.vector3(WIDTH * 2, 0, 0)
TOP = vmath.vector3(0, HEIGHT * 2, 0)
BOTTOM = vmath.vector3(0, - HEIGHT * 2, 0)
end
M.window_resized(tonumber(sys.get_config("display.width")), tonumber(sys.get_config("display.height")))
function M.instant(node, to, easing, duration, delay, cb) function M.instant(node, to, easing, duration, delay, cb)
cb() cb()
end end
@ -111,9 +127,13 @@ function M.create(node)
-- Forward on_message calls here -- Forward on_message calls here
function instance.handle(message_id, message, sender) function instance.handle(message_id, message, sender)
local transition = transitions[message_id] if message_id == LAYOUT_CHANGED then
if transition then initial_data.pos = gui.get_position(node)
start_transition(transition, sender) else
local transition = transitions[message_id]
if transition then
start_transition(transition, sender)
end
end end
end end