Skip to content

Commit d1cf828

Browse files
britzlbritzl
committed
Added helpers for common sets of transitions
1 parent 091fab0 commit d1cf828

11 files changed

+367
-18
lines changed

‎README.md

+28-2
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,10 @@ You can add optional transitions when navigating between screens. The default be
122122
* ```transition_back_in``` (constant defined as ```monarch.TRANSITION.BACK_IN```)
123123
* ```transition_back_out``` (constant defined as ```monarch.TRANSITION.BACK_OUT```)
124124

125-
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. Monarch comes with a system for setting up transitions easily in a gui_script. Example:
125+
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.
126126

127+
128+
### Predefined transitions
127129
Monarch comes with a system for setting up transitions easily in a gui_script using the ```monarch.transitions.gui``` module. Example:
128130

129131
local transitions = require "monarch.transitions.gui"
@@ -148,7 +150,6 @@ Monarch comes with a system for setting up transitions easily in a gui_script us
148150
end
149151
end
150152

151-
### Predefined transitions
152153
The predefined transitions provided by ```monarch.transitions.gui``` are:
153154

154155
* ```slide_in_right```
@@ -162,6 +163,23 @@ The predefined transitions provided by ```monarch.transitions.gui``` are:
162163
* ```scale_in```
163164
* ```scale_out```
164165

166+
Additionally there's functionality to create a full set of transitions for common transition styles:
167+
168+
* ```transitions.in_right_out_left(node, duration, [delay], [easing])```
169+
* ```transitions.in_left_out_right(node, duration, [delay], [easing])```
170+
* ```transitions.in_left_out_left(node, duration, [delay], [easing])```
171+
* ```transitions.in_right_out_right(node, duration, [delay], [easing])```
172+
173+
**PARAMETERS**
174+
* ```node``` (node) - Gui node to animate.
175+
* ```duration``` (number) - Transition duration in seconds.
176+
* ```delay``` (number) - Transition delay in seconds.
177+
* ```easing``` (table) - Easing table, created from a function provided by ```monarch.transitions.easings```
178+
179+
**RETURN**
180+
* ```instance``` - The created transition instance
181+
182+
165183
### Custom transitions
166184
You can create and use your own transition as long as the provided transition function has the following function signature:
167185

@@ -175,6 +193,7 @@ You can create and use your own transition as long as the provided transition fu
175193
* ```delay``` (number) - Transition delay in seconds.
176194
* ```cb``` (function) - This function must be called when the transition is completed.
177195

196+
178197
### Dynamic orientation and resized windows
179198
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:
180199

@@ -308,5 +327,12 @@ Check if a Monarch screen exists.
308327
* ```exists``` (boolean) - True if the screen exists.
309328

310329

330+
### monarch.is_busy()
331+
Check if Monarch is busy showing and/or hiding a screen.
332+
333+
**RETURN**
334+
* ```busy``` (boolean) - True if busy hiding and/or showing a screen.
335+
336+
311337
### monarch.debug()
312338
Enable verbose logging of the internals of Monarch.

‎example/game.gui_script

+1-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ function init(self)
77
local data = monarch.data(hash("game"))
88
gui.set_text(gui.get_node("level"), tostring(data.level))
99

10-
self.transition = transitions.create(gui.get_node("root"))
11-
.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
12-
.show_out(transitions.slide_out_left, gui.EASING_INQUAD, 0.6, 0)
13-
.back_in(transitions.slide_in_left, gui.EASING_OUTQUAD, 0.6, 0)
14-
.back_out(transitions.slide_out_right, gui.EASING_INQUAD, 0.6, 0)
10+
self.transition = transitions.in_right_out_left(gui.get_node("root"), 0.6, 0)
1511
end
1612

1713
function on_input(self, action_id, action)

‎example/menu.gui_script

+1-5
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,7 @@ function init(self)
66

77
gui.set_text(gui.get_node("timestamp"), os.date())
88

9-
self.transition = transitions.create(gui.get_node("root"))
10-
.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
11-
.show_out(transitions.slide_out_left, gui.EASING_INQUAD, 0.6, 0)
12-
.back_in(transitions.slide_in_left, gui.EASING_OUTQUAD, 0.6, 0)
13-
.back_out(transitions.slide_out_right, gui.EASING_INQUAD, 0.6, 0)
9+
self.transition = transitions.in_right_out_left(gui.get_node("root"), 0.6, 0)
1410
end
1511

1612
function on_input(self, action_id, action)

‎example/pregame.gui_script

+1-5
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,7 @@ function init(self)
66
self.play = gui.get_node("play_button")
77
self.back = gui.get_node("back_button")
88

9-
self.transition = transitions.create(gui.get_node("root"))
10-
.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
11-
.show_out(transitions.slide_out_left, gui.EASING_INQUAD, 0.6, 0)
12-
.back_in(transitions.slide_in_left, gui.EASING_OUTQUAD, 0.6, 0)
13-
.back_out(transitions.slide_out_right, gui.EASING_INQUAD, 0.6, 0)
9+
self.transition = transitions.in_right_out_left(gui.get_node("root"), 0.6, 0)
1410
end
1511

1612
function on_input(self, action_id, action)

‎monarch/transitions/easings.lua

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
local M = {}
2+
3+
4+
local function create(name)
5+
assert(gui["EASING_OUT" .. name])
6+
assert(gui["EASING_IN" .. name])
7+
return {
8+
IN = gui["EASING_OUT" .. name],
9+
OUT = gui["EASING_IN" .. name],
10+
}
11+
end
12+
13+
14+
function M.BACK() return create("BACK") end
15+
function M.BOUNCE() return create("BOUNCE") end
16+
function M.CIRC() return create("CIRC") end
17+
function M.CUBIC() return create("CUBIC") end
18+
function M.ELASTIC() return create("ELASTIC") end
19+
function M.EXPO() return create("EXPO") end
20+
function M.QUAD() return create("QUAD") end
21+
function M.QUART() return create("QUART") end
22+
function M.QUINT() return create("QUINT") end
23+
function M.SINE() return create("SINE") end
24+
25+
26+
return M

‎monarch/transitions/gui.lua

+57
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
local monarch = require "monarch.monarch"
2+
local easings = require "monarch.transitions.easings"
23

34
local M = {}
45

@@ -198,4 +199,60 @@ function M.create(node)
198199
return instance
199200
end
200201

202+
203+
--- Create transition where the screen slides in from the right when shown and out
204+
-- to the left when hidden (and the reverse when going back)
205+
-- @param node
206+
-- @param duration
207+
-- @param delay Optional. Defaults to 0
208+
-- @param easing Optional. A constant from monarch.transitions.easing
209+
-- @return Transition instance
210+
function M.in_right_out_left(node, duration, delay, easing)
211+
assert(node, "You must provide a node")
212+
assert(duration, "You must provide a duration")
213+
easing = easing or easings.QUAD()
214+
return M.create(node)
215+
.show_in(M.slide_in_right, easing.OUT, duration, delay or 0)
216+
.show_out(M.slide_out_left, easing.IN, duration, delay or 0)
217+
.back_in(M.slide_in_left, easing.OUT, duration, delay or 0)
218+
.back_out(M.slide_out_right, easing.IN, duration, delay or 0)
219+
end
220+
221+
222+
function M.in_left_out_right(node, duration, delay, easing)
223+
assert(node, "You must provide a node")
224+
assert(duration, "You must provide a duration")
225+
easing = easing or easings.QUAD()
226+
return M.create(node)
227+
.show_in(M.slide_in_left, easing.OUT, duration, delay or 0)
228+
.show_out(M.slide_out_right, easing.IN, duration, delay or 0)
229+
.back_in(M.slide_in_right, easing.OUT, duration, delay or 0)
230+
.back_out(M.slide_out_left, easing.IN, duration, delay or 0)
231+
end
232+
233+
234+
function M.in_right_out_right(node, duration, delay, easing)
235+
assert(node, "You must provide a node")
236+
assert(duration, "You must provide a duration")
237+
easing = easing or easings.QUAD()
238+
return M.create(node)
239+
.show_in(M.slide_in_right, easing.OUT, duration, delay or 0)
240+
.show_out(M.slide_out_right, easing.IN, duration, delay or 0)
241+
.back_in(M.slide_in_right, easing.OUT, duration, delay or 0)
242+
.back_out(M.slide_out_right, easing.IN, duration, delay or 0)
243+
end
244+
245+
246+
function M.in_left_out_left(node, duration, delay, easing)
247+
assert(node, "You must provide a node")
248+
assert(duration, "You must provide a duration")
249+
easing = easing or easings.QUAD()
250+
return M.create(node)
251+
.show_in(M.slide_in_left, easing.OUT, duration, delay or 0)
252+
.show_out(M.slide_out_left, easing.IN, duration, delay or 0)
253+
.back_in(M.slide_in_left, easing.OUT, duration, delay or 0)
254+
.back_out(M.slide_out_left, easing.IN, duration, delay or 0)
255+
end
256+
257+
201258
return M

