User Tools

Site Tools


gamedev:canvassystem:introduction

This is an old revision of the document!


gamedev:canvassystem:introduction

Canvas System

The Canvas System provides 2D rendering support for the Drag[en]gine Game Engine. This covers both graphical user interfaces as well as 2D graphics povered games. 3D World rendering and 2D Canvas rendering work together hand in hand and can be mixed in any desired way without limitations. For example in a typical 3D game setup the rendering composes of 2D canvas hosting the 3D world to render. In the same spirit dynamic skins in 3D geometry can contain 2D canvas renderings for rich content. To get the maximum out of the Drag[en]gine it is important to understand not only the 3D rendering using deWorld but also 2D rendering using deCanvas and subclasses.

Canvas Rendering

Canvas rendering works using definitions of what to render not how to render. This is different from other engines where developers typically render 2D graphics in detail. This introduces various problems and makes life harder than necessary. In the Drag[en]gine Game Engine rendering is always done by definitions instead. A canvas defines how area covered by the canvas is rendered by the graphic module. The definition of a canvas has to be updated only if the game element using the canvas changes. The graphic module takes care of rendering the canvas in all frames in between including dynamic content like for example videos. Using this system the graphic module knows at every point in time precisely how the window content has to look like and can optimize the rendering to the maximum.

Canvas Layout

Canvas are organized in a tree structure. At the root stands the render window. This represents the game window where you can display your content. The render window owns exactly one canvas view which is created for you when the render window is created. The canvas view contains child canvas which can be either canvas providing actual content (like for example a 3D world) or another canvas view containing another level of canvas. See canvas view for details.

Basic Canvas Parameters

All canvas types share some common parameters. Every canvas has a position and size defining the canvas coordinate system. All quantities are measured in pixels. The render window takes care of mapping the canvas view to the actual screen resolution. What goes for canvas themselves they always measure in pixels for simplicity.

Canvas coordinate system

Canvas coordinate system.

This coordinate system is used to place the content in the parent render window. Coordinate systems are nested so child coordinate systems apply ontop of the parent coordinate system. In general canvas content is mapped to fill the entire canvas. The size acts as base size of the canvas and has to match the content size to obtain a 1-on-1 pixel matching. For full control transformation matrix can be used

Canvas Transformation

Canvas can be modified using a transformation matrix for adding all kinds of game effects like for example temporarily wobbling or stretching canvas or more strange effects like sheering. The transformation matrix is applied to the canvas coordinate system after the basic canvas parameters are applied. This decouples basic canvas parameter like size from effects applied to the canvas making handling 2D effects simple and less error prone. The transformation matrix is a texture matrix. This is a 3×2 floating point row major matrix. Supported are affine transformations like translation, rotation, scaling and sheering. Canvas with transformations can be nested like non-transformed canvas coordinate systems.

Canvas coordinate system with transformation

Canvas coordinate system with transformation.

Canvas Transparency and Color

Canvas are in general transparent. Besides the content defining transparency each canvas has also a transparency on its own which is applied to all content. This allows to fade in and out canvas easily. In addition canvas have a color matrix. This is a 5×4 floating point row major matrix transforming color including alpha value. This allows to apply color and alpha modifications to the canvas and all its content dynamically. Possible transformations include (besides many more) color translation, color scaling, brightness, contrast, saturation and color inversion. Important to know is that color transformation happens in normalized color space. In general this is linear color space but can be different if monitors have specific properties. The provided convenience implementations in the color matrix class are already adjusted for this. If you want to use sRGB colors from images or paint applications apply first a matching gamma correction (typically 2.2). Color matrices are also cumulative so the color matrix of a canvas is applied over the color matrix of the parent. The default color matrix is the identity color matrix.

Canvas with color transformation

Canvas with color transformation.

Canvas Masking

Canvas can be assigned a mask. Masks are in general grayscale images allowing to gradually blend out parts of the canvas content but can be also 2-bit images for hard masks if desired.

Masked canvas with mask shown

Masked canvas with mask shown.

Canvas Types

Capture Canvas

Content of canvas views can be captured for example for screenshots using capture canvas.

You could leave a comment if you were logged in.
gamedev/canvassystem/introduction.1434584609.txt.gz · Last modified: 2015/06/17 23:43 by dragonlord