Hi all, I am developing a educational game program using Corona.In my Game’s Main Menu,I need to swipe the game selection image buttons in order to select a game.Do I need to use Slide View or Scroll view in order to swipe (left or right directions (sideways))?I am not sure which one I need to use.I attached my Game Menu image.Please have a look and advise me.
Hi @apple_id7,
Do you want the options in the slide menu to move a specific distance, or be a free-form slide? Meaning, if the user “flicks” either left or right, should the “carousel” of games move to the next option? OR, can the user just free-form move the carousel slides left and right?
I assume it’s the first option… or at least, that’s how I’d expect it to work if I were the end user of this game.
If that’s the goal, you shouldn’t use ScrollView. Instead, you should build a custom “flick” detection on each window (English Games or Math Games) and place each carousel behind its own separate bitmap mask.
You can see how to use bitmap masks in the Corona Sample project here:
Corona SDK (your local application directory) > SampleCode > Graphics > X-ray
And then, for building the “flick” detection, you can program it yourself, or look in the Corona Code Exchange for working samples… there should be a few floating around in there:
http://developer.coronalabs.com/code/
Hope this helps,
Brent
P.S. - I removed your other post on this topic, since it’s essentially the same (and in the same sub-forum). Thanks for understanding.
Hi Brent,
Could you explain more clear?
(1) how to use separate Bitmap mask for the options in the slide menu?
(2) May I know Flick Detection is for detecting the swipe direction or not?
Best Regards,
John (apple_id7)
Hi all,
Please help me. I really need to know it.Thank you in advance.
Best Regards,
apple_id7
Hi John,
Basically, you need to set up 2 display groups for each of your main categories (English or Math). Then you need to apply a bitmap mask to each group… the mask should reveal only the “window” portion of the house. To apply a mask to a group, it looks basically like this:
[lua]
local catGroup1 = display.newGroup()
local menuItem1 = display.newImage( catGroup1, “game1.png” ) – create image and add to group
local mask = graphics.newMask(“windowMask.png”)
catGroup1:setMask( mask )
catGroup1.maskX = 200
catGroup1.maskY = 400
[/lua]
With that, you can put any number of images behind the mask, and you can move/slide them behind the window. The only visible part will be behind the house window.
Be very careful how you build the mask. You must obey certain rules, or the mask will not appear/function properly. All of these details are specified in the following document… most important being the size of the mask (dimensions divisible by 4, and at least 3 pixels border all around). Also, do not make the “visible” parts of the mask “transparent” in the image file, but rather white.
http://docs.coronalabs.com/api/library/graphics/newMask.html
As for the motion “flick”, you’ll need to work on this separately, as it’s a bit too complicated to discuss in a forum post. Some time ago, I built a menu browser that’s like iOS and added it to the Code Exchange, but I haven’t updated it in a long time. It should still work, but I just don’t have time to maintain it or improve it. However, it does have the “flick” functionality built in… and you can use that if you wish.
http://developer.coronalabs.com/code/enhanced-springboard-slidephoto-viewer
Best regards,
Brent
Hi @apple_id7,
Do you want the options in the slide menu to move a specific distance, or be a free-form slide? Meaning, if the user “flicks” either left or right, should the “carousel” of games move to the next option? OR, can the user just free-form move the carousel slides left and right?
I assume it’s the first option… or at least, that’s how I’d expect it to work if I were the end user of this game.
If that’s the goal, you shouldn’t use ScrollView. Instead, you should build a custom “flick” detection on each window (English Games or Math Games) and place each carousel behind its own separate bitmap mask.
You can see how to use bitmap masks in the Corona Sample project here:
Corona SDK (your local application directory) > SampleCode > Graphics > X-ray
And then, for building the “flick” detection, you can program it yourself, or look in the Corona Code Exchange for working samples… there should be a few floating around in there:
http://developer.coronalabs.com/code/
Hope this helps,
Brent
P.S. - I removed your other post on this topic, since it’s essentially the same (and in the same sub-forum). Thanks for understanding.
Hi Brent,
Could you explain more clear?
(1) how to use separate Bitmap mask for the options in the slide menu?
(2) May I know Flick Detection is for detecting the swipe direction or not?
Best Regards,
John (apple_id7)
Hi all,
Please help me. I really need to know it.Thank you in advance.
Best Regards,
apple_id7
Hi John,
Basically, you need to set up 2 display groups for each of your main categories (English or Math). Then you need to apply a bitmap mask to each group… the mask should reveal only the “window” portion of the house. To apply a mask to a group, it looks basically like this:
[lua]
local catGroup1 = display.newGroup()
local menuItem1 = display.newImage( catGroup1, “game1.png” ) – create image and add to group
local mask = graphics.newMask(“windowMask.png”)
catGroup1:setMask( mask )
catGroup1.maskX = 200
catGroup1.maskY = 400
[/lua]
With that, you can put any number of images behind the mask, and you can move/slide them behind the window. The only visible part will be behind the house window.
Be very careful how you build the mask. You must obey certain rules, or the mask will not appear/function properly. All of these details are specified in the following document… most important being the size of the mask (dimensions divisible by 4, and at least 3 pixels border all around). Also, do not make the “visible” parts of the mask “transparent” in the image file, but rather white.
http://docs.coronalabs.com/api/library/graphics/newMask.html
As for the motion “flick”, you’ll need to work on this separately, as it’s a bit too complicated to discuss in a forum post. Some time ago, I built a menu browser that’s like iOS and added it to the Code Exchange, but I haven’t updated it in a long time. It should still work, but I just don’t have time to maintain it or improve it. However, it does have the “flick” functionality built in… and you can use that if you wish.
http://developer.coronalabs.com/code/enhanced-springboard-slidephoto-viewer
Best regards,
Brent