Fantasy 8-bit CPU for MoroboxAI.
MoroboxAI by itself is a generic framework that can run any JavaScript code that exports a boot function.
Moroxel8AI is a layer of abstraction on top of that and:
- Uses PixiJS as a renderer
- Uses fengari for running your game written in Lua
- Implements all the boilerplate for being compatible with MoroboxAI
- Takes care of loading all your assets
- Provides a simple interface for controlling the graphics, audio, and inputs
To sum up, Moroxel8AI takes care of all the boilerplate required for initializing and running your game in MoroboxAI, and lets you focus on coding the game logic in Lua.
For the purpose of this tutorial, we will create a sample folder with the following structure:
sample/
├─ assets/
│ ├─ tilemap.png
├─ game.lua
├─ header.yml
├─ index.htmlThe assets directory is where Moroxel8AI will load assets from. Here is tilemap.png, this is a 16x16 pixels tilemap taken from Mario on NES:
The header.json contains some metadata about assets and how to run the game:
assets:
- name: tilemap
path: tilemap.png
boot: Moroxel8AI
main: game.luaAll the game logic is written in game.lua:
-- select tilemap.png as the tilemap
local tilemap = tmap('tilemap')
-- set the size of one tile to 16x16 pixels
tmode(16)
-- assign the tile (0, 3) to sprite
stile(tilemap, 0, 3, 1, 1)
-- set the origin to center
sorigin(8, 8)
local angle = 0
function tick(deltaTime)
-- clear screen
clear()
-- rotate sprite
angle = angle + deltaTime
srot(angle)
-- draw sprite on screen
sdraw(SWIDTH / 2, SHEIGHT / 2)
endNow, all remain is index.html which is simply loading MoroboxAI + Moroxel8AI and initializing the game:
<html>
<head>
<title>moroxel8ai</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moroboxai-player-web@latest/lib/umd/moroboxai-player-web.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moroxel8ai@latest/lib/umd/moroxel8ai.min.js"></script>
</head>
<body>
<div id="player"></div>
</body>
<script type="text/javascript">
(function() {
console.log(`moroboxai-player-web v${MoroboxAIPlayer.VERSION}`);
player = MoroboxAIPlayer.init(document.getElementById("player"), {
url: `./`,
resizable: false,
autoPlay: true,
onReady: () => console.log("ready")
});
})();
</script>
<style type="text/css">
body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#player {
background-color: black;
background-size: cover;
width: 256px;
height: 256px;
}
</style>
</html>Testing on the web requires you to run a local HTTP server to avoid CORS errors when loading local files.
For that you can install http-server:
npm install http-server -gOpen a command prompt in the moroxel8ai folder and run:
http-serverNow you can access the page on localhost and the port opened by http-server.
This content is released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent