How is Scrolling done?
Opening a Viewport
Scrolling a Viewport
Closing a Viewport
Scrolling and Sprites

How is Scrolling done?
In TNT Basic scrolling is done by using something called viewports.  A viewport is basically a 'portal' to another canvas.  When a viewport is created on screen, instead of being able to see the screen, you can see through to the canvas it points to.  This 'portal' can be moved around the canvas and therefore can create the effect of scrolling view.

Opening a Viewport
In order to open a viewport, you first have to open a canvas using the command Open Canvas.

Open Canvas 1,1000,1000

This opens canvas 1 with a width of 1000 and a height of 1000.  The reason this canvas is so big is because we are going to need to scroll around it.  Conceptually, this is what we are going to do...

We are creating a big canvas in the background.  Later, we will create a viewport which is only a small portion of this canvas.  We will be able to draw to the canvas, and these drawings will be visible on screen because the user will be able to 'see-through' the viewport to the canvas it points to.  We will also be able to move the viewport around the canvas by changing its x and y offsets, this will create the effect of scrolling. A viewport can be opened using the command Open Canvas.

Open Viewport 1,0,0 to 500,480

This opens a viewport to canvas 1.  The viewport starts from the top left corner of the screen (0,0) and is 500 pixels wide and 480 pixels high.

Scrolling a Viewport
Once a viewport has been created, it can be scrolled around simply by changing its x and y offsets.

int x=0
while not Mouse Button


  ' Check we do not scroll off the side of the canvas
   if x+Viewport Width (1) > 1000
      x=1000-Viewport Width (1)
  end if

   Set Viewport Offset 1,x,0

   Draw Frame


This program scrolls the viewport from left to right.

Note: We have to check that we do not go off the sides of the canvas.  If we do TNT Basic will return an error.  In order to do this we get the right edge of the viewport (x+Viewport Width) and check that it is not greater than the right of the canvas (1000).  If it is then we need to move the viewport to be entirely in the canvas.

Closing a Viewport
When you have finished with the viewport, it can be closed by calling the command Close Viewport.

Close Viewport 1

This closes the viewport that leads to canvas 1.  In most cases, you will also need to close the canvas that it was pointing to using the command Close Canvas.

Close Canvas 1

This closes the background canvas.

Scrolling and Sprites
Sprites can be placed into different canvases.  If a sprite is placed into a canvas it is drawn in the viewport and can be scrolled over just like the rest of the canvas.

Sprites in canvas 0 appear over all of the viewports.  This is useful for having objects that can be moved around all of the screen (e.g. mouse cursor, interface stuff).  Anything that you want to move around all the screen can be put into canvas 0.

Table of contents