[SOLVED] Cut the Rope - Level Selector

Hi everyone,

I'm looking for a level selector behavior like the one in Cut the Rope (file attached).

I've already seen in this forum someone who realised this kind of behavior, but impossible to retrieve it.

Does anybody have a idea to create or find this behavior?

Thanks

Hey man, I went ahead and through together a little process for you to follow. If you want I can put up a game for you to download with this in it. What you want to do is first create your actors that will be in the level queue. then create a behavior and name it whatever, I named it slider. then in the (created) tab input the folowing
--
see step 1.PNG
create variables: can record mouse?/boolean | start x/number
--
now lets go into the Always loop.
Go ahead and copy everything into your behavior
--
see step 2.PNG
create variables: initial mouse X/number | current X/number | Pannel X/number/global |
the rest have already been created.
--
now attach this behavior to your FIRST level selector.
What this creates is a level selector that will move with your mouse and stay where it is when you release. However, this isnt any fun, because it doesn't shoot back to the center of the screen. so lets add some cool sliding stuff.
--
see step 3.PNG
in this, nothing much is new, however, I did add 1 new script into the (mouse up) section. And I moved the (set X to pannel X ......).
--
Now you have 1 actor that moves with your mouse, and slings back to its origin after you release it. But you need a lot more than just one level selector, so go ahead and create a new script for the second actor. I named it slider 2 (how original). and go ahead and copy this stuff into the behavior. Oh, yah, and go ahead and attach this behavior to your second menu pannel.
--
See step 4.PNG
create variables: start X/number
--
now moving into the Forever loop
--
See step 5.PNG
scene width is located under scene -- tab -- world
--
Now this adds in that second menu actor. Of course, you can play around with that number that goes where the (Scene width) is. using scene width just puts the actor just out of the screen at the start. but if you change the number where the (scene width) is, you will have to change the number where (scene width) is in the next step. so yah, moving to the last step. At this point the actors move and everything, however, when you release the mouse, it shoots back to the first actor. So go back to the initial first actor behavior and add in what I have added in. what this does is make so the closest actor to the middle of the screen snaps to the middle.
--
see step 6.PNG
Like I mentioned, If you changed the number where the (scene width) goes in step 5, you will have to change the number in the following script to match. (see script.PNG)
--
Hope this helps you out bro. If you have any questions just ask.

Wow! Awesome tutorial!

I will try it after work.

Thanks a lot

sure thing man   

Hi,

So the first actor moves and slings back very well, thanks for that.

But I don't understand the steps 4 and 5. I created a new behavior for second actor with scripts from steps 4 and 5 and putted the actor in the scene but it disappears every time (to the right I suppose).


I missed something but what...

gimme a sec and i will see if I can figure it out.

As far as I know the code should work. The way I set up the code in step 5 puts the 2nd actor off to the right of the screen. And when you scroll to the right, it comes into view. I think I have it set up so that it sets it X to (scene width)+(pannel X). So I went ahead and made some adjustments to the code, so it will be easier for yah.
--
So go into the behavior for your 2nd pannel and change the (when created) code.
you will need to create a couple new variables. dont delete the old ones.
--
See Step 4.PNG
create variables: Distance between pannels/number | distance between actors/number/global variable
--
Now go to your update/always loop
--
See Step 5.PNG
use that distance between actors global variable you created in the last step
--
Now that you have that out of the way, you will want to open the 2nd pannel up. and then look under the behaviors tab. Under your slider behavior you should see a new number variable called "distance between pannels". and all you have to do is edit this number to whatever distance you want between the pannels. now thats out of the way, re-open your first behavior. the one that is attached to the first pannel and make these changes.
--
See Step 6.PNG
remove all the (scene width) blocks, and replace them with your (distance between actors) global variable you created in step 4. just match up what you see in the pic.
--

If its still giving you trouble, I went ahead and upload a game to stencyforge with everything in it working. (horizontal menu scroller). Just make sure to change the "distance between pannels" variable in the 2nd pannel's behavior screen to whatever distance you want.

Nice, it works for 2 actors menu panel.

I modified your slider behavior to enable it for 3 actors menu panel (modification attached).

Thank you very much for your help brantsmith.

Macmowl

sweet bro. glad it worked for yah!

Just FYI

Instead of so many screen shots you can just export the complete behaviour and it will be exported as a PNG with the behaviour code embedded into it.

Just follow the steps in the image below to export. As easy as  1,2,3 

Then in your game just IMPORT the behaviour into your game.

I know that bro, However, that way doesnt actually teach people how to do stuff like this, it just gives it to them. I prefer to teach people how to do it, that way they can turn around and understand completely what is going on.

Very true. Anyway thanks for your explanation and screen dumps. I have already saved them in my Stencyl KB.

Well, I tried to do this tutorial, but somehow doesn't work. Anybody has success slider behavior in this forum? Can you send me please?