fade/blen from one static image to another

Hello all!!

I have been banging my head against the wall trying to figure out how to fade/blend from one static (.png/.jpg etc) to another. The fade/bled should start with one solid image and then transition (fade/blen) to the other.

-Ron

You have two textured quad’s and the target quad( image that is the fad into view) is under the first texture quad’s( image that is to fad away).

Reduce the alpha value to let the other blend into the target until alpha = zero.

//
glEnable(GL_BLEND);
glEnable(GL_TEXTURE_2D);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

//Target image
glDisable(GL_COLOR_MATERIAL); // If material on turn off to set color and alpha
glColor4f( 1.0, 1.0, 1.0, 1.0);
glEnable(GL_COLOR_MATERIAL);

draw_image( 1 );
// first image
glColor4f(1.0, 1.0, 1.0, fad_value);// 1.0 =
glDisable(GL_COLOR_MATERIAL);
glColor4f( 1.0, 1.0, 1.0, fad_value);// 1.0 = non-transparent, 0.5 = 50% transparent, 0.0 = transparent
glEnable(GL_COLOR_MATERIAL);
draw_image( 2 );

Originally posted by ryacketta:
[b]Hello all!!

I have been banging my head against the wall trying to figure out how to fade/blend from one static (.png/.jpg etc) to another. The fade/bled should start with one solid image and then transition (fade/blen) to the other.

-Ron[/b]

[This message has been edited by nexusone (edited 02-24-2003).]

O.K

I think i understand, but where am I going wrong?? (the following is just an attempt to fade in one image)

if(mFadeInTexHandle && mFadeOutTexHandle)
{
F32 fade = 0.0f;
// Fade In Effect
if(mTime < mFadeFactor)
{
fade = 1 - (mTime / mFadeFactor);

  	U32 widthCount = mFadeInTexHandle.getTextureCountWidth();
  	U32 heightCount = mFadeInTexHandle.getTextureCountHeight();
  	if(!widthCount | | !heightCount)
  		return;

  	F32 widthScale = F32(mBounds.extent.x) / F32(mFadeInTexHandle.getWidth());
  	F32 heightScale = F32(mBounds.extent.y) / F32(mFadeInTexHandle.getHeight());

  	 for(U32 i = 0; i < widthCount; i++)
  	 {
  		for(U32 j = 0; j < heightCount; j++)
  		{
  			TextureObject *t = (TextureObject *)mFadeInTexHandle.getSubTexture(i, j);
  			RectI stretchRegion;
  			stretchRegion.point.x = (S32)(i * 256 * widthScale + offset.x);
  			stretchRegion.point.y = (S32)(j * 256 * heightScale + offset.y);
  			if(i == widthCount - 1)
  				stretchRegion.extent.x = mBounds.extent.x + offset.x - stretchRegion.point.x;
  			else
  				stretchRegion.extent.x = (S32)((i * 256 + t->bitmapWidth ) * widthScale + offset.x - stretchRegion.point.x);
  			if(j == heightCount - 1)
  				stretchRegion.extent.y = mBounds.extent.y + offset.y - stretchRegion.point.y;
  			else
  				stretchRegion.extent.y = (S32)((j * 256 + t->bitmapHeight) * heightScale + offset.y - stretchRegion.point.y);

  			RectI srcRect(0, 0,
  				t->bitmapWidth,
  				t->bitmapHeight);

  			glDisable(GL_LIGHTING);

  			glEnable(GL_TEXTURE_2D);
  			glBindTexture(GL_TEXTURE_2D, t->texGLName);
  			glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);

  			glEnable(GL_BLEND);
  			glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

  			F32 texLeft   = F32(srcRect.point.x)                    / F32(t->texWidth);
  			F32 texRight  = F32(srcRect.point.x + srcRect.extent.x) / F32(t->texWidth);
  			F32 texTop    = F32(srcRect.point.y)                    / F32(t->texHeight);
  			F32 texBottom = F32(srcRect.point.y + srcRect.extent.y) / F32(t->texHeight);
  			F32 screenLeft   = stretchRegion.point.x;
  			F32 screenRight  = stretchRegion.point.x + stretchRegion.extent.x;
  			F32 screenTop    = stretchRegion.point.y;
  			F32 screenBottom = stretchRegion.point.y + stretchRegion.extent.y;
  				
  			glColor4f(0.0f,0.0f,0.0f,fade);

  			glBegin(GL_TRIANGLE_FAN);
  				glTexCoord2f(texLeft, texBottom);
  				glVertex2f(screenLeft, screenBottom);
  				
  				glTexCoord2f(texRight, texBottom);
  				glVertex2f(screenRight, screenBottom);
  				
  				glTexCoord2f(texRight, texTop);
  				glVertex2f(screenRight, screenTop);

  				glTexCoord2f(texLeft, texTop);
  				glVertex2f(screenLeft, screenTop);
  			glEnd();

  			glDisable(GL_BLEND);
  			glDisable(GL_TEXTURE_2D);
  		}
  	 }
  		
        setUpdate();

        // Update time
        mTime += F32(Platform::getVirtualMilliseconds());
    }
    else
    {
        // We are done fading in, so lets fade back out
        mFadeIn = false;
        mTime = 0.0f;
        // We are done with both the fade in and fade out effect,
        // so pop the control off the canvas
        getRoot()->popDialogControl(this);
    }
}
else
{
    // We didn#180;t have a texture handle, so might as well pop the control off the canvas right away
    getRoot()->popDialogControl(this);
}

-Ron