| Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
| gamedev:canvassystem:introduction [2015/06/17 23:46] – [Capture Canvas] dragonlord | gamedev:canvassystem:introduction [2019/05/24 23:43] – ↷ Links adapted because of a move operation 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 System ====== | ====== 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. | 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. The 3D World rendering and 2D Canvas rendering modules work together and can be mixed in any desired way without limitations. For example in a typical 3D game setup rendering involves a 2D canvas hosting the 3D world rendering. Similarly, dynamic skins in 3D geometry can contain 2D canvas renderings for rich content. To get the maximum performance out of Drag[en]gine it is important to understand not only the 3D rendering using deWorld but also 2D rendering using deCanvas and its subclasses. |
| |
| ====== Canvas Rendering ====== | ====== 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 [[http://dragengine.rptd.ch/docs/dragengine/latest/classdeCanvas.html|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 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 Layout ====== | ====== Canvas Layout ====== |
| Canvas are organized in a tree structure. At the root stands the [[http://dragengine.rptd.ch/docs/dragengine/latest/classdeRenderWindow.html|render window]]. This represents the game window where you can display your content. The render window owns exactly one [[gamedev:canvassystem:canvasview|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 [[gamedev:canvassystem:canvasview|canvas view]] for details. | 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]]. |
| |
| ====== Basic Canvas Parameters ====== | ====== 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. | All canvas objects share a set of standard attributes. 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. Canvases themselves always use pixels for simplicity. |
| |
| <WRAP center box 550px> | <WRAP center box 550px> |
