Making an active "drop down" menu?

This thread is a few years old. Some details may refer to an earlier version of Visionaire Studio. Current tutorials

• #1, by Xerilon Saturday, 11. February 2017, 18:40 10 years ago

  I want to make a quick menu simply described like this:

  
  

  A plate with three areas is the menu. It is placed "shoved" out of the scene so that only the edge is visible that has three small lights on it. 

  When something triggers some of the three possible alternatives, a certain light on the edge of the plate will blink. When the player moves the mouse to the edge it will slide up showing the whole plate, and the player can hover on the three areas and click to bring up certain options. Whenever the player moves out of the "whole plate" area it will slide back, and the light will still blink if the option is available.

  
  

  Are there any tutorials for this kind of setup somewhere?
• New to Visionaire Studio?

  Create point and click adventures without coding. The free version covers up to 25 scenes per project. For more scenes or to earn money with your game, you need a license.

  See the Indie Bundle Try it for free

• #2, by afrlme Saturday, 11. February 2017, 20:13 10 years ago

  You are talking about a sliding interface, like the kind used in the Deponia games? Sure, check the wiki. I've provided multiple sliding interface scripts over the years, but I actually don't recommend using them now as there's no need after Simon implemented the to() tweening function into Visionaire Studio.
  

  Interfaces["example"]:to(1000, {InterfaceOffset = { x = 0, y = 50 } }, easeLinearInOut) -- slide interface "example" to 0 by 50 pixels.

  
  Do you have a concept image/design available of the menu so that I can see exactly what you have in mind?
  Quick note: this is how I sort out sliding interfaces these days - it's a lot simpler than the deponia sliding interface script I added to the wiki as it only covers 1 direction & requires waiting until interface is fully opened/closed before it can be triggered again, but it's less than 10 lines of code compared to almost 200 or whatever madness I wrote before the to() function was implemented.
  

  if Interfaces["inventory"].InterfaceOffset.x == -200 then -- slide out
   Interfaces["inventory"]:to(1000, {InterfaceOffset = { x = 0, y = 300 } }, easeBounceOut)
  elseif Interfaces["inventory"].InterfaceOffset.x == 0 then -- slide in
   Interfaces["inventory"]:to(1000, {InterfaceOffset = { x = -200, y = 300 } }, easeQuintIn)
  end
  

  
  From what I read of your post I think you only need a single interface, so you add your graphics & animations & buttons to it, then you offset it to the hidden position, then you set the interface area & add a button set to action area type (or use Lua mouseEvent handler) to create a mouse enters area to check if mouse cursor is in the interface area then you slide it out with a line of code - like in the first code block I wrote. Next you go to the properties section for the interface & create an execute a script in the leave interface actions bit with a line to slide the interface back in. I'm sure you can figure out the lights & conditions yourself.
  

• #3, by Xerilon Saturday, 11. February 2017, 21:57 10 years ago

  Ah, I wasn't ware it was called "sliding interface"  

  
  

  Well, I think you understood me right

  It seems I have to look into using scripts, then! 

  
  

  Is there a way for mouse areas to check if the cursor is already inside? In the mouse events (non scripting) there is only "enters" and "leaves" and that doesn't work at all times due to other events such as an object being activated on top of another area, and when it disappears the mouse is now over the area beneath, but it isn't registered the entering because it was already there.

  
  

  ..Added the interface example, just a rough test. The idea is that when the mouse hovers on the brain, there will be graphics and such appearing with additional buttons on them, and when the mouse leaves the area, the interface will slide down so that just the green edges are visible (which will become individual lights to show what of the three buttons are optional). The design itself might be changed as I see it isn't very functional for it's purpose.

  • 

• #4, by Xerilon Saturday, 11. February 2017, 21:59 10 years ago

  Just to add on the mouse thing.. In fact I see not much use for the "enter" and "leave" setting. It should just be "IS it over or not?", but that has to be a constantly updating call of course, and it might draw a bit memory.

• #5, by afrlme Saturday, 11. February 2017, 22:12 10 years ago

  This is why you don't use the mouse leave action. You create the on leave actions inside of the properties tab of the interface. There's a section specifically for on leave interface perform x actions. Alternatively you could scrap the mouse over stuff & instead use a keyboard button &/or mouse wheel to toggle slide in/out the interface. If you went with the mouse wheel option then I recommend also creating a keyboard shortcut or button somewhere on the screen that can be clicked as not everyone has mouse wheel (mostly laptop/touchpad/touchscreen users).
  
  
  

• #6, by Xerilon Saturday, 11. February 2017, 22:58 10 years ago

  Ok I understand! I'll try it out to see how it goes

  
  

  And thank you very much for tips, scripts and the animated example!

• #7, by afrlme Saturday, 11. February 2017, 23:00 10 years ago

  Ok I understand! I'll try it out to see how it goes

  
  

  And thank you very much for tips, scripts and the animated example!

  No problem. Not sure why Gyazo made the gif so small. I've not used the gif feature before. I know it did an mp4 video version too. Not the best of quality though...
  
  https://i.gyazo.com/eb6b622772ea21e01f373f080cfc8eab.mp4
  
  P.S: it only lets you record up to 10 seconds which isn't enough time to do much.