Guide Create FlevaClip

Creating A FlevaClip

FlevaClips are the main manipulative flobtives in FlevaR. Similar to Flash's MovieClips, flevaclips are pre-configured/pre-fabricated game objects. They are defined once and reusable in whatever scenes necessary.

There are two main flevaclips: prefabs, and textfields. By default, prefabs have no appearance.

Creating a Prefab

To create a prefab, we call the flevar.createPrefab(name, options*, init*) method:

flevar.createPrefab("first_prefab");

The prefab is then added to FlevaR's library.

---

All flevaclip names must be unique to their flobtive. No prefab/textfield can have be created with the same name.

See documentation for detailed naming conventions.

Options is an optional parameter that can be used to directly set the prefab's properties:

flevar.createPrefab("first_prefab", { _x: 50, _y: 100 }, function onload() {});

See documentation for more prefab properties.

The init function defines the functionality of the prefab. When the prefab is loaded, this function will be executed, with the prefab itself as the first parameter to allow accessing its properties:

flevar.createPrefab("first_prefab", function onload(prefab) {
    prefab._x = 50;
    prefab._y = 100;
});

Note: The prefab instance is also bound to the init function, so this._x = 50; would also work, unless using arrow functions.

Using a Prefab

To add a prefab to our application, we call scene.addPrefab(name) in a previously created scene:

scene.addPrefab("first_prefab");

This adds the prefab to the scene's hierarchy, which will be loaded when the scene loads.

Setting an Appearance

Our prefab has been created...but, it has no appearance! To create an appearance, we call the prefab.setAppearance() method. The setAppearance method accepts a function that is called on prefab load, and every time the prefab's state changes:

prefab.setAppearance(function (prefab) {
    prefab.useSprite("first_sprite");
});

Note: only 5 prefab properties are available in the setAppearance method: state, useGraphic, usePainting, useSprite, and useSpriteSheet.

---

But, we still won't see anything just yet. We called the prefab.useSprite method, but no sprites currently exist yet.

Before we try our game, there's one more thing to do. Let's create our first sprite!