Behavior element behavior adding a renderable canvas view.

This behavior is useful for models with a complex dynamic texture where the content of the texture is provided by one or more Canvas resources. Multiple other behaviors can add their content to the canvas renderable to separate logic for reuse. A convenient base class to use is ECBehaviorRenderableCanvasBase.

To use this behavior add an ECBehaviorDynamicSkin to the element class before adding this behavior. Create ECBehaviorRenderableCanvas behavior and set the dynamic skin and canvas background color or image. The background color empty by default so make sure to set an appropriate background. Now you can add other behaviors targeting the ECBehaviorRenderableCanvas to add Canvas resources to.

If the background is not set the behaviors using this canvas have to make sure they cover the entire background to avoid artifacts. Background CanvasPaint or CanvasImage have order 0 respective 1 if both are used. Both canvas can be used for example if the image has transparency.

The canvas is created with a default size of 512×512 . You can change the size using the element property to fit the texture requirements.

See also:

• Dynamic Content using Renderables
• Gui Themes
• IGDE Skin Editor

Multiple ECBehaviorRenderableCanvas instances can be added to affect individual dynamic skin textures.

Element class properties have the prefix renderableCanvas. or renderableCanvas({id}). if id is not empty.

Set renderable name. Adds renderable of canvas type.

• Full name: renderableCanvas.renderable or renderableCanvas({id}).renderable
• Type: string
• Default Value: empty string
• Example (*.deeclass)

  <string name='renderableCanvas.renderable'>display</string>

Set size of canvas in pixels.

• Full name: renderableCanvas.size or renderableCanvas({id}).size
• Type: 2-component point
• Default Value: (512,512)
• Example (*.deeclass)

  <point name='renderableCanvas.size' x='256' y='256'/>

Set background color or null to not use.

• Full name: renderableCanvas.backgroundColor or renderableCanvas({id}).backgroundColor
• Type: 3-component color
• Default Value: null
• Example (*.deeclass)

  <color name='renderableCanvas.backgroundColor' r='0.8' g='0.6' b='0.4'/>

Set path to background image resource to use or null to not use a background image.

• Full name: renderableCanvas.value or renderableCanvas({id}).value
• Type: string
• Default Value: empty string
• Expected File Type: *.webp, *.png, *.jpg (all image type modules)
• Example (*.deeclass)

  <string name='renderableCanvas.value'>panel.webp</string>

This behavior has no events.

• ECBehaviorDynamicSkin

This behavior does not support optional behaviors.

This behavior does not required element class to be persistable (setPersistable).

ECBehaviorRenderableCanvas.

Since DragonScript Module Version 1.0

• Add canvas based renderable to dynamic skin for use by other behaviors to add content to.

This example defines an element which contains a resources.

class MyElement extends BehaviorElementClass
  public var ECBehaviorComponent component
  public var ECBehaviorDynamicSkin dynamicSkin
  public var ECBehaviorRenderableCanvas renderableCanvas
  func new()
    component = ECBehaviorComponent.new(this, null)
    dynamicSkin = ECBehaviorDynamicSkin.new(this, collider)
    renderableCanvas = ECBehaviorRenderableCanvas.new(this, dynamicSkin)
  end
end

Using element class supporting adding behaviors the behavior can be added like this:

<?xml version='1.0' encoding='UTF-8'?>
<elementClass name='MyClass' class='GenericBehaviorElement'>
  <behavior type='ECBehaviorComponent'/>
  <behavior type='ECBehaviorDynamicSkin'/>
 
  <behavior type='ECBehaviorRenderableCanvas'>
    <!-- optional: use dynamic skin with id instead of empty string -->
    <string name='dynamicSkin'>second</string>
 
    <!-- set element properties. omit property prefix if used inside behavior tag -->
    <string name='.name'>Color 1</string>
  </behavior>
 
  <!-- for adding multiple behaviors use unique identifiers -->
  <behavior type='ECBehaviorRenderableCanvas' id='second'/>
</elementClass>

• DEExamples Repository