How do I make an accordion menu?

How do make an accordion menu?

I hope the picture can help what I need!

shirokuma

Do you have any idea?

Mazdakfx

I'm just about to head to work so I can't try this out, but off hand I would say set up the triangle with an on touch that changes the height of the sprite underneath it as well as the Y position of the sprites below it. You probably want to set the origin of the of the menu sprites to the top so that when you adjust their height they grow down only.

I hope that made sense. If you don't get it worked out beforehand I play with it when I get home tonight.

What if it have some sprite pin on it and shows when height changes?!

That has possibilities. Or here is a start on my idea.

shirokuma

Thank you, I did that already!

But it's not what i meant. Actually I want something like "Jetpack Joyride" menu.

https://itunes.apple.com/en/app/jetpack-joyride/id457446957?mt=8[/code:pwhx2bnq]
I made first and second layout but the 3rd one is accordion menu and it also need swap when it's longer than screen.

I played Jetpack Joyride a little, but I'm not sure which menu you are referring to. Is it the store menu?

sure, store menu when you choosing Clothes, Jetpack,... then you going next layout, That is the menu what I'm looking for!

Okay, give this a try.

Something like that, but it has to be a better way!

Buy sprite is invisible but still is touchable!

I know you are working right now and I don't want to bother you, lets do it after work!

I thought I had taken care of the buy button being touchable. It didn't seem like it was in Chrome. In this version I set the buy button sprite to a scale of 0 when the menu item isn't active.

BTW: I'm just making a GUI for an iPhone app at work today, so it's nice to get away from that from time to time.

May I ask why did you use 9-patch instead of sprite?

If you use a sprite when you change the size you can get some pixel smearing/tearing. (So it can look blurry) With the 9-patch (9-slice) the outer border pixels (# set by you) stay the same and the inner pixels are repeated.

Not only does it make the graphic look crisper when scaled it allows you to keep your file size down. So if you just wanted a solid color rectangle you could create a 3px by 3px 9-patch and scale it up to any size in app with no loss in quality, but the server only had to deliver a 3px by 3px image.

What if I want to use image or animation for menu?

One more thing! If there is 20 menu items, do We have to set events for them one by one? Isn't there any short way?!