Skip to content

Commit

Permalink
Added helpers for common sets of transitions
Browse files Browse the repository at this point in the history
  • Loading branch information
britzl committed Jun 16, 2018
1 parent 091fab0 commit d1cf828
Show file tree
Hide file tree
Showing 11 changed files with 367 additions and 18 deletions.
30 changes: 28 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,10 @@ You can add optional transitions when navigating between screens. The default be
* ```transition_back_in``` (constant defined as ```monarch.TRANSITION.BACK_IN```)
* ```transition_back_out``` (constant defined as ```monarch.TRANSITION.BACK_OUT```)

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:
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.


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

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

### Predefined transitions
The predefined transitions provided by ```monarch.transitions.gui``` are:

* ```slide_in_right```
Expand All @@ -162,6 +163,23 @@ The predefined transitions provided by ```monarch.transitions.gui``` are:
* ```scale_in```
* ```scale_out```

Additionally there's functionality to create a full set of transitions for common transition styles:

* ```transitions.in_right_out_left(node, duration, [delay], [easing])```
* ```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])```

**PARAMETERS**
* ```node``` (node) - Gui node to animate.
* ```duration``` (number) - Transition duration in seconds.
* ```delay``` (number) - Transition delay in seconds.
* ```easing``` (table) - Easing table, created from a function provided by ```monarch.transitions.easings```

**RETURN**
* ```instance``` - The created transition instance


### Custom transitions
You can create and use your own transition as long as the provided transition function has the following function signature:

Expand All @@ -175,6 +193,7 @@ You can create and use your own transition as long as the provided transition fu
* ```delay``` (number) - Transition delay in seconds.
* ```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:

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


### monarch.is_busy()
Check if Monarch is busy showing and/or hiding a screen.

**RETURN**
* ```busy``` (boolean) - True if busy hiding and/or showing a screen.


### monarch.debug()
Enable verbose logging of the internals of Monarch.
6 changes: 1 addition & 5 deletions example/game.gui_script
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,7 @@ function init(self)
local data = monarch.data(hash("game"))
gui.set_text(gui.get_node("level"), tostring(data.level))

self.transition = transitions.create(gui.get_node("root"))
.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
.show_out(transitions.slide_out_left, gui.EASING_INQUAD, 0.6, 0)
.back_in(transitions.slide_in_left, gui.EASING_OUTQUAD, 0.6, 0)
.back_out(transitions.slide_out_right, gui.EASING_INQUAD, 0.6, 0)
self.transition = transitions.in_right_out_left(gui.get_node("root"), 0.6, 0)
end

function on_input(self, action_id, action)
Expand Down
6 changes: 1 addition & 5 deletions example/menu.gui_script
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,7 @@ function init(self)

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

self.transition = transitions.create(gui.get_node("root"))
.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
.show_out(transitions.slide_out_left, gui.EASING_INQUAD, 0.6, 0)
.back_in(transitions.slide_in_left, gui.EASING_OUTQUAD, 0.6, 0)
.back_out(transitions.slide_out_right, gui.EASING_INQUAD, 0.6, 0)
self.transition = transitions.in_right_out_left(gui.get_node("root"), 0.6, 0)
end

function on_input(self, action_id, action)
Expand Down
6 changes: 1 addition & 5 deletions example/pregame.gui_script
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,7 @@ function init(self)
self.play = gui.get_node("play_button")
self.back = gui.get_node("back_button")

self.transition = transitions.create(gui.get_node("root"))
.show_in(transitions.slide_in_right, gui.EASING_OUTQUAD, 0.6, 0)
.show_out(transitions.slide_out_left, gui.EASING_INQUAD, 0.6, 0)
.back_in(transitions.slide_in_left, gui.EASING_OUTQUAD, 0.6, 0)
.back_out(transitions.slide_out_right, gui.EASING_INQUAD, 0.6, 0)
self.transition = transitions.in_right_out_left(gui.get_node("root"), 0.6, 0)
end

function on_input(self, action_id, action)
Expand Down
26 changes: 26 additions & 0 deletions monarch/transitions/easings.lua
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
local M = {}


local function create(name)
assert(gui["EASING_OUT" .. name])
assert(gui["EASING_IN" .. name])
return {
IN = gui["EASING_OUT" .. name],
OUT = gui["EASING_IN" .. name],
}
end


function M.BACK() return create("BACK") end
function M.BOUNCE() return create("BOUNCE") end
function M.CIRC() return create("CIRC") end
function M.CUBIC() return create("CUBIC") end
function M.ELASTIC() return create("ELASTIC") end
function M.EXPO() return create("EXPO") end
function M.QUAD() return create("QUAD") end
function M.QUART() return create("QUART") end
function M.QUINT() return create("QUINT") end
function M.SINE() return create("SINE") end


return M
57 changes: 57 additions & 0 deletions monarch/transitions/gui.lua
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
local monarch = require "monarch.monarch"
local easings = require "monarch.transitions.easings"

local M = {}

Expand Down Expand Up @@ -198,4 +199,60 @@ function M.create(node)
return instance
end


--- Create transition where the screen slides in from the right when shown and out
-- to the left when hidden (and the reverse when going back)
-- @param node
-- @param duration
-- @param delay Optional. Defaults to 0
-- @param easing Optional. A constant from monarch.transitions.easing
-- @return Transition instance
function M.in_right_out_left(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.slide_in_right, easing.OUT, duration, delay or 0)
.show_out(M.slide_out_left, easing.IN, duration, delay or 0)
.back_in(M.slide_in_left, easing.OUT, duration, delay or 0)
.back_out(M.slide_out_right, easing.IN, duration, delay or 0)
end


function M.in_left_out_right(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.slide_in_left, easing.OUT, duration, delay or 0)
.show_out(M.slide_out_right, easing.IN, duration, delay or 0)
.back_in(M.slide_in_right, easing.OUT, duration, delay or 0)
.back_out(M.slide_out_left, easing.IN, duration, delay or 0)
end


function M.in_right_out_right(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.slide_in_right, easing.OUT, duration, delay or 0)
.show_out(M.slide_out_right, easing.IN, duration, delay or 0)
.back_in(M.slide_in_right, easing.OUT, duration, delay or 0)
.back_out(M.slide_out_right, easing.IN, duration, delay or 0)
end


function M.in_left_out_left(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.slide_in_left, easing.OUT, duration, delay or 0)
.show_out(M.slide_out_left, easing.IN, duration, delay or 0)
.back_in(M.slide_in_left, easing.OUT, duration, delay or 0)
.back_out(M.slide_out_left, easing.IN, duration, delay or 0)
end


return M
63 changes: 63 additions & 0 deletions test/data/screens.collection
Original file line number Diff line number Diff line change
Expand Up @@ -252,3 +252,66 @@ embedded_instances {
z: 1.0
}
}
embedded_instances {
id: "transition1"
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: \"transition1\"\n"
" type: PROPERTY_TYPE_HASH\n"
" }\n"
" properties {\n"
" id: \"transition_url\"\n"
" value: \"transition1:/go\"\n"
" type: PROPERTY_TYPE_URL\n"
" }\n"
"}\n"
"embedded_components {\n"
" id: \"collectionproxy\"\n"
" type: \"collectionproxy\"\n"
" data: \"collection: \\\"/test/data/transition1.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
}
}
37 changes: 37 additions & 0 deletions test/data/transition1.collection
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
name: "transition1"
scale_along_z: 0
embedded_instances {
id: "go"
data: "components {\n"
" id: \"transition1\"\n"
" component: \"/test/data/transition1.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
}
}
Loading

0 comments on commit d1cf828

Please sign in to comment.