Scrolling sprites

Description

Many games may require the ability to scroll the screen. AppGameKit Studio assists with this process by providing a few simple commands to easily and efficiently scroll the screen. This example will show the following:

a football pitch displayed on screen
the view being scrolled in different directions
a sprite displayed on screen that is not affected by scrolling

External media

This example program relies on several images:

pitch_top.jpg

goals_logo.png

pitch_bottom.jpg

Overview

The process involved is as follows:

load images for the pitch and create sprites
load an image and create a sprite that is fixed to the screen

Within the main loop:

adjust the view offset to perform scrolling

Creating our pitch

This example has two external images - pitch_top.jpg and pitch_bottom.jpg. As the names suggests one image contains the top of the pitch, while the other image contains the bottom half of the pitch. Both of these images are loaded, sprites are created and finally they are positioned to align correctly:

LoadImage ( 1, "pitch_top.jpg" )
LoadImage ( 2, "pitch_bottom.jpg" )


CreateSprite ( 1, 1 )
CreateSprite ( 2, 2 )


SetSpritePosition ( 1, 0, 0 )
SetSpritePosition ( 2, 0, 593 )

agk::LoadImage ( 1, "pitch_top.jpg" );
agk::LoadImage ( 2, "pitch_bottom.jpg" );


agk::CreateSprite ( 1, 1 );
agk::CreateSprite ( 2, 2 );


agk::SetSpritePosition ( 1, 0, 0 );
agk::SetSpritePosition ( 2, 0, 593 );

Create a fixed sprite

Within the main loop, when we adjust the view offset (that controls scrolling) our pitch sprites will be moved about. There may be cases where this behaviour isn’t required for certain sprites, for example, interface elements might be fixed to the screen. When this behaviour is required, all it takes to stop a sprite from scrolling is to call the command FixSpriteToScreen. This command has two parameters - the ID number of the sprite and then a value controlling whether the sprite is fixed to the screen (a value of 1), or if the sprite is fixed to the world (a value of 0). In our example this new sprite will remain at the top left corner of the screen:

LoadImage ( 3, "goals_logo.png" )
CreateSprite ( 3, 3 )
FixSpriteToScreen ( 3, 1 )

agk::LoadImage ( 3, "goals_logo.png" );
agk::CreateSprite ( 3, 3 );
agk::FixSpriteToScreen ( 3, 1 );

Main Loop

To scroll our sprites we need to make a call to the command SetViewOffset. This command has two parameters - an offset on the X axis and an offset on the Y axis. By default these values will be 0 and 0. As the X value is increased our sprites will be shifted to the left, while a decrease in the X value will shift sprites to the right. Increasing the Y value will shift sprites up, decreasing it will shift them down.

The code being used in this example will scroll in one direction for a short while, before returning to the original position and then repeating the process. Here’s the code:

do
    SetViewOffset ( x, y )

    
    if ( direction = 0 )
        x = x + 1
        y = y + 2

    
        if  ( y > 740 )
            direction = 1
        endif
    endif

    
    if ( direction = 1 )
        x = x - 1
        y = y - 2

    
        if  ( y < 0 )
            direction = 0
        endif
    endif

    
    sync ( )
loop

void app::Loop ( void )
{
    SetViewOffset ( x, y );


    if ( direction == 0 )
    {
        x = x + 1;
        y = y + 2;


        if  ( y > 740 )
            direction = 1;
    }


    if ( direction == 1 )  
    {
        x = x - 1;
        y = y - 2;


        if  ( y < 0 )
            direction = 0;
    }

 
    agk::Sync ( );
}

Full code listing

Everything is now in place. Here's the final code for our program:

SetVirtualResolution ( 320, 480 )


LoadImage ( 1, "pitch_top.jpg" )
LoadImage ( 2, "pitch_bottom.jpg" )


CreateSprite ( 1, 1 )
CreateSprite ( 2, 2 )


SetSpritePosition ( 1, 0, 0 )
SetSpritePosition ( 2, 0, 593 )


LoadImage ( 3, "goals_logo.png" )
CreateSprite ( 3, 3 )
FixSpriteToScreen ( 3, 1 )


do
    SetViewOffset ( x, y )

    
    if ( direction = 0 )
        x = x + 1
        y = y + 2

    
        if  ( y > 740 )
            direction = 1
        endif
    endif

    
    if ( direction = 1 )
        x = x - 1
        y = y - 2

    
        if  ( y < 0 )
            direction = 0
        endif
    endif

    
    sync ( )
loop

void app::Begin ( void )
{
    agk::SetVirtualResolution ( 320, 480 );


    agk::LoadImage ( 1, "pitch_top.jpg" );
    agk::LoadImage ( 2, "pitch_bottom.jpg" );


    agk::CreateSprite ( 1, 1 );
    agk::CreateSprite ( 2, 2 );


    agk::SetSpritePosition ( 1, 0, 0 );
    agk::SetSpritePosition ( 2, 0, 593 );


    agk::LoadImage ( 3, "goals_logo.png" );
    agk::CreateSprite ( 3, 3 );
    agk::FixSpriteToScreen ( 3, 1 );
}


void app::Loop ( void )
{
    SetViewOffset ( x, y );


    if ( direction == 0 )
    {
        x = x + 1;
        y = y + 2;


        if  ( y > 740 )
            direction = 1;
    }


    if ( direction == 1 )  
    {
        x = x - 1;
        y = y - 2;


        if  ( y < 0 )
            direction = 0;
    }

 
    agk::Sync ( );
}

Conclusion

As you can see from this example AppGameKit Studio makes the task of scrolling your screen very simple.