CODEWITHSUNDEEP
javascripthtmlanimationcanvas
InspiredBy
InspiredBy

Reputation: 4320

Creating flash like animations with Canvas and HTML5

This is a "where can I start" type question.

I'm in process of learning HTML5 and Canvas work but have a feeling that I'm looking in the wrong area.

I would like to learn how to create cartoon type flash-like responsive animations. Imagine this teddy bear: teddy bear image

When I point my mouse at it I want to make him walk across the screen by implementing my "moving feet" animations etc..When click, I want him to wave his paw.

With HTML5 and Javascript I can make him move/float across but I can't find the way to actually ANIMATE the movements.

Do I create small .mp4 files? Do I create a bunch of images to loop through them? Animated GIFs? I would like to stay away from flash ofcourse...

I thought HTML5 with Canvas animation would allow me to achieve what I want but other than drawing simple shape animations and Video work I can't seem to find tutorials or "How to" articles.

How can I achieve what I'm trying to do or do I need to look elsewhere? I would appreciate being pointed in the right direction.

Edit: I ran into the following game while doing research: http://www.cuttherope.ie/ How, for example is the monster animated in something like this?

Upvotes: 14

Views: 14085

Answers (5)

Simon Sarris
Simon Sarris

Reputation: 63820

Canvas will do you well here.

Animation is typically done merely by cycling through different PNG files (or a spritemap with different images). Here's a jsfiddle example I did not long ago that shows a simple animation on the canvas:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();

var drawTile = function(x, y, tile, width, height) {
    context.drawImage(image, (tile % 6) * width, Math.floor(tile / 6) * height, width, height, x, y, width, height);
};

image.onload = function() {
    // draw all 12 tiles:
    var i = 0;
    setInterval(function() {
        context.clearRect(0,0,500,500);
        drawTile(0, 0, i, 48, 32);
        i++;
        if (i > 11) i = 0;
    }, 85);
}
image.src = 'https://i.sstatic.net/qkWe2.png';

If you look at the image in the example, you get an idea of what a sprite map for animation looks like:

enter image description here

Cycling thought the sprites in such an image based on a timer is all that's needed!

Making and moving clickable, selectable objects on the canvas takes a bit of footwork. There's nothing built in for object detection on the canvas. But if you've done programming before it isn't too hard, and I've written a popular tutorial on the matter that serves as a very gentle introduction. It should help you out.

Other than that, your best resource is, of course, Stack Overflow. :) We'll always be glad to answer individual questions as you come across them.

Upvotes: 8

Peter Ajtai
Peter Ajtai

Reputation: 57685

For animations, three.js is nice. It's even got a few physics engine plugins.

Also, take a look at parts of HTML5 Game Development

Upvotes: 2

net.uk.sweet
net.uk.sweet

Reputation: 12431

If the purpose of the exercise is to learn HTML5 and canvas then the following is probably not for you. If you need to create your teddy animation as quickly and easily as possible, and deliver it using standards based technologies, then I would suggest you download and explore the preview of Adobe Edge. It's a motion and interaction design tool similar to Flash (timeline and keyframes) which outputs a combination of HTML, CSS and JavaScript. I haven't played with the preview version but I'm pretty sure it will be capable of producing the sort of animation you're talking about.

Update:

You might also want to consider Zoë which can be used to export SWF animations directly to sprite sheets. It was created by the team which developed the Canvas library easel.js and can export the accompanying frame data as either JSON or easel.js. It will allow you to create your animations in Flash (which, let's face it, is still the best web animation tool around) but render them using HTML.

Upvotes: 4

Brian Warshaw
Brian Warshaw

Reputation: 22984

The way I see it, there are two problems to tackle:

  1. Give the bear motion within itself (legs at a minimum)
  2. Move the bear across the screen

Tackling these two gets you the appearance of the bear walking across the screen (as opposed to just moving across the screen or walking in place). It sounds like you've already tackled problem #1.

To tackle #2, your best bet is to have an image per-frame. Trying to draw the bear in a different position for each frame is a waste of time. If you preload the frame images, you can take the cost once at the beginning and them you're just displaying a different image as he walks.

Now, is this a job for canvas? I don't know. I'm thinking you could probably build what I've described in "old school" HTML/JavaScript/CSS. The platform is up to you--but frames--and more specifically an image for each frame--are the key concept here.

Upvotes: 1

brains911
brains911

Reputation: 1310

I'll quickly bow to a more educated answer, but I would guess what you want to do may be a little too much for canvas/javascript performance in the browser.

If you're an animator by trade it might not seem like such a tedious task, but I imagine you would be writing a lot of code to animate intricate paths and fill them and etc...

I'm sure you've researched, but there are numerous javascript canvas libraries out there. Paper js comes to mind or processing js. They might point you in a decent direction if you check out their examples/capabilities concerning paths and animation.

Upvotes: 1

Related Questions