Follow the next steps to include it in your HTML page
1. Include the required scripts into your page (either head or body)
<script type="text/javascript" src="Lib/objects-extensions.js"></script>
<script type="text/javascript" src="Lib/animation.js"></script>
<script type="text/javascript" src="Lib/common.js"></script>
<script type="text/javascript" src="Lib/scene.js"></script>
2 Add a canvas element to your body
<canvas width="800" height="500" id="mycanvas"></canvas>
3 Initialize your scene with the canvas
var scene = new Scene2D("mycanvas");
4 Create a shape
var myRect= new Rectangle2D(100,100,50,50) - creates a new rectangle at position (100,100) with size (50,50)
var myImage= new Image2D(200,100,50,50,'path to your image'); - creates an image at the specified position/size
5 Add your shape to the scene
scene.add(myRect);scene.add(myImage);
scene.invalidate(); - to actually draw the shapes
6 Set the velocity of your shapes
myImage.velocity.dx = 50; - sets the horizontal velocity of the shape to 50
7 follow your shape while it is moving
myImage.bind("onmoving", function(args){
var newx = args.x; var newy = args.y; var myMovingShape = args.shape;
return true; // make sure to return true, or else the shape will not move. you can use this to set up the stop conditions...
});
8 Other documentation will follow soon... on...
- how to set up accelerations
- how to simulate a gif using sprites (ImageSprite2D)
- etc