If you don't already have, please take a look at smileyFaces, a little game I developed with boxboxevents, to let you have an overview of the possibilities of the framework.
In the following document, I will explain to you step by step how to make a simple version of smileyFaces to introduce you to boxboxevents.
Like smileyFaces, it is playable on desktop/tablet/mobile in any orientation ...
Try it! - All sources for the following examples
This project includes a simple stylesheet style.css and the following scripts :
Box2dWeb-2.1.a.3.min.js (dependency of boxboxevents)boxbox.min.js (minified version of boxboxevents)viewport.js (simple script that handles canvas resizing to full window + detects touch)index.js (this is where the code of the game is)First, you create the world, providing the canvas + some options (only canvas is mandatory, see api documentation ).
As you'll see, you can choose to disable some types of event listeners (ex : if your game only uses touch, you don't wan't mouse or key events).
You can apply boundaries to your game (so you won't have to manage them manually).
Try it! (you'll only see an empty world ...)
Now that we have a world, let's put some walls around (to prevent the ball to get out).
The viewport is smaller than the world and doesn't have the same ratio, so you won't see all your walls. We'll add the panning ability at the end, so you can navigate along your world.
Now that we have a stage, let's add the player. As you can see, it has a callback that will turn it back to blue when it hits the bottom wall.
After the player, let's add some blocks. The blockConfig var acts like a reusable template for each created blocks. As you can see, if the block is hit hard enough by the player, it will turn to black and the player will turn to red, if it hits hard enough the bottom the block will be destroyed.
Finally, like we added some blocks, we add 3 crates.
Except for the boundaries of the world, you could do quite everything above with the original boxbox. Now, let's add some interraction with some new features from boxboxevents !
We'll add the ability to launch the player by dragging, with mouse or touch (angry birds like).
Explanation are in the comments in the code.
Try it! (Now, you can launch the player and the viewport tracks down the player)
Previously we used the eventDrag type for mouse/touchDraggable, now we are going to make the crates draggable (multitouch style).
Try it! (Play with the crates, plurality of ones at a time on multitouch - either with more than one touch on each one if you dare !)
The game is beginning to look good, but still, we can't navigate through the world, let's add some panning/pinching/zooming ability.
Try it! (Now, move your world with your mouse or finger, zoom in/out with your mousewheel or by pinching with your fingers)
Center the viewport on your player at the beginning, with only one line of code (you specified the boundaries on your world, boxboxevents will take care about repositionning, rescaling, etc ...)
I hope you've found this introduction/tutorial helpful. For further infos, don't hesitate to check out the api documentation, or any of the sources on my github repo.