How To Create Progress Bar

This intermediate level how to will instruct you how to build a progress bar. Progress bars are extremely useful for displaying information in a SwinGame project. Power, Lives and Time are just a few examples of how a progress bar can be used.

Level

Intermediate

Details

The concept behind a progress bar is to have two identical images, one laid over the other. In terms of a progress bar, an Empty and a completed image. The game window shows the empty bar until the  command to increase the bar is given. When SwinGame gets the command it draws part of the full bar on top using DrawBitmapPart.  This gives the appearance of the bar powering up, or down.

PROGRESS BAR







Source Code Widget

  • program HowToCreateProgressBar;
    uses SwinGame,sgTypes;
    
    procedure Main();
    var
        fullBar : Bitmap;
        size : Rectangle;
        partRect : Rectangle;
        width : LongInt;
    begin
        OpenGraphicsWindow('Progress Bar' ,400 ,400 );
        LoadBitmapNamed('empty' ,'progress_empty.png' );
        fullBar := LoadBitmapNamed('full' ,'progress_full.png' );
        width := 0;
        partRect := RectangleFrom(0 ,0 ,width ,39 );
        repeat
            ProcessEvents();
            ClearScreen(ColorWhite );
            DrawText('Press Space to progress :)' ,ColorBlack ,10 ,10 );
            DrawBitmap('empty' ,46 ,180 );
            if  KeyTyped(vk_SPACE )    then
            begin
                width := width + 31;
                partRect := RectangleFrom(0 ,0 ,width ,39 );
            end;
            DrawBitmapPart(fullBar ,partRect ,46 ,180 );
            RefreshScreen();
        
        until WindowCloseRequested();
        ReleaseAllResources();
    end;
    begin
        Main();
    end.
    Download Now"
  • #include 
    #include "SwinGame.h"
    int main() 
    {
        bitmap  full_bar;
        rectangle  size;
        rectangle  part_rect;
        int32_t  width;
        open_graphics_window("Progress Bar" ,400 ,400 );
        load_bitmap_named("empty" ,"progress_empty.png" );
        full_bar = load_bitmap_named("full" ,"progress_full.png" ) ;
        width = 0 ;
        part_rect = rectangle_from(0 ,0 ,width ,39 ) ;
        do 
        {
            process_events();
            clear_screen(color_white );
            draw_text("Press Space to progress :)" ,color_black ,10 ,10 );
            draw_bitmap("empty" ,46 ,180 );
            if ( key_typed(VK_SPACE )  )
            {
                width = width + 31 ;
                part_rect = rectangle_from(0 ,0 ,width ,39 ) ;
            }
            draw_bitmap_part(full_bar ,part_rect ,46 ,180 );
            refresh_screen();
        }
        while ( ! (window_close_requested() ) );
        release_all_resources();
        return 0;
    }
    
    Download Now"
  • Source Code Coming Soon

  • Source Code Coming Soon

  • Source Code Coming Soon

If there is a useful hint you will find it in a box like this

Possibilities

Suggested projects will appear here.