aquanore
v1.4.2
Published
Aquanore is a light-weight 2D WebGL framework covering the utmost basics for a HTML5 game
Downloads
618
Maintainers
thebonejarmerReadme
Aquanore
Aquanore is a light-weight 2D WebGL framework for creating web games. I started with a raw and barely stable version back in 2015 and kept updating and improving that version ever since. As of today it is a polished library that can be used for creating HTML5 games for both desktop and mobile!
Aquanore is written in TypeScript and therefore has a type definition available. It can however also be used in vanilla JavaScript. The design goal is to keep it simple and sexy and make it as easy and straightforward as possible to setup a game real quick.
Installing
npm install aquanoreDocs
Go to the docs
Example usage
<!DOCTYPE html>
<html>
<head>
<title>Aquanore Example</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<script src="path_to_main.js" type="module"></script>
</body>
</html>import {Aquanore, Polygon, Renderer, Color, Vector2, AquanoreOptions} from "aquanore";
let polygon = null;
let angle = 0;
// Initialize everything. Must. be. ran. before anything else!
const options = new AquanoreOptions();
Aquanore.init(options);
// Assign the onLoad event with a callback function which will is ran before the game loop. Use this to load content and state initialization.
Aquanore.onLoad = () => {
const vertices = [0, 0, 32, 0, 0, 32, 32, 0, 0, 32, 32, 32 ];
const texcoords = [0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1 ];
polygon = new Polygon(vertices, texcoords);
};
// The update loop runs continiously and is meant for updating your game state/animations/motions/etc.
Aquanore.onUpdate = (deltaTime) => {
angle += deltaTime / 10.0;
};
// The render loop is used for well, drawing polygons and sprites.
Aquanore.onRender = () => {
const pos = new Vector2(window.innerWidth / 2, window.innerHeight / 2);
const scale = new Vector2(1,1);
const origin = new Vector2(16, 16);
const offset = new Vector2(0, 0);
const color = new Color(255, 255, 255, 255);
Renderer.drawPolygon(polygon, null, pos, scale, origin, offset, angle, false, false, color);
};
Aquanore.run();Contribution
For now I will not accept pull requests as the library still needs some expected fine-tuning from my end. But please do open a pull request.