squids
v6.1.2
Published
Squids is a 2D library for developing games for web browsers that is extremely easy to learn and use.
Downloads
59
Readme
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. :)