Screen fading examples (iPad/iPhone)

[Dav]

Here is an example of fading the screen in and out by capturing it as a sprite and using the powerful sprite routines. This method can be used as a way to show a splash screen or just for dramatic effect. Fades, Zooms, Spins.

- Dav

Code: Select all

 
'Just some full screen fading examples.
'Fades screen in/out, zooms in/out, spins.
'Grabs screen as sprite and uses that.
'Coded by Dav


'enter graphics mode
graphics

shadow on

'hide screen refresh while we draw
refresh off

'turn screen to pale green
graphics clear 0,.3,0

'draw some random stuff for show
'(1000 times...)
for t= 1 to 1000
  c=rnd(255)/255         'random color
  draw color 0,c,0       'set color
  draw font size rnd(56) 'ramdom font size
  x=rnd(screen_width())  'random x position
  y=rnd(screen_height()) 'random y position
  'draw random letter
  draw text chr$(rnd(255)) at x,y
next t

draw color 1,1,1
draw font size "40"
draw text device_name$() at 200,200
draw text device_type$() at 200,250

'grab entire screen as a sprite
sw=screen_width() ! sh=screen_height()
sprite "s" scan 0,0,sw,sh

'move it out of viewing area first
sprite "s" at -2000,-2000

'safe to turn on now its out of sight
sprite "s" show

'clear screen
graphics clear 0,0,0

'now turn on screen
refresh on

'fade in, fullscreen
for t = 0 to 100
  sprite "s" alpha t/100
  sprite "s" at 0,0
  pause .02
next t

'fade out, fullscreen
for t = 100 to 0 step -1
  sprite "s" alpha t/100
  sprite "s" at 0,0
  pause .02
next t

'fade in and zoom in
x=100
for t = 0 to 100
  sprite "s" alpha t/100
  sprite "s" at x,x scale t/100
  pause .02 ! x=x-1
next t
  
'fade out and zoom out
for t = 100 to 0 step -1
  sprite "s" alpha t/100
  sprite "s" at x,x scale t/100
  pause .02 ! x=x+1
next t

'fade in and zoom in and spin
x=100
for t = 0 to 100
  sprite "s" alpha t/100
  sprite "s" at x,x scale t/100 angle x/15
  pause .02 ! x=x-1
next t
  
'fade out and zoom out and spin
for t = 100 to 0 step -1
  sprite "s" alpha t/100
  sprite "s" at x,x scale t/100 angle x/15
  pause .02 ! x=x+1
next t

'that's all folks
text
end

[Mr. Kibernetik]

Very cool demo!

[Mr. Kibernetik]

If to make screen more "personal", for example by adding device type and name with DEVICE_NAME$() and DEVICE_TYPE$() (otherwise users could think this is pre-rendered video), then it will be a very good sample program for sB.

[Dav]

Thanks! Ok, I have added those to the demo now. The sprite capabilities of sB are great! I'm having fun exploring them.

- Dav

[Mr. Kibernetik]

Ok, very good!

I updated it a bit:

Code: Select all

 
'Just some full screen fading examples.
'Fades screen in/out, zooms in/out, spins.
'Grabs screen as sprite and uses that.
'Coded by Dav


'enter graphics mode
graphics

shadow on

'hide screen refresh while we draw
refresh off

'turn screen to pale green
graphics clear 0,.3,0

sw=screen_width() ! sh=screen_height()

'draw some random stuff for show
'(1000 times...)
for t= 1 to 1000
  c=rnd(1)               'random color
  draw color 0,c,0       'set color
  draw font size rnd(56) 'ramdom font size
  x=rnd(sw)  'random x position
  y=rnd(sh) 'random y position
  'draw random letter
  draw text chr$(rnd(255)) at x,y
next t

def drawPersonalText(offX,offY)
draw text .devName$ at .devNameX+offX,.devNameY+offY
enddef

'personalize the screen
draw font size "40"
devName$=device_name$()
devNameX=(sw-text_width(devName$))/2
devNameY=sh/3
shadow off
draw color 0,0,0
drawPersonalText(-2,-2)
drawPersonalText(2,-2)
drawPersonalText(-2,2)
drawPersonalText(2,2)
draw color 0.3,1,0.3
drawPersonalText(0,0)

'grab entire screen as a sprite
sprite "s" scan 0,0,sw,sh

'move it out of viewing area first
sprite "s" at -2000,-2000

'safe to turn on now its out of sight
sprite "s" show

'clear screen
graphics clear 0,0,0

'now turn on screen
refresh on

'fade in, fullscreen
for t = 0 to 100
  sprite "s" alpha t/100
  sprite "s" at 0,0
  pause .02
next t

'fade out, fullscreen
for t = 100 to 0 step -1
  sprite "s" alpha t/100
  sprite "s" at 0,0
  pause .02
next t

'fade in and zoom in
x=100
for t = 0 to 100
  sprite "s" alpha t/100
  sprite "s" at x,x scale t/100
  pause .02 ! x=x-1
next t
  
'fade out and zoom out
for t = 100 to 0 step -1
  sprite "s" alpha t/100
  sprite "s" at x,x scale t/100
  pause .02 ! x=x+1
next t

'fade in and zoom in and spin
x=100
for t = 0 to 100
  sprite "s" alpha t/100
  sprite "s" at x,x scale t/100 angle x/15
  pause .02 ! x=x-1
next t
  
'fade out and zoom out and spin
for t = 100 to 0 step -1
  sprite "s" alpha t/100
  sprite "s" at x,x scale t/100 angle x/15
  pause .02 ! x=x+1
next t

'that's all folks
text
end

and I will add it to sB sample programs, Sprites section.
Really very interesting demo!

[Dav]

Cool! Nice fix. I never noticed text_width() existed before.

Feel free to remove any of my comments and name if you want too, to make it conform to the other examples coding style. Glad to be included in the samples of this language!

- Dav

[Mr. Kibernetik]

Cool! Nice fix. I never noticed text_width() existed before.

Feel free to remove any of my comments and name if you want too, to make it conform to the other examples coding style. Glad to be included in the samples of this language!

- Dav

Your coding style is a good example to learn how programs can be coded!