@luminocity/lemonate-engine
v26.2.11
Published
The Lemonate Engine is the game engine that powers lemonate.io
Keywords
Readme
Lemonate Engine
The Lemonate Engine powers lemonate.io and Lemonate Studio, the game editor for creating projects on the platform. The engine can also run games directly from built packages in standalone web applications.
Usage
To run a Lemonate game on your website:
Export your game package
- In Lemonate Studio, right-click your published game package in the folder "published" within your project
- Select "Download" to export the package file and save it as
data.pkg
Set up your webpage
- Place the package file alongside this HTML file on a web server
- Note: The game must be served from a web server (e.g., Apache, Nginx, or a local dev server like
http-server). It will not work when opened directly from a local disk due to browser security restrictions.
Example Implementation
Here's a complete HTML template to embed your Lemonate game:
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
background: #000;
font-family: sans-serif;
}
#renderview { width: 100%; height: 100vh; }
#progress {
position: absolute;
top: 50vh;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 16px;
border: 1px solid #f4cd2d;
border-radius: 4px;
}
#progress .bar {
background: #f4cd2d;
height: 100%;
width: 0;
transition: width 0.5s ease-in-out;
}
#error {
position: absolute;
top: 50vh;
left: 10px;
font: bold 30px sans-serif;
color: red;
text-shadow: 1px 1px 5px #000;
}
canvas:focus { outline: none; }
</style>
</head>
<body>
<div id="renderview"></div>
<div id="progress"><div class="bar"></div></div>
<div id="error"></div>
<script src="https://cdn.jsdelivr.net/npm/@luminocity/lemonate-engine@latest/dist/lemonate.min.js" defer></script>
<script>
window.addEventListener('load', async () => {
const engine = new Lemonate.Engine({
renderView: document.getElementById('renderview'),
antialias: true
});
const progressBar = document.querySelector('#progress .bar');
const errorView = document.getElementById('error');
try {
await engine.runPackage("./data.pkg", ({percent}) => {
progressBar.style.width = `${percent}%`;
});
} catch(err) {
errorView.textContent = err.message;
console.error(err);
} finally {
document.getElementById('progress').style.display = 'none';
}
});
</script>
</body>
</html>