Custom components and RenderProperty attributes on Wave Engine 2.0 (Part 2)

In this second part we will review all RenderProperty attributes available on WaveEngine 2.0. But if you did not see the first article then we recommend you read it before this one.

It’s important to follow this rules when you want to create a custom component:

  • You must create a custom component as an extended class of Component, Behavior or Drawable.
  • Add [DataContract] attribute to custom component class.
  • Custom component must take parameterless public constructor.
  • All public properties in the custom component will show on Wave Visual Editor from Entity Details panel.
  • Add [DataMember] attribute to all public properties if you want its values stored during serialization process.
  • Basic data types are automatically displayed by Wave Visual Editor (bool, int, float, Vector2, Vector3, Quaternion…), however unknown data types are shown as a string.
  • You can add RenderProperty attributes to public properties in order to change how it is shown on Wave Visual Editor.
  • Default properties values must be set on a DefaultValues method.

Here is a short summary of all RenderProperty attributes supported on Wave Engine 2.0:

DontRenderProperty

If you want that Wave Visual Editor ignores its public property then add this RenderProperty attribute.

CODE

  
[DontRenderProperty]        
public int HideProperty { get; set; }

RenderPropertyAsAsset

Add this RenderProperty attribute to a string public property and it will be displayed as Asset selector. When you add an asset value this will be stored on the selected asset path. Asset type must be specified as argument (Unknow, Model, SkinnecModel, Material, Sound, Texture, Cubemap, Spritesheet or Font).

CODE

  
[RenderPropertyAsAsset(AssetType.Texture)]
[DataMember]
public string Texture { get; set; }

EDITOR

RenderPropertyAsEntity

Add this RenderProperty attribute to a string public property and it will be displayed as Entity selector. When you add a value this will be stored as an entity path. You can then specify a filter from the entities component list. For example if we want to select a 3D Physics entity we must then add the following filter:

CODE

  
private string linkEntityPath;
private Entity linkEntity; 

[DataMember]
[RenderPropertyAsEntity(new string[] { "WaveEngine.Framework.Physics3D.RigidBody3D " })]
public string LinkEntityPath
{
      get
      {
          return this.linkEntityPath;
      }

      set
      {
          this.linkEntityPath = value;
          this.RefreshLinkEntity();
      }
}

private void RefreshLinkEntity()
{
    if (this.isInitialized && this.linkEntityPath != null)
    {               
        this.linkEntity = EntityManager.Find(this.linkEntityPath);
    }
}

EDITOR

RenderPropertyAsInput

Add this RenderProperty attribute to an int public property to specify a value range. You must set a minimum integer value and a maximum integer value.

CODE

  
[RenderPropertyAsInput(0, 30)]
[DataMember]
public int FrecuencyInMinutes { get; set; }

EDITOR

RenderPropertyAsFInput

Add this RenderProperty attribute to float public property to specify a value range. You must set a minimum float value and a maximum float value.

CODE

  
[RenderPropertyAsFInput(0, float.MaxValue)]
[DataMember]
public float Mass {get; set; }

EDITOR

RenderPropertyAsLayer

Add RenderProperty to a Type public property and it will be shown as a Layer Selector. Assign a value from the Editor, and the property will be stored as a Layer type (OpaqueLayer, AlphaLayer,AdditiveLayer, DebugLayer, GUILayer)

CODE

  
private Type layerType;
private string layerTypeName;
private Layer layer;
        
[RenderPropertyAsLayer]
public Type LayerType
{
    Set
    {
        this.layerType = value;
        this.layerTypeName = this.layerType.FullName + "," + this.layerType.GetTypeInfo().Assembly.GetName().Name;
    
        if (this.RenderManager != null)
        {
            this.layer = this.RenderManager.FindLayer(this.layerType);
        }
    }

    get
    {
        return this.layerType;
    }
}
	
[DataMember]
private string LayerTypeName
{
    get
    {
        return this.layerTypeName;
    }

    set
    {
        this.layerTypeName = value;
        this.layerType = Type.GetType(this.layerTypeName);
        }
}

EDITOR

RenderPropertyAsPath

Add this RenderProperty attribute to a string public property and it will be displayed as file/folder selector. Assign a value from the Editor, and the property will be stored as a file or folder path.

CODE

  
[RenderPropertyAsPath(RenderPropertyAsPath.PathType.Folder)]
[DataMember]
public string WindowsFolder { get; set; }

EDITOR

RenderPropertyAsSelector

Add this RenderProperty attribute to a string public property and it will be displayed as combo box which allows to select amongst a specific strings collection. You must specify the method name that returns an IEnumerable from all possible values.

CODE

  
[RenderPropertyAsSelector("SelectorValues")]
[DataMember]
public string MySelector { get; set; }

[DontRenderProperty]
public IEnumerable<string> SelectorValues
{
    get
    {
        List<string> listOfStrings = new List<string>();
                      listOfStrings.Add("one");
                      listOfStrings.Add("two");
                      listOfStrings.Add("three");
                      listOfStrings.Add("four");
        return listOfStrings; 
    }
}

EDITOR

RenderPropertyAsSlider

Add this RenderProperty attribute to a float public property and it will be displayed as a Slide bar. You need to set a float minimum value, a float maximum value and a float step value.

CODE

  
[DataMember]
[RenderPropertyAsSlider(0, 255, 1)]
public float SpecularPower { get; set; }

EDITOR

Moreover you can convert property class values to more simplified formats for which you should use converters together with RenderProperty attributes. All converters must implement the IConverter interface:

  
public interface IConverter
{
    /// <summary>
    /// Convert source object to destination object
    /// </summary>
    /// <param name="value">source object</param>
    /// <returns>destination object</returns>
    object Convert(object value);

    /// <summary>
    /// Convert destionation object
    /// </summary>
    /// <param name="value">destination object</param>
    /// <returns>source object</returns>
    object ConvertBack(object value);
}

Convert method: Convert a property value to an editor value.

ConvertBack method: Convert an editor value to a property value.

Let us see a real example in which we want to convert a rotation property value into a Vector3 (in radians) so that it shows as a Degree Vector 3 in the editor. For this we will make use of the Vector3RadianToDegreeConverter:

  
[RenderProperty(typeof(Vector3RadianToDegreeConverter))]
public Vector3 LocalRotation
{
    get
    {
        return Quaternion.ToEuler(this.LocalOrientation);
    }

    set
    {
        this.LocalOrientation = Quaternion.CreateFromYawPitchRoll(value.Y, value.X, value.Z);
    }
}

Published by

Jorge Canton

He is an engineer in computer science, #WaveEngine team member is a technology enthusiast determined to stay on the cutting edge of development. He is a very dynamic person who loves solving challenges, puzzles and riddles. He usually spends his free time with his family or playing videogames on his console or mobile phone and plays the piano to relax.

Leave a Reply

Your email address will not be published. Required fields are marked *