最近、キャンバスのスケルトン アニメーションについて知りました。名前からわかるように、これまでのキャンバスのアニメーションとは異なります。興味がありますか?
スケルトンアニメーションについては、Tencentチームで初めて偶然見たのですが、公式Webサイトにはチュートリアルが非常に少なく、参考用の小さなデモしかなく、公式にダウンロードされたケースは奇妙なことに実行できませんでした。おそらく私の操作です。間違っていますが、それは問題ではありません。この小さなデモを通して、この非常に高度なスケルトン アニメーションについて学びましょう。私も初心者なので、理解が不十分です。ご容赦ください。
始める前に、AlloyStick について学びましょう公式の紹介文には、AlloyStick は HTML5 テクノロジーを使用して開発されたスケルタル アニメーション エンジンであり、HTML5 アニメーション開発と HTML5 ゲーム開発に使用できると記載されています。AlloyStick は主にスケルタル アニメーション エンジンとスケルタル アニメーション エディターで構成されており、スケルタル アニメーション エディターは強力なスケルタルを提供します。アニメーション編集機能では、アニメーション キー フレームを設定し、強力な自動トゥイーンと骨格関係を利用することで、PC、携帯電話、タブレットなどのデバイスでスムーズに実行できるリアルで鮮やかな Canvas 骨格アニメーションを作成できます。そうですね、言うのは簡単ですし、とても魅力的です。
いわゆるスケルタルアニメーションとは、文字通り骨を通して描かれたアニメーションを意味します。では、ここでの骨はどのように見えるのでしょうか？
はい、こう見えても期待どおりです。結局のところ、非常に強力な自動トゥイーン機能があり、すべての部分が非常にスムーズに接続されており、PS のフェザリングに似ていると考えることができます。
これは非常に強力な機能であるため、独自の利点があるはずです。
以下の小さなデモを始めましょう
スケルトンアニメーションは主にスケルトンデータ、スキニングデータ、アニメーションデータの3つのデータで構成されており、AlloyStickでは鮮やかなスケルトンアニメーションを描画することができます。もちろん、これら 3 つのデータは手動で生成する必要はなく、エディターで操作するだけで自動的に生成されます。データが生成されたら、次のようにしてスケルトン アニメーションを呼び出して実行できます。最初のステップは、alloysk.js を導入し、次にリソース resource.js を追加することです。なお、スキニングされたpngはimgタグで導入されており、もちろんjsで読み込むことも可能です。 resource.js には、スキニング データ、ボーン関係データ、およびアニメーション名とパラメータを含むすべてのアクション データが含まれています。 2 番目のステップでは、新しいリソース ファイルに従ってステージ オブジェクト Stage とロール オブジェクト Armature が作成され、Stage オブジェクトが Armature オブジェクトを管理します。 playTo メソッドは、キャラクターがさまざまなアクション アニメーションを再生できるようにするコア メソッドです。イベントを追加して、さまざまなアクションを切り替えることができます。最後にステージ stage.start() を開始します。
// 最初のステップは、キャンバスを構築することです <canvas id=canvas width=800px height=600px> 申し訳ありませんが、お使いのブラウザはキャンバスをサポートしていません。Chrome ブラウザを使用することをお勧めします</canvas>。
// 2 番目のステップは、画像または JS の形式でスキン リソースを導入することです <img src=img/texture.png id=xiaoxiaoImg style=display:none;>
// 3 番目のステップでは、alloysk.js と resource.js を導入します // 4 番目のステップは準備です var Canvas = document.getElementById('canvas')var textureImg = document.getElementById('xiaoxiaoImg')var scene = new tongue.Scene( Canvas.getContext('2d'))var player = new tonguesk.Armature('xiaoxiao',textureImg)//5 番目のステップはアニメーションを作成することです//アクション速度パラメーター: アクションの状態、速度、初期速度、常に実行するかどうか、roll roll// などの他のアクションもここで設定できます。 いくつかのアクションの状態を更新しました: run run roll roll simpleHit 右手で何かを投げる 秒でパンチを打つ右手 // ジャンプキック サイドキック カモン 挑発 リラックス リラックス ソープ ソープを拾う player.playTo('run',50,15,true);//アニメーションの位置 player.setPos(300,300); player.setEaseType(true);scene.addObj(player); // FPS モニターを開始します (補助機能は必要ありません) ally.monitorFPS(scene);そして、コールバック ループを呼び出して // アニメーションを実行する最後のステップ scene.start(); // を渡すことができます。このエフェクトは、下の走っている少年のようなものです。まだ GIF アニメーションの作成への扉を開いていないことをお詫びします。関連するコードは github https://github.com/aurora-polaris/canvas3 にアップロードできます。
初心者なのでよくわからないことも多いので、時間があるときに整理してみます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。