EditableComponent

The EditableComponent allows you to edit selected properties of a specific target with an ItemEditor. More...

Import Statement: import VPlay 2.0
Inherits:

Item

Properties

Methods

Detailed Description

The EditableComponent can be used by the ItemEditor, to identify which properties are editable in its target. This allows changing properties easily during runtime. For instance, the ItemEditor parses the properties of the EditableComponent::target and assigns an according GUI element for each datatype. For instance: a Slider element will be shown for a number property.

Example Usage

Following examples demonstrate different use-cases of the EditableComponent.

ItemEditor uses the EditableComponent

This example shows a Particle which uses the EditableComponent to provide access to different properties. This can be used by the ItemEditor to show the properties which should be editable. This can be used by a particle editor like seen in our Particle Editor Demo. Properties such as: maxParticles, particleLifespan and more can then be changed by application users during runtime.

 import VPlay 2.0
 import QtQuick 2.0

 GameWindow {
   Scene {

     ItemEditor {
       id: itemEditor
     }


     ParticleVPlay {
       // The EditableComponent is used by the Particle Editor for automatic generation of the property GUI.
       // It is not needed for particles which finished and added to a game.
       EditableComponent {
         editableType: "fire"
         properties: {
           "Particle Configuration": {
             "maxParticles":               {"min": 0, "max": 2000, "label": "Particle Count", "color": "red"},
             "particleLifespan":           {"min": 0, "max": 10, "stepsize": 0.01, "label": "Lifespan", "color": "red"},
             "particleLifespanVariance":   {"min": 0, "max": 10, "stepsize": 0.01, "label": "Lifespan Variance"},
             "startParticleSize":          {"min": 0, "max": 512, "label": "Start Size"},
             "startParticleSizeVariance":  {"min": 0, "max": 512, "label": "Start Size Variance"},
           }
         }
       }
     }
   }
 }

Different Item Editors and Entities

This demonstrates the usage of two different BaseEntites targeting different ItemEditors. The entities use the EditableComponent to provide access to different properties of their own. One Entity uses the default itemEditor, while the second one uses otherEditor.

 import VPlay 2.0
 import QtQuick 2.0

 GameWindow {

   EntityManager {
     id: entityManager
     entityContainer: scene
   }

   Scene {
     id: scene

     ItemEditor {
       id: itemEditor
       opacity: 0.5

       editableTypes: [
         "fire","smoke","splatter","death"
       ]

       currentEditableType: "fire"
     }

     ItemEditor {
       id: otherEditor
       opacity: 0.5

       anchors.right: parent.right

       editableTypes: [
         "rubin","smaragd","saphir", "diamond"
       ]

       currentEditableType: "rubin"
     }

     EntityBase {

       width: 50
       height: 50

       Rectangle {
         anchors.fill: parent
       }

       EditableComponent {
         editableType: "fire"
         properties: {
           "Entity Properties" : {
             "x":               {"min": 0, "max": scene.width, "label": "X Position"},
             "y":               {"min": 0, "max": scene.height, "label": "Y Position"},
             "rotation":        {"min": 0, "max": 360, "label": "Angel"},
           }
         }
       }
     }

     EntityBase {

       x: scene.width/2
       y: scene.width/2

       width: 30
       height: 30

       Rectangle {
         anchors.fill: parent
       }

       EditableComponent {
         editableType: "rubin"
         targetEditor: otherEditor
         properties: {
           "Entity Properties" : {
             "x":               {"min": 0, "max": scene.width, "label": "X Position", "group": "testGroup"},
             "y":               {"min": 0, "max": scene.height, "label": "Y Position", "group": "testGroup"},
             "rotation":        {"min": 0, "max": 360, "label": "Angel", "group": "testGroup"},
           }
         }
       }
     }
   }
 }

See also GUIElements Test, ItemEditor Test, ItemEditor, and Particle Editor Demo.

Property Documentation

defaultGroup : string

Set this property if you have multiple properties with the same name and the same editableType.

Following example shows how to use the defaultGroup property to differentiate EditableComponents within the same editableType.

 import VPlay 2.0
 import QtQuick 2.0

 GameWindow {

   EntityManager {
     id: entityManager
     entityContainer: scene
   }

   Scene {
     id: scene

     ItemEditor {
       id: itemEditor
     }

     EntityBase {

       x: scene.width/2
       y: scene.width/2

       width: 30
       height: 30

       Rectangle {
         anchors.fill: parent
       }

       Rectangle {
         id: rect2
         width: parent.width/2
         height: parent.height/2
         color: "red"
       }

       EditableComponent {
         editableType: "rubin"
         target: rect2
         defaultGroup: "Rect"
         properties: {
           "Rect Properties" : {
             "x":               {"min": 0, "max": scene.width, "label": "X Position", "group": "testGroup"},
             "y":               {"min": 0, "max": scene.height, "label": "Y Position", "group": "testGroup"},
             "rotation":        {"min": 0, "max": 360, "label": "Angel", "group": "testGroup"},
           }
         }
       }

       EditableComponent {
         editableType: "rubin"
         properties: {
           "Entity Properties" : {
             "x":               {"min": 0, "max": scene.width, "label": "X Position", "group": "testGroup"},
             "y":               {"min": 0, "max": scene.height, "label": "Y Position", "group": "testGroup"},
             "rotation":        {"min": 0, "max": 360, "label": "Angel", "group": "testGroup"},
           }
         }
       }
     }
   }
 }

editableComponentMetaData : variant

This property can be used to provide meta data for the EditableComponent. This meta data is stored in the target editors and can be used to access custom data in the delegates of the target editor if necessary.

The default value is set to following map:

 property variant editableComponentMetaData: {
   "displayname" : editableType
 }

For instance the editableComponentMetaData.displayname is used in the content delegate of the ItemEditor if available. Otherwise the content delegate uses the editableType as standard text. Therefore, you can change the displayname of the EditableComponent to a readable form but still use a short form for the editableType.

 EditableComponent {
   editableType: "f1"
   editableComponentMetaData: {
     "displayname" : "Fire Particle Cartridge #1"
   }
   properties: {
     "Emitter Location": {
       "x": {"min": 0, "max": 480, "label": "Position X"},
       "y": {"min": 0, "max": 320, "label": "Position Y"},
     }
   }
 }

editableType : string

This property is used to set the type of the target element. Different editors can use this property to group the targets. If the type is set to fire the target element can be grouped to the fire elements. The default value is not set.

 EditableComponent {
   editableType: "fire"
   properties: {
     "Emitter Location": {
       "x": {"min": 0, "max": 480, "label": "Position X"},
       "y": {"min": 0, "max": 320, "label": "Position Y"},
     }
   }
 }

preventStorage : bool

This property is used to prevent the storage of the EditableComponent data. This can be used when the storage of the should be prevented while working with tools like the ItemEditor or LevelEditor.


properties : variant

This property is used to define the properties of the target element which should be editable. The default value is not set.

Properties and Groups

This property can be used by an editor to visualize the properties of the target and let the user change the properties during runtime. Each property consists of a map which holds the properties of this item-property, for instance: the speed of the car would have a min, max speed demonstrated below.

 EditableComponent {
   editableType: "car"
   properties: {
     "speed": {"min": 0, "max": 150}
   }
 }

Those properties can be grouped together to logical groups which can be differentiated by an editor using the EditableComponent. If no groups are added as seen in the example above, the defaultGroup is being used for the default group. Following example shows grouping of properties logically for the use in different editors.

 EditableComponent {
   editableType: "FireParticle"
   properties: {
     "Emitter Location": {
       "x": {"min": 0, "max": typeof scene.gameWindowAnchor !== "undefined" ? scene.gameWindowAnchor.width : 480, "label": "Position X"},
       "y": {"min": 0, "max": typeof scene.gameWindowAnchor !== "undefined" ? scene.gameWindowAnchor.height : 320, "label": "Position Y"},
       "sourcePositionVariance":     {"min": {x:0,y:0}, "max": {x:1000,y:1000}, "invert": {x:false,y:true}, "label": "Position Variance"}
     },

     "Particle Configuration": {
       "maxParticles":               {"min": 0, "max": 2000, "label": "Particle Count", "color": "red"},
       "particleLifespan":           {"min": 0, "max": 10, "stepsize": 0.01, "label": "Lifespan", "color": "red"},
       "particleLifespanVariance":   {"min": 0, "max": 10, "stepsize": 0.01, "label": "Lifespan Variance"},
       "startParticleSize":          {"min": 0, "max": 512, "label": "Start Size"},
       "startParticleSizeVariance":  {"min": 0, "max": 512, "label": "Start Size Variance"},
       "finishParticleSize":         {"min": 0, "max": 512, "label": "End Size Variance"},
       "finishParticleSizeVariance": {"min": 0, "max": 512, "label": "End Size Variance"},
       "rotation":                   {"min": 0, "max": 360, "label": "Emit Angel"},
       "angleVariance":              {"min": 0, "max": 360, "label": "Emit Angel Variance"},
       "rotationStart":              {"min": -360, "max": 360, "label": "Start Spin"},
       "rotationStartVariance":      {"min": -360, "max": 360, "label": "Start Spin Variance"},
       "rotationEnd":                {"min": -360, "max": 360, "label": "End Spin"},
       "rotationEndVariance":        {"min": -360, "max": 360, "label": "End Spin Variance"}
     },

     "Emitter Behavior": {
       "emitterType":                {"min": Particle.Gravity, "max": Particle.Radius, "stepsize": 1, "label": "Particle Mode"},
       "duration":                   {"min": Particle.Infinite, "max": 10, "stepsize": 0.01, "label": "Duration"},
       "positionType":               {"min": Particle.Free, "max": Particle.Grouped, "stepsize": 1, "label": "Position Type"},
       "visible": {"label": "Visible"}
     },

     // Gravity Mode (Gravity + Tangential Accel + Radial Accel)
     "Gravity Mode": {
       "gravity":                    {"min": {x:-1000,y:-1000}, "max": {x:1000,y:1000}, "label": "Gravity"},
       "speed":                      {"min": 0, "max": 1000, "label": "Speed", "color": "red"},
       "speedVariance":              {"min": 0, "max": 1000, "label": "Speed Variance"},
       "tangentialAcceleration":     {"min": -1000, "max": 1000, "label": "Tangential Acceleration"},
       "tangentialAccelVariance":    {"min": -1000, "max": 1000, "label": "Tangential Acceleration Variance"},
       "radialAcceleration":         {"min": -1000, "max": 1000, "label": "Radial Acceleration"},
       "radialAccelVariance":        {"min": -1000, "max": 1000, "label": "Radial Acceleration Variance"}
     },

     // Radiation Mode (circular movement)
     "Radiation Mode": {
       "minRadius":                  {"min": 0, "max": 512, "label": "Minimal Radius"},
       "minRadiusVariance":          {"min": 0, "max": 512, "label": "Minimal Radius Variance"},
       "maxRadius":                  {"min": 0, "max": 512, "label": "Maximal Radius"},
       "maxRadiusVariance":          {"min": 0, "max": 512, "label": "Maximal Radius Variance"},
       "rotatePerSecond":            {"min": 0, "max": 360, "label": "Rotation per second"},
       "rotatePerSecondVariance":    {"min": 0, "max": 360, "label": "Rotation per second Variance"},
     },

     "Color": {
       "startColor":                 {"min": 0, "max": 255,"stepsize": 1, "label": "Start Color"},
       "startColorAlpha":            {"min": 0, "max": 1,"stepsize": 0.1, "label": "Start Opacity"},
       "startColorVariance":         {"min": 0, "max": 255,"stepsize": 1, "label": "Start Color Variance"},
       "startColorVarianceAlpha":    {"min": 0, "max": 1,"stepsize": 0.1, "label": "Start Opacity Variance"},
       "finishColor":                {"min": 0, "max": 255,"stepsize": 1, "label": "End Color"},
       "finishColorAlpha":           {"min": 0, "max": 1,"stepsize": 0.1, "label": "End Opacity"},
       "finishColorVariance":        {"min": 0, "max": 255,"stepsize": 1, "label": "End Color Variance"},
       "finishColorVarianceAlpha":   {"min": 0, "max": 1,"stepsize": 0.1, "label": "End Opacity Variance"}
     },

     "Appearance": {
       "blendFuncSource":            {"min": Particle.GL_ONE, "max": Particle.GL_ONE_MINUS_SRC_ALPHA, "label": "Blend Source"},
       "blendFuncDestination":       {"min": Particle.GL_ONE, "max": Particle.GL_ONE_MINUS_SRC_ALPHA, "label": "Blend Destination"},
       "textureFileName":            {"label": "Texture"}
     }
   }
 }

Property Metadata

As mentioned above each property consists of a map which holds the meta data of the item-property, for instance: the speed of the car would have a min, max speed demonstrated below. Depending on the the type of the property different delegates are used in the ItemEditor to display the property. Therefore, the meta data properties vary. The color, label and enabled meta data are available across all data types.

The enabled meta data can be used to disable a specific property. This can be useful when you want to enable a property in developer mode, but disable it in release mode.

 EditableComponent {
   editableType: "GameSettings"

   properties: {
       "nextLevelId": {"label": "Next Level", "enabled": developerBuild},
   }
 }

Following table lists all meta data properties of the different delegates. The PointDelegate uses each value for x and y i.e. "min" : {x:1,y:1}

NumberDelegate
  • min - minimum value i.e. -10.5
  • max - maximum value i.e. 10.5
  • stepsize - step size i.e. 0.1
PointDelegate
  • min - minimum value i.e. -10.5
  • max - maximum value i.e. 10.5
  • stepsize - step size i.e. 0.1
ColorDelegate
  • min - minimum value of the color which is normally at 0
  • max - maximum value of the color which is normally at 255
  • stepsize - step size of the color range which is normally at 1
No Additional Metadata
  • StringDelegate
  • TextureDelegate
  • BoolDelegate

target : variant

This property is used to set the target. Most of the time it will be set to its parent but it can also contain any other id. It is used to determine which element should be editable. The default value is parent.

The default target parent does not work when the EditableComponent is located directly in the GameWindow because the parent is not the actual GameWindow. Therefore, use the concrete GameWindow id assigned to the target.


targetEditor : variant

This property can be used to set a specific editor for the target item of the EditableComponent. For instance, when overriding the default ItemEditor which is the case when two different ItemEditor should be used for two different EditableComponent.

The default value of the targetEditor is 0, but if an ItemEditor with id: itemEditor is available in the scene, it is set to itemEditor per default. So it only needs to be set separately if a custom ItemEditor is used. You need to ensure that your scene knows about the itemEditor. If it is outside you can provide an alias to the itemEditor as seen in Particle Editor Demo.

See also Different Item Editors and Entities.


Method Documentation

loadFromJSONMap(variantMap)

Loads the target object based on the values stored in the JSON string.


toJSON()

Saves all properties of the target to a JSON string.


toJSONMap()

Saves all properties of the target to a JSON Map.


Videos

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support