transparency and backgrounds

[Rick]

http://dl.dropbox.com/u/1293842/hud.jpg

 

Let's say there are 2 images at work. One image is the circle the other is the rectangle. Now even the circle image is really rectangle but it has transparency in the middle on at the corners. I want to draw the rectangle first, then lay the circle on top BUT I want the corners of the circle to somehow mask the rectangle image that was drawn first so you don't see those, but I want the middle of the circle image to show the rectangle behind

it.

 

This is all in 2D land, not as a texture that will go on a model. How would I do this inside LE? I assume I have to use some OpenGL drawing? What's this technique even called?

[Canardia]

I think you need a 3rd image, which has the corners painted with some color and the rest transparent, and then do something like SetColor(cornercolor); SetBlend(MUL2X); to multiply the corners out.

[Rekindled Phoenix]

Something to keep in mind for the future, Klepto2 has been working on some 2D graphics API for C# development that may benefit your GUI / HUD.

 

http://www.leadwerks.com/werkspace/blog/16/entry-638-back-in-leadwerks-net-development/

[Rick]

Looking back at this. Metatron there is no MUL2X. There is a MOD2X and I assume that's what you mean? However I wasn't able to get this to work.

 

So I have a BG solid rectangle of red to represent the health. I have a circle image with alpha all around and in a circle in the center for the frame. I then have a transparent circle with all surrounding pixels with a pink color (255, 0, 255); Below is the following code to draw, but the corners of the red image are still there. I need them to go away. The look I'm going for is Diablo health bar.

 

 

For the code I have:

SetColor(Vec4(1));
SetBlend(BLEND_ALPHA);

DrawImage(healthBG, 50, 50, 100, 100);
DrawImage(health, 50, 50, 100, 100);

SetColor(Vec4(1, 0, 1, 1));
SetBlend(BLEND_MOD2X);
DrawImage(mask, 50, 50, 100, 100);

SetColor(Vec4(1));
SetBlend(BLEND_ALPHA);
DrawImage(frame, 50, 50, 100, 100);

[tjheldna]

Just wondering if anyone managed to get this technique to work? I'm trying to do something similar.

[Marleys Ghost]

I experimented with a Diablo style health orb using animated textures I created and round and square alpha masks making use of a custom buffer. Mack did a very nice version using shaders and 3D spheres.

 

 

The Up and Down arrow keys moves the level of the "fluid".

 

 

 

[tjheldna]

That's exactly the effect I'm after... that looks cool!

 

So your saying I need to use a custom buffer? I have tried to set up a custom buffer a while back, but there is practically no documentation that I can find on that.

 

As far as I got with that is declaring the buffer with the calls to getsize and makecurrent. I have no idea how to render anything to it or what to do with the buffer after declaration . Any more info that info would be really appreciated!

[Daimour]

As far as I got with that is declaring the buffer with the calls to getsize and makecurrent. I have no idea how to render anything to it or what to do with the buffer after declaration . Any more info that info would be really appreciated!

 

You can watch a little example of rendering to buffer here: http://www.leadwerks.com/werkspace/topic/4746-load-texture-pieces/#entry41584

[tjheldna]

Yay got a custom buffer working!! Thanks Daimour! The info from that video should go into the documentation for buffers.

[tjheldna]

Thanks for the help guys, with that I have come up with a solution. I just don't know if its any good or not? If anyone can review it; possibly point out any optimisations; or let me know I'm way off the mark, that would be awesome!

 

This buffer thing and how it works is very new to me. I'm surprised I got this far.

 

This is a copy from my code however I have removed my game stuff so may not compile straight off the bat. Anyone is free to use it if they feel it worthy.

 

Testing images are attached. I and O keys raise/lower the level

 

// ====================================================================
// This file was generated by LEBuilder
// http://leadwerks.com/werkspace
// ====================================================================
#include "engine.h"
#include <iostream>
#include <string>
const char* MediaDir = "";
const char* AppTitle = "Test";
bool paused = false;
void ErrOut( const std::string& message ) { std::cerr << message << std::endl; }
// -------------------------------
int main( int argn, char* argv[] )
{
if( !Initialize() )
return 1;
SetAppTitle(AppTitle);

int screenWidth = 1024;
int screenHeight= 768;
if(!Graphics(screenWidth, screenHeight))
return false;
RegisterAbstractPath( MediaDir );
// Create framework object and set it to a global object so other scripts can access it
TFramework fw = CreateFramework();	
if( fw == NULL )	
{
ErrOut( "Failed to initialize engine." );			
return 1;	
}	
// Set Lua framework object	
SetGlobalObject( "fw", fw );			

// Set Lua framework variable	
BP lua = GetLuaState();	
lua_pushobject( lua, fw );	
lua_setglobal( lua, "fw" );	
lua_pop( lua, 1 );
TTexture bottle = LoadTexture("abstract::manaBottle.dds");
TTexture bottleLiquid = LoadTexture("abstract::manaLiquid.dds");
// Get framework main camera	
TCamera camera = GetLayerCamera(GetFrameworkLayer(0));

int initY = 200;
int Y = initY;

//Declare Buffer and textures
TBuffer buf = CreateBuffer(128, 128, BUFFER_COLOR);
TTexture tex = CreateTexture(128, 128, TEXTURE_RGBA);
SetColorBuffer(buf, tex, 0, 0);

while( !TheGame->exitApp )	
{		
UpdateFramework();
RenderFramework();

//Set the background
SetColor(Vec4(0.5F, 0.5F, 0.5F));
DrawRect(0, 0, GraphicsWidth(), GraphicsHeight());
SetColor(Vec4(1.0F, 1.0F, 1.0F));

//move the level if one of these keys are hit
if(KeyHit(KEY_I))
if(Y <= (initY + 128))Y += 10;
if(KeyHit(KEY_O))
if(Y >= (initY))Y -= 10;


//Set the buffer thing
SetBuffer(buf);
DrawImage(bottleLiquid, 0, Y - 64, 128, -128);
SetBuffer(BackBuffer());

//Draw the buffer and the glass image
SetBlend(BLEND_ALPHA);
DrawImage(tex, 128, Y, 128, 128);

DrawImage(bottle, 128, 190, 128, 128);
Flip(0);
}

//Free buffer goes here right?
FreeBuffer(buf);

return Terminate();
}

 

Thanks!!

[Daimour]

Suggestion for optimization will be not to render custom buffer every frame. Render it only when picture is changed. And replace 2 DrawImage() with 1 that will draw final picture only. It will make code more tricky but will free some extra FPS.

[tjheldna]

That's a good tip Daimour. I'll implement that.