Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Autoscroll text from bottom up
Started by IndieEnthusiast Feb 05 2019 03:46 AM

- - - - -
8 replies to this topic
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 213 posts
  • Corona SDK

  • 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?


[TOPIC: post.html]
#2

anaqim

[GLOBAL: userInfoPane.html]
anaqim
  • Contributor

  • 726 posts
  • Corona SDK

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.



[TOPIC: post.html]
#3

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 213 posts
  • Corona SDK

Is there any example code I can look into?



[TOPIC: post.html]
#4

anaqim

[GLOBAL: userInfoPane.html]
anaqim
  • Contributor

  • 726 posts
  • Corona SDK

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.



[TOPIC: post.html]
#5

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 213 posts
  • Corona SDK

I got some idea from watching 
 
-- 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 )


[TOPIC: post.html]
#6

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 213 posts
  • Corona SDK

Since I did not want a looping text to come up vertically, I removed the event listener in the if statement



[TOPIC: post.html]
#7

XeduR @Spyric

[GLOBAL: userInfoPane.html]
XeduR @Spyric
  • Contributor

  • 524 posts
  • Corona SDK

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.


  • IndieEnthusiast likes this

[TOPIC: post.html]
#8

IndieEnthusiast

[GLOBAL: userInfoPane.html]
IndieEnthusiast
  • Contributor

  • 213 posts
  • Corona SDK

Thats an interesting addition :), I will try to implement it!



[TOPIC: post.html]
#9

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,243 posts
  • Enterprise

This isn't too difficult.

 

1. Create a display.newGroup() and position it off the bottom of the screen or where you want the credits to start.

2. Create display.newText() objects for each line of your scrolling credits and insert it into the group, positioning accordingly.

3. 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.

4. 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.


  • IndieEnthusiast likes this


[topic_controls]
[/topic_controls]