npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

aquanore

v1.0.0

Published

Aquanore is a light-weight 2D WebGL framework covering the utmost basics for a HTML5 game

Downloads

5

Readme

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 aquanore

Docs

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} from "aquanore";

let polygon = null;
let angle = 0;

// Initialize everything. Must. be. ran. before anything else!
Aquanore.init();

// 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.

License

MIT