Question about screen fade transitions.

[jinxtengu]

Hello again,
So what I am interested in adding to my game today is a fade transition between app states/stages.

I asked this question a couple of years ago, back when I was using an older version of Z game editor, and I found a solution,
but since I've upgraded to a newer version, the method I was using no longer seems to work, and I'm not completely sure why.

So to do fades in the past, I was placing an object in front of the camera, with a simple animation an an alpha channel. The animation target would be
something like fadematerial.color.A and would go from 1 to 0 over the duration of the animation (or possibly the other way around)
anyway that would make the screen fade to black, or white.

After some experimenting I think perhaps some of the color combination variables may have been changed in newer Z game?

Also, perhaps someone knows a better way to do a screen fade??

[Kjell]

Hi jinxtengu,

So to do fades in the past, I was placing an object in front of the camera, with a simple animation an an alpha channel.

That should still work. Not sure what you're doing wrong that makes it work no longer. Anyway, how you implement it in your project completely depends on your own preference, but i'd probably go with something like this ( click the left mouse button to switch scenes ).

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" LightPosition="0 1 0" FileVersion="2">
  <OnLoaded>
    <ZLibrary Comment="Fade" HasInitializer="1">
      <Source>
<![CDATA[// Initialize fade material

{
  FadeMaterial.Color.A = 1;
}

// Functions to trigger fade-in/out

void fadeIn(float duration)
{
  if(duration)
  {
    FadeSpeed = -1 / duration;
  }
  else
  {
    FadeMaterial.Color.A = 0;
    FadeSpeed = 0;
  }

  @SpawnModel(Model: Fade, SpawnStyle: 1);
}

void fadeOut(float duration)
{
  if(duration)
  {
    FadeSpeed = 1 / duration;
  }
  else
  {
    FadeMaterial.Color.A = 1;
    FadeSpeed = 0;
  }

  @SpawnModel(Model: Fade, SpawnStyle: 1);
}

// Functions to check if fade(-out) has completed

int isFadeDone()
{
  return FadeSpeed ? 0 : 1;
}

int isFadeOutDone()
{
  return FadeMaterial.Color.A == 1 && !FadeSpeed;
}]]>
      </Source>
    </ZLibrary>
    <SetAppState State="Red"/>
  </OnLoaded>
  <States>
    <AppState Name="Red">
      <OnStart>
        <ZExpression>
          <Expression>
<![CDATA[// Trigger fade-in

fadeIn(1);

// Set background color to dark-red

App.ClearColor = vector3(0.5, 0, 0);

// Set box color to red

BoxMaterial.Color = vector3(1, 0, 0);

// Spawn a bunch of boxes

for(int i=0; i<8; i++)
{
  float a = i*PI/4;

  Box.Position.X = cos(a)*2;
  Box.Position.Y = sin(a)*2;
  Box.Position.Z = 0;

  Box.Rotation.X = rnd();
  Box.Rotation.Y = rnd();

  Box.RotationVelocity.X = random(0, 0.1);
  Box.RotationVelocity.Y = random(0, 0.1);

  createModel(Box);
}]]>
          </Expression>
        </ZExpression>
      </OnStart>
      <OnUpdate>
        <Condition>
          <Expression>
<![CDATA[// Check if fade-out is done ( triggered from App.OnUpdate )

return isFadeOutDone();]]>
          </Expression>
          <OnTrue>
            <SetAppState State="Blue"/>
          </OnTrue>
        </Condition>
      </OnUpdate>
      <OnLeave>
        <RemoveAllModels/>
      </OnLeave>
    </AppState>
    <AppState Name="Blue">
      <OnStart>
        <ZExpression>
          <Expression>
<![CDATA[// Trigger fade-in

fadeIn(1);

// Set background color to dark-blue

App.ClearColor = vector3(0, 0, 0.5);

// Set box color to blue

BoxMaterial.Color = vector3(0, 0, 1);

// Spawn a bunch of boxes

for(int i=0; i<8; i++)
{
  Box.Position.X = random(0, 8);
  Box.Position.Y = random(0, 4);
  Box.Position.Z = random(0, 2);

  Box.Rotation.X = rnd();
  Box.Rotation.Y = rnd();

  Box.RotationVelocity.X = random(0, 0.1);
  Box.RotationVelocity.Y = random(0, 0.1);

  createModel(Box);
}]]>
          </Expression>
        </ZExpression>
      </OnStart>
      <OnUpdate>
        <Condition>
          <Expression>
<![CDATA[// Check if fade-out is done ( triggered from App.OnUpdate )

return isFadeOutDone();]]>
          </Expression>
          <OnTrue>
            <SetAppState State="Red"/>
          </OnTrue>
        </Condition>
      </OnUpdate>
      <OnLeave>
        <RemoveAllModels/>
      </OnLeave>
    </AppState>
  </States>
  <OnUpdate>
    <Condition>
      <Expression>
<![CDATA[//

return isFadeDone();]]>
      </Expression>
      <OnTrue>
        <KeyPress Keys="{">
          <OnPressed>
            <ZExpression>
              <Expression>
<![CDATA[// Trigger fade-out

fadeOut(0.5);]]>
              </Expression>
            </ZExpression>
          </OnPressed>
        </KeyPress>
      </OnTrue>
    </Condition>
  </OnUpdate>
  <Content>
    <Model Name="Fade" Category="255">
      <Definitions>
        <Variable Name="FadeSpeed"/>
      </Definitions>
      <OnUpdate>
        <ZExpression>
          <Expression>
<![CDATA[//

FadeMaterial.Color.A += FadeSpeed * App.DeltaTime;

//

if(FadeMaterial.Color.A > 1)
{
  FadeSpeed = 0;
  FadeMaterial.Color.A = 1;
}
else if(FadeMaterial.Color.A <= 0)
{
  FadeSpeed = 0;
  FadeMaterial.Color.A = 0;
  @RemoveModel(Model: Fade);
}]]>
          </Expression>
        </ZExpression>
      </OnUpdate>
      <OnRender>
        <Condition>
          <Expression>
<![CDATA[//

return FadeMaterial.Color.A;]]>
          </Expression>
          <OnTrue>
            <ZExpression>
              <Expression>
<![CDATA[//

mat4 identityMatrix, modelViewMatrix, projectionMatrix;

//

getMatrix(0, modelViewMatrix);
getMatrix(1, projectionMatrix);

//

for(int i=0; i<4; i++)
{
  identityMatrix[i,i] = 1;
}

setMatrix(0, identityMatrix);
setMatrix(1, identityMatrix);

//

@UseMaterial(Material: FadeMaterial);
@RenderMesh(Mesh: FadeMesh);

//

setMatrix(0, modelViewMatrix);
setMatrix(1, projectionMatrix);]]>
              </Expression>
            </ZExpression>
          </OnTrue>
        </Condition>
      </OnRender>
    </Model>
    <Mesh Name="FadeMesh">
      <Producers>
        <MeshBox Grid2DOnly="255"/>
      </Producers>
    </Mesh>
    <Material Name="FadeMaterial" Shading="1" Color="0 0 0 0" Light="0" Blend="1" ZBuffer="0"/>
    <Model Name="Box">
      <OnRender>
        <UseMaterial Material="BoxMaterial"/>
        <RenderMesh Mesh="BoxMesh"/>
      </OnRender>
    </Model>
    <Mesh Name="BoxMesh">
      <Producers>
        <MeshBox Scale="0.5 0.5 0.5"/>
      </Producers>
    </Mesh>
    <Material Name="BoxMaterial" Shading="1" Color="1 0 0 0"/>
  </Content>
</ZApplication>

K

[jinxtengu]

Sorry my bad. I tested this, this morning and it still works, I'm not sure why it wasn't, I must have been making some mistake. Anyway thanks for the example Kjell.

Btw I was wondering, will this work with a material that is used as a font, so as to create the effect of a text fading away into transparency?
I'm guessing the simple answer is yes.
Also would the variable to animate be Color or a blend of RGB? and are RGB variables individually alterable for Materials or Materialtextures, or both?

[Kjell]

Hi jinxtengu,

Btw I was wondering, will this work with a material that is used as a font, so as to create the effect of a text fading away into transparency?

Sure, here's a simple demonstration.

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" ClearColor="0.25 0.25 0.25 1" LightPosition="0 1 1" FileVersion="2">
  <OnLoaded>
    <ZExpression>
      <Expression>
<![CDATA[// Spawn some boxes to emphasise font transparency

for(int i=0; i<8; i++)
{
  Box.Position.X = random(0, 8);
  Box.Position.Y = random(0, 4);
  Box.Position.Z = random(0, 4);

  Box.Rotation.X = rnd();
  Box.Rotation.Y = rnd();

  Box.RotationVelocity.X = random(0, 0.1);
  Box.RotationVelocity.Y = random(0, 0.1);

  createModel(Box);
}]]>
      </Expression>
    </ZExpression>
  </OnLoaded>
  <OnUpdate>
    <ZExpression>
      <Expression>
<![CDATA[// Change font material transparency over time

TinyMaterial.Color.A = 2-frac(App.Time/2)*4;]]>
      </Expression>
    </ZExpression>
  </OnUpdate>
  <OnRender>
    <UseMaterial Material="TinyMaterial"/>
    <RenderText Text="FADE TO GREY"/>
  </OnRender>
  <Content>
    <Font Name="TinyFont" Bitmap="TinyBitmap" FirstChar="65" CharPixelWidth="4" CharPixelHeight="5"/>
    <Bitmap Name="TinyBitmap" Width="103" Height="6" Filter="1">
      <Producers>
        <BitmapFromFile Transparency="1" DataWidth="103" DataHeight="6">
          <BitmapFile>
<![CDATA[78DAD594510A00210844BBFFA5DB8F2064CDE758C1B27E84C8A8C334D5DAEFA3F7FEC9C6798E58E6136FEB76CEAB6E5B180375C0E833230E9EA4C89FA94603FD152B4B53248B56C22F35295D4AD4CB8E0237DA5E762C8816EDDA701DBF88AA68A933EF3ACDE3379CA68856E22F8AA6ABC1FF58FAA745F9ADE729722BE527E7880780B60328]]>
          </BitmapFile>
        </BitmapFromFile>
      </Producers>
    </Bitmap>
    <Material Name="TinyMaterial" Shading="1" Light="0" Blend="1" ZBuffer="0" Font="TinyFont"/>
    <Model Name="Box">
      <OnRender>
        <UseMaterial Material="BoxMaterial"/>
        <RenderMesh Mesh="BoxMesh"/>
      </OnRender>
    </Model>
    <Mesh Name="BoxMesh">
      <Producers>
        <MeshBox/>
      </Producers>
    </Mesh>
    <Material Name="BoxMaterial" Shading="1" Color="0.25 0.25 0.25 1" SpecularColor="0.5 0.5 0.5 1" Shininess="32"/>
  </Content>
</ZApplication>

Also would the variable to animate be Color or a blend of RGB?

Sure, here's another example

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" ClearColor="0 0.25 0.5 1" LightPosition="0 1 1" FileVersion="2">
  <OnLoaded>
    <ZExpression>
      <Expression>
<![CDATA[// Spawn some boxes to emphasise font transparency

for(int i=0; i<8; i++)
{
  Box.Position.X = random(0, 8);
  Box.Position.Y = random(0, 4);
  Box.Position.Z = random(0, 4);

  Box.Rotation.X = rnd();
  Box.Rotation.Y = rnd();

  Box.RotationVelocity.X = random(0, 0.1);
  Box.RotationVelocity.Y = random(0, 0.1);

  createModel(Box);
}]]>
      </Expression>
    </ZExpression>
  </OnLoaded>
  <OnUpdate>
    <ZExpression>
      <Expression>
<![CDATA[// Change font material transparency over time

TinyMaterial.Color.A = cos(App.Time)/2+0.5;

// Change font material color over time

TinyMaterial.Color.R = sin(App.Time*3)/2+0.5;
TinyMaterial.Color.G = cos(App.Time*5)/2+0.5;
TinyMaterial.Color.B = 1-TinyMaterial.Color.R;]]>
      </Expression>
    </ZExpression>
  </OnUpdate>
  <OnRender>
    <UseMaterial Material="TinyMaterial"/>
    <RenderText Text="SOMEWHERE OVER THE RAINBOW" Scale="0.5"/>
  </OnRender>
  <Content>
    <Font Name="TinyFont" Bitmap="TinyBitmap" FirstChar="65" CharPixelWidth="4" CharPixelHeight="5"/>
    <Bitmap Name="TinyBitmap" Width="103" Height="6" Filter="1">
      <Producers>
        <BitmapFromFile Transparency="1" DataWidth="103" DataHeight="6">
          <BitmapFile>
<![CDATA[78DAD594510A00210844BBFFA5DB8F2064CDE758C1B27E84C8A8C334D5DAEFA3F7FEC9C6798E58E6136FEB76CEAB6E5B180375C0E833230E9EA4C89FA94603FD152B4B53248B56C22F35295D4AD4CB8E0237DA5E762C8816EDDA701DBF88AA68A933EF3ACDE3379CA68856E22F8AA6ABC1FF58FAA745F9ADE729722BE527E7880780B60328]]>
          </BitmapFile>
        </BitmapFromFile>
      </Producers>
    </Bitmap>
    <Material Name="TinyMaterial" Shading="1" Light="0" Blend="1" ZBuffer="0" Font="TinyFont"/>
    <Model Name="Box">
      <OnRender>
        <UseMaterial Material="BoxMaterial"/>
        <RenderMesh Mesh="BoxMesh"/>
      </OnRender>
    </Model>
    <Mesh Name="BoxMesh">
      <Producers>
        <MeshBox/>
      </Producers>
    </Mesh>
    <Material Name="BoxMaterial" Shading="1" Color="0 0.5 1 1" SpecularColor="0 0.25 0.5 1" Shininess="32"/>
  </Content>
</ZApplication>

and are RGB variables individually alterable for Materials or Materialtextures, or both?

Only for Materials, a MaterialTexture component simply enables the use of a texture on a material .. nothing more. What are you trying to do exactly?

K

[jinxtengu]

Once again, Thank you for these great examples Kjell!
To answer your question; Actually all I was wanting to do atm in regards to r g b variables was to create a fade transition, But I can see that they would also be useful for colorization effects.