This is a big part. Probably the one you were waiting for.

What is a behaviour

We have seen that a Behaviour is stored in a GameObject, and that this GameObject manages a list of behaviours. From the LadybugRiders engine’s point of view, they are instanciated when every entity have been created. At the creation of a behaviour – in its create() function – you can specify properties that you want to set. As a reminder, every behaviour you create must be located in “/mygame/assets/behaviours/”


An example

Here is how you should extend a LR.Behaviour :

var MyBehaviour = function(_gameobject) {, _gameobject);

MyBehaviour .prototype = Object.create(LR.Behaviour.prototype); MyBehaviour .prototype.constructor = MyBehaviour;

MyBehaviour .prototype.create= function(_data) {
MyBehaviour .prototype.update = function() {

This is a basic extend process of javascript, but you have there the very basis of you Behaviour. You may override the update() function and do whatever you want to on your entity. In your behaviour class:


let you access the LR.Entity of the GameObject your behaviour is affected to,


lets you access the GameObject itself.

You can check all the method/properties of a Behaviour and GameObject in the doc provided with the LREditor.

How to add my new behaviour in the editor

There are two lines that should be at the top of your Behaviours. The first one is vital, as its tells the editor the name of your behaviour :

//>> MyBehaviour

This is a parsing we do on every file in the “/behaviours” folder. What you need to change is “MyBehaviour”. Be sure to put the complete name of your class here, including the namespaces. The second line is optional, but can be very useful.

//>>LREditor.Behaviour.params : {“speed”: 67, “numbers”:[0,1,2] }

This lets you tell the LREditor which properties you want to pass to the Behaviour when creating. These properties can then be changed via the editor, and will be passed in a object as “_data” in the create() function of your Behaviour. Now back to the LREditor, select your entity, open the Attributes panel and go the Behaviour tab ( if the editor was already open when you were editing/creating your behaviour class, you’ll have to refresh the page ). You should see something like this :


We can see the “MyBehaviour” behaviour is present here – among others, but ignore them. Select it and add it. Now the behaviour is added, and you should have this : tuto_behaviour_overview

The input field shows you the parameters of the behaviour. You can notice that we meet again with our “second line” explained above. These will be the default value. I invit you to click on the pencil button on the right. tuto_behaviour_editargs

In this window, you can add/remove/edit the properties of the parameter object that will be passed to your behaviour. You are NOT only limited to the one you have written in your code ( ie speed & numbers ). These are just base properties.

The Pick button allows you to select any GameObject in the scene, so that you can have a reference to it at the creation of your behaviour. If you do so, the value field should look like “#GO_24”.

The Edit button open another window that will let you edit the value of the desired parameter. You can put whatever you want there : object, number, string, array…

Back to the code

So that’s it : you have your entity, and a Behaviour affected to it. So what now ? … Let’s code? Go back to MyBehaviour. Take a look at this full code :

“use strict”;

//>> MyBehaviour
//>>LREditor.Behaviour.params : {“speed”: 67, “numbers”:[0,1,2] }

var MyBehaviour = function(_gameobject) {, _gameobject);

MyBehaviour.prototype = Object.create(LR.Behaviour.prototype); MyBehaviour.prototype.constructor = MyBehaviour;

MyBehaviour.prototype.create = function(_data){
this.speed = _data.speed;

MyBehaviour.prototype.update = function(){
this.entity.body.x += this.speed * 0.01;

As you can see, I retrieve the speed value from the _data passed as parameter of my create() function. Then in my update function, I make my sprite move with this new speed. Note that I act on the body position, because with P2 Physics, moving the entity would do nothing. If you have no body affect though, you should use:

this.entity.x += this.speed * 0.01;

You can now go back to LREditor and click “Play”. Your sprite should be going to the right. If you please, go to the Behaviours tab and play with the speed value. You will notice it changes it in the game too.