Guide Start Application
Now that we have everything ready for our first test, let's review our code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First FlevaR Application</title>
<!-- include our engine -->
<script src="https://unpkg.com/[email protected]/dist/flevar.js"></script>
<!-- include main application script -->
<script defer src="main.js"></script>
</head>
<body>
<!-- container for our application -->
<div id="flevaRContainer"></div>
</body>
</html>const flevaRContainerElement = document.getElementById("flevaRContainer");
FlevaR(flevaRContainerElement, function onload(flevar) {
const _root = flevar._root;
flevar.createSprite("first_sprite");
flevar.createPrefab("first_prefab", function onload(prefab) {
prefab._x = 50;
prefab._y = 100;
prefab.setAppearance(function (prefab) {
prefab.useSprite("first_sprite");
});
});
flevar.createScene("first_scene", function onload(scene) {
scene.addPrefab("first_prefab");
});
flevar.useScene("first_scene");
_root._color = "green";
});As noticed, we've set the application's color to green, by making use of FlevaR's _root property.
When the engine loads, the application starts, with 30 as the default fps. To change the fps, pass the property to the options parameter when initializing FlevaR:
Flevar(container, { fps: 60}, init);When ready, view your application by opening your HTML file via a live server of your choice. (This example used VSCode and the "Live Server Extension")
Tip: use the
flevar.Meta.takeScreenshot()method to capture and download an image of the application at that moment in time.
You have successfully created your first FlevaR Application!
Next, let's add some input and it interactable! (Coming soon)
