# 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.
```html
```
That gets you all of Squids (Graphics), Sleepless Lib (Utilities), and Howler (Sound)
Next, lets load an image and display it on screen:
```js
// 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:
```js
let mouse_pos = vec(mouse_x, mouse_y);
```
Getting keys down is also simple:
```js
// 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. :)