spective v3.0.4

Spective

This library provides a simple way to create 2D graphics in your browser. Scenes are made up of a hierarchy of just a few types of nodes, and support physics and collisions.

Scene

A scene will add a canvas to your page to display graphics and also serves as the camera node. It can be created in the following ways.

const scene = spective({ ...props });
const scene = new Scene({ ...props });

Canvas Properties

Camera Properties

Allows the same orientation props as Node instances, described further down.

Layer

Layers are flat planes that sprites can be placed into and can be set up to support parallax effects. They are added directly to the scene instance.

const layer = scene(new Layer({ ...props }))
const layer = scene({ ...props }) // must have parallax prop

Properties

Asset

Assets are images that can be reused within your scene. They can be added to a layer instance to have them move in relation to the camera position, or directly to the scene to make them a part of the UI.

// add to layer
const asset = layer(new Asset({ ...props }))
const asset = layer({ ...props }) // must have texture prop

// add to UI
const asset = scene(new Asset({ ...props }))
const asset = scene({ ...props }) // must have texture prop

Properties

Node

Nodes are instances of sprites. They can also hold other nodes to form a group of sprites that move as one group. They can also add code that will run when collisions occur with other nodes.

// add to asset (harder to manage, but can avoid setting asset prop)
const node = asset(new Asset({ ...props }))
const node = asset({ ...props }) // if no parallax, mesh, or texture prop is found

// add to layer
const node = layer(new Asset({ ...props }))
const node = layer({ ...props }) // if no parallax, mesh, or texture prop is found

// add to UI
const node = scene(new Asset({ ...props }))
const node = scene({ ...props }) // if no parallax, mesh, or texture prop is found

Hierarchy Properties

Orientation Properties

Animation

Any of the above properties can be given a speed and/or acceleration to update the values over time. The names of these animation props match the orientation props they will affect, except with an 's' or 'a' appended to them.

Collision Properties

oncollide function will recieve an event object with the following props.

Declarative Layouts

Declarative programming is a method of describing what the layout of your scene should be in response to state changes. It is a great way to abstract many of the complex tasks needed to manage your scene. Spective can be used along with another library, named Stew to make this possible. Just be sure to pass it the framework object for spective to switch it from its normal front-end mode. The following example assumes you have included both the stew and spective scripts onto your page. Intructions for how Stew works can be found here, .

stew('', ['scene', {},
	['layer', {},
		['asset', { texture: '/player.png' }
			['node', { pya: -100, oncollide: () => {} }]
		],
		['asset', { texture: '#000', oy: 1 }
			['node', { px: -50, sx: 100, sy: 4, param: {} }]
		],
	],
], spective.framework);

Controls

Controls listen for changes to various inputs you choose. Create an instance by passing info on what to listen for to the Control class, followed by the hold and release callback functions. Controls can listen to multiple types of input in one instance and the state of the control can be found by checking if it currently exists in the 'controls' set read from the spective function.

const spaceControl = new spective.Control({ key: ' ' }, onHold, onRelease) // triggered by space key
const touchControl = new spective.Control({ touch: touchEl }, onHold, onRelease) // triggered by touch events on touchEl
const comboControl = new spective.Control({ key: ' ', touch: touchEl }, onHold, onRelease) // triggered by either
spective.controls.has(spaceControl); // check if spaceControl is currently held

Initialization Properties

Callback Properties

The hold and release callback functions will receive an event object with the following properties.

Geometries (coming soon)

Technically 3D objects are allowed and exist in the hierarchy between layers and assets. Assets simply defualt to using a square. Currently, the ability to set custom UV coordinates is still be worked out. It should also be able to parse OBJ files once finished.