Difference between revisions of "Sliding Interface MKIII (CMS)"

From The Official Visionaire Studio: Adventure Game Engine Wiki
Line 1: Line 1:
 
{| class="ts" style="width:100%"
 
{| class="ts" style="width:100%"
 
|-
 
|-
! style="text-align:left" | Name !! style="text-align:left" | Type !! style="text-align:left" | By {{lee_PP}}
+
! style="text-align:left" | Name !! style="text-align:left" | Type !! style="text-align:left" | By
 
|-
 
|-
 
| Sliding Interface MKIII || Definition || AFRLme
 
| Sliding Interface MKIII || Definition || AFRLme
Line 14: Line 14:
  
 
== Instructions ==
 
== Instructions ==
1. Add this script into the script section of the Visionaire Studio editor & set as a defintion type script... <syntaxhighlight lang="lua">
+
1a. Add this script into the script section of the Visionaire Studio editor & set as a defintion type script... <syntaxhighlight lang="lua">
 
local tInt = {
 
local tInt = {
  
Line 31: Line 31:
 
end
 
end
 
</syntaxhighlight>
 
</syntaxhighlight>
2a. Now you need to create some tables containing various information that will be used to slide the interface(s) in & out; ''the table '''must''' contain the same name as the target interface''.
+
2a. You need to edit the script above & insert the names of any interfaces you want to be able to slide in & out. You will also need to define the default position of the interfaces [In] & the target position of the interfaces [Out]. Don't forget to include the duration it should take the interface to slide in or out, or the easing you want to use.
<syntaxhighlight>
+
<hr>
local t = {} -- creates an empty table
+
{| class="ts"
t["inventory_1"] = {x_in = -350, x_out = -20, y_in = 60, y_out = 60, xo = -50, yo = 0, dir =1, state = false} -- from left
+
|-
</syntaxhighlight>
+
| ''Quick note: Visionaire Studio has support for almost all of the easing options listed on this page [https://easings.net here], however in Visionaire Studio easings are written like this <strong>easeQuintInOut</strong> instead of like this <strong>easeInOutQuint</strong>.''
2b. '''x_in''' is the closed coordinate that your interface is positioned on the x-axis & should be the same as the value set in the interface properties tab of the interface you want to slide.<br/>
+
|}
 
 
2c. '''x_out''' is the coordinate position the interface will slide to (open) on the x-axis.<br/>
 
 
 
2d. '''y_in''' is the closed coordinate that your interface is positioned on the y-axis & should be the same as the value set in the interface properties tab of the interface you want to slide.<br/>
 
 
 
2e. '''y_out''' is the coordinate position the interface will slide to (open) on the x-axis.<br/>
 
 
 
2f. '''xo''' is the amount of pixels to offset the x-axis by (closed position) while mouse wheel mode is active (hide the interface). Set '''0''' to deactivate offset for x-axis. ''The offset should contain a positive or negative value depending on direction value, else it should contain 0.''<br/>
 
 
 
2g. '''yo''' is the amount of pixels to offset the y-axis by (closed position) while mouse wheel mode is active (hide the interface). Set '''0''' to deactivate offset for y-axis. ''The offset should contain a positive or negative value depending on direction value, else it should contain 0.''<br/>
 
 
 
2h. '''dir''' is the direction in which the interface should slide from. 1 = from left, 2 = from right, 3 = from top, 4 = from bottom.<br/>
 
 
 
2i. '''state''' controls whether interface is sliding out, in, or is open or closed; default value should be <span class="red">false</span>.<br/>
 
 
 
3. You need to create a condition somewhere & name it '''mouse_wheel_mode'''. The default value should be set to <span 1class="red">false</span>.<br/>
 
 
 
4a. Create a button for your interface, move to bottom of list, set button as '''action area''', set object area around the part that will trigger interface slide out on hover.<br/>
 
 
 
4b. Add a mouse enter action (or left click action) to the button mentioned in '''4a'''. Inside of this action you should add an if query...
 
 
 
if condition 'mouse_wheel_mode' is false
 
  execute a script > (see code block below this)
 
<syntaxhighlight>
 
openInterface("interface_name", 3000, easeQuintInOut) -- open interface_name over 3 seconds with smooth easing (change easing to whatever you prefer)
 
</syntaxhighlight>
 
end if
 
 
 
 
 
4c. Inside of the ''properties'' tab for the interface, add this action part to the '''action on leaving''' action...
 
 
 
if condition 'mouse_wheel_mode' is false
 
  execute a script > (see code block below this)
 
<syntaxhighlight>
 
closeInterface("interface_name", 2000, easeBounceOut) -- close interface_name over 2 seconds with bounce out easing (change easing to whatever you prefer)
 
</syntaxhighlight>
 
end if
 
 
 
 
 
5a. Inside of '''game''' > '''mouse properties''': '''mouse wheel up''' you should add these action parts...
 
 
 
if condition 'mouse_wheel_mode' is true
 
  execute a script > (see code block below this)
 
<syntaxhighlight>
 
openInterface("interface_name", 3000, easeQuintInOut)
 
</syntaxhighlight>
 
end if
 
 
 
 
 
5b. Inside of '''game''' > '''mouse properties''': '''mouse wheel down''' you should add these action parts...
 
 
 
if condition 'mouse_wheel_mode' is true
 
  execute a script > (see code block below this)
 
<syntaxhighlight>
 
closeInterface("interface_name", 2000, easeBounceOut)
 
</syntaxhighlight>
 
end if
 
 
 
 
 
6. To toggle mouse wheel mode, you need to create an object in your options menu or a key input command containing...
 
 
 
toggle condition 'mouse_wheel_mode'
 
 
 
 
 
7. Inside of your scenes, you should probably add inside of an at begin of scene action, an execute a script action containing...
 
<syntaxhighlight>
 
closeInterface("interface_name", 0, easeNoneInOut) -- instantly resets interface_name back to closed position; just in case the interface was open when you changed scenes.
 
</syntaxhighlight>
 
 
 
== Main Script ==
 
<syntaxhighlight>
 
--[[
 
Sliding Interface MKII [v3] (27/11/2014)
 
Written by AFRLme [Lee Clarke]
 
-- + --
 
alternatingfrequencies@hotmail.com | skype @ AFRLme
 
-- + --
 
This script is donation optional. In game credit is non-negotiable.
 
You are free to: ¹ use it in your game(s). ² modify the script.
 
Do not remove - or edit - this comment block.
 
--]]
 
 
 
-- * local variables * --
 
local p, ox, oy -- empty variables
 
 
 
-- * local tables * --
 
local t = {} -- empty table
 
t["inventory_1"] = {x_in = -350, x_out = -20, y_in = 60, y_out = 60, xo = -50, yo = 0, dir =1, state = false} -- from left
 
t["inventory_2"] = {x_in = 1230, x_out =  930, y_in = 60, y_out = 60, xo = 50, yo = 0, dir = 2, state = false} -- from right
 
t["inventory_3"] = {x_in = 440, x_out = 440, y_in = -550, y_out = -20, xo = 0, yo = -50, dir = 3, state = false} -- from top
 
t["inventory_4"] = {x_in = 440, x_out = 440, y_in = 670, y_out = 140, xo = 0, yo = 50, dir = 4, state = false} -- from bottom
 
 
-- * function that slides the interface out * --
 
function openInterface(int, delay, easing, dir)
 
if t[int]["state"] ~= true then t[int]["state"] = true -- if not already sliding out then begin sliding out (safety measure to make sure it keeps sliding)
 
  if t[int].dir == 1 or t[int].dir == 2 then p = math.floor(( Interfaces[int].InterfaceOffset.x - t[int].x_out) / (t[int].x_in - t[int].x_out) * 100); delay = math.floor((delay / 100) * p ) end
 
  if t[int].dir == 3 or t[int].dir == 4 then p = math.floor(( Interfaces[int].InterfaceOffset.y - t[int].y_out) / (t[int].y_in - t[int].y_out) * 100); delay = math.floor((delay / 100) * p ) end
 
  startObjectTween( Interfaces[int], VInterfaceOffset, Interfaces[int].InterfaceOffset, {x = t[int].x_out, y = t[int].y_out}, delay, easing)
 
end
 
end
 
 
-- * function that slides the interface in * --
 
function closeInterface(int, delay, easing, dir)
 
  t[int]["state"] = false
 
  if Conditions["mouse_wheel_mode"].ConditionValue then ox = t[int].xo; oy = t[int].yo else ox = 0; oy = 0 end
 
  if t[int].dir == 1 or t[int].dir == 2 then p = math.floor(( Interfaces[int].InterfaceOffset.x - t[int].x_in) / (t[int].x_out - t[int].x_in) * 100); delay = math.floor((delay / 100) * p ) end
 
  if t[int].dir == 3 or t[int].dir == 4 then p = math.floor(( Interfaces[int].InterfaceOffset.y - t[int].y_in) / (t[int].y_out - t[int].y_in) * 100); delay = math.floor((delay / 100) * p ) end
 
  startObjectTween( Interfaces[int], VInterfaceOffset, Interfaces[int].InterfaceOffset, {x = t[int].x_in + ox, y = t[int].y_in + oy}, delay, easing)
 
end
 
</syntaxhighlight>
 
 
 
 
 
== Alternative Script ==
 
This script is the same as the above script but uses the old getObject scripting method. ''At least Visionaire Studio 4.0 is required to run this script because of the startObjectTween function.''
 
 
 
<syntaxhighlight>
 
--[[
 
Sliding Interface MKII [v3] (27/11/2014)
 
Written by AFRLme [Lee Clarke]
 
-- + --
 
alternatingfrequencies@hotmail.com | skype @ AFRLme
 
-- + --
 
This script is donation optional. In game credit is non-negotiable.
 
You are free to: ¹ use it in your game(s). ² modify the script.
 
Do not remove - or edit - this comment block.
 
--]]
 
 
 
-- * local variables * --
 
local p, ox, oy -- empty variables
 
 
 
-- * local tables * --
 
local t = {} -- empty table
 
t["inventory_1"] = {x_in = -350, x_out = -20, y_in = 60, y_out = 60, xo = -50, yo = 0, dir =1, state = false} -- from left
 
t["inventory_2"] = {x_in = 1230, x_out =  930, y_in = 60, y_out = 60, xo = 50, yo = 0, dir = 2, state = false} -- from right
 
t["inventory_3"] = {x_in = 440, x_out = 440, y_in = -550, y_out = -20, xo = 0, yo = -50, dir = 3, state = false} -- from top
 
t["inventory_4"] = {x_in = 440, x_out = 440, y_in = 670, y_out = 140, xo = 0, yo = 50, dir = 4, state = false} -- from bottom
 
 
-- * function that slides the interface out * --
 
function openInterface(int, delay, easing, dir)
 
if t[int]["state"] ~= true then t[int]["state"] = true -- if not already sliding out then begin sliding out (safety measure to make sure it keeps sliding)
 
  if t[int].dir == 1 or t[int].dir == 2 then p = math.floor((getObject("Interfaces[" .. int .. "]"):getPoint(VInterfaceOffset).x - t[int].x_out) / (t[int].x_in - t[int].x_out) * 100); delay = math.floor((delay / 100) * p) end
 
  if t[int].dir == 3 or t[int].dir == 4 then p = math.floor((getObject("Interfaces[" .. int .. "]"):getPoint(VInterfaceOffset).y - t[int].y_out) / (t[int].y_in - t[int].y_out) * 100); delay = math.floor((delay / 100) * p) end
 
  startObjectTween(getObject("Interfaces[" .. int .. "]"), VInterfaceOffset, getObject("Interfaces[" .. int .. "]"):getPoint(VInterfaceOffset), {x = t[int].x_out, y = t[int].y_out}, delay, easing)
 
end
 
end
 
 
-- * function that slides the interface in * --
 
function closeInterface(int, delay, easing, dir)
 
  t[int]["state"] = false
 
  if getObject("Conditions[mouse_wheel_mode]"):getBool(VConditionValue) then ox = t[int].xo; oy = t[int].yo else ox = 0; oy = 0 end
 
  if t[int].dir == 1 or t[int].dir == 2 then p = math.floor((getObject("Interfaces[" .. int .. "]"):getPoint(VInterfaceOffset).x - t[int].x_in) / (t[int].x_out - t[int].x_in) * 100); delay = math.floor((delay / 100) * p) end
 
  if t[int].dir == 3 or t[int].dir == 4 then p = math.floor((getObject("Interfaces[" .. int .. "]"):getPoint(VInterfaceOffset).y - t[int].y_in) / (t[int].y_out - t[int].y_in) * 100); delay = math.floor((delay / 100) * p) end
 
  startObjectTween(getObject("Interfaces[" .. int .. "]"), VInterfaceOffset, getObject("Interfaces[" .. int .. "]"):getPoint(VInterfaceOffset), {x = t[int].x_in + ox, y = t[int].y_in + oy}, delay, easing)
 
end
 
</syntaxhighlight>
 
  
  

Revision as of 22:27, 14 August 2022

Name Type By
Sliding Interface MKIII Definition AFRLme

This script allows you to slide interfaces in/out on mouse over/out, via mouse wheel, via key input, or via an interface button. Visionaire Studio 5+ is required to run this script.


Version One (tables)

This version uses Lua tables/arrays for storing the positional, easing, & duration data for each interface you want to slide out. This version is easier to use overall as you don't need to manually specify all of the data each time into the function.

Instructions

1a. Add this script into the script section of the Visionaire Studio editor & set as a defintion type script...
local tInt = {

["int_example"] = { In = {x = 390, y = 710}, Out = {x = 390, y = 530}, duration = 1000, eIn = easeQuintOut, eOut = easeBounceOut }

}

function slideInt(int, dir)
  
  if dir and (Interfaces[int].Offset.x == tInt[int].In.x and Interfaces[int].Offset.y == tInt[int].In.y) then -- slide out
    Interfaces[int]:to(tInt[int].duration, { Offset = {x = tInt[int].Out.x, y = tInt[int].Out.y} }, tInt[int].eOut)
  elseif not dir and (Interfaces[int].Offset.x == tInt[int].Out.x and Interfaces[int].Offset.y == tInt[int].Out.y) then -- slide in
    Interfaces[int]:to(tInt[int].duration, { Offset = {x = tInt[int].In.x, y = tInt[int].In.y} }, tInt[int].eIn)
  end
  
end

2a. You need to edit the script above & insert the names of any interfaces you want to be able to slide in & out. You will also need to define the default position of the interfaces [In] & the target position of the interfaces [Out]. Don't forget to include the duration it should take the interface to slide in or out, or the easing you want to use.


Quick note: Visionaire Studio has support for almost all of the easing options listed on this page here, however in Visionaire Studio easings are written like this easeQuintInOut instead of like this easeInOutQuint.


Resources

Name Description
sliding_interface_vs4.zip A working example of the script in action. Visionaire Studio 4.0.1+ required to run the included .ved file.