This is the newest update to Vas. Vas is currently at
Future updates: Collision detection and map making. Custom player sprites that can be animated simply.
Want to use the current engine? Download Now. You can also download the main.js file here. I also realized that in my code I have the player set to a certain image...for now, you can download the image here, but I am going to update that soon.
When having the Vas Engine in a seperate file, there is no need to create a canvas element. One could just say `let engine = new Vas();`, which would give you a default fullscreen canvas. Otherwise, Vas will take up to three parameters. The first is width, the second is height, and the third is for styling. In my example above, I gave it a width and height of 512, and styled it to have a border and shadows.
Once you define Vas, all you have to do is tell it to start. I let my Vas be named "engine" when I declared `let engine = new Vas();`, so all functions from now on take in "engine". To tell our engine to start, just type `engine.start();`.
Now that our engine is started we can start adding things to the canvas!
In my example, I first made a rectangle that would fill the canvas. Drawing a Rectangle requries you to use the Rect() function, and add it to the canvas. The Rect() function takes in five parameters: x, y, width, height, and a color. Make sure the color is in quotes. If no parameters are entered, a 16x16 square will be drawn at (0,0) with a color of black. Such default settings help prevent errors in one's code.
To draw a circle, use Circle(); A circle takes in four parameters: x, y, radius, and color. Again, make sure that the color is in quotes, and if no parameters are entered, a default circle will be drawn at (0, 0).
A player can be defined by using Player(); The Player only takes in one parameter: canvas. It is necessary to give pass the canvas through the function. The player for now is only defined with an image that I am using, but will soon be updated to have shapes.
Just defining these elements does not officially bind them to the canvas. We must declare the parent of the new element. If we wanted to add to the canvas, there is a preset canvas root called "rootNode". Having a rootNode allows one to move maps by moving the parent rather than moving all elements individually. This allows more versatility for future updates. To add children to the canvas, use `engine.rootNode.addChild( ); Inside the parenthesis is where you want to place the name of the element you want to add to the canvas. If I wanted to add a rectangle, I would do `let rect = new Rect(0,0,16,16,'green'); engine.rootNode.addChild(rect);`. This adds a 16x16 green rectangle to the canvas at (0,0).
If I wanted to add a child to one of my elements(for this example, having a rectangle move with the player) you use the same `.addChild( ) method. Define the first object and add it to the canvas:` let imp = new Player(engine.canvas); engine.rootNode.addChild(imp); `. Then define the second object: ` let rect = new Rect(0,0,16,16, 'green'); ` Now we need to append it to the parent: `imp.addChild(rect);`. Now, the rectangle will inherit all traits of the player, including movement.
At the moment, collision boxes are nonfunctional, but I will state how to use them here. To turn them on, just type ` engine.colliderBox = true; ` before you start the engine. They will automatically default to false, but they can be turned off by using false instead.
