User Tools

Site Tools


dragengine:modules:dragonscript:canvascreators

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Last revisionBoth sides next revision
dragengine:modules:dragonscript:canvascreators [2020/06/14 11:04] – [Border Image Canvas Creator] dragonlorddragengine:modules:dragonscript:canvascreators [2020/07/06 09:26] – [Border Image Canvas Creator] dragonlord
Line 7: Line 7:
 [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/interfaceDragengine_1_1Gui_1_1CanvasCreators_1_1CanvasCreator.html|Canvas creators]] provide support to create [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Scenery_1_1Canvas.html|Canvas]] for direct use with game elements or for GUI use with [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Gui_1_1Widget.html|Widgets]]. The main idea behind using a canvas creator is to produce canvas properly matching a specific size with customizeable properties. The default gui system uses canvas creators to build the look of the gui widgets which supports XML gui theme building. The DragonScript module provides 3 main canvas creators which can be subclassed to implement more. [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/interfaceDragengine_1_1Gui_1_1CanvasCreators_1_1CanvasCreator.html|Canvas creators]] provide support to create [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Scenery_1_1Canvas.html|Canvas]] for direct use with game elements or for GUI use with [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Gui_1_1Widget.html|Widgets]]. The main idea behind using a canvas creator is to produce canvas properly matching a specific size with customizeable properties. The default gui system uses canvas creators to build the look of the gui widgets which supports XML gui theme building. The DragonScript module provides 3 main canvas creators which can be subclassed to implement more.
  
 +Example Borders from the **DragonScript Test Project** from the [[https://github.com/LordOfDragons/deexamples|Examples Repository]].
 +{{ :dragengine:modules:dragonscript:border_examples.png |Example Borders}}
 ====== Rectangle Canvas Creator ====== ====== Rectangle Canvas Creator ======
 The [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Gui_1_1CanvasCreators_1_1RectangleCanvasCreator.html|Rectangle canvas creator]] is a very simple canvas creator producing a single [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Scenery_1_1CanvasPaint.html|paint canvas]] with a rectangle covering the entire area. The [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Gui_1_1CanvasCreators_1_1RectangleCanvasCreator.html|Rectangle canvas creator]] is a very simple canvas creator producing a single [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Scenery_1_1CanvasPaint.html|paint canvas]] with a rectangle covering the entire area.
Line 34: Line 36:
 Each image can be null in which case it is not rendered. The corners are fixed size images occupying the exact pixel size of the respective images. They should line up in size to avoid gaps. The side images are stretched in the respective direction to meet with their neighbor corners. Their size has to match the corner size to prevent gaps. If smaller they are aligned with the inner corner boundaries leaving a gap at the outside. The center image is stretched to touch each corner. This system provides a bordered image scaling well with different sizes. This is the best solution for buttons, panels or other element requiring a border around a stretchable center element. Each image can be null in which case it is not rendered. The corners are fixed size images occupying the exact pixel size of the respective images. They should line up in size to avoid gaps. The side images are stretched in the respective direction to meet with their neighbor corners. Their size has to match the corner size to prevent gaps. If smaller they are aligned with the inner corner boundaries leaving a gap at the outside. The center image is stretched to touch each corner. This system provides a bordered image scaling well with different sizes. This is the best solution for buttons, panels or other element requiring a border around a stretchable center element.
  
 +Example image border using attaches on each side. Other examples would be speech bubbles with one attach where the bubble connects to the actor or sci-fi info panels with an attach pointing to the object to show information for.
 +{{ :dragengine:modules:dragonscript:image_border_with_attaches.png |Example image border using attaches}}
 ====== Canvas Creator Example ====== ====== Canvas Creator Example ======
 This example create a canvas creator to produce buttons. Each time it is called a new button is produced. The same could be done for game elements to produce actor sprites for example. This example create a canvas creator to produce buttons. Each time it is called a new button is produced. The same could be done for game elements to produce actor sprites for example.
dragengine/modules/dragonscript/canvascreators.txt · Last modified: 2024/03/14 16:42 by dragonlord