Tutorial

Anvil.js Tutorial

Introduction

Anvil.js is a JavaScript library that simplifies the creation and management of 2D scenes, allowing developers to easily build interactive and visually appealing web applications. This tutorial will guide you through the basics of using Anvil.js, focusing on the Scene class and two additional classes, Polygon and Sprite, to create and manipulate objects within the scene.

Getting Started

Setting Up Anvil.js

Before diving into the tutorial, make sure you include the Anvil.js library in your project. You can either download it from the official website or include it via a content delivery network (CDN) in your HTML file.

<!-- Include Anvil.js -->
<script src="/anvil.min.js"></script>

Creating a Basic Scene

To start, let's create a basic scene using Anvil.js. Ensure you have an HTML canvas element in your HTML file with an id, such as "sceneCanvas":

<canvas id="sceneCanvas" width="800" height="600"></canvas>

Now, let's create a simple scene with Anvil.js:

// Scene Options
const sceneOptions = {
  width: 800,
  height: 600,
  canvas: document.getElementById("sceneCanvas"),
  fpsMonitoringEnabled: true,
  lighting: true,
  physics: true,
  physicsOptions: { gravity: { x: 0, y: 1 } },
  start: true,
};

// Create a Scene
const myScene = new Scene(sceneOptions);

In this example, we've created a scene with a canvas of dimensions 800x600 pixels, enabled FPS monitoring, lighting, and physics simulation. The start option is set to true to automatically start rendering the scene.

Polygon Class

Creating a Polygon

The Polygon class in Anvil.js represents a polygon within the scene. Let's create a simple square polygon and add it to our scene:

// Polygon Options
const polygonOptions = {
  points: [[0, 0], [50, 0], [50, 50], [0, 50]],
  backgroundColor: "#00FF00",
};

// Create a Polygon
const myPolygon = new Polygon(polygonOptions);

// Add Polygon to Scene
myScene.addObject(myPolygon);

In this example, we've defined a square polygon with green fill color and added it to the scene using myScene.addObject(myPolygon).

Manipulating Polygons

Let's explore some methods provided by the Polygon class:

// Move the Polygon
myPolygon.move([10, 0]);

// Draw the Polygon (called automatically if added to the scene)
// if not added to the scene, use this to render it (once a tick)
myPolygon.draw({ ctx: myScene.ctx, camera: myScene.cameraAngle });

// Get Width and Height
const width = myPolygon.getWidth();
const height = myPolygon.getHeight();

Sprite Class

Creating a Sprite

The Sprite class in Anvil.js represents an image-based object within the scene. Let's create a sprite and add it to our scene:

// Sprite Options
const spriteOptions = {
  url: "path/to/image.png",
  coordinates: [100, 100],
  width: 50,
  height: 50,
};

// Create a Sprite
const mySprite = new Sprite(spriteOptions);

// Add Sprite to Scene
myScene.addObject(mySprite);

In this example, we've defined a sprite with an image URL, initial coordinates, and dimensions. We then added it to the scene using myScene.addObject(mySprite).

// Get Width and Height
const spriteWidth = mySprite.getWidth();
const spriteHeight = mySprite.getHeight();

// Reload Sprite Source
mySprite.changeSource("/path/to/new/image.png"); // this reloads the source as well automatically
mySprite.reload(); // force reload sprite

// Resize the sprite
mySprite.scale(2); // scale size up by 2
mySprite.reshape(50,50); // Change back to original size


// Draw the Sprite (called automatically if added to the scene)
mySprite.draw({ ctx: myScene.ctx, camera: myScene.camera, canvas: myScene.canvas });

Input Class

Anvil.js includes an Input class for monitoring keyboard and mouse events. Let's create an input monitor for the "ArrowUp" key:

// Create a Key Input Monitor
const keyUp = new Input("ArrowUp");

// Attach an "on" function to handle the event
keyUp.on = (event) => {
  console.log("Key press"); // logs once every 10 milliseconds (change by modifying "fireRate"
  // Or, move an object
  myGameObject.move([0,-5]);
};

// Activate the Input Monitor
keyUp.activate();

In this example, we've created an input monitor for the "ArrowUp" key, attached an "on" function to handle the event, and activated the monitor. You can deactivate and reactivate it as needed, using keyUp.deactivate() and reactivate().

Light Class

Anvil.js provides a Light class to simulate lighting effects within the scene. Let's create a light source and add it to our scene:

// Light Options
const lightPosition = [100, 100];
const diffuse = 0.5;
const lightStrength = 0.8;
const lightColor = [255, 255, 255];

// Create a Light
const myLight = new Light(lightPosition, diffuse, lightStrength, lightColor);

// Add Light to Scene
myScene.addLight(myLight);

In this example, we've defined a light source with position, diffusion, strength, and color properties. We then added it to the scene using myScene.addLight(myLight).

Manipulating Lights

Let's explore some methods provided by the Light class:

// Pin the Light to a GameObject
const myObject = /* some GameObject (Polygon/Sprite) */;
myLight.pin(myObject);

// Move the Light
myLight.move([10, 0]);

// Brighten the Light
myLight.brighten(1.2);

// Dim the Light
myLight.dim(0.8);

These methods allow you to pin the light to an object, move it, brighten, and dim its intensity.