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
dragengine:modules:dragonscript:canvascreators [2020/04/03 10:20] – url move dragonlorddragengine:modules:dragonscript:canvascreators [2024/03/14 16:42] (current) dragonlord
Line 5: Line 5:
  
 ====== Canvas Creators (DragonScript Module) ====== ====== Canvas Creators (DragonScript Module) ======
-[[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.+#@LinkApiDocDEDS2_HTML~interfaceDragengine_1_1Gui_1_1CanvasCreators_1_1CanvasCreator.html,Canvas creators~@# provide support to create #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1Canvas.html,Canvas~@# for direct use with game elements or for GUI use with #@LinkApiDocDEDS2_HTML~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 #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1CanvasCreators_1_1RectangleCanvasCreator.html,Rectangle canvas creator~@# is a very simple canvas creator producing a single #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1CanvasPaint.html,paint canvas~@# with a rectangle covering the entire area.
  
 ====== Image Canvas Creator ====== ====== Image Canvas Creator ======
-The [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Gui_1_1CanvasCreators_1_1ImageCanvasCreator.html|Image canvas creator]] provides basic support to create a [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Scenery_1_1CanvasImage.html|canvas image]] displaying a single image stretched to fill the requested size. This is useful for simple GUI designs for exampe buttons for main windows or for creating game elements to place in the world.+The #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1CanvasCreators_1_1ImageCanvasCreator.html,Image canvas creator~@# provides basic support to create a #@LinkApiDocDEDS2_HTML~classDragengine_1_1Gui_1_1CanvasImage.html,canvas image~@# displaying a single image stretched to fill the requested size. This is useful for simple GUI designs for exampe buttons for main windows or for creating game elements to place in the world.
  
 ====== Border Image Canvas Creator ====== ====== Border Image Canvas Creator ======
-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 #@LinkApiDocDEDS2_HTML~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.
Line 47: Line 62:
  
 ====== Canvas Creator Factories ====== ====== Canvas Creator Factories ======
-Each canvas creator has a matching [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/interfaceDragengine_1_1Gui_1_1CanvasCreators_1_1Factories_1_1CanvasCreatorFactory.html|canvas creator factory]]. While canvas creators allow to create canvas without the user having to know how the factory allows to create canvas creators without having to know what class they are using. This allows working with canvas creators using XML files without needing to know the scripts behind. The DragonScript provides already the [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1Gui_1_1CanvasCreators_1_1Factories_1_1CanvasCreatorFactories.html|canvas creator factories]] class provides a list of named creator factories which can be populated with the default creator factories as well as custom factories. Factories can be configurated without knowing their actual code using the setParameter() method call. The [[http://developer.dragondreams.ch/docs/dragonscript/scriptapi/latest/classDragengine_1_1LoadSave_1_1LoadGuiTheme.html|gui theme xml loader]] contains an example of using factories list with setting parameters through XML tags.+Each canvas creator has a matching canvas creator factory. While canvas creators allow to create canvas without the user having to know how the factory allows to create canvas creators without having to know what class they are using. This allows working with canvas creators using XML files without needing to know the scripts behind. The DragonScript provides already the canvas creator factories class provides a list of named creator factories which can be populated with the default creator factories as well as custom factories. Factories can be configurated without knowing their actual code using the setParameter() method call. The #@LinkApiDocDEDS2_HTML~classDragengine_1_1LoadSave_1_1LoadGuiTheme.html,gui theme xml loader~@# contains an example of using factories list with setting parameters through XML tags.
  
 <code> <code>
dragengine/modules/dragonscript/canvascreators.1585909236.txt.gz · Last modified: 2020/04/03 10:20 by dragonlord