Squids NPM | npm.io

Squids

A 2D Library for web games

What?

At its core, Squids is an abstraction of the Canvas API. It aims to be accessible to beginners and extensible for experts.

How?

Lets start with an example: /example

Start by making an index.html and including Squids.

<!-- index.html -->
<!doctype html>
<html>
	<body>
		<script src="squids.min.js"></script>
		<script src="game.js"></script>
	</body>
</html>

That gets you all of Squids (Graphics), Sleepless Lib (Utilities), and Howler (Sound)

Next, lets load an image and display it on screen:

// game.js
// vec is short for vector
let screen = vec(canvas.width, canvas.height);

load_image("squid.png", function(image)
{
	// We make a new Squid object to store and control our image
	let squid = new Squid(screen.dup().div(2), image);
	// screen.dup().div(2) gives us a new vector duplicated from screen divided by two
	// this is the center of our screen

	// lets scale our image down a bit
	squid.scale = 0.5;


	// this vector will be the direction our squid will be moving on the x and y axis
	let direction = vec(1, 1);

	// our squid is drawing automatically on the screen now, but if we want our squid to move
	// we need to have it "listen" for a tick event
	squid.listen("tick", function(delta, num_ticks)
	{
		// now we can make our squid do something
		// lets make it move to the right

		let speed = delta / 100;
		squid.velocity.x += direction.x * speed;
		squid.velocity.y += direction.y * speed;

		// now our squid is really fast, so let's add some friction
		squid.velocity.mlt(0.90, 0.90);

		// let's bounce off the walls as well
		if(squid.position.x + (squid.image.size().x * squid.scale) / 2 >= screen.x)
		{
			direction.x = -1;
		}

		if(squid.position.x < (squid.image.size().x * squid.scale) / 2)
		{
			direction.x = 1;
		}

		// let's bounce off the floor and ceiling as well
		if(squid.position.y + (squid.image.size().y * squid.scale) / 2 >= screen.y)
		{
			direction.y = -1;
		}

		if(squid.position.y < (squid.image.size().y * squid.scale) / 2)
		{
			direction.y = 1;
		}
	});

	// to make everything start running... we need to tell squids to start ticking
	tick(true);
});

input

If you want to detect input, by default, Squids will track mouse position and keys that are currently pressed down. You can query the mouse position quite easily:

let mouse_pos = vec(mouse_x, mouse_y);

Getting keys down is also simple:

// keys stores each key as an object with the value of either true or false for down/up
// {a: false, space: true} - true being DOWN, and false being UP
let is_space_down = keys["space"];
let is_akey_down = keys["a"];

Listeners

These are the order that listeners are called:

pretick
tick
posttick
prephysics
postphysics
precollide
collide
postcollide
draw
draw0
draw1
draw2
draw3
draw4

multiple draw calls allow placing squids on different "layers". draw5 will draw ON TOP of draw4 etc...

There are also listeners for body events:

resize
mousedown
mouseup
mousemove
keyup
keydown
blur
focus

Why?

We believe that making web based games should be easy and fun. Most games are just images moving on a screen and reacting to input, so that's what we built. Also, we do it for fun, and hope that others enjoy it as well. :)

@everything-registry/sub-chunk-2812

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago