Auto Scrolling Container Control
by Robert Geiman · 10/31/2005 (2:00 pm) · 22 comments
Download Code File
Description
The auto scroll container control (GuiAutoScrollCtrl) is similar to the scroll container control in Torque (GuiScrollCtlr) in that you can place into it a child control larger than the container itself, and the container will scroll to show the entire child control. How GuiAutoScrollCtrl differs, though, is that it contains no scrollbars. Instead you specify a scrolling direction and speed, and the control automatically scrolls for you.
This control can be especially useful for displaying a scrolling screen of credits or a scrolling information ticker.
Installation Instructions
1) Place the guiAutoScrollCtrl.cc/guiAutoScrollCtrl.h files, and optionally the guiStaticMLTextCtrl.cc/guiStaticMLTextCtrl.h files, in the proper folders as described below, include them in your project, and recompile Torque.
File placement for TGE 1.4
Place the guiAutoScrollCtrl.cc/guiAutoScrollCtrl.h files in the TGE 1.4 directory of the zip file in the engine\gui\containers folder. Two optional files that you can also install are guiStaticMLTextCtrl.cc/guiStaticMLTextCtrl.h, which just implement a static (non interactive) version of the guiMLTextCtrl to ensure users can't highlight scrolling text (useful in a credits dialog). If you decide to install these two optional files, they should be placed in the engine\gui\controls folder.
File placement for TGE 1.3
Place the guiAutoScrollCtrl.cc/guiAutoScrollCtrl.h files in the TGE 1.3 directory of the zip file in the engine\gui folder. Two optional files that you can also install are guiStaticMLTextCtrl.cc/guiStaticMLTextCtrl.h, which just implement a static (non interactive) version of the guiMLTextCtrl to ensure users can't highlight scrolling text (useful in a credits dialog). If you decide to install these two optional files, they should also be placed in the engine\gui folder.
2) Add a new control profile for the GuiAutoScrollCtrl class in your client\ui\customProfile.cs file:
Features of GuiAutoScrollCtrl
* Ability to specify scrolling interval (in milliseconds)
* Ability to specify scrolling delta (number of pixels to scroll) at each interval
* Ability to scroll in any direction (up, down, left, right, or diagnal)
* Ability to scroll once or repeat scrolling infinately
* Ability to turn scrolling on/off
Note that all features can be set automatically from within the GUI editor or dynamically via script.
Supported TorqueScript GuiAutoScrollCtrl Functions
void enableScrolling(true/false);
void enableHorizontalScrolling(true/false);
void enableVerticalScrolling(true/false);
bool isScrolling();
bool isScrolledToTop();
bool isScrolledToBottom();
bool isScrolledToLeftSide();
bool isScrolledToRightSide();
void setVerticalScrollDirection(0/1);
void setHorizontalScrollDirection(0/1);
void setScrollInterval(ms);
void setScrollDelta(pixels);
void repeatScroll(true/false);
void scrollToTop();
void scrollToBottom();
void scrollToLeftSide();
void scrollToRightSide();
void scrollTo(xpos, ypos);
Enjoy!
Update
* Added Pat Wilson's texture array fix
Description
The auto scroll container control (GuiAutoScrollCtrl) is similar to the scroll container control in Torque (GuiScrollCtlr) in that you can place into it a child control larger than the container itself, and the container will scroll to show the entire child control. How GuiAutoScrollCtrl differs, though, is that it contains no scrollbars. Instead you specify a scrolling direction and speed, and the control automatically scrolls for you.
This control can be especially useful for displaying a scrolling screen of credits or a scrolling information ticker.
Installation Instructions
1) Place the guiAutoScrollCtrl.cc/guiAutoScrollCtrl.h files, and optionally the guiStaticMLTextCtrl.cc/guiStaticMLTextCtrl.h files, in the proper folders as described below, include them in your project, and recompile Torque.
File placement for TGE 1.4
Place the guiAutoScrollCtrl.cc/guiAutoScrollCtrl.h files in the TGE 1.4 directory of the zip file in the engine\gui\containers folder. Two optional files that you can also install are guiStaticMLTextCtrl.cc/guiStaticMLTextCtrl.h, which just implement a static (non interactive) version of the guiMLTextCtrl to ensure users can't highlight scrolling text (useful in a credits dialog). If you decide to install these two optional files, they should be placed in the engine\gui\controls folder.
File placement for TGE 1.3
Place the guiAutoScrollCtrl.cc/guiAutoScrollCtrl.h files in the TGE 1.3 directory of the zip file in the engine\gui folder. Two optional files that you can also install are guiStaticMLTextCtrl.cc/guiStaticMLTextCtrl.h, which just implement a static (non interactive) version of the guiMLTextCtrl to ensure users can't highlight scrolling text (useful in a credits dialog). If you decide to install these two optional files, they should also be placed in the engine\gui folder.
2) Add a new control profile for the GuiAutoScrollCtrl class in your client\ui\customProfile.cs file:
new GuiControlProfile (GuiAutoScrollProfile)
{
opaque = true;
fillColor = "255 255 255";
border = 3;
borderThickness = 2;
borderColor = "0 0 0";
bitmap = "./demoScroll";
hasBitmapArray = true;
};3) Simply add a GuiAutoScrollCtrl control to your GUI via the GUI editor and place your text, bitmap, or any other control inside and watch it scroll.Features of GuiAutoScrollCtrl
* Ability to specify scrolling interval (in milliseconds)
* Ability to specify scrolling delta (number of pixels to scroll) at each interval
* Ability to scroll in any direction (up, down, left, right, or diagnal)
* Ability to scroll once or repeat scrolling infinately
* Ability to turn scrolling on/off
Note that all features can be set automatically from within the GUI editor or dynamically via script.
Supported TorqueScript GuiAutoScrollCtrl Functions
void enableScrolling(true/false);
void enableHorizontalScrolling(true/false);
void enableVerticalScrolling(true/false);
bool isScrolling();
bool isScrolledToTop();
bool isScrolledToBottom();
bool isScrolledToLeftSide();
bool isScrolledToRightSide();
void setVerticalScrollDirection(0/1);
void setHorizontalScrollDirection(0/1);
void setScrollInterval(ms);
void setScrollDelta(pixels);
void repeatScroll(true/false);
void scrollToTop();
void scrollToBottom();
void scrollToLeftSide();
void scrollToRightSide();
void scrollTo(xpos, ypos);
Enjoy!
Update
* Added Pat Wilson's texture array fix
#3
11/07/2005 (9:58 am)
Pretty helpful, Thanks :]
#4
11/18/2005 (3:18 pm)
#5
Only trouble seems to be getting the GUI editor to allow me to edit a long credits page. :-)
11/21/2005 (3:51 pm)
Cool resource, thanks.Only trouble seems to be getting the GUI editor to allow me to edit a long credits page. :-)
#6
* Jason, the easiest way to edit scrolling text in the editor is to select the text control via the upper right GUI tree window, rather than trying to click on the text as it scrolls by. Another option would be to select the parent GuiAutoScroll control and uncheck the enableScrolling option.
Of course, you're really better off using a seperate .hfl file to store all the text, then you don't even need to go into the GUI editor to modify the text. Take a look at the starter.fps and how the credits, about, game controls text are being loaded dynamically from .hfl files located in the client\ui directory.
11/21/2005 (4:03 pm)
* I'm glad you guys are finding it useful.* Jason, the easiest way to edit scrolling text in the editor is to select the text control via the upper right GUI tree window, rather than trying to click on the text as it scrolls by. Another option would be to select the parent GuiAutoScroll control and uncheck the enableScrolling option.
Of course, you're really better off using a seperate .hfl file to store all the text, then you don't even need to go into the GUI editor to modify the text. Take a look at the starter.fps and how the credits, about, game controls text are being loaded dynamically from .hfl files located in the client\ui directory.
#7
11/23/2005 (11:43 am)
FYI: I just updated this resource to work with TGE 1.4, as well as TGE 1.3. I've updated the installation instructions in the resource to reflect the different instructions to install on both versions. 
#8
onWake needs to not assume there is a texture array, so do:
11/28/2005 (11:09 pm)
This found its way into Marble Blast Ultra...albiet a bit hacked up. This came at the perfect time. One fix...onWake needs to not assume there is a texture array, so do:
if( mTextureHandle )
{
mTextureHandle.setFilterNearest();
...
mBitmapBounds = mProfile->mBitmapArrayRects.address();
}
#9
I've updated the resource ZIP file for both TGE 1.3 and TGE 1.4 with your fix.
11/29/2005 (6:10 am)
Pat, thanks for the fix!I've updated the resource ZIP file for both TGE 1.3 and TGE 1.4 with your fix.
#10
06/16/2006 (11:46 am)
Is there a way to restart the scrolling rather than have it continue from where it left off when waking the GUI?
#11
void scrollToTop();
void scrollToBottom();
void scrollToLeftSide();
void scrollToRightSide();
void scrollTo(xpos, ypos);
So you'll need to just call one of these functions in the OnWake script to restart scrolling at the specified position.
06/16/2006 (1:46 pm)
C2, this resouce contains functions to manually set the position of the scrolling controls. They are called:void scrollToTop();
void scrollToBottom();
void scrollToLeftSide();
void scrollToRightSide();
void scrollTo(xpos, ypos);
So you'll need to just call one of these functions in the OnWake script to restart scrolling at the specified position.
#12
06/16/2006 (2:26 pm)
Figured I could just set the position like that; just wondered if there was a master "restartScroll" command that existed. Thanks. :)
#13
FYI to simulate a proper wrapping scrolling background using this container do the following trick: Load your scrolling container up with the bitmap. Duplicate the container with the same bitmap. Now you have two scrollers in your GUI. In the OnWake for the first scroller, simply %this.scrollTo(0,0);
That call will place your first scrolling bitmap so that it covers the entire screen, the second one will automatically follow and thus result in the continuity thats required.
06/17/2006 (6:14 am)
Great resource thanks! FYI to simulate a proper wrapping scrolling background using this container do the following trick: Load your scrolling container up with the bitmap. Duplicate the container with the same bitmap. Now you have two scrollers in your GUI. In the OnWake for the first scroller, simply %this.scrollTo(0,0);
That call will place your first scrolling bitmap so that it covers the entire screen, the second one will automatically follow and thus result in the continuity thats required.
#14
I needed a scrolling background this morning, I checked online, and found that you guys had thoughtfully laid out all the information I needed. Too cool. =D
06/17/2006 (6:44 am)
Whoa. Jenny, are you monitoring my computer?I needed a scrolling background this morning, I checked online, and found that you guys had thoughtfully laid out all the information I needed. Too cool. =D
#15
06/20/2006 (7:41 pm)
I just use a very long bitmap and have it scroll up. :)
#16
06/22/2006 (2:59 pm)
Edit: Nevermind, got it converted to TSE. :) 
#18
12/19/2007 (8:48 am)
Great resource
#19
12/20/2007 (9:31 am)
One question: the credits for my game is a black background and white text but there doesn't seem to be a way to make the background black for the first screen since the image starts at the very bottom of the screen then scrolls up. Is there a way to have the image start at the top of the screen or to change the background color from white to black?
#20
1) You can use the scrollTo(xpos, ypos) function to set the starting position of the image. You could also add a second image before your credits image and set this to the top of the container. This way your credits will still start at the bottom but you have a black screen to start. The black image should then wrap below your credits screen to give you black space after your credits as well.
2) You could simply put a black image BELOW the container. Don't put the image INSIDE the container, instead just move the container, place the black image in the same dimensions as the container, then drag the container on top of the black image.
Let me know if that works for ya!
12/20/2007 (10:21 am)
Robert, you'll have to excuse me because I just recently upgraded my PC and haven't installed the Torque yet, so I can't test this out... but here are a couple possible solutions:1) You can use the scrollTo(xpos, ypos) function to set the starting position of the image. You could also add a second image before your credits image and set this to the top of the container. This way your credits will still start at the bottom but you have a black screen to start. The black image should then wrap below your credits screen to give you black space after your credits as well.
2) You could simply put a black image BELOW the container. Don't put the image INSIDE the container, instead just move the container, place the black image in the same dimensions as the container, then drag the container on top of the black image.
Let me know if that works for ya!
Torque Owner Mark Berry
Cheers mate.