| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| gamedev:canvassystem:introduction [2015/06/24 09:53] – Work in progress thanos | gamedev:canvassystem:introduction [2024/03/14 16:46] (current) – dragonlord |
|---|
| | {{tag>graphic canvas ui}} |
| gamedev:canvassystem:introduction | gamedev:canvassystem:introduction |
| <WRAP youarehere> | <WRAP youarehere> |
| [[:start|Start Page]] >> [[gamedev:main|Game Development with the Drag[en]gine]] >> **Canvas System** | [[:start|Start Page]] >> [[:gamedev|Game Development with the Drag[en]gine]] >> **Canvas System** |
| </WRAP> | </WRAP> |
| |
| |
| ====== Canvas Rendering ====== | ====== Canvas Rendering ====== |
| Canvas rendering works using definitions of **what** content to render and not **how** to render it. This is different from other engines where typically 2D graphics rendering must be specified in detail, a process that can introduce unnecessary complexity. In the Drag[en]gine Game Engine rendering is always done by **definitions** instead. A [[http://dragengine.rptd.ch/docs/dragengine/latest/classdeCanvas.html|canvas]] defines how an area covered by the canvas element is to be 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 including dynamic content like videos. In this way, the graphic module is constantly aware about its window content and can optimize its rendering to the maximum. | Canvas rendering works using definitions of **what** content to render and not **how** to render it. This is different from other engines where typically 2D graphics rendering must be specified in detail, a process that can introduce unnecessary complexity. In the Drag[en]gine Game Engine rendering is always done by **definitions** instead. A #@LinkApiDocDE2_HTML~classdeCanvas.html,canvas~@# defines how an area covered by the canvas element is to be 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 including dynamic content like videos. In this way, the graphic module is constantly aware about its window content and can optimize its rendering to the maximum. |
| |
| ====== Canvas Layout ====== | ====== Canvas Layout ====== |
| Canvases are organized in a tree structure with a [[http://dragengine.rptd.ch/docs/dragengine/latest/classdeRenderWindow.html|render window]] as the root. This represents the game window where complex content is to be displayed. The render window owns exactly one [[gamedev:canvassystem:canvasview|canvas view]] which is created at the same time the rendering window is created. This root view contains child canvases which either provide actual content (like for example a 3D world) or other canvases leading to deeper levels of organisation. For more details, see [[gamedev:canvassystem:canvasview|canvas view]]. | Canvases are organized in a tree structure with a #@LinkApiDocDE2_HTML~classdeRenderWindow.html,render window~@# as the root. This represents the game window where complex content is to be displayed. The render window owns exactly one [[gamedev:canvassystem:canvasview|canvas view]] which is created at the same time the rendering window is created. This root view contains child canvases which either provide actual content (like for example a 3D world) or other canvases leading to deeper levels of organisation. For more details, see [[gamedev:canvassystem:canvasview|canvas view]]. |
| |
| ====== Basic Canvas Parameters ====== | ====== Basic Canvas Parameters ====== |
| |
| ====== Canvas Transformation ====== | ====== 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 [[http://dragengine.rptd.ch/docs/dragengine/latest/classdecTexMatrix2.html|texture matrix]]. This is a 3x2 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 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 #@LinkApiDocDE2_HTML~classdecTexMatrix2.html,texture matrix~@#. This is a 3x2 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. |
| |
| <WRAP center box 450px> | <WRAP center box 450px> |
| |
| ====== Canvas Transparency and Color ====== | ====== 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 [[http://dragengine.rptd.ch/docs/dragengine/latest/classdecColorMatrix.html|color matrix]]. This is a 5x4 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 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 #@LinkApiDocDE2_HTML~classdecColorMatrix.html,color matrix~@#. This is a 5x4 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. |
| |
| <WRAP center box 550px> | <WRAP center box 550px> |
