- Can anyone please help me out with autoscroll
- In the credit section of my game I want to add auto scroll where the text moves from bottom to upwards automatically until ‘The End’ comes
- I have found some info with scrolling when touching screen but not autoscroll, anyone?
you can easily write a function for that yourself using simple logic.
create an array of display objects that fade in alpha at a high y value and out again on a low.
Is there any example code I can look into?
unfortunately, i dont have one easily available as im still reinstalling my rig, but one way is for example:
store your text in an array
loop through it and create display objects where each new line is positioned below the next, starting at y value just off screen.
it doesnt matter that all of it is located go off screen as there is little resource cost to it.
set all to alpha 0
then in the “enterFrame” event, loop through all objects and move them 1 (or 2 if you want it to move faster) pixels upward.
add to the logic that once an object should be visible, you fade the object in, either by using transition, or per y-value maths if you prefer.
also add a second condition that when y value is about to pass the top of the scree, start the fade out.
thats all there is.
yes you can do it more dynamic by creating new objects just before they enter screen, and remove them when they go off screen, but the consept is the same.
hope that makes any sense.
I got some idea from watching https://www.youtube.com/watch?v=YTMmfqwnw_E
– Adding as it may come useful to some :
–Hide status bar from the beginning
display.setStatusBar( display.HiddenStatusBar )
– Set Variables
_W = display.contentWidth; – Get the width of the screen
_H = display.contentHeight; – Get the height of the screen
scrollSpeed = 2; – Set Scroll Speed of background
– Add First Background
local bg1 = display.newText( “Hello World!”, 100, 0, native.systemFont, 16 )
local function move(event)
– move backgrounds to the left by scrollSpeed, default is 2
bg1.y = bg1.y + scrollSpeed
– Set up listeners so when backgrounds hits a certain point off the screen,
– move the background to the right off screen
if (bg1.y + bg1.contentWidth) > _H + 250 then
print(“out of screen”)
Runtime:removeEventListener(“enterFrame”, move )
end
end
– Create a runtime event to move backgrounds
Runtime:addEventListener( “enterFrame”, move )
Since I did not want a looping text to come up vertically, I removed the event listener in the if statement
Since we are talking about a rolling credits screen in an app, you may also want to include a touch event listener where the user can manually stop and scroll the credits as they see fit. Then, if the user lets go, simply resume the scroll again.
Thats an interesting addition :), I will try to implement it!
This isn’t too difficult.
-
Create a display.newGroup() and position it off the bottom of the screen or where you want the credits to start.
-
Create display.newText() objects for each line of your scrolling credits and insert it into the group, positioning accordingly.
-
Add a transition.to() that moves the display.newGroup() up the screen. You can use an onComplete function to handle whatever you want to do when the credits finish.
-
Optionally use a graphics.newMask() to make it so it doesn’t have to start at the very bottom of the screen. You might be able to have some grays in the mask to provide a fadeIn/fadeOut at the top and bottom as the display group moves under the mask.
you can easily write a function for that yourself using simple logic.
create an array of display objects that fade in alpha at a high y value and out again on a low.
Is there any example code I can look into?
unfortunately, i dont have one easily available as im still reinstalling my rig, but one way is for example:
store your text in an array
loop through it and create display objects where each new line is positioned below the next, starting at y value just off screen.
it doesnt matter that all of it is located go off screen as there is little resource cost to it.
set all to alpha 0
then in the “enterFrame” event, loop through all objects and move them 1 (or 2 if you want it to move faster) pixels upward.
add to the logic that once an object should be visible, you fade the object in, either by using transition, or per y-value maths if you prefer.
also add a second condition that when y value is about to pass the top of the scree, start the fade out.
thats all there is.
yes you can do it more dynamic by creating new objects just before they enter screen, and remove them when they go off screen, but the consept is the same.
hope that makes any sense.
I got some idea from watching https://www.youtube.com/watch?v=YTMmfqwnw_E
– Adding as it may come useful to some :
–Hide status bar from the beginning
display.setStatusBar( display.HiddenStatusBar )
– Set Variables
_W = display.contentWidth; – Get the width of the screen
_H = display.contentHeight; – Get the height of the screen
scrollSpeed = 2; – Set Scroll Speed of background
– Add First Background
local bg1 = display.newText( “Hello World!”, 100, 0, native.systemFont, 16 )
local function move(event)
– move backgrounds to the left by scrollSpeed, default is 2
bg1.y = bg1.y + scrollSpeed
– Set up listeners so when backgrounds hits a certain point off the screen,
– move the background to the right off screen
if (bg1.y + bg1.contentWidth) > _H + 250 then
print(“out of screen”)
Runtime:removeEventListener(“enterFrame”, move )
end
end
– Create a runtime event to move backgrounds
Runtime:addEventListener( “enterFrame”, move )
Since I did not want a looping text to come up vertically, I removed the event listener in the if statement
Since we are talking about a rolling credits screen in an app, you may also want to include a touch event listener where the user can manually stop and scroll the credits as they see fit. Then, if the user lets go, simply resume the scroll again.
Thats an interesting addition :), I will try to implement it!
This isn’t too difficult.
-
Create a display.newGroup() and position it off the bottom of the screen or where you want the credits to start.
-
Create display.newText() objects for each line of your scrolling credits and insert it into the group, positioning accordingly.
-
Add a transition.to() that moves the display.newGroup() up the screen. You can use an onComplete function to handle whatever you want to do when the credits finish.
-
Optionally use a graphics.newMask() to make it so it doesn’t have to start at the very bottom of the screen. You might be able to have some grays in the mask to provide a fadeIn/fadeOut at the top and bottom as the display group moves under the mask.