Just the other day I needed to create a "swipeable menu" for my next Corona SDK game called Ice Trap, where I want the player to be able to swipe left/right to select among a number of chapters in the level selection scene.
Basically, what I wanted to achieve was this:
1. Have a number of display groups, each one representing one of my game's chapters
2. Only one chapter (display group) visible at the screen at a time
3. Allow for the user to swipe left/right to select chapter
4. Prevent swiping too far left or right
5. Use transition effects to slide the chapters into place nicely
6. Display a clickable thumbnail for each chapter, allowing the user to quick jump to any one chapter. Also highlight the currently selected chapter
Here's a simple sketch of the idea:
After scanning the Internet for half an hour or so I still hadn't found a complete solution for this, so I decided to roll my own instead. What I did find was this small tutorial from Corona Labs describing how to recognize swipe gestures to move objects to fixed places. Not exactly what I was looking for, but it provided me with some nice input so I could get a jump start on my little project.
I won't go through the implementation process in detail, but the main steps I did was this:
1. Wrap up the handling of the swipeable objects in a reusable module which I decided to call slideshow. Maybe not a totally accurate name, but good enough.
2. Make it possible to inject the swipeable objects into the slideshow module
3. Make the slideshow module customizable with some parameters, for example to handle swipe sensitivity, transition effects and vertical position
4. Create the thumbnails outside of the slideshow module, and instead use callbacks from the slideshow module to update them
This is what is looks like when used in the game. Each chapter is its own display group, created separately and injected into the slideshow module.
To test and demonstrate all this I created a simple example, and this is what the example looks like when run in the simulator. Note that colors are randomized.
And here's the full source code for both the slideshow module as well as the example:
Basically, what I wanted to achieve was this:
1. Have a number of display groups, each one representing one of my game's chapters
2. Only one chapter (display group) visible at the screen at a time
3. Allow for the user to swipe left/right to select chapter
4. Prevent swiping too far left or right
5. Use transition effects to slide the chapters into place nicely
6. Display a clickable thumbnail for each chapter, allowing the user to quick jump to any one chapter. Also highlight the currently selected chapter
Here's a simple sketch of the idea:
After scanning the Internet for half an hour or so I still hadn't found a complete solution for this, so I decided to roll my own instead. What I did find was this small tutorial from Corona Labs describing how to recognize swipe gestures to move objects to fixed places. Not exactly what I was looking for, but it provided me with some nice input so I could get a jump start on my little project.
I won't go through the implementation process in detail, but the main steps I did was this:
1. Wrap up the handling of the swipeable objects in a reusable module which I decided to call slideshow. Maybe not a totally accurate name, but good enough.
2. Make it possible to inject the swipeable objects into the slideshow module
3. Make the slideshow module customizable with some parameters, for example to handle swipe sensitivity, transition effects and vertical position
4. Create the thumbnails outside of the slideshow module, and instead use callbacks from the slideshow module to update them
This is what is looks like when used in the game. Each chapter is its own display group, created separately and injected into the slideshow module.
To test and demonstrate all this I created a simple example, and this is what the example looks like when run in the simulator. Note that colors are randomized.
And here's the full source code for both the slideshow module as well as the example:
This is just what I was looking for! Thank you so much! I have just one question. I noticed that the circles only change when you press and drag the circle itself. I wondered if it would be possible to make the circles change when you swipe anywhere on the screen. I tried to do this using a rectangle and an eventListener but no luck. I'm really struggling on this since I'm not really familiar with Corona SDK yet. If this is possible could you tell me how? Any advice would be deeply appreciated. Thanks :)))
ReplyDelete-John
Hi John, glad to hear that you liked my blog post. :-)
DeleteIf I understand you correctly you can do this by adding an invisible rectangle that spans the entire screen to each display group passed into slideshow.init(). Just make sure to set isHitTestable=true to be able to catch touch events for invisible objects.
In my example code, try adding the following four lines of code to createSlideshowObjects(). Note that it's important to insert the rectangle into the group _after_ the circle because of how the thumbnails are created in my example.
group:insert(circle)
-- BEGIN NEW CODE
local bg = display.newRect(0, 0, display.contentWidth, display.contentHeight) bg.isVisible = false
bg.isHitTestable = true
group:insert(bg)
-- END NEW CODE
objects[#objects + 1] = group
Markus, I cannot thank you enough for this !!! My app now looks a million times better! :)) By the way, I love the way your blog/website looks! Extremely aesthetic
DeleteThanks! And you're welcome, I'm just happy to be able help out a fellow Corona dev in need! :-)
Delete