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...)
 
(Updated the references to function names in the tutorial text.)
 
(One intermediate revision by one other user not shown)
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 16: Line 17:
  
 
=Part I: Horde3D Overlays=
 
=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()":
+
Overlays are special objects which are drawn ontop of a rendered scene. Quoting the Horde3D API reference on the function "h3dShowOverlay()":
 
<blockquote>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.</blockquote>
 
<blockquote>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.</blockquote>
  
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.
+
The function used to display an overlay is: ''void h3dShowOverlay( 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, H3DRes 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]
 
[INSERT SCREEN COORDINATE SYSTEM PICTURE HERE]
Line 135: Line 136:
 
};
 
};
 
</Source>
 
</Source>
 +
}}

Latest revision as of 16:21, 28 June 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 "h3dShowOverlay()":

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 h3dShowOverlay( 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, H3DRes 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;
	};
};