14

これは「どこから始めればよいか」というタイプの質問です。

HTML5とCanvasの作業を学習中ですが、間違った領域を探しているように感じます。

漫画タイプのフラッシュのようなレスポンシブアニメーションの作成方法を学びたいです。このテディベアを想像してみてください。 テディベアの画像

マウスを向けるときは、「足を動かす」アニメーションなどを実装して、画面上を歩かせたいと思います。クリックすると、足を振ってもらいたいです。

HTML5とJavascriptを使用すると、彼を動かしたり浮かせたりすることができますが、実際に動きをアニメーション化する方法を見つけることができません。

小さな.mp4ファイルを作成しますか？ループする画像の束を作成しますか？アニメーションGIF？もちろんフラッシュから離れたいです...

HTML5とCanvasアニメーションを使用すると、私が望むことを達成できると思いましたが、単純な形状のアニメーションとビデオ作品を描く以外に、チュートリアルや「ハウツー」記事を見つけることができないようです。

自分がやろうとしていることをどのように達成できますか、それとも他の場所を探す必要がありますか？正しい方向に向けられていただければ幸いです。

編集：調査中に次のゲームに遭遇しました：http ：//www.cuttherope.ie/ たとえば、モンスターはどのようにこのようなアニメーションになっていますか？

4

5 に答える 5

8

キャンバスはここでうまくいくでしょう。

アニメーションは通常、さまざまなPNGファイル（またはさまざまな画像を含むスプライトマップ）を循環するだけで実行されます。これは、私が少し前に行ったjsfiddleの例で、キャンバス上に単純なアニメーションを示しています。

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';

例の画像を見ると、アニメーションのスプライトマップがどのように見えるかがわかります。

ここに画像の説明を入力してください

サイクリングは、タイマーに基づいたそのような画像のスプライトが必要なすべてであると考えました！

キャンバス上でクリック可能で選択可能なオブジェクトを作成および移動するには、少し手間がかかります。キャンバス上のオブジェクト検出には何も組み込まれていません。しかし、それほど難しくない前にプログラミングを行ったことがある場合は、非常に穏やかな紹介として役立つ問題についての人気のあるチュートリアルを作成しました。それはあなたを助けるはずです。

それ以外に、あなたの最高のリソースはもちろん、StackOverflowです。:)個々の質問に出くわしたときは、いつでも喜んでお答えします。

于 2012-07-08T03:51:38.510 に答える
4

演習の目的がHTML5とキャンバスを学ぶことである場合、以下はおそらくあなたには向いていません。テディアニメーションをできるだけ早く簡単に作成し、標準ベースのテクノロジーを使用して配信する必要がある場合は、AdobeEdgeのプレビューをダウンロードして調べることをお勧めします。これは、HTML、CSS、JavaScriptの組み合わせを出力するFlash（タイムラインとキーフレーム）に似たモーションおよびインタラクションデザインツールです。私はプレビューバージョンで遊んだことはありませんが、あなたが話しているようなアニメーションを作成できると確信しています。

アップデート：

SWFアニメーションをスプライトシートに直接エクスポートするために使用できるZoëを検討することもできます。Canvasこれは、ライブラリeasel.jsを開発したチームによって作成され、付随するフレームデータをJSONまたはeasel.jsとしてエクスポートできます。これにより、Flashでアニメーションを作成できますが（これは、今でも最高のWebアニメーションツールです）、HTMLを使用してレンダリングできます。

于 2012-07-08T00:08:27.623 に答える
2

アニメーションの場合、three.jsが適しています。いくつかの物理エンジンプラグインもあります。

また、HTML5ゲーム開発の一部をご覧ください

于 2012-09-06T23:03:57.047 に答える
1

私はすぐにもっと知識のある答えに屈するでしょうが、あなたがやりたいことはブラウザでのcanvas/javascriptのパフォーマンスには少し多すぎるかもしれないと思います。

あなたが貿易によるアニメーターなら、それはそれほど退屈な仕事のようには思えないかもしれませんが、複雑なパスをアニメートしてそれらを埋めるためにたくさんのコードを書くことになると思います...

あなたは研究したと思いますが、そこにはたくさんのjavascriptキャンバスライブラリがあります。紙のjsが頭に浮かぶか、jsを処理しています。パスとアニメーションに関する彼らの例/機能をチェックすると、彼らはあなたをまともな方向に向けるかもしれません。

于 2012-07-07T23:01:32.207 に答える
1

私の見方では、取り組むべき2つの問題があります。

  1. クマの動きをそれ自体の中で与えます（少なくとも足）
  2. クマを画面上で動かします

これらの2つに取り組むと、クマが画面を横切って歩いているように見えます（画面を横切って移動したり、所定の位置を歩いたりするのではありません）。すでに問題1に取り組んでいるようですね。

＃2に取り組むための最善の策は、フレームごとに画像を用意することです。フレームごとに異なる位置にクマを描画しようとすると、時間の無駄になります。フレーム画像をプリロードすると、最初に一度コストをかけることができ、彼が歩いているときに別の画像を表示しているだけです。

さて、これはキャンバスの仕事ですか？知らない。私が「昔ながらの」HTML/JavaScript/CSSで説明したものをおそらく構築できると思います。プラットフォームはあなた次第ですが、フレーム、より具体的には各フレームの画像がここでの重要な概念です。

于 2012-07-08T00:59:50.733 に答える