Hi all!
I have a level select that looks like this:
I have it scrolling left to right by pressing the left and right arrows.
But I want users to be able to just swipe left and right. How do I do this?
I checked this out: Corona Level Selection Tutorial >> by Newnam Software
but it only “snaps” to the next one, I was hoping it would have some sort of smooth sliding animation.
How do I do this?
Regards,
John [import]uid: 186198 topic_id: 32670 reply_id: 332670[/import]
Take a look at -
http://docs.coronalabs.com/api/library/widget/newScrollView.html
I currently use this for character select scene in a new game am currently developing.
I created a group for each screen I wanted scrolling, positioned them evenly, so the first group is shown (like your screen shot above) and then others off screen to the side. Then I added all the groups to the ScrollView and viola, it worked.
Dave [import]uid: 117617 topic_id: 32670 reply_id: 129888[/import]
Taking a look at it now.
Do you have an example maybe that I can follow? :S
Thanks for the response!
John [import]uid: 186198 topic_id: 32670 reply_id: 129894[/import]
Take a look at -
http://docs.coronalabs.com/api/library/widget/newScrollView.html
I currently use this for character select scene in a new game am currently developing.
I created a group for each screen I wanted scrolling, positioned them evenly, so the first group is shown (like your screen shot above) and then others off screen to the side. Then I added all the groups to the ScrollView and viola, it worked.
Dave [import]uid: 117617 topic_id: 32670 reply_id: 129888[/import]
This might help you out.
http://developer.coronalabs.com/code/easy-slider-springboard-levelselect-howto [import]uid: 46082 topic_id: 32670 reply_id: 129906[/import]
Taking a look at it now.
Do you have an example maybe that I can follow? :S
Thanks for the response!
John [import]uid: 186198 topic_id: 32670 reply_id: 129894[/import]
This might help you out.
http://developer.coronalabs.com/code/easy-slider-springboard-levelselect-howto [import]uid: 46082 topic_id: 32670 reply_id: 129906[/import]
So I went through a lot of different sliders and decided to make one for myself. Here it is for anyone who needs help:
[lua]local buttonGroup = display.newGroup()
local page = 1
local movingScreen = false
local currentWidth = 0
–Declare a totalButtons variable to track number of buttons on screen
local totalButtons = 0
local buttonTable = {}
–Set starting point for button grid
local grid_id = 1
y = _H/5
– size of squares
local sqr_size = _W / 8
local function backgroundTouch(event)
if (event.phase==“ended”) then
movingScreen=false
end
if (event.phase==“moved” and movingScreen==false) then
local delta = event.xStart - event.x
if (delta < -10 ) then
if (page > 1) then
movingScreen=true
transition.to(buttonGroup, {time = 200, x = currentWidth+ 300})
page = page - 1
currentWidth = currentWidth + 300
end
end
if (delta > 10) then
if (page < 5) then
movingScreen=true
transition.to(buttonGroup, {time = 200, x = currentWidth - 300})
page = page + 1
currentWidth = currentWidth - 300
end
end
end
return true
end
bgColor = display.newRect(0, 0, _W, _H);
bgColor:setFillColor(255,255,255);
bgColor:addEventListener(“touch”,backgroundTouch)
view:insert(bgColor);
– create 5 pages, of 5 x 6 squares each
for i=1,5 do
for count = 1, 6 do
x = _W/5.5
if (i == 2) then
x = _W/5.5 + 300
elseif (i == 3) then
x = _W/5.5 + 600
elseif (i == 4) then
x = _W/5.5 + 900
elseif (i == 5) then
x = _W/5.5 + 1200
end
for insideCount = 1,5 do
–Set a cover to hide the button image
local single_grid = display.newImageRect(“square.png”, sqr_size, sqr_size);
single_grid.x = x;
single_grid.y = y;
single_grid:setReferencePoint(display.CenterReferencePoint);
single_grid.grid_id = grid_id
local label = display.newText(grid_id,0,0,font,20);
label:setTextColor(0,0,0);
label:setReferencePoint( display.CenterReferencePoint )
label.x = x;
label.y = y;
buttonTable[totalButtons] = single_grid
buttonGroup:insert( single_grid )
buttonGroup:insert(label);
totalButtons = totalButtons + 1
view:insert(buttonGroup);
grid_id = grid_id + 1
x = x + 50
end
y = y + 50
end
grid_id = 1
y = _H/5
end[/lua]
Cheers!
John [import]uid: 186198 topic_id: 32670 reply_id: 130006[/import]
So I went through a lot of different sliders and decided to make one for myself. Here it is for anyone who needs help:
[lua]local buttonGroup = display.newGroup()
local page = 1
local movingScreen = false
local currentWidth = 0
–Declare a totalButtons variable to track number of buttons on screen
local totalButtons = 0
local buttonTable = {}
–Set starting point for button grid
local grid_id = 1
y = _H/5
– size of squares
local sqr_size = _W / 8
local function backgroundTouch(event)
if (event.phase==“ended”) then
movingScreen=false
end
if (event.phase==“moved” and movingScreen==false) then
local delta = event.xStart - event.x
if (delta < -10 ) then
if (page > 1) then
movingScreen=true
transition.to(buttonGroup, {time = 200, x = currentWidth+ 300})
page = page - 1
currentWidth = currentWidth + 300
end
end
if (delta > 10) then
if (page < 5) then
movingScreen=true
transition.to(buttonGroup, {time = 200, x = currentWidth - 300})
page = page + 1
currentWidth = currentWidth - 300
end
end
end
return true
end
bgColor = display.newRect(0, 0, _W, _H);
bgColor:setFillColor(255,255,255);
bgColor:addEventListener(“touch”,backgroundTouch)
view:insert(bgColor);
– create 5 pages, of 5 x 6 squares each
for i=1,5 do
for count = 1, 6 do
x = _W/5.5
if (i == 2) then
x = _W/5.5 + 300
elseif (i == 3) then
x = _W/5.5 + 600
elseif (i == 4) then
x = _W/5.5 + 900
elseif (i == 5) then
x = _W/5.5 + 1200
end
for insideCount = 1,5 do
–Set a cover to hide the button image
local single_grid = display.newImageRect(“square.png”, sqr_size, sqr_size);
single_grid.x = x;
single_grid.y = y;
single_grid:setReferencePoint(display.CenterReferencePoint);
single_grid.grid_id = grid_id
local label = display.newText(grid_id,0,0,font,20);
label:setTextColor(0,0,0);
label:setReferencePoint( display.CenterReferencePoint )
label.x = x;
label.y = y;
buttonTable[totalButtons] = single_grid
buttonGroup:insert( single_grid )
buttonGroup:insert(label);
totalButtons = totalButtons + 1
view:insert(buttonGroup);
grid_id = grid_id + 1
x = x + 50
end
y = y + 50
end
grid_id = 1
y = _H/5
end[/lua]
Cheers!
John [import]uid: 186198 topic_id: 32670 reply_id: 130006[/import]