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:
parent
a25e6d1ba5
commit
a4cef48239
15
README.md
15
README.md
@ -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:
|
||||||
|
14
example/example.display_profiles
Normal file
14
example/example.display_profiles
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
profiles {
|
||||||
|
name: "Landscape"
|
||||||
|
qualifiers {
|
||||||
|
width: 1136
|
||||||
|
height: 640
|
||||||
|
}
|
||||||
|
}
|
||||||
|
profiles {
|
||||||
|
name: "Portrait"
|
||||||
|
qualifiers {
|
||||||
|
width: 640
|
||||||
|
height: 1136
|
||||||
|
}
|
||||||
|
}
|
238
example/menu.gui
238
example/menu.gui
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user