ビデオ: HTML5 Canvasで作るアニメーション- iPhoneの傾きと組み合わせてみる - 2025
あなたのHTML5ゲームでこのような動きが起こると、洗練された複数のアニメーションが必要になります。いつでもスプライトに関連付けられたイメージを変更するには、changeImage（）またはsetImage（）関数（同じものの2つの異なる名前）を使用できます。しかし、時には、もっと洗練されたアニメーションが必要な場合もあります。 walkAnimを見てください。 html。 <！ --1 - >
ここにはイメージ交換がたくさんあります。ウォーキングアニメーションは実際にウォーキングの錯覚を与えるために急速に交換された一連の8つの異なるイメージです。 4種類のアニメーションがあります（それぞれの基本方向の1つです）、合計32の異なるイメージです。しかし、コードを見ると、文字スプライトには1つのイメージしか含まれていないことがわかります。
この画像は合成アニメーションです。各行は方向を表し、各行は繰り返すことを意図した1つのサイクルまたは一連の画像を含む。
<！ - 3 - >
背景画像は、Hyptosisという名前の作者が、同じサイト上のパブリックドメインで画像を公開したものです。 FranckやHyptosisのような才能豊かで慎重な貢献者は、盛んな創造的なコミュニティの鍵です。あなたのゲームで使用するより偉大なアートワークのためのオープンゲームアートサイトを自由に見てもらえますが、著者に感謝し、属性を付けてください。
シンプルゲーム。 jsライブラリには、マルチイメージアニメーションを簡単に作成するための機能が含まれています。 walkAnimのコードを見てください。 htmlを使ってどのように動作するか見てみましょう：walkAnim。 htmlのvarのゲーム; var背景; var文字。関数init（）{ゲーム=新しいシーン（）; background = new Sprite（ゲーム、 "rpgMap。png"、800,600）;バックグラウンド。 setSpeed（0、0）;バックグラウンド。 setPosition（400、300）;
文字=新しいスプライト（ゲーム、 "rpg_sprite_walk.png"、192、128）;
文字。 loadAnimation（192,128,24,32）; 文字。 generateAnimationCycles（）; 文字。 renameCycles（新しい配列（ "down"、 "up"、 "left"、 "right"））; 文字。 setAnimationSpeed（500）; //一時停止した文字を開始します。 setPosition（440,380）;キャラクター。 setSpeed（0）; 文字。 pauseAnimation（）; 文字。 setCurrentCycle（ "down"）; ゲーム。start（）;} //終了するinit関数update（）{ゲーム。 clear（）; checkKeys（）;バックグラウンド。更新（）;キャラクター。 （キーダウン[K_LEFT]）{ 文字。 setSpeed（1）; 文字。 playAnimation（） 文字です。 setMoveAngle（270）; 文字。 setCurrentCycle（ "left"）; } if（keysDown [K_RIGHT]）{character。 setSpeed（1）;キャラクター。 playAnimation（）文字です。 setMoveAngle（90）;キャラクター。 setCurrentCycle（ "right"）;} if（keysDown [K_UP]）{character。 setSpeed（1）;キャラクター。 playAnimation（）文字です。 setMoveAngle（0）;キャラクター。 setCurrentCycle（ "up"）;} if（keysDown [K_DOWN]）{character。 setSpeed（1）;キャラクター。 playAnimation（）文字です。 setMoveAngle（180）;キャラクター。 setCurrentCycle（ "down"）;} if（keysDown [K_SPACE]）{ 文字。 setSpeed（0）; 文字。 pauseAnimation（）; 文字。 setCurrentCycle（ "down"）; }} アニメーションを構築するには、いくつかの新しいステップを取る必要がありますが、結果は完全に努力する価値があります。 アニメーション画像を取得する。
自分でイメージを作成することも、OpenGameArtのような優れたリソースを見ることもできます。他の人が行った作業を見つけることができます。もちろん、あなたは他人の仕事を尊重する責任がありますが、今日は非常に容認されたライセンスで利用可能な素晴らしい仕事があります。イメージが行と列で構成され、各サブイメージがまったく同じサイズであることを確認してください。
-
画像が適切な形式であり、各サブ画像のサイズがわかっていることを確認するには、画像エディタを操作する必要があります。
アニメーションイメージをスプライトに貼り付けます。
あなたはスプライトに画像全体を添付しますが、一度に小さな部分を表示するだけです。これはたくさんの画像を扱うよりも簡単ですし、より効率的です。
-
loadAnimation（）メソッドを使用してアニメーションオブジェクトを作成します。
オブジェクトのloadAnimation（）メソッドを呼び出すと、アニメーションの管理に役立つアニメーションツールが作成されます。最初の2つのパラメータは画像全体のサイズ（幅と高さ）で、2つ目のパラメータは各サブ画像の幅と高さです。これらの値が間違っていると、アニメーションがスクロールするように見えます。これらの値が正しくなるまで再生を続けます：
-
文字。 loadAnimation（192,128,24,32）;
アニメーションサイクルを構築します。
各行はアニメーションサイクルに変わります。デフォルトのバージョン（パラメータなし）は、ほとんどの状況で正常に動作します。このツールのより高度な使い方については、
-
文字を参照してください。 generateAnimationCycles（）;
サイクルの名前を変更します。
buildAnimationCycles（）コマンドで作成されたアニメーションにはデフォルトの名前が付いていますが、もっと意味のある名前を付けるほうが殆どです。各行が表すものを示す名前を持つ配列を
-
文字として追加します。 renameCycles（新しい配列（ "down"、 "up"、 "left"、 "right"））;
アニメーションの速度を設定します。
アニメーションの速度は、アニメーションの実行速度を示します。ほとんどのアプリケーションでは500の値が正しいように見えますが、この値を調整してキャラクターの歩行サイクルがキャラクターを実際に推進しているように見せることができます：
-
setAnimationSpeed（500）;
表示するサイクルを設定します。
setCurrentCycle（）メソッドを使用すると、renameAnimationCycles（）ステップで指定した名前の1つ、
-
文字でサイクルを選択できます。 setCurrentCycle（ "down"）;
pauseAnimation（）コマンドを使用して、アニメーションを一時停止します。
pauseAnimation（）コマンドはアニメーションを一時停止します。
-
playAnimation（）を使用してアニメーションを開始します。
このメソッドは、現在のアニメーションサイクルを連続的にループします。
-
ご覧のとおり、アニメーションはゲームに多大な楽しみを追加し、あなたのレパートリーにロールプレイングゲームの全領域を開きます。
