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 revision Previous revision
Next revision
Previous revision
dragengine:modules:dragonscript:canvascreators [2020/04/03 10:20]
dragonlord url move
dragengine:modules:dragonscript:canvascreators [2020/07/06 09:26]
dragonlord [Border Image Canvas Creator]
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 16: Line 18:
 The [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Gui_1_1CanvasCreators_1_1ImageBorderCanvasCreator.html|image border canvas creator]] extends the idea behind the image canvas creator by providing support to create a bordered image using up to 9 images. The images cover the center and the four sides and corners. The image below shows the layout. The [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Gui_1_1CanvasCreators_1_1ImageBorderCanvasCreator.html|image border canvas creator]] extends the idea behind the image canvas creator by providing support to create a bordered image using up to 9 images. The images cover the center and the four sides and corners. The image below shows the layout.
  
 +<WRAP group>
 +<WRAP half column>
 <WRAP center box 450px> <WRAP center box 450px>
 {{ :dragengine:modules:dragonscript:canvascreator.png |Image border layout}} {{ :dragengine:modules:dragonscript:canvascreator.png |Image border layout}}
 <WRAP centeralign>Image border layout.</WRAP> <WRAP centeralign>Image border layout.</WRAP>
 +</WRAP>
 +</WRAP>
 +
 +<WRAP half column>
 +<WRAP center box 450px>
 +{{ :dragengine:modules:dragonscript:imageborderattach.png |Image border using Attachments layout}}
 +<WRAP centeralign>Image border layout using attaches.</WRAP>
 +</WRAP>
 +</WRAP>
 </WRAP> </WRAP>
  
 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: 2020/07/06 09:26 by dragonlord