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 defer src="https://cdn.jsdelivr.net/gh/danidre14/FlevaR/dist/1/FlevaR.1.2.0.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, async function onload(flevar) {
const _root = flevar._root;
await 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 wrap the creation within an asynchronous function, to await the sprite creation. Additionally, 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);Whenever 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 make it interactable! (Coming soon)