‎test/data/screens.collection

+63
Original file line numberDiff line numberDiff line change
@@ -252,3 +252,66 @@ embedded_instances {
252252
z: 1.0
253253
}
254254
}
255+
embedded_instances {
256+
id: "transition1"
257+
data: "components {\n"
258+
" id: \"screen\"\n"
259+
" component: \"/monarch/screen.script\"\n"
260+
" position {\n"
261+
" x: 0.0\n"
262+
" y: 0.0\n"
263+
" z: 0.0\n"
264+
" }\n"
265+
" rotation {\n"
266+
" x: 0.0\n"
267+
" y: 0.0\n"
268+
" z: 0.0\n"
269+
" w: 1.0\n"
270+
" }\n"
271+
" properties {\n"
272+
" id: \"screen_id\"\n"
273+
" value: \"transition1\"\n"
274+
" type: PROPERTY_TYPE_HASH\n"
275+
" }\n"
276+
" properties {\n"
277+
" id: \"transition_url\"\n"
278+
" value: \"transition1:/go\"\n"
279+
" type: PROPERTY_TYPE_URL\n"
280+
" }\n"
281+
"}\n"
282+
"embedded_components {\n"
283+
" id: \"collectionproxy\"\n"
284+
" type: \"collectionproxy\"\n"
285+
" data: \"collection: \\\"/test/data/transition1.collection\\\"\\n"
286+
"exclude: false\\n"
287+
"\"\n"
288+
" position {\n"
289+
" x: 0.0\n"
290+
" y: 0.0\n"
291+
" z: 0.0\n"
292+
" }\n"
293+
" rotation {\n"
294+
" x: 0.0\n"
295+
" y: 0.0\n"
296+
" z: 0.0\n"
297+
" w: 1.0\n"
298+
" }\n"
299+
"}\n"
300+
""
301+
position {
302+
x: 0.0
303+
y: 0.0
304+
z: 0.0
305+
}
306+
rotation {
307+
x: 0.0
308+
y: 0.0
309+
z: 0.0
310+
w: 1.0
311+
}
312+
scale3 {
313+
x: 1.0
314+
y: 1.0
315+
z: 1.0
316+
}
317+
}

‎test/data/transition1.collection

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: "transition1"
2+
scale_along_z: 0
3+
embedded_instances {
4+
id: "go"
5+
data: "components {\n"
6+
" id: \"transition1\"\n"
7+
" component: \"/test/data/transition1.gui\"\n"
8+
" position {\n"
9+
" x: 0.0\n"
10+
" y: 0.0\n"
11+
" z: 0.0\n"
12+
" }\n"
13+
" rotation {\n"
14+
" x: 0.0\n"
15+
" y: 0.0\n"
16+
" z: 0.0\n"
17+
" w: 1.0\n"
18+
" }\n"
19+
"}\n"
20+
""
21+
position {
22+
x: 0.0
23+
y: 0.0
24+
z: 0.0
25+
}
26+
rotation {
27+
x: 0.0
28+
y: 0.0
29+
z: 0.0
30+
w: 1.0
31+
}
32+
scale3 {
33+
x: 1.0
34+
y: 1.0
35+
z: 1.0
36+
}
37+
}

0 commit comments

Comments
 (0)