Sorry your browser is not supported!

rem Basic Way of Drawing a Progress Bar to the Screen with Box
rem Steve Paul Thomas
rem 26th November 2008

rem This code only demos how to draw the progress bar
rem graphic at each stage - it doesn't actually load
rem anything. You will need to come up with some
rem loading code and a control structure to make
rem this function as you intend.

sync on
sync rate 40

progress_amount# = 0

set text to bold
set text size 12
set text font "tahoma"


create bitmap 1,640,480
cls 0
set current bitmap 0



do

	rem Just a slowdown so you can see the visual effect - do not
	rem use wait in your loading code
	wait (500)

	gosub _draw_progress

		

			rem this just makes the meter creep up
			rem as a demo, you would actually use
			rem use calculations of the file's size
			rem and amount of data loaded to figure
			rem out how much to draw - but just doing
			rem it like this to show a simple incrementer
			if progress_amount# < 270
			inc progress_amount#,30
			else
			progress_amount# = 298
			endif

print "Bar width: ";progress_amount#
print percent$


	sprite 1,200,240,1

	sync

loop







_draw_progress:

cls 0

set current bitmap 1

rem 10% - 30 pixels
rem 20% - 60 pixels
rem 30% - 90 pixels
rem 40% - 120 pixels
rem 50% - 150 pixels
rem 60% - 180 pixels
rem 70 - 210 pixels
rem 80% - 240 pixels
rem 90% - 270 pixels
rem 100% - 298 pixels - 298 as we want to stay inside the border

rem White frame - chose box over lines for speed and less code
ink rgb(255,255,255),0
box 0,0,300,32

rem Grey background
ink rgb(80,80,80),0
box 2,2,298,30

rem Blue fill
ink rgb(0,0,255),0
box 2,2,progress_amount#,30


ink rgb(255,0,0),0


	rem If width of progress amount is less than 270pixels then do a calc
	rem otherwise just print 100%
	if progress_amount# <= 270 then percent$ = str$((progress_amount# / 300)*100)
	if progress_amount# = 298 then percent$ = "100"
	


rem print the string on top of bar
percent$ = percent$+"%"
text 140,10,percent$


rem Grab image for sprite
get image 1,0,0,300,32

set current bitmap 0
return

rem The Basic Idea

rem Just some sample values - obviously these would
rem not be static, and would instead be determined by the
rem program

bytes_loaded# = 5000

file_size# = 10000

filename$ = "mysamplefile.txt"


rem Percent becomes equal to bytes_loaded divided by file_size
rem then multiplied by 100 to convert to percent
percent# = (bytes_loaded# / file_size#) * 100


print percent#;"% of ";filename$;" loaded."

file_size# = file size($filename)

for files=1 to 4
box 0,200,files*100,240
center text 0,100,"Loading..."
read load$
load file load$
next files

data "thing.map","otherthing.map","yetanother.map","bonus.map"

percent# = ((current_item# / total_items#) * 100)

`set up screen
set display mode 640,480,32
hide mouse
sync on

Gosub bar_image : `image 1

`Load Program
load_bar("Loading Images...",1)
gosub load_images
load_bar("Loading Sounds...",33)
gosub load_sounds
load_bar("Loading Objects...",66)
gosub load_objects
load_bar("Starting Game...",100)
wait 2000

END

`------------
` Functions
`------------
Function load_bar(tag$,percent)
  cls
  center text 320,215,tag$
  sprite 1,220,235,1
  stretch sprite 1,200*percent,100 : `stretches the image to a % of original size
  sync
Endfunction

`--------------
` Subroutines
`--------------
bar_image:
  `draw bar 1 pixel wide (we can stretch it out to any size)
  ink rgb(0,255,0),0 : `base colour
  line 0,0,0,8
  ink rgb(0,191,0),0 : `shade level 1
  dot 0,7
  ink rgb(0,128,0),0 : `shade level 2
  dot 0,8
  ink rgb(255,255,255),0 : `shine
  dot 0,1
  `grab the image
  get image 1,0,0,1,9
RETURN
`//

load_images:
  wait 2000
RETURN
`//

load_sounds:
  wait 2000
RETURN
`//

load_objects:
  wait 2000
RETURN
`//

REMSTART
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
   How To Make Stastic Bars
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
Statistic bars require 3 variables: minimum value, maximum value and current value.
Statistic bars do not require the use of an image (a simple box is fine) but for this example we will use one.
REMEND

`* Making the Stat Bar Image *
remstart
There are two methods of using stastic bar images: Cutting and Stretching.
_CUTTING
If we want a fancy bar that looks different all along its length we will have to draw the entire bar and then
cut the right percentage from the image to be displayed in the game.
_STRETCHING
If our bar looks the same along the entirety of its length, we only need to make 1% of the bar and then
stretch it to the right percentage.
For this example we will use a stretching bar.
remend

`draw 1% image
ink rgb(0,255,0),0 : `base colour
line 0,0,0,8
ink rgb(0,191,0),0 : `shade level 1
dot 0,7
ink rgb(0,128,0),0 : `shade level 2
dot 0,8
ink rgb(255,255,255),0 : `shine
dot 0,1
`grab the image
get image 1,0,0,1,9

cls 128
`draw a frame for our bar
line 200,190,200,200
line 300,190,300,200
set text size 7
center text 200,180,"0%"
center text 300,180,"100%"

sprite 1,201,201,1

sync on

rem 100% on the bar is 10000% of the images original length
rem in a game x would be replaced by the statistic variable
for x = 0 to 100
   stretch sprite 1,100*x,100
   sync
next x

end