Fade Screen/Image to Black

[kevin]

This example fades an image in/out to and from black.  The effect is achieved via using the Variable Colour Alpha draw mode in sprites.  

Variable colour alpha allows you to blend the pixels of the sprite  image against a fixed colour.  The blending is proportional.  That is to say, when the sprites blend value is set to 0.5 alpha,  then the outputted image is a 50% blend of the sprites alpha colour and the sprites image.  

Example Blend Level Values  (legal values range between 0.00 and 1.00)

   0.00 =  Alpha Colour is dominate (Outputted pixels are 100% the alpha colour)
   0.25 =  Alpha Colour is dominate (Outputted pixels are 75% alpha colour + 25% image)
   0.50 =  Colours are Balanced (Outputted pixels are 50% blend between the alpha colour + image)
   0.75 =  Image Colour is dominate (Outputted pixels are 75% image colour + 25% alpha colour)
   1.00 =  Image Colour is dominate (Outputted pixels are 100% the image colour)
   
 It's important to the understand the fading process does not effect the pixels of the
faded image.   As the blending process occurs during the rendering.  Where outputted pixels are manipulated in real time

PlayBASIC Code: [Select]

; Load the Face 
   FaceIMage=LoadNewIMage("face.jpg")


; Get the Size of the screen
   ScreenW=GetScreenWIdth()
   ScreenH=GetScreenHeight()
   

; Create an image the size of the screen.  This image will be
; used to as the fading source image
   ScreenImage=NewImage(ScreenW,ScreenH)

; redirect drawing to this image
   RenderToImage ScreenImage

; calc a centered positionof the Face image.
   w=(ScreenW/2)-(GetImageWidth(FaceImage)/2)
   h=(ScreenH/2)-(GetImageHeight(FaceImage)/2)

; DRaw the face image tiled to the Screen Image
   tileimage FaceIMage,w,h,true

; Prepare the Screen image into FX format.
   preparefximage ScreenImage
   
   
; Create a sprite that will be used for the fading effect. This sprite 
;  is positioned at X=0,Y=0 and is assigned the ScreenImage for it's gfx   
   FadeSprite=NewSprite(0,0,ScreenImage)

; Set the DRaw mode to Rotated (2)  + Variable ALpha Colour  
   SpriteDrawMode FadeSprite,2+2048  ; Set draw mode to (rotate + Variable Colour Alpha)

; Set the Alpha Colour to fade this image between
   SpriteAlphaColour FadeSprite,RGB(0,0,0)
   
; set the Alpha level to zero.  When Alpha level is 0, then  Fade colour is domanate.
; SO the image renders as the fade colour.

   SpriteAlphaLevel FadeSprite,0

; Disable transparent masking of this image. So the image will be drawn entirely
   Spritetransparent FadeSprite,off


; redirect rendering to the screen
   RenderToScreen


; Create a variable to hold the current fade direction rate.  
; Positive fade direction values fade the image in,  negative values
; fade it out.  

   Fade_Dir#=0.01

; Create variabel to hold the current fade (alpha) level value.  
   FadeLevel#=0


Do
; draw the sprite to the screen
   DrawSprite FadeSprite

; Adjust the fade level
   FadeLevel#=FadeLevel#+Fade_Dir#
   
; set the alpha (fade) level 
   SpriteAlphaLevel FadeSprite,FadeLevel#

; If the Fade level is bigger than 1 (it's max value) then
; we flip the Fade_dir value, to start it fading out.
   if FadeLevel#=>1 then  Fade_dir#=-Fade_dir#
   
; If the Fade level is smaller than 0 (it's min value) then
; flip the Fade_dir value back to positive, to start it fading in
; again.
   if FadeLevel#<=0 then Fade_dir#=-Fade_dir#

; Set the ink colour to Red
   ink rgb(255,0,0)

  ; draw the frame rate
   Text 10,10,fps()

 ; Display the Screen
   Sync

; Loop back to the do statement and continue
Loop

Return To PlayBasic Tutorial Index