Difference between revisions of "Tutorial - Simple HUD"

From Horde3D Wiki
Jump to: navigation, search
(New page: AS OF January 9th, 2009 THIS ARTICLE IS A WORK IN PROGRESS. =Tutorial Objectives= * Explanation of overlay procedures and layout format * Create basic utility classes for working with ove...)
 
m
Line 1: Line 1:
 +
__NOTOC__ __NOEDITSECTION__{{ContentBlock|color=white|content={{!!}}
 
AS OF January 9th, 2009 THIS ARTICLE IS A WORK IN PROGRESS.
 
AS OF January 9th, 2009 THIS ARTICLE IS A WORK IN PROGRESS.
  
Line 135: Line 136:
 
};
 
};
 
</Source>
 
</Source>
 +
}}

Revision as of 18:45, 3 January 2010

AS OF January 9th, 2009 THIS ARTICLE IS A WORK IN PROGRESS.

Tutorial Objectives

  • Explanation of overlay procedures and layout format
  • Create basic utility classes for working with overlays
    • Vec2f
    • BasicRect
  • Create a simple HUD Manager
  • Create a root HUDObject class, from which the following derive
    • HUDPanel
    • HUDGauge
    • HUDLabel

Tutorial Notation

Information of that is purely of technical or artistic concern will be presented in subsections addressed to the relevant party. Feel free to skip those that do not pertain to you.

Part I: Horde3D Overlays

Overlays are special objects which are drawn ontop of a rendered scene. Quoting the Horde3D API reference on the function "showOverlay()":

An overlay is a 2D image that can be used to render 2D GUI elements. [...] Overlays can have different layers which describe the order in which they are drawn. Overlays with smaller layer numbers are drawn before overlays with higher layer numbers.

The function used to display an overlay is: void showOverlay( float x_ll, float y_ll, float u_ll, float v_ll, float x_lr, float y_lr, float u_lr, float v_lr, float x_ur, float y_ur, float u_ur, float v_ur, float x_ul, float y_ul, float u_ul, float v_ul, int layer, ResHandle materialRes ) That's a pretty monstrous function, which is why we're going to create some basic structures to do the hard work.

[INSERT SCREEN COORDINATE SYSTEM PICTURE HERE]

IMPORTANT INFORMATION. Horde3D begins its screen space coordinate system at the bottom left corner. Hence the bottom left corner is coordinate (0,0), the bottom right is (1,0), the top left is (0,1), and the top right is (1,1). ALWAYS REMEMBER THIS.

Utility Classes

//2-Dimensional point struct, later we'll add interpolation
struct Vec2f
{
	float x, y;
	Vec2f(float vx, float vy)
	{
		set(vx,vy);
	};
	void set(float vx, float vy)
	{
		x = vx; y = vy;
	};
	Vec2f()
	{
		x = y = 0;
	};
};

//Basic Rectangle structure, later it'll receive a clipping function
struct basicRect
{
	Vec2f upperLeft, upperRight, lowerLeft, lowerRight;
	basicRect(){};
	basicRect(Vec2f ul, Vec2f ur, Vec2f ll, Vec2f lr)
	{
		upperLeft = ul;
		upperRight = ur;
		lowerLeft = ll;
		lowerRight = lr;
	};
	basicRect(Vec2f ll, Vec2f ur)
	{
		setSimpleExtents(ll,ur);
	};
	void setSimpleExtents(Vec2f ll, Vec2f ur)
	{
		upperLeft.set(ll.x, ur.y);
		upperRight = ur;
		lowerLeft = ll;
		lowerRight.set(ur.x, ll.y);
	};
	void moveX(float val)
	{
		upperLeft.x += val;
		lowerLeft.x += val;
		upperRight.x += val;
		upperLeft.x += val;
	};
	void moveY(float val)
	{
		upperLeft.y += val;
		lowerLeft.y += val;
		upperRight.y += val;
		upperLeft.y += val;
	};
	void move(float x, float y)
	{
		moveX(x); moveY(y);
	};
	void flipHorizontal()
	{
		Vec2f tX, tY;
		tX = upperLeft;
		tY = lowerLeft;
		upperLeft = upperRight;
		lowerLeft = lowerRight;
		upperRight = tX;
		lowerRight = tY;
	};
	void flipVertical()
	{
		Vec2f tX, tY;
		tX = upperLeft;
		tY = upperRight;
		upperLeft = lowerLeft;
		upperRight = lowerRight;
		lowerLeft = tX;
		lowerRight = tY;
	};
	void setEdges(float top, float right, float bottom, float left)
	{
		setTop(top);
		setBottom(bottom);
		setRight(right);
		setLeft(left);
	};
	void setTop(float val)
	{
		upperLeft.y = val;
		upperRight.y = val;
	};
	void setBottom(float val)
	{
		lowerLeft.y = val;
		lowerRight.y = val;
	};
	void setLeft(float val)
	{
		upperLeft.x = val;
		lowerLeft.x = val;
	};
	void setRight(float val)
	{
		upperRight.x = val;
		lowerRight.x = val;
	};
};