Sliding Inventory Example

  • #1, by redsparkSaturday, 09. September 2017, 15:07 3 years ago
    I created a sliding interface (Inventory in this case) script that I thought I would share as yet another way to do the deed.  It uses an array of functions to act as a Finite State Machine.
    The bolded values in the script (p.y<=640 and p.y>=696) depend on the size of your inventory interface graphic.  

    My Interface has an Absolute displacement and a position of : 191, 696.  The 696 (y value) is what will be changing in order to slide the inventory.
    --[[
    ********************************************************************************
    INVENTORY
    ********************************************************************************
    ]]--
    local inventory_States = {[1] = function () end, -- Holding state
    [2] = function () -- RaisingState
     local inventory = getObject("Interfaces[inventory]")
     local p = inventory:getPoint(VInterfaceOffset)
     if <b>p.y<;=640</b> then
      getObject("Values[inventory_state]"):setValue(VValueInt, 1)
      getObject("Conditions[inventory_lowered]"):setValue(VConditionValue, true)
     else
      p.y= p.y-2
    inventory:setValue(VInterfaceOffset,p)
     end
    end,
    [3] = function () -- Lowering State
     local inventory = getObject("Interfaces[inventory]")
     local p = inventory:getPoint(VInterfaceOffset)
     if <b>p.y>;=696</b> then
      getObject("Values[inventory_state]"):setValue(VValueInt, 1)
      getObject("Conditions[inventory_lowered]"):setValue(VConditionValue, false)
     else
      p.y= p.y+2
    inventory:setValue(VInterfaceOffset,p)
     end
    end
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    --[[
    ********************************************************************************
    HANDLERS
    ********************************************************************************
    ]]--
    function onMainLoop()
    -- Update Inventory Interface
    local inventory_state = getObject("Values[inventory_state]"):getInt(VValueInt)

    inventory_States[inventory_state]()
    end

     registerEventHandler("mainLoop", "onMainLoop")
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    In the Inventory interface, I created a Value called: inventory_state with a default value of 1.  This starts the inventory in the Holding State.  And a Condition called inventory_lowered is set to true.

    A button was added to the inventory interface (in my game it is a tab at the top of the inventory interface) where I wanted the mouse cursor to hover over and cause the inventory to raise using a Cursor Enters  Button Area action.  In that action, I set the value of inventory_state to 2 putting the inventory in the Raising state. 

    An Action on Leaving the interface (under Properties in V5), sets the inventory_state to 3 putting the inventory in the Lowering State.

    The script will stop moving the inventory and enter into a Holding State when the position has been reached. 

    For added control, I created a Key Action (E [released]) in the game settings that toggles the inventory state between raising and lowering using the inventory_lowered condition to determine which state to switch to.  This allows you to interupt the lowering or raising of the inventory and seamlessly switch states back and forth.

    This may not be the best way to do a sliding inventory but I hadn't seen this approach used before so I thought I would share.  If you are interested in a video tutorial on how I did this, let me know.

    Thanks.


    Forum Fan

    117 Posts


  • #2, by esmeraldaSaturday, 09. September 2017, 15:47 3 years ago
    Someone shared the method using easing a while back:

    -- sliding Interface mit easing--
    local int = Interfaces["Inventar"]

    if int.InterfaceOffset.y == 960 then
     int:to(400, { InterfaceOffset = {x = int.InterfaceOffset.x, y = 1060 } }, easeLinearIn)
    elseif int.InterfaceOffset.y == 1060 then
     int:to(500, { InterfaceOffset = {x = int.InterfaceOffset.x, y = 960 } }, easeBackOut) 
    end

    This slides in the inventory from the bottom of the screen (y-position depending on your resolution and the size of your inventory), works great.

    Great Poster

    391 Posts

  • #3, by redsparkSaturday, 09. September 2017, 16:00 3 years ago
    Thanks.  I haven't used easing yet.  That would be much better.

    Forum Fan

    117 Posts

  • #4, by afrlmeSaturday, 09. September 2017, 16:01 3 years ago
    Aye sorry mate. Slide out inventory was simplified as hell when Simon implemented the to() tweening function. It made it as simple as a few lines of code for sliding it in & out by checking if it = position A then slide out else if it = position B then slide in. Very easy.

    Also quick note: there's something wrong with the forum code blocks at the minute. It randomly adds semi-colon; into the block here & there.

    local pos = Interfaces["inventory"].InterfaceOffset

    if pos.x == 0 then -- slide in
     Interfaces["inventory"]:to(1000, {InterfaceOffset = {x = -300, y = pos.y}, easeQuintIn)
    elseif pos.x == 300 then -- slide out
     Interfaces["inventory"]:to(1000, {InterfaceOffset = {x = 0, y = pos.y}, easeQuintOut)
    end
    1
    2
    3
    4
    5
    6
    7


    The to() tween can be used on almost every single integer or float based data structure entry, which gives you a lot of things to play with. You can check out the different easing types here. They are written slightly different in VS compared to the ones listed on that site as you can see from the example in the code block above.

    Imperator

    6846 Posts

  • #5, by redsparkSaturday, 09. September 2017, 16:42 3 years ago
    Awesome!  I'm out of date now.  Been away too long. roll

    Forum Fan

    117 Posts

  • #6, by sebastianSaturday, 09. September 2017, 16:48 3 years ago
    yep, quite easy stuff since the to-functions were implemented a while back. You can use it at almost everything which has coordinates / values in its structure fields to manupulate them more harmonic.

    Thread Captain

    2337 Posts

  • #7, by afrlmeSaturday, 09. September 2017, 16:51 3 years ago
    Awesome!  I'm out of date now.  Been away too long. roll
    No worries mate. It's been around since after first couple or so updates of 4.x. Originally there was the startTween function, but it didn't make a lot of sense to most people & then Simon ended up creating a much simpler to use tweening function named to() which is really really easy to use & you can insert multiple data structure values into the same table bit.

    game.CurrentScene:to(1000, {MusicVolume = 50, Brightness = 0}) 
    1


    You can make them loop or loop in a pendulum style (current value > new value > previous value >  rinse & repeat). Very useful function that has saved so much time & my fingers. smile

    @Sebastian: aye, I forget to mention it supports point type data structure fields too.

    Imperator

    6846 Posts

  • #8, by redsparkSaturday, 09. September 2017, 17:08 3 years ago
    Interesting.  I'm thinking a Match 3 Puzzle may not be too crazy of an idea in VS afterall.  I've been trying to think of how to do one.  It should be as simple as sliding objects around a scene using the to() function.

    Forum Fan

    117 Posts

Write post