How to create a "Slide by Touch" select screen

rooldacool · September 21, 2012, 10:36am

Hey everyone,

I would appreciate if someone could give me a tutorial on how to create a “slide by touch” level selector screen. So when the user slides his finger, a new screen appears. Thanks for all your help! [import]uid: 175550 topic_id: 31232 reply_id: 331232[/import]

peach_pellen · September 21, 2012, 3:15pm

Take a look at the SlideView sample code, I believe that does what you’re asking [import]uid: 52491 topic_id: 31232 reply_id: 124932[/import]

doubleslashdesign · September 22, 2012, 7:14am

Peach maybe you can expand on this slightly… There is only one issue in this same that I can see.

For some reason when you scroll kind of quickly - the items jump off the screen and I can no longer see the items.

But in any case here is a quick sample on the scrollView widget like Peach said this is the best way to create something like that.

You need to create a mask file 768 x 240 for this sample.

config.lua

application = {  
 content = {  
 width = 768,  
 height = 1024,   
 scale = "letterBox",  
 fps = 30,  
  
 --[[  
 imageSuffix = {  
 ["@2x"] = 2,  
 }  
 --]]  
 },   
}

main.lua

[code]
local widget = require (“widget”)
local _W = display.contentWidth; local _H = display.contentHeight;
local padding = 15;
local amountOfLevels = 3;
local scrollWidthNew = 768;

– function to listen to scrollView events
local function scrollViewListener( event )
local s = event.target – reference to scrollView object

if event.type == “beganScroll” then
print( “beganScroll event type” )

elseif event.type == “endedScroll” then
print( “endedScroll event type” )

elseif event.type == “movingToTopLimit” then
print( “movingToTopLimit event type” )

elseif event.type == “movingToBottomLimit” then
print( “movingToBottomLimit event type” )

elseif event.type == “movingToLeftLimit” then
print( “movingToLeftLimit event type” )

elseif event.type == “movingToRightLimit” then
print( “movingToRightLimit event type” )
end
end
–top = (_H*0.87)+39, width = 768,
local scrollView = widget.newScrollView{
left = 0, top = 50, width = 768, height = 240,
scrollWidth = scrollWidthNew, scrollHeight = 240,
hideBackground = true, maskFile = “mask.png”,
topPadding=30, bottomPadding=30,
listener = scrollViewListener
}

scrollView.content.verticalScrollDisabled = true;

– Create a new ScrollView widget:
– local scrollView = widget.newScrollView{
– width = 320
– height = 320,
– scrollWidth = 768,
– scrollHeight = 1024,
– maskFile=“mask-320x320.png”,
– listener = scrollViewListener
–}
–display.newRoundedRect( [parentGroup,] left, top, width, height, cornerRadius )

local group = display.newGroup()

local bg = display.newRoundedRect(0,0, 768, 1024, 12)
bg:setFillColor(111, 222, 140); bg:setStrokeColor(180, 180, 180)

group:insert( bg )

local myRoundedRect = display.newRoundedRect(0,0, 210, 150, 12)
myRoundedRect.strokeWidth = 3; myRoundedRect:setFillColor(140, 140, 140); myRoundedRect:setStrokeColor(180, 180, 180)

local myRoundedRect2 = display.newRoundedRect(0, 0, 210, 150, 12)
myRoundedRect2.strokeWidth = 3; myRoundedRect2:setFillColor(140, 140, 140); myRoundedRect2:setStrokeColor(180, 180, 180)

local myRoundedRect3 = display.newRoundedRect(0, 0, 210, 150, 12)
myRoundedRect3.strokeWidth = 3; myRoundedRect3:setFillColor(140, 140, 140); myRoundedRect3:setStrokeColor(180, 180, 180)

myRoundedRect.x=display.contentCenterX; myRoundedRect.y=myRoundedRect.y + padding;
myRoundedRect2.x=myRoundedRect.x + myRoundedRect.width + 10; myRoundedRect2.y=myRoundedRect2.y + padding;
myRoundedRect3.x=myRoundedRect2.x + myRoundedRect2.width + 10; myRoundedRect3.y=myRoundedRect3.y + padding;

scrollView:insert(myRoundedRect)
scrollView:insert(myRoundedRect2)
scrollView:insert(myRoundedRect3)

group:insert(scrollView)
[/code] [import]uid: 11860 topic_id: 31232 reply_id: 124982[/import]

rooldacool · September 22, 2012, 3:04pm

Thanks so much! [import]uid: 175550 topic_id: 31232 reply_id: 125003[/import]

peach_pellen · September 21, 2012, 3:15pm