Properties of sprites

Description

Sprites have numerous properties that can be controlled, such as their colour, angle and size. This example demonstrates how to control these properties, by placing 5 sprites alongside each other on screen and then continually updating them in the main loop.

Overview

The process involved is as follows:

create 5 sprites and position them in a row

Within the main loop:

leave sprite 1 unaffected
update the color of sprite 2
change the alpha of sprite 3
alter the angle of sprite 4
adjust the size of sprite 5

Understanding the color of a sprite

When changing the color of a sprite it's possible to control the red, green, blue and alpha channels. Each of these channels supports values from 0 - 255. Imagine loading an image that is completely white and applied to a sprite. Once loaded the color channels are set to:

red = 255
green = 0
blue = 0
alpha = 255

This has the effect of changing our image to be totally red. This is due to the red channel being set to its maximum value (255), while the green and blue channels are set to their lowest values of 0. Finally we come to the alpha channel. This alpha channel is responsible for controlling how translucent the color is. Given a value of 255 our image will be displayed on screen and show as completely solid. As this value is lowered our sprite will start to become translucent and in doing so reveal any sprites behind it. By controlling alpha values it's possible to fade sprites in and out, amongst other effects.

Continuing with our white image and sprite - what would happen if all color channels are set to 255:

red = 255
green = 255
blue = 255
alpha = 255

In this instance our sprite is being drawn with all color channels at their full level, therefore it will appear on screen as a completely white image.

Creating 5 sprites

One image is loaded, which is then used by 5 sprites and these sprites are all laid out alongside each other:

LoadImage ( 1, "blue.png" )


CreateSprite ( 1, 1 )
CreateSprite ( 2, 1 )
CreateSprite ( 3, 1 )
CreateSprite ( 4, 1 )
CreateSprite ( 5, 1 )


SetSpritePosition ( 1, 0, 0 )
SetSpritePosition ( 2, 70, 0 )
SetSpritePosition ( 3, 140, 0 )
SetSpritePosition ( 4, 210, 0 )
SetSpritePosition ( 5, 280, 0 )

agk::LoadImage ( 1, "blue.png" );


agk::CreateSprite ( 1, 1 );
agk::CreateSprite ( 2, 1 );
agk::CreateSprite ( 3, 1 );
agk::CreateSprite ( 4, 1 );
agk::CreateSprite ( 5, 1 );


agk::SetSpritePosition ( 1, 0, 0 );
agk::SetSpritePosition ( 2, 70, 0 );
agk::SetSpritePosition ( 3, 140, 0 );
agk::SetSpritePosition ( 4, 210, 0 );
agk::SetSpritePosition ( 5, 280, 0 );

Main loop

The main loop updates properties of the sprites, as mentioned earlier. It begins by setting the color of sprite 2 to a random value, followed by adjusting the alpha of sprite 3 to fade in and out, sprite 4 has its angle updated to rotate and finally sprite 5 has its size adjusted:

do
    SetSpriteColor ( 2, Random ( 1, 255 ), Random ( 1, 255 ), Random ( 1, 255 ), 255 )
    SetSpriteColor ( 3, 255, 255, 255, alpha )


    if ( direction = 0 )
        alpha = alpha - 1


        if ( alpha < 0 )
            direction = 1
        endif
    endif


    if ( direction = 0 )
        alpha = alpha + 1
        if ( alpha > 255 )
            direction = 0
        endif
    endif


    SetSpriteAngle ( 4, angle )
    angle = angle + 1
    SetSpriteSize ( 5, GetSpriteWidth ( 5 ) - 1, GetSpriteHeight ( 5 ) - 1 )


    sync ( )
loop

void app::Loop ( void )
{
    agk::SetSpriteColor ( 2, agk::Random ( 1, 255 ),
 agk::Random ( 1, 255 ), agk::Random ( 1, 255 ), 255 );


    agk::SetSpriteColor ( 3, 255, 255, 255, alpha );


    if ( direction == 0 )
    {
        alpha = alpha - 1;


        if ( alpha < 0 )
        {
            direction = 1;
        }
    }


    if ( direction == 0 )
    {
        alpha = alpha + 1;

        
        if ( alpha > 255 )
        {
            direction = 0;
        }
    }


    agk::SetSpriteAngle ( 4, angle );
    angle = angle + 1;
    agk::SetSpriteSize ( 5, agk::GetSpriteWidth ( 5 ) - 1, agk::GetSpriteHeight ( 5 ) - 1 );


    agk::Sync ( );
}

Full code listing

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

SetVirtualResolution ( 320, 480 )


CreateSprite ( LoadImage ( "background5.jpg" ) )


LoadImage ( 1, "blue.png" )


CreateSprite ( 1, 1 )
CreateSprite ( 2, 1 )
CreateSprite ( 3, 1 )
CreateSprite ( 4, 1 )
CreateSprite ( 5, 1 )


SetSpritePosition ( 1, 0, 0 )
SetSpritePosition ( 2, 70, 0 )
SetSpritePosition ( 3, 140, 0 )
SetSpritePosition ( 4, 210, 0 )
SetSpritePosition ( 5, 280, 0 )


do
    SetSpriteColor ( 2, Random ( 1, 255 ), Random ( 1, 255 ), Random ( 1, 255 ), 255 )
    SetSpriteColor ( 3, 255, 255, 255, alpha )


    if ( direction = 0 )
        alpha = alpha - 4


        if ( alpha < 0 )
            direction = 1
        endif
    endif


    if ( direction = 1 )
        alpha = alpha + 4


        if ( alpha > 255 )
            direction = 0
        endif
    endif


    SetSpriteAngle ( 4, angle )
    angle = angle + 1
    SetSpriteSize ( 5, GetSpriteWidth ( 5 ) - 1, GetSpriteHeight ( 5 ) - 1 )


    sync ( )
loop

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


    agk::CreateSprite ( agk::LoadImage ( "background5.jpg" ) );


    agk::LoadImage ( 1, "blue.png" );


    agk::CreateSprite ( 1, 1 );
    agk::CreateSprite ( 2, 1 );
    agk::CreateSprite ( 3, 1 );
    agk::CreateSprite ( 4, 1 );
    agk::CreateSprite ( 5, 1 );


    agk::SetSpritePosition ( 1, 0, 0 );
    agk::SetSpritePosition ( 2, 70, 0 );
    agk::SetSpritePosition ( 3, 140, 0 );
    agk::SetSpritePosition ( 4, 210, 0 );
    agk::SetSpritePosition ( 5, 280, 0 );
}


void app::Loop ( void )
{
    agk::SetSpriteColor ( 2, agk::Random ( 1, 255 ),
 agk::Random ( 1, 255 ), agk::Random ( 1, 255 ), 255 );


    agk::SetSpriteColor ( 3, 255, 255, 255, alpha );


    if ( direction == 0 )
    {
        alpha = alpha - 4;


        if ( alpha < 0 )
        {
            direction = 1;
        }
    }


    if ( direction == 1 )
    {
        alpha = alpha + 4;

        
        if ( alpha > 255 )
        {
            direction = 0;
        }
    }


    agk::SetSpriteAngle ( 4, angle );
    angle = angle + 1;
    agk::SetSpriteSize ( 5, agk::GetSpriteWidth ( 5 ) - 1, agk::GetSpriteHeight ( 5 ) - 1 );


    agk::Sync ( );
}

Conclusion

Sprites have numerous other properties including - flipping, offsets, hit tests, scaling, UV properties and much more. For more details please view the reference guide.