Guide Initialize Engine
After including the engine, we have to initialize it. For that, we need a container to hold our application.
To begin, we create a div element and give it an id of your choice:
<body>
<div id="flevarContainer"></div>
</body>Next, we initialize the engine in our JavaScript file, using the FlevaR(container, options*, init*) method:
const flevarContainerElement = document.getElementById("flevarContainer");
FlevaR(flevarContainerElement);If using modules, you first need to import FlevaR:
const Flevar = require("flevar");
// OR
import Flevar from "flevar";FlevaR accepts an element as it's first parameter, which is the container we created in our html, with the id of "flevarContainer".
The second parameter can contain optional properties, such as the fps, width or height of the flevar application:
FlevaR(document.getElementById("flevarContainer"), { _width: 600, _height: 500 });Note: By default, flevar applications are 600 * 500 pixels, and cannot be smaller than 400 * 400 pixels, or larger than 2880 * 2880 pixels.
The third parameter is the init function. All application code goes inside here. When the application is loaded, this function will be executed, with the engine itself as the first parameter to allow accessing its properties and methods:
Flevar(container, options, function onload(flevar) {
flevar.createScene("first_scene");
});Note: The flevar engine is also bound to the init function, so
this.createScene("first_scene");would also work, unless using arrow functions.
Now that we've initialized our application, let's create our first scene!
