The EditableComponent allows you to edit selected properties of a specific target with an ItemEditor. More...
| Import Statement: | import Felgo 3.0 |
| Inherits: |
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.
Following examples demonstrate different use-cases of 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 Felgo 3.0 import QtQuick 2.0 GameWindow { Scene { ItemEditor { id: itemEditor } Particle { // 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"}, } } } } } }
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 Felgo 3.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.
|
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 Felgo 3.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.
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"} } } }
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}
|
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.
