Some code I made - VERY basic drag scroll

Games
#1

Might be useful for anyone trying to figure out a simple drag scroll…

[lua]-- Set up variables

local start_x;
local x_move;
local xOffset;

– create new display group to hold the scrolling
– scrollB = scrolling background

local scrollB = display.newGroup();
– Image to use as background
local background = display.newImage(“background.png”);

scrollB:insert(background);

– Scrolling function

local function makeScroll(event)

if(event.phase==“began”) then
– record offset
xOffset = event.x - scrollB.x;

end

scrollB.x = event.x - xOffset;

end

Runtime:addEventListener(“touch”, makeScroll);[/lua]

I’m working on a flick scroll thingie so I’ll post the code for that if I manage to do it. :slight_smile: [import]uid: 55068 topic_id: 10748 reply_id: 310748[/import]

#2

Tom,

Is this used to drag a screen around if the screen is larger than the phone’s current view? [import]uid: 31262 topic_id: 10748 reply_id: 39041[/import]

#3

Hi Aaaron, yes that’s the idea. I’d just on the x at the moment as that’s what I need for a game I’m working on. [import]uid: 55068 topic_id: 10748 reply_id: 39043[/import]

#4

@tom, do a search on code for scrolling posted by many in the forums. Your code is compact but will perform buggy. You will learn about those as you develop more and more.

till then

cheer,

?:slight_smile: [import]uid: 3826 topic_id: 10748 reply_id: 39086[/import]

#5

@jayantv

Here’s my latest code. Tested this on my old ipod 3G and it works like a charm. But I’d like to know why this would perform in a buggy way before I use it on my game? I searched the forum as you mentioned but would like to hear your thoughts. Many thanks for the help!

[lua]-- Hide status bar
display.setStatusBar(display.HiddenStatusBar);

– Set up variables

local screenWidth = display.contentWidth;
local screenHeight = display.contentHeight;
local start_x;
local x_move;
local xOffset;
local scrollVelocity = 0;
local totalScrollMove;
local backgroundWidth = 2500;

– create new display group to hold the scrolling
– scrollB = scrolling background

local scrollB = display.newGroup();
– Image to use as background
local background = display.newImage(“back3.png”);

scrollB:insert(background);
scrollB.width=2500;
scrollB.height = 320;

– Scrolling function

local function makeScroll(event)

if(event.phase==“began”) then

– stop any scrolling
scrollVelocity = 0;
– record offset
xOffset = event.x - scrollB.x;
x_move = 0;
start_x = event.x;
end

– move background group

scrollB.x = event.x - xOffset;

–scroll B was dragged to the right, past boundaries

if(scrollB.x > 50) then
transition.to(scrollB, {x=0, time=500});
end

print(scrollB.x);

if(scrollB.x < (screenWidth - backgroundWidth)) then
scrollB.x = (screenWidth - backgroundWidth);
end

– record total x move, used for flick scroll

if(event.phase == “moved”) then
if(event.x > start_x) then
x_move = event.x - start_x;
start_x = event.x;
direction = “right”;
else
x_move = start_x - event.x;
start_x = event.x;
direction = “left”;
end
end

– when phase ended, apply any velocity

if(event.phase == “ended”) then
scrollVelocity = x_move;
end

end
local function extraScrollMove()

if(direction==“right”) then
scrollB.x = scrollB.x + scrollVelocity;
scrollVelocity = scrollVelocity -2;
if(scrollVelocity < 0) then
scrollVelocity = 0;
end
if(scrollB.x > 0) then
scrollB.x = 0;
scrollVelocity=0;
end
end

if(direction==“left”) then
scrollB.x = scrollB.x - scrollVelocity;
scrollVelocity = scrollVelocity -2;
if(scrollVelocity < 0) then
scrollVelocity = 0;
end
if(scrollB.x < (screenWidth - backgroundWidth)) then
scrollB.x = (screenWidth - backgroundWidth);
scrollVelocity=0;
end

end
end

Runtime:addEventListener(“touch”, makeScroll);
Runtime:addEventListener(“enterFrame”, extraScrollMove);[/lua] [import]uid: 55068 topic_id: 10748 reply_id: 39132[/import]

#6

@tom,

Generally, try to add the following to avoid glitches and issues.

  1. If the touch moves out of the item, it will not provide any more updates, but if you set the focus, you will be able to track the touches on the item

  2. If you are setting touches on multiple items with one routine, try to find if the item that you are moving for is the same as the one that you began with. if you have multiple buttons, and all being handled with the same routine, it can give you strange results, if you start the touch on one and end on the other.

Now, not saying that your code per say is buggy, my point was that be aware of these issues as these can lead to strange things happening.
cheers,

?:slight_smile: [import]uid: 3826 topic_id: 10748 reply_id: 39138[/import]

#7

Thanks Jayantv… much appreciated.

:slight_smile: [import]uid: 55068 topic_id: 10748 reply_id: 39161[/import]