Download the code for Movement
Click to start the sprites moving along the z axis; click and drag right or left to alter the sprites' horizontal position.
MoveZAxis creates the optical illusion of moving in 3D space. MoveForward increases the movement of a sprite on the z-axis and shifts the sprite's position from left to right. Click down on the screen to increase the speed of movement along the z axis. Click down and move right to move the sprites to the right; click down and move left to move the sprites to the left.
MoveZAxis accepts the following arguments:
The focal length is the distance from the viewer to the screen. A distance of 200–300 pixels gives a good sense of three-dimensional space.
The vanishing point is the point from which all sprites emerge. The default is 600 x and 400 y, the middle of our 1200x800 pixel screen.
friction determines how quickly the sprite's velocity slows down. The default value is 0.98.
maxZ is the highest possible z position—the sprite's z position increases as it moves away from the viewer towards the vanishing point. The default maxZ value is 4000. When a sprite gets to a negative z-axis value, it's as close to the viewer as it can get.
You can return the sprite to the distant vanishing point using maxZ's value.
myMain holds a reference to the Main object—an object that continually loops and calls each sprite's update and paint methods with each loop. When a sprite moves as close to the viewer as possible, we return that sprite to the vanishing point. For the sprite to be layered behind the other sprites, we remove the sprite from its current position in myMain's sprites array and place it at the beginning of the array.
We paint sprites based on their order in Main's sprites array—the first item in the array paints first, the second, paints second, continuing to the end of the array, layering the sprites at the beginning of the array below those at the end.
The MoveZAxis behavior is attached to each moving sprite. Here's the setup code for a single moving sprite:
this.catAnim1 = {
spriteProps:{name:'catAnim', x:0, y:0, w:400, h:220, XYscale: [0.5, 0.5], rotation: 0, graphics:['img/cat-sprite-sheet.png'], sheets:[this.catSheet], relative2VP:{x:300,y:200,z:4000}, visible:true},
painters:[new BitmapPainter()],
behaviors:[new MoveZAxis({myMain: this.myMain}), new Cycling({cycleTime: 60})]
};
this.myCatAnim1 = new BitmapGraphic(this.catAnim1);
Notice that the sprite has relative2VP (relative to vanishing point) on its spriteProps. Use the relative2VP property to set a sprite's z position and offset its x and y position relative to the vanishing point.
MoveForward is attached to a SpriteTroupe sprite, a sprite without a visual display that groups together the moving sprites on the screen (see js/scripts/all-sprites.js to review the code for SpriteTroupe). The SpriteTroupe uses the MoveForward behavior to alter the moving sprites' x, y, and z velocities, calling MoveZAxis to update those velocities.
Here's the setup code for our SpriteTroupe sprite:
this.movingSprites = [this.myCatAnim1, this.myCatAnim2, this.myCatAnim3];
this.movingTroupe = {
spriteProps:{name:'movingTroupe', x:600, y:400, w:1200, h:800, sprites: this.movingSprites, visible:false},
painters:null,
behaviors:[new MoveForward({sprites: this.movingSprites}), new MouseOver()]
};
this.movingTroupSprite = new SpriteTroupe(this.movingTroupe);
Notice the SpriteTroupe's spriteProps contains a new property called sprites. sprites is set to an array that houses all the moving sprites. Also note that the sprite's visible is set to false and its painters is set to null. We do that because this sprite doesn't display on the screen, instead it paints and updates the sprites contained within its sprites array property.
See the whole setup script at js/projects/movement/move-z-axis-setup.js.
The basic algorithm for this project comes from Billy Lamberta and Keith Peters' Foundational HTML5 Animation with JavaScript, a great book to check out if you want to learn more about interaction and animation using JavaScript.