2. Graphics

This part of the manual deals with different methods to display graphics, beginning with simple geometric shapes, going through textures and ending with fonts and text.

2.1 Basic shapes

A straight-forward way to display graphics in ZweiDe is displaying a basic shape. If you want to keep it simple, it's only one line and doesn't need any additional configuration. There are several different shapes in ZweiDe:

A point only needs an x- and a y-coordinate though you may re-set its size.


ZweiDe.DrawPoint( ... );

Then there's the line which needs a start and an end point.


ZweiDe.DrawLine( ... );

The linestrip draws a strip of lines using an unspecified number of points...


ZweiDe.DrawLineStrip( ... );

...and the lineloop does the same in a loop.


ZweiDe.DrawLineLoop( ... );

The rect needs you to pass a start point, width and height.


ZweiDe.DrawRect( ... );

Similar to the rect, the oval takes the same parameters...


ZweiDe.DrawOval( ... );

...but can also be drawn unfilled...

...or with a custom number of triangle segments.

And, of course, there's the polygon - though, only convex ones. It consists of an unspecified number of edge points. DrawPolygon may also be used to draw any kind of OpenGL primitive.


ZweiDe.DrawPolygon( ... );

2.2 Coloring

Assuming the case that you don't want your application to consist solely of white shapes, there are several commands to add some color.

The easiest way of coloring is coloring a whole shape:


ZweiDe.SetColor( ... );

With SetColor, any following drawing action is performed using the currently set color. It expects you to pass three or four parameters representing an RGB or RGBA value. If you don't set the alpha value, it will stay as it is.

Another possibility is to color a shape vertex by vertex (Each of the "edge" points passed or automatically generated is called vertex).

To do this, it is neccessary to know how ZweiDe / OpenGL shapes are drawn internally e.g. how ZweiDe applies color to each shape:

ZweiDe uses a color stack and removes the "topmost" color for each vertex coloring it with its RGBA value. If there is no color left on the stack, the last color is used again.

By default, the color stack is inactive: The topmost color is used without removing it, so there is only one color in use.

When calling SetColor you empty the current color stack and insert the specified color as sole content. You can also add a new color at the bottom of the stack using AddColor:


ZweiDe.AddColor( ... );

It is used the same way as SetColor. Growing the color stack in order to vertex-color a shape only has an effect when activating the color stack; you can do this using the global VertexColorActive value:

ZweiDe.VertexColorActive = true;
	...
ZweiDe.VertexColorActive = false;

Here is a line-by-line-example how to use vertex coloring on a simple rect shape:


ZweiDe.VertexColorActive = true;

Activate vertex coloring.


ZweiDe.SetColor(255, 0, 255);

Clear the color stack.
Set [255, 0, 255, alpha] as new content.


ZweiDe.AddColor(255, 0, 0);

Add [255, 0, 0, alpha] at the stacks bottom.


ZweiDe.AddColor(0, 255, 0);

Add [0, 255, 0, alpha] at the stacks bottom.


ZweiDe.AddColor(0, 0, 255);

Add [0, 0, 255, alpha] at the stacks bottom.


ZweiDe.DrawRect(100.0f, 100.0f, 50.0f, 50.0f);

Draw a rect using the color stack.


ZweiDe.VertexColorActive = false;

Deactivate vertex coloring.

The result is a smooth-colored rect: Magenta on its upper right, then red on the lower right, followed by green on the lower left and finished with blue on the upper left.

This shows us the specific order of a rects vertices / vertex points: UR, LR, LL, UL. We need this information when trying to use vertex coloring in order to predict the result we will get from a certain color stack.

Click on the right image to open an overview showing all ZweiDe shapes and their vertex ordering using a greyscale gradient vertex coloring. The first vertex is white, the last one is black.

2.3 Blendmodes

You probably have wondered how the alpha value in all those color data can be used. It seems as if it was simply ignored; and yes, it is. The alpha value is ignored because the general drawing mode that is set by default does not support any alpha value processing. It is called Blendmode and the one without alpha - the default one - is called Solid.

This rather short chapter is about how to set the current Blendmode and the variety of Blendmodes in general.

So, how is a Blendmode set? It's not that hard, just one line:


ZweiDe.SetBlend( ... );

The only parameter that is needed by this command is a value using ZweiDe's BlendMode type. Once set, a Blendmode is used for any drawing operation and affects the new RGBA value applied to the "surface" on which the drawing operation is performed.

The following overview will show you what default Blendmodes there are and what effect they have when used:

The gradient texture using the specified Blendmode when being drawn over the wood texture.


BlendMode.Solid


BlendMode.Mask


BlendMode.Alpha


BlendMode.Shade


BlendMode.TotalAdd


BlendMode.Light


BlendMode.SoftLight


BlendMode.Invert

These Blendmodes should be sufficient for most purposes. Though, some of them may behave unexpected when being used during a Render2Texture operation; this topic will be expanded in one of the advanced chapters.

2.4 Transformation

This chapter deals with ZweiDes transformation possibilities. "Transformation" here means moving, scaling and / or rotating a ZweiDe shape without changing any of the commands directly related to its drawing operation.

Let's start with rotation. Basically, you can rotate any shape using


ZweiDe.SetRotation( ... );

SetRotation needs you to pass an angle parameter, measured in radian units. To rotate a shape 90°, you'd pass Pi / 2 e.g. Fetze.Utility.Func.HalfPi. Once set, a rotation angle is used in any following drawing operation.

The rotation is usually performed around the shapes upper left or its first vertex as this is a shapes default handle. You may move a shapes handle (relative) using


ZweiDe.SetHandle( ... );

Similar to SetRotation or other state commands, it affects any following operation once applied. Moving the default handle before drawing a shape will change its position and both rotation and scaling behaviour.

When it comes to only change the position of any following shape, use


ZweiDe.SetOrigin( ... );

It won't affect rotation or scaling behaviour and just move everything.

One transformation operation left unexplained: Scaling! Here it is:


ZweiDe.SetScale( ... );

You may pass one or two scaling factors. When passing only one, both scaling dimensions (x and y) will take the same value.

If you want to set both rotation and scaling values at once, you may use


ZweiDe.SetTransform( ... );

That's about it.

<-- Return to the last page

Proceed to the next page -->