January 23, 2021, 04:32:43 AM

Author Topic: [bb] Circular Screen Fade by Kryzon [ 1+ years ago ]  (Read 783 times)

Offline BlitzBot

  • Jr. Member
  • **
  • Posts: 1
[bb] Circular Screen Fade by Kryzon [ 1+ years ago ]
« on: June 29, 2017, 12:28:40 AM »
Title : Circular Screen Fade
Author : Kryzon
Posted : 1+ years ago

Description : Presented here is a screen fade effect by the way of a circle-shaped "iris".
The code builds a specific mesh and animates it to perform the effect. The mesh looks like this:



The way this mesh is positioned, the green vertices never come into view, only the red ones (and that's only when the circle is "closing"). The red vertices go toward the center of the screen, making the circular mask texture get smaller.
The shape of the iris can be customized if you want - you just need to make a square texture of it and have the shape be fully transparent.
The color of this fading mesh can also be changed, you just need to have the mesh and texture being of the same color you want.
This effect can be reproduced in any game engine that allows you to move individual vertices of meshes.

A suggested way to use this effect:
- Have a game screen being played.
- Perform the fade to "close" the view.
- While the view is "closed", change the game screen (hide some models, show others etc.).
- "Open" the view to reveal this new screen.

Original thread = <a href="../Community/postsecfd.html?topic=100101" target="_blank">http://blitzbasic.com/Community/posts.php?topic=100101[/url]


Code :
Code: BlitzBasic
  1. Graphics3D 800,600,0,2
  2.  
  3. camera = CreateCamera()
  4. CameraClsColor camera,190,120,35
  5.  
  6. cube = CreateCube()
  7. MoveEntity cube,0,0,5
  8.  
  9. light = CreateLight(1)
  10. TurnEntity light,60,-30,0
  11.  
  12. Const SQUARE_SIZE = 256
  13. ;Calculate half the diagonal of the screen and map it to 3D units, so the circle circumscribes the screen perfectly when fully open.
  14. Global HALF_SCREEN_DIAGONAL# = (4.0 * (Sqr(GraphicsWidth()*GraphicsWidth() + GraphicsHeight()*GraphicsHeight()) / 2.0)) / Float(GraphicsWidth()) + 0.1
  15. fadeQuad = CreateCircleFade(camera)
  16. fadeState = False
  17. fadeSize# = 1.0 ;Goes from 1.0 (fully open) to 0.0 (fully closed).
  18. fadeSpeed# = 0.015
  19.  
  20.  
  21. fpsTimer = CreateTimer(60)
  22.  
  23. While Not KeyHit(1)
  24.         WaitTimer(fpsTimer)
  25.        
  26.         TurnEntity cube,0.5,0.6,0.7
  27.  
  28.         If KeyHit(57) Or KeyHit(28) Then fadeState = Not fadeState
  29.         If fadeState Then
  30.                 fadeSize = fadeSize - fadeSpeed
  31.                 If fadeSize < 0 Then fadeSize = 0
  32.         Else
  33.                 fadeSize = fadeSize + fadeSpeed
  34.                 If fadeSize > 1.0 Then fadeSize = 1.0
  35.         EndIf
  36.         UpdateCircleFade(fadeQuad, fadeSize)
  37.        
  38.         RenderWorld()
  39.         Color 255,255,255
  40.         Text 10,10,"Press SPACE or ENTER to play the circular fade."
  41.        
  42.         Flip
  43. Wend
  44.  
  45. End
  46.  
  47.  
  48. Function CreateCircleFade(camera)
  49.         mesh = CreateMesh(camera)
  50.         surf = CreateSurface(mesh)
  51.        
  52.         xOff# = (4.0 / 2) + 1
  53.         yOff# = (4.0 / 2) / (Float(GraphicsWidth())/GraphicsHeight()) + 1
  54.  
  55.         v0 = AddVertex(surf,-xOff,yOff,0)
  56.         v1 = AddVertex(surf,xOff,yOff,0,0)
  57.         v2 = AddVertex(surf,-xOff,-yOff,0)
  58.         v3 = AddVertex(surf,xOFf,-yOff,0)
  59.        
  60.         diag# = HALF_SCREEN_DIAGONAL
  61.        
  62.         ;Build the mesh.       
  63.         v4 = AddVertex(surf,-diag,diag,0, 0,0)
  64.         v5 = AddVertex(surf,diag,diag,0, 0,0)
  65.         v6 = AddVertex(surf,-diag,-diag,0, 0,0)
  66.         v7 = AddVertex(surf,diag,-diag,0, 0,0) 
  67.                
  68.         v8c = AddVertex(surf,-diag,diag,0, 0,0)
  69.         v9c = AddVertex(surf,diag,diag,0, 1.0,0)
  70.         v10c = AddVertex(surf,-diag,-diag,0, 0,1)
  71.         v11c = AddVertex(surf,diag,-diag,0, 1,1)
  72.        
  73.         AddTriangle(surf,v0,v1,v4)
  74.         AddTriangle(surf,v0,v4,v2)
  75.         AddTriangle(surf,v1,v5,v4)
  76.         AddTriangle(surf,v1,v3,v5)
  77.         AddTriangle(surf,v3,v7,v5)
  78.         AddTriangle(surf,v3,v2,v7)
  79.         AddTriangle(surf,v2,v6,v7)
  80.         AddTriangle(surf,v2,v4,v6)
  81.        
  82.         AddTriangle surf,v8c,v9c,v10c
  83.         AddTriangle surf,v9c,v11c,v10c
  84.        
  85.         EntityColor mesh,0,0,0
  86.         EntityFX mesh,1
  87.         MoveEntity mesh,0,0,2
  88.        
  89.         EntityTexture mesh,CreateMaskedCircleTexture()
  90.                
  91.         Return mesh
  92. End Function
  93.  
  94.  
  95. ;Here the texture is created procedurally, but one made in Photoshop or whatever, with alpha flag and smooth border, will
  96. ;look much better. I wanted to create everything in code so it'd be easier to run, just copy-paste.
  97. Function CreateMaskedCircleTexture()
  98.         Local tex = CreateTexture(SQUARE_SIZE, SQUARE_SIZE, 1+2)
  99.        
  100.         SetBuffer TextureBuffer(tex)
  101.                 ClsColor 0,0,0
  102.                 Cls
  103.                 Color 1,1,1
  104.                 Oval 0,0,SQUARE_SIZE,SQUARE_SIZE,True
  105.         SetBuffer BackBuffer()
  106.        
  107.         LockBuffer TextureBuffer(tex)
  108.         For x = 0 To SQUARE_SIZE-1
  109.                 For y = 0 To SQUARE_SIZE-1
  110.                         argb = ReadPixelFast(x,y,TextureBuffer(tex))                   
  111.                         If (argb = $FF010101) Then WritePixelFast(x,y,$00000000,TextureBuffer(tex))
  112.                 Next
  113.         Next
  114.         UnlockBuffer TextureBuffer(tex)
  115.        
  116.         Return tex
  117. End Function
  118.  
  119.  
  120. Function UpdateCircleFade(fadeQuad, fadeSize#=1.0)
  121.         ;The "doubled" vertices are 4,5,6 and 7. Their purpose is to keep the area outside the circle black.
  122.         ;The circle`s vertices are 8,9,10 and 11, based on the order the vertices were created.
  123.        
  124.         Local surface = GetSurface(fadeQuad,1)
  125.        
  126.         ;The animation consists of modulating the vertices' "open" positions by a "unit" value, such as "fadeSize" in this case.
  127.         ;This way the vertices close the circle down.
  128.         Local offset# = HALF_SCREEN_DIAGONAL*fadeSize
  129.        
  130.         VertexCoords(surface, 4,-offset,offset,0)
  131.         VertexCoords(surface, 5,offset,offset,0)
  132.         VertexCoords(surface, 6,-offset,-offset,0)
  133.         VertexCoords(surface, 7,offset,-offset,0)
  134.        
  135.         VertexCoords(surface, 8,-offset,offset,0)
  136.         VertexCoords(surface, 9,offset,offset,0)
  137.         VertexCoords(surface, 10,-offset,-offset,0)
  138.         VertexCoords(surface, 11,offset,-offset,0)
  139.  
  140. End Function


Comments :


BlitzSupport(Posted 1+ years ago)

 Nice one!


EQX(Posted 1+ years ago)

 Nice !!


 

SimplePortal 2.3.6 © 2008-2014, SimplePortal