Posted by & filed under Uncategorized.

With the class system of enchant.js classes can be created and extended very easily as Fushimi described in the post http://enchantjs.com/2012/12/tips-class-inheritance/. But what if you end up with a complex situation where single inheritance is not enough? That’s where the new mixing.enchant.js plugin steps in!

The mixing.enchant.js plugin enables you to use multiple inheritance with the enchant.js classes. Multiple inerhitance means that one class can have multiple super classes, combining the functions and properties of all super classes into a single class. For example, as shown in the picture below, you could create a class (here class C) with two super classes, in this case A and B.
classes
In the following post I will try to give you an idea about how to use the plugin and will present a sample where mixing.enchant.js is used to make the programing of a game a bit easier.

Just a little note ahead: This is something which should not be used by beginners. You should be familiar with the class system in enchant.js and also know how the classes you are using for the multiple inheritance behave to avoid unexpected results.

Methods

The mixing.enchant.js plugin defines the following methods:

  • enchant.Class.mixClasses(firstClass, secondClass, boolean, Function)
  • enchant.Class.applyMixingRecipe(target, source)
  • enchant.Class.mixClassesFromRecipe(firstClass, secondClass, recipe, Function)

Furthermore the model class enchant.Class.MixingRecipe.

I will not go into detail of all these methods, please refere to the official enchant.js documentation (with plugins) to learn more about the methods which are not explained here.

The core method of mixing.enchant.js is the mixClasses method:

mixClasses

With this method it is quite easy to achieve the previously shown inheritance by just calling:

var C = enchant.Class.mixClasses(A,B)

Thats all!
If you are wondering about the useOnlyOwnPropertiesForSecondClass argument… This is a bit tricky it is used to avoid the diamond problem where you are inheriting from two classes which both have the same super class. For enchant.js this is the case in the following example where I’m going to demonstrate mixing of two enchant.js classes.

Usage Example

In the following example, which is also included in the enchant.js examples folder (examples/plugins/mixing/mapgroup), I’m going to demonstrate multiple inheritance with mixing.enchant.js by combining the enchant.Group and the enchant.Map class to a single class which displays a map and allows child elements to be added. This example is based on the RPG enchant.js example (located at examples/expert/rpg) – so first of all let’s take a look at the key points in that example.


var map = new Map(16, 16);

var stage = new Group();
stage.addChild(map);
stage.addChild(player);
stage.addChild(foregroundMap);

game.rootScene.addChild(stage);

game.rootScene.addEventListener('enterframe', function(e) {
    ... 
    stage.x = x;
    stage.y = y;
});

In this example a player sprite moves on a map. This is realized by creating a group where the map and the player and a foreground map are getting added. It’s a bit hard to think about the group containing the player and the map on the same level. It would be closer to reality if the map would just directly contain the sprite right?
So let’s take a look at how mixing.enchant.js could be used in this scenario:


var MapGroup = enchant.Class.mixClasses(Map, Group,true);
var map = new MapGroup(16, 16);

map.addChild(player);
map.addChild(foregroundMap);

game.rootScene.addChild(map);

game.rootScene.addEventListener('enterframe', function(e) {
    ... 
    map.x = x;
    map.y = y;
});

Here a new class is created using the mixClasses function.


enchant.Class.mixClasses(Map, Group,true);

It is quite easy to create a new class extending the Map and Group class. It’s just one function call. After that it is possible to use the Groups addChild method on the resulting MapGroup to add child elements. The MapGroup will also display the Map as in the original example. By this it is now possible to add Sprites to the Map directly.

In addtion, as you can see the useOnlyOwnPropertiesForSecondClass is set to true because both, the Map and Group class have the Entity class as superclass so it would be not correct if the Entity functions which both classes posses are getting mixed together. By setting the flag to true the Group’s super class functions and properties will be ignored. The resulting inheritance Tree will look as shown in the picture below.
MapGroup

If you want to learn more about mixing.enchant.js please refere to the reference documentation, the examples provied in the examples/plugins/mixing folder or the unit test cases defined in tests/qunit/mixing.enchant.js/mixing.js

This post is also available in: Japanese

Comments are closed.