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

Wave Engine 2.0 provides a components set to define different types of entities.The components code is available to download on our github repository.

When you want to make a game you will need to create your own components. In this article we are going to show how to create custom components on WaveEngine and how to use them from Wave Visual Editor.

Start Wave Visual Editor and choose File -> New project

Set a name and folder location for your game:

Now we have a new MyGame project with default template that include a default 3D Camera, default sun light, and default 2D camera.

Add a teapot primitive from Entity Hierarchy or top menu Create -> Primitives 3D -> Teapot

After that you can see a teapot at the origin coordinates:

We are now are going to create a Custom component from VisualStudio. Click on File -> Open C# Solution to open MyGame code project.

From VisualStudio you can see code project on Solution Explorer

We have two projects inside of MyGame_Windows Solution.

• MyGame: Windows launcher project. you can set Window properties (as Title or Size), SplashScreen… everything reference to windows platform.
• MyGameSource: This is the code of your game. It is a shared project so we share its code between all target platforms (Android, IOS, Windows Phone…)

We are now going to create a custom component on MyGameSource project with MyBehavior

Important. In Wave Engine we have three component types:

• Component: This is a base class and usually uses to the stored entity data.
• Behavior: This is a component extension class and it provides behavior to the entities.
• Drawable: This is a component extension class which you can use to define how to render an entity.

Right-Click over MyGameSourceProject-> Add -> New Item… and a add new MyBehavior class

Now you can see your empty MyBehavior class:

  
using System;
using System.Collections.Generic;
using System.Text;

namespace MyGame
{
    class MyBehavior
    {
    }
}

Edit MyBehavior class with the following code:

  
using System;
using System.Collections.Generic;
using System.Runtime.Serialization;
using System.Text;
using WaveEngine.Common.Math;
using WaveEngine.Framework;
using WaveEngine.Framework.Graphics;

namespace MyGame
{
    [DataContract] 
    public class MyBehavior : Behavior
    {
        [RequiredComponent]
        private Transform3D myTransform;
                
        protected override void Update(TimeSpan gameTime)
        {
            Vector3 rotation = this.myTransform.Rotation;
            rotation.Y += (float)gameTime.TotalSeconds;
            this.myTransform.Rotation = rotation;
        }
    }
}

Note. DataContract attribute on top of MyBehavior class allow serialize your class. It’s neccesary to use your custom components from Wave Visual Editor

Return to Wave Visual Editor, select teapot entity and click over    button on Entity Details panel to add new component:

On Add Component Dialog you can search WaveEngine and Custom components. Write MyBehavior on the Filter box, select MyBehavior component from the tree viewer and click over OK button.

After that you can see the MyBehavior component added to teapot entity on Entity Details panel.

Click on Simulate mode   button on toolbar or File -> Simulate (F6)

Stop simulation mode with F6 key, and return to Visual Studio. Then add a speed property to control spin velocity. Edit MyBehavior class with the following lines:

  
namespace MyGame
{
    [DataContract] 
    public class MyBehavior : Behavior
    {
        [RequiredComponent]
        private Transform3D myTransform;

        [DataMember]
        public float Speed { get; set; }
                
        protected override void Update(TimeSpan gameTime) 
        {
            Vector3 rotation = this.myTransform.Rotation;
            rotation.Y += (float)gameTime.TotalSeconds * this.Speed;
            this.myTransform.Rotation = rotation;
        }
    }
}

Important. Speed must to be a public property.

We have created a new Speed property and we have marked this property with DataMember attribute which indicates that this property will be serialized and its value will be stored.

Note. Speed property is zero as default value. If you want set another value then you need to override the DefaultValues method on VisualStudio.

  
namespace MyGame
{
    [DataContract] 
    public class MyBehavior : Behavior
    {
        [RequiredComponent]
        private Transform3D myTransform;

        [DataMember]
        public float Speed { get; set; }

        protected override void DefaultValues()
        {
            this.Speed = 5.0f;
        }

        protected override void Update(TimeSpan gameTime) 
        {
            Vector3 rotation = this.myTransform.Rotation;
            rotation.Y += (float)gameTime.TotalSeconds * this.Speed;
            this.myTransform.Rotation = rotation;
        }
    }
}

You can now how Speed property appears on the Entity Details Panel for Wave Visual Editor

Click on the Simulate mode    button, on toolbar or File -> Simulate (F6) and you can see how the teapot quickly spins. You can then set speed property from Wave Visual Editor.

Finally we are going to learn how to use RenderProperties to define how to show the properties on the Wave Visual Editor.

From VisualStudio add the following RenderProperty to Speed property:

  
[RenderPropertyAsSlider(1.0f,100.0f, 1.0f)]
[DataMember]
public float Speed { get; set; }

Go to the Wave Visual Editor, and you see how the Speed property is shown as a Slider where 1 is the minimum value and 100 is the maximum value with increments of 1.

In the next article, we will show all the available RenderProperties on WaveEngine and provide a sneak previouon how to create custom components and use them from Wave Visual Editor.