GLBasic forum

Codesnippets => 2D-snippets => Topic started by: monono on 2010-Aug-09

Title: toon like transition effect
Post by: monono on 2010-Aug-09
Here is a nice transition. Very common effect: the second scene grows as a circle in the current scene 1 until scene 2 competely filled up the screen.
Quote
SETSCREEN 800,600,1

//#### SCENE 1 LOOP ####
WHILE KEY(57)=FALSE
   // draw your stuff for scene 1 here
   DRAWRECT 0,0,800,600,RGB(200,200,200)
   DRAWRECT 100,100,300,300,RGB(0,0,255)
   // ....
   SHOWSCREEN
WEND

//#### PREPARE TRANSITION #####
CREATESCREEN 0, 7000, 800,600
USESCREEN 0
   //draw your scene 1 a last time on screen 0
   DRAWRECT 0,0,800,600,RGB(200,200,200)
   DRAWRECT 100,100,300,300,RGB(0,0,255)
   //...
USESCREEN -1 

// preparing to draw a polgon ring in center of the screen with a radius (r) of 500 and an edge of 500.
// the inner radius of the ring is 0 in the beginning
LOCAL x=800/2 ; y=600/2 ; r = 500 ; edge = 500 ; col =RGB(255,255,255)
LOCAL ang



//#### START TRANSITION ####
WHILE edge > 5

   // draw your stuff for scene 2 here
   DRAWRECT 0,0,800,600,RGB(200,0,200)
   DRAWRECT 400,400,300,300,RGB(0,255,255)
   //...


   edge=edge-1  //  ( for fps independent speed -> for example: edge = edge- 1*DifferenceInTimeFromLastFrameToThis)
   STARTPOLY 7000, 2
         FOR ang = 0 TO 360 STEP 5
            POLYVECTOR x+COS(ang)*r, y-SIN(ang)*r, x+COS(ang)*r, y-SIN(ang)*r,col
            POLYVECTOR x+COS(ang)*(r-edge), y-SIN(ang)*(r-edge), x+COS(ang)*(r-edge),y-SIN(ang)*(r-edge),col
      NEXT
   ENDPOLY

   SHOWSCREEN
WEND



//#### SCENE 2 LOOP ####
WHILE KEY(57)=FALSE
   // draw your stuff for scene 2 here
   DRAWRECT 0,0,800,600,RGB(200,0,200)
   DRAWRECT 400,400,300,300,RGB(0,255,255)
   //...
   SHOWSCREEN
WEND

If don´t want to freeze the first scene (if it´s animated somehow) you could even redraw the screen 0 inside the transition loop.
Or just paint the ring black, close it first, then open it with the fresh scene behind. Like Looney Toons transition.
Title: Re: toon like transition effect
Post by: Quentin on 2010-Aug-09
Great! Nice effect. Thanks for sharing.