Any ideas on how to create adjustable menu bars

Get help using Construct 2

Post » Fri May 03, 2013 2:52 am

Hi, i'm new to this forum & its my first post on it, i'm a student studying video games design in Dundalk institute of technology (DKIT) in ireland & am a beginner in using construct 2, i plan to keep using it & learn more about it once i have finished the course as it is an excellent program to use especially for a beginner like myself...

I have used the program over the last while to create prototypes for games projects etc, & am currently working on an assignment were i have to implement a basic menu style interface into a game prototype i created earlier in the year (start, options changing game settings, sound etc...

I have most of it working up to a certain point making sure buttons are working & linking to layouts & screens etc, but i am having trouble trying to figure out how to create an adjustable slider bar on one of the screens, a few examples are shown below...

I want each of the bars to increase & decrease once the buttons on either side have been pressed to adjust the volume levels of each option, i'm just not sure how to go about getting this to actually work,

I have tried creating the separate bar images as seen above & tried creating an animation to see if that would work, but not sure if i'm doing the right thing or not...

If anyone has any ideas's on this issue, it would be a great help


smetes2013-05-03 02:53:56
Posts: 4
Reputation: 1,156

Post » Fri May 03, 2013 4:45 am

Make a TiledBackground that is entirely green, then you can set its width to the size you want the bar to be. Eg:

> Press button "plus"
- Set TiledBg width: TiledBg.width+1

Then limit the size:

> TiledBg.width > 200
- Set TiledBg width: 200
Posts: 1,038
Reputation: 15,092

Post » Fri May 03, 2013 2:23 pm

Thanks i have used ur idea & it works great, just having a slight problem,

i have it set to position that when the bar reaches the end it stops & i can press the - button to decrease the bar to the end, but then once the bar reaches the start point again & when i press the - button again & then go to press the + button nothing happens, luckily i can press the back button to move to a previous screen & go back in again & everything is reset... not sure how to solve this,

thanks again... its been a massive help...
Posts: 4
Reputation: 1,156

Post » Fri May 03, 2013 5:15 pm

- Set TiledBg width: clamp(TiledBg.width + 1, minWidth , maxWidth)

and for the lower

- Set TiledBg width: clamp(TiledBg.width - 1, minWidth , maxWidth)

clamp(x, lower, upper) is by the far the easiest way to handle return of lower and upper limitations.

however, i'm surprised your buttons to change your slider. I always found it to be more intuitive to use a drag model.

for simple sample this assumes that all your objects center points are on the left side rather than the center. also the sample uses touch, but you can use mouse. However, I find touch to be a lovely action for when the mouse is being pressed anyways :)

give the dragborder/box the variable touchid and set default to -1
dragborder.touchid = -1

when the touch or mouse is on the meter frame
onTouch dragborder
-- dragborder = touch.touchid

while the right touch id is touching the screen
dragborder.touchid = touch.touchid
-- meterbar.width = clamp(touch.x, dragborder.x, dragborder.x + dragborder.width)
--meterbar.value = (meterbar.width / dragborder.width) * 100

when the touch event is released
on any touch end
dragborder.touchid = touch.touchid
-- dragborder.touchid = -1
-- meterbar.value = meterbar.value = (meterbar.width / dragborder.width) * 100
Posts: 2,455
Reputation: 14,304

Return to How do I....?

Who is online

Users browsing this forum: ezrubiera, flemmig, Heeroyuy, nav and 18 guests