Vectorengine NPM

VectorEngine

VectorEngine is an AssemblyScript & WebAssembly vector rendering engine. I designed it with the goal of making a super simple rendering engine that can be used by anyone to write WebAssembly games using AssemblyScript. Tutorials are available on wasmbook.com.

Tutorials

Example Games

You can install VectorEngine using npm:

npm i vectorengine

HTML usage

Here's an example of the HTML code you would use with VectorEngine:

  <html>

    <head>
      <style>
        body {
          background-color: #3b3b3b;
          text-align: center;
        }
      </style>

    </head>

    <body>
      <canvas width="640" height="640" id="cnvs"></canvas>
      <script type="module">
        import { runVectorGame } from "https://unpkg.com/vectorengine/lib/VectorEngine.js";

        runVectorGame("cnvs", "helloworld.wasm", "gameLoop");
      </script>
    </body>

    </html>

AssemblyScript usage

The AssemblyScript renders loops or text as vectors. Here is some code:

  import { DisplayString, renderLoop } from 'vectorengine';
  // /vectorengine/lib/vectorengine.ts';

  let x: f32 = 0.0;
  let y: f32 = 0.3;
  let scale: f32 = 0.04;
  let yellow: u32 = 0xff_ff_00_ff;
  const helloWorld = new DisplayString("Hello Vector Engine", x, y, scale, yellow);

  const heartLoop: StaticArray<f32> = [
    // x, y
    0, 0.4375, // first point
    0.125, 0.625, // second point
    0.2578125, 0.7421875, // third point...
    0.375, 0.796875,
    0.5, 0.796875,
    0.625, 0.75,
    0.7578125, 0.6171875,
    0.875, 0.375,
    0.875, 0.125,
    0.75, -0.125,
    0, -0.875,
    -0.75, -0.125,
    -0.875, 0.125,
    -0.875, 0.375,
    -0.7421875, 0.6171875,
    -0.625, 0.75,
    -0.5, 0.796875,
    -0.375, 0.796875,
    -0.25, 0.75,
    -0.125, 0.625,];

  let timeChange: f32 = 0.0; // ADD THIS LINE

  export function gameLoop(delta: i32): void {

    timeChange += <f32>delta / 1000.0; // ADD THIS LINE

    helloWorld.render();

    const scale: f32 = (Mathf.sin(timeChange * 18) + 1.05) / 50.0 + 0.2; // CHANGE LINE
    const x: f32 = 0.0;
    const y: f32 = -0.2;
    const rotation: f32 = 0.0;
    const red: u32 = 0xff_00_00_ff;
    renderLoop(heartLoop, x, y, red, rotation, scale);
  }