Weapons of Choice for Animation
- SVG
- Canvas
- Flash SWF
- VML
- CSS3
Difference between SVG, Canvas, SWF, CSS3, VML
SVG
- Vector Based
- XML Based
- DOM Integration
- Accessibility
- Animation API
Canvas
- Bitmap Based
- Variable Context Support
- JS is Accessible
- No Animation API
Flash SWF
- Bitmap/Vector support
- Legacy Support
- Lacks Accessibility
- Animation API
VML
- Vector Based
- XML Based
- DOM Integration
- Accessibility
- IE Specific
- No Animation API
CSS3
- Variable Support
- Limited Available Interactions
- Browser Specific
- Animation API
In AS3 you are given:
(with document class)
- An auto-starting render loop
- A stage to render to
In HTML5/JS you have to specify both
Canvas Basic Usage
JavaScript
//assign DOM element to var
var canvas = document.getElementById('canvasarea');
//if browser supports HTML5 assign context
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}HTML
<!--Mark-up for Canvas element-->
<canvas id="tutorial" width="150" height="150"></canvas>A Quick Word on Contexts
There are various types e.g.
- Opera has a context for game development with collision detection
- FireFox/Chrome supports a context for 3D (WebGL)
If a browser supports canvas it minimally supports "2d" context
Context supplies you with canvas methods you can use
Canvas coordinate system
(2D Context)
Image courtesy of diveintohtml5.org
Same coordinate system as flash
Drawing Image to "Stage"
AS3
//Create instance of Loader Class
var my_loader:Loader = new Loader();
//New URLRequest class
//Run load method on loader for request
my_loader.load(new URLRequest("myImage.jpg"));
//Add loader to stage
addChild(my_loader);
JavaScript
//Create instance of Image Class
var image = new Image();
//Assign image source
image.src = "myImage.jpg";
//Bare bones minimum for drawing image
drawImage(image, x, y);
Minimal Constructors
AS3
package
{
public class Main
{
//Assign class vars
var Blah;
public function Main()
{
//Do stuff...
}
}
}
JavaScript
//Assign public "global" vars
var Blah;
window.onload = function(){
//Do Stuff...
}
Better Constructors
AS3
package
{
public class Main
{
//Assign class vars
var Blah;
public function Main()
{
init();
}
private function init(){
//Do stuff...
}
}
}
JavaScript
//Launch into publicly
//accesible Main function
var Blah;
var Main;
window.onload = init;
function init()
{
new Application();
}
function Application()
this.startApplication = function(){
/Do stuff...
}
}
A Quick Word on OOP in JS
In Javascript a function can be treated as an object
function myClass(){
}
new myClass();
So can object literals
myClass = {
testFunction : function(){}
}
new myClass();
"this" is public and "var" is private
function myClass(){
this.myPublicVar = "meow";
var meowzers = "BOOM";
}
console.log(new myClass().myPublicVar); // Logs "meow"
console.log(new myClass().meowzers); // Logs "undefined"
Extending objects is done by prototyping
function ExtendedFrom(){
this.testItem = "Hello";
}
function ExtendedTo(){
}
ExtendedTo.prototype = new ExtendedFrom();
console.log(new ExtendedTo().testItem); // Logs "Hello"
Understanding Render loops and Drawing to the Canvas
Setting up a render loop
const FPS = 60;
var canvas = null;
var context2D = null;
window.onload = function() {
init();
}
function init()
{
canvas = document.getElementById('canvasarea');
if (canvas.getContext){
context2D = canvas.getContext('2d');
}
setInterval(draw, 1000 / FPS);
}
function draw()
{
}
Ye Olde Bouncing Ball
const FPS = 60;
var x = 50;
var y = 0;
var xDirection = 1;
var yDirection = 1;
var canvas = null;
var context2D = null;
window.onload = function() {
init();
}
function init()
{
canvas = document.getElementById('canvasarea');
if (canvas.getContext){
context2D = canvas.getContext('2d');
}
setInterval(draw, 1000 / FPS);
}
function draw()
{
context2D.clearRect(0, 0, 300, 300);
context2D.beginPath();
context2D.arc(x,y,5,0,Math.PI*2, true);
context2D.fill();
x += 1 * xDirection;
y += 1 * yDirection;
if (x >= canvas.width)
{
x = canvas.width;
xDirection = -1;
}
else if (x = 0)
{
x = 0;
xDirection = 1;
}
if (y >= canvas.height)
{
y = canvas.height;
yDirection = -1;
}
else if (y = 0)
{
y = 0;
yDirection = 1;
}
}
Drawing API has very similar functionality to AS3
Basic Drawing Functions
beginPath() closePath() stroke() fill() moveTo(x, y) lineTo(x, y) arc(x, y, radius, startAngle, endAngle, anticlockwise) rect(x, y, width, height) quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) fillRect(x,y,width,height) strokeRect(x,y,width,height) clearRect(x,y,width,height) //Even has access to the pixel array context.getImageData(left, top, width, height) //Similar to AS3s BitmapData(width, height, transparent, fillColor)
Understanding Transforms with Save & Restore
Transformations are applied on a context level
Save and restore methods are used to access the canvas state.
The canvas drawing state is the container for all transformations and styles.
The canvas drawing state is the container for all transformations and styles.
Order of operations
- 1. Clear canvas
- 2. Save state prior to transforms
- 3. Apply transforms and drawImage() functions to canvas state
- 4. Restore canvas so transforms don't build up
// Be mindful of z-index/depth
Basic transform rotate example
const FPS = 260;
var x = 50;
var y = 0;
var xDirection = 1;
var yDirection = 1;
var canvas = null;
var context2D = null;
var image = new Image();
image.src = "dino.png";
var degrees = 10;
window.onload = function() {
init();
}
function init()
{
canvas = document.getElementById('canvasarea');
if (canvas.getContext){
context2D = canvas.getContext('2d');
}
setInterval(draw, 1000 / FPS);
}
function draw()
{
context2D.clearRect(0, 0, canvas.width, canvas.height);
context2D.save();
var radians = degrees++ * Math.PI / 180;
context2D.rotate(radians);
context2D.drawImage(image, 0,y++, 148, 52, 0, 0, 148, 52);
context2D.restore();
}
What happens if you don't save and restore??
Effects are compounded
e.g.
function draw()
{
context2D.clearRect(0, 0, canvas.width, canvas.height);
var radians = degrees++ * Math.PI / 180;
context2D.rotate(radians);
context2D.drawImage(image, 0,0, 148, 142, 0, 0, 148, 142);
}
Crazy town ensues...
Tranformational functions
translate(x, y) rotate(angle) scale(x, y) transform(m11, m12, m21, m22, dx, dy) //Crazy transformation matrix
Sprites and the drawImage function
(Simulating the timeline)
drawImage can have additional params
which offset an image within a viewing area
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Image courtesy of developer.mozilla.org
Perfect for showing just parts of an image
In context
Normal Sprite
Canvas
Code for cycling sprite
const FPS = 12;
var x = 50;
var y = 0;
var xDirection = 1;
var yDirection = 1;
var canvas = null;
var context2D = null;
var image = new Image();
image.src = "build4.png";
var frames = 12;
var frameOffset;
var offSetArea = 0;
window.onload = function() {
init();
}
function init()
{
canvas = document.getElementById('canvasarea');
if (canvas.getContext){
context2D = canvas.getContext('2d');
}
frameOffset = Math.ceil(image.width/frames);
setInterval(draw, 1000 / FPS);
}
function draw()
{
if(offSetArea > image.width){
offSetArea = 0;
}
offSetArea += frameOffset;
context2D.clearRect(0, 0, canvas.width, canvas.height);
context2D.drawImage(image, offSetArea,0, image.height,
frameOffset, 0, 0, image.height, frameOffset);
}
Handling Mouse Interaction
Theres no direct element interaction within the canvas as it's just pixels
Solution? Figure out where was clicked in the canvas and compare to area of desired interaction
Example
Click within canvas
X Position is 0 and Y position is 0
Code for mouse check
const FPS = 12 ;
var x = 50;
var y = 0;
var xDirection = 1;
var yDirection = 1;
var canvas = null;
var context2D = null;
var image = new Image();
image.src = "build4.png";
var frames = 12;
var frameOffset;
var offSetArea = 0;
window.onload = function() {
init();
}
function init()
{
canvas = document.getElementById('canvasarea');
///****ADD LISTENER****///
canvas.addEventListener("click", canvasClick, false);
if (canvas.getContext){
context2D = canvas.getContext('2d');
}
frameOffset = Math.ceil(image.width/frames);
setInterval(draw, 1000 / FPS);
}
function draw()
{
if(offSetArea > image.width){
offSetArea = 0;
}
offSetArea += frameOffset;
context2D.clearRect(0, 0, canvas.width, canvas.height);
context2D.drawImage(image, offSetArea,0, image.height,
frameOffset, 0, 0, image.height, frameOffset);
}
function canvasClick(e) {
console.log(getCursorPosition(e).x); //Logs X position
console.log(getCursorPosition(e).y); //Logs Y position
}
function getCursorPosition(e) {
var xposition;
var yposition;
if (e.pageX != undefined e.pageY != undefined) {
xposition = e.pageX;
yposition = e.pageY;
}
else {
xposition = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
yposition = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
xposition -= canvas.offsetLeft;
yposition -= canvas.offsetTop;
function position(xpos, ypos)
{
this.x = xpos;
this.y = ypos;
}
var pos = new position(xposition,yposition);
return pos;
}
Touching briefly on CSS3
CSS3 Transformations
Starts with browser specific styles:
-webkit-transform:
-ms-transform:
-moz-transform:
-o-transform:
//Transform Functions
rotate(angle);
scale(sx[, sy]);
skew(ax[, ay]);
translate(tx[, ty]);
matrix(a, c, b, d, tx, ty); //Crazy transformation matrix
Transitions apply transforms over time
-moz-transition-property
-moz-transition-duration
-moz-transition-timing-function
-moz-transition-delay
//or altogether:
-webkit-transition: property duration timing_function delay [, ...];
-moz-transition: property duration timing_function delay [, ...];
CSS3 Animation
-webkit-animation-name: [NAME];
-webkit-animation-iteration-count: [number, infinite];
-webkit-animation-timing-function: [linear, ease,ease-in, ease-out];
-webkit-animation-duration: [time];
-webkit-animation-delay: [time];
CSS3 Keyframing Animation
css-selector{
-webkit-animation: NAME-OF-ANIMATION duration delay iterations fillmode direction;
}
@-webkit-keyframes slideInRightToLeft {
from {
-webkit-transform: translateX(100%);
}
to {
-webkit-transform: translateX(0);
}
}
CSS3 Target as onClick
nodeType_to_target:target{
-webkit-animation: NAME-OF-ANIMATION duration delay iterations fillmode direction;
}
<a href="#id1">Mooooove</a>