Créer des animations flash avec Canvas et HTML5

C'est un "où puis-je démarrer" type de question.

Je suis dans le processus de l'apprentissage du HTML5 et Canvas travail, mais ont un sentiment que je suis à la recherche dans la mauvaise zone.

Je voudrais savoir comment créer de dessin animé de type flash-comme sensible les animations. Imaginez cet ours en peluche:
Créer des animations flash avec Canvas et HTML5

Quand je pointe ma souris, je veux lui faire traverser l'écran par la mise en œuvre de mes "en bougeant les pieds" animations etc..Lors d'un clic, je veux la vague de sa patte.

Avec HTML5 et Javascript, je peux lui faire bouger/float partout mais je ne trouve pas le moyen d'ANIMER les mouvements.

Dois-je créer de petits .les fichiers mp4? Dois-je créer un tas d'images pour parcourir en boucle? GIFs Animés? Je voudrais rester à l'écart de flash bien sûr...

Je pensais que HTML5, avec de la Toile de l'animation me permettrait de réaliser ce que je veux, mais d'autres que le dessin de forme simple des animations et des Vidéos, je n'arrive pas à trouver des tutoriels ou des articles "Comment faire".

Comment puis-je obtenir ce que je suis en train de faire ou dois-je chercher ailleurs? Je vous serais reconnaissant de se faire remarquer dans le bon sens.

Edit: j'ai couru dans le jeu suivant en faisant des recherches: http://www.cuttherope.ie/
Comment, par exemple, est le monstre animé par quelque chose comme cela?

source d'informationauteur Shenaniganz

4

Si le but de l'exercice est d'apprendre HTML5 et canvas puis le suivant est probablement pas pour vous. Si vous avez besoin pour créer votre peluche animation aussi rapidement et facilement que possible, et de le livrer à l'aide de normes basées sur des technologies, alors je vous suggère de télécharger et d'explorer l'aperçu de Adobe Edge. C'est un mouvement et l'interaction de l'outil de conception similaire à Flash (scénario et les images clés) qui génère une combinaison de HTML, CSS et JavaScript. Je n'ai pas joué avec la version preview, mais je suis sûr qu'on va être capable de produire le genre d'animation que vous êtes en train de parler.

Mise à jour:

Vous pouvez également envisager de Zoe qui peut être utilisé pour exporter des animations SWF directement à feuilles sprite. Il a été créé par l'équipe qui a développé le Canvas bibliothèque easel.js et peut exporter les accompagnant les données d'image comme JSON ou easel.js. Il vous permettra de créer vos animations en Flash (qui, avouons-le, est encore le meilleur du web, l'outil d'animation autour), mais de les rendre à l'aide de HTML.
8

Toile vous fera bien ici.

Animation est généralement effectuée simplement en vélo à travers les différents fichiers PNG (ou un spritemap avec des images différentes). Voici un exemple jsfiddle Je l'ai fait y a pas longtemps que montre une animation simple sur la toile:
```
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 = 'http://i.stack.imgur.com/qkWe2.png';
```
Si vous regardez l'image dans l'exemple, vous aurez une idée de ce qu'est un sprite carte pour l'animation ressemble:

Vélo pensée les images-objets dans une image en fonction d'un minuteur est tout ce qu'il faut!

De décisions et de déplacement cliquable, objets sélectionnables sur la toile prend un peu de jeu de jambes. Il n'y a rien construit dans pour la détection d'objets sur la toile. Mais si vous avez fait de la programmation avant qu'il n'est pas trop dur, et j'ai écrit un populaire tutoriel sur le sujet qui sert comme une introduction en douceur. Il devrait vous aider.

Autre que cela, votre meilleure ressource est, bien sûr, de Débordement de Pile. 🙂 Et nous serons toujours heureux de répondre aux questions spécifiques que vous rencontrez.
3

Pour les animations, three.js est agréable. Il a même eu un peu de moteur physique plugins.

Aussi, jetez un oeil à des parties de Le Développement de jeux HTML5
1

Je vais vite arc pour une plus instruits réponse, mais je suppose que ce que vous voulez faire peut-être un peu trop pour toile/performances javascript dans le navigateur.

Si vous êtes un animateur par le commerce, il peut ne pas sembler une tâche fastidieuse, mais j'imagine que vous seriez en écrire beaucoup de code pour animer complexe de chemins et de les remplir et etc...

Je suis sûr que vous avez fait des recherches, mais il y a de nombreux javascript toile bibliothèques. Papier js vient à l'esprit ou traitement js. Ils pourraient le point de vous dans un bon sens si vous découvrez leurs exemples/capacités concernant les chemins et de l'animation.
1

La façon dont je le vois, il y a deux problèmes:
1. Donner l'ours de mouvement à l'intérieur de lui-même (jambes au minimum)
2. Déplacer l'ours à travers l'écran
De s'attaquer à ces deux vous fait de l'apparition de l'ours marche à travers l'écran (par opposition à simplement déplacer à travers l'écran ou de la marche sur place). Il semble que vous avez déjà abordé le problème n ° 1.

Pour lutter contre le #2, votre meilleur pari est de disposer d'une image par image. Essayer de dessiner l'ours dans une position différente pour chaque image est une perte de temps. Si vous précharger les images, vous pouvez prendre le coût une fois au début et que tu es juste de l'affichage d'une image différente, comme il marche.

Maintenant, est-ce un travail pour la toile? Je ne sais pas. Je pense que vous pourriez probablement construire ce que j'ai décrit dans la "vieille école" HTML/JavaScript/CSS. La plate-forme est à vous--mais les cadres-et plus précisément d'une image pour chaque image--est le concept clé.

Vous devez vous connecter pour publier un commentaire.