モーリーのメモスマートフォン用の表示で見るモーリーのメモアプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。2』でアニメーションを作成する方法です。透明度を変化などの効果を加える事が出来る『Actionクラス』が用意されています。これらの効果を組み合わせることで、様々なアニメーションを作成することが出来ます。モーリーのメモ』で取り扱っていますので、こちらもご参照下さい。他にもまだこのブログでは取り扱ってはいませんが、『Cocos』には複数の画像をパラパラ漫画のように切り替えてアニメーションを作成する『Animationクラス』も用意されています。2』でアニメーションを作成する方法を調べました。2』はデフォルトの画面構成で『Animation』ウインドウが表示されていて、気になりますし。IDE』でコードを書いて、タッチ等のイベントと合わせて組み立てる必要があります。Studio2』でアニメーションを作成するところまでを書きます。IDE』での作業は、次回のブログに書くことにします。2』では、各ノードに、フレーム単位で動きや変化を設定することでアニメーションを作成します。Y:200』の位置、と設定すると0〜30フレームの間の動きを自動で補間してくれます。この場合の『0フレーム目』と『30フレーム目』を『キーフレーム』と呼びます。『Animationウインドウ』で『キーフレーム』を設定し、『Propertiesウインドウ』でプロパティを設定するというのが基本的な作成方法になります。フレームレートフレームレートは1秒間に切り替えるフレームの数です。『Animationウインドウ』の下記の部分で設定します。『Animationウインドウ』は、横にフレームの目盛りが振ってありますが、時間の経過は設定したフレームレートとフレーム数から把握する必要があります。複数のアニメーションの作成1つのファイル(シーン、レイヤー、ノード)に、複数のアニメーションを作成する場合は、1つ目のアニメーションは『0〜30』フレーム、2つ目のアニメーションは『30〜90』フレームといったように、区分を分けて作成します。各区分のアニメーションに名前を付けることも出来ます。余談ですが、私は最初、アニメーションを追加するとタイムラインが別に作られるのかと思っていました。1つのファイルにタイムラインは1つのようです。Frame』を設定します。アニメーションの管理・修正をクリックすると、作成したアニメーションがリスト表示されます。Frame』をダブルクリックすると、内容を修正することが出来ます。アニメーションの削除アニメーションを消す場合は、左下の『−』ボタンをクリックします。『Animationウインドウ』の左上にある操作パネルで、作成中のアニメーションの動きを確認することが出来ます。上側のボタンの機能は、左から次のようになっています。選択中のアニメーションの最初のフレームに移動1フレーム戻る選択中のアニメーションを再生する1フレーム進める選択中のアニメーションの最後のフレームに移動ループ再生と1回再生の切り替え下側のドロップダウンリストで、再生するアニメーションを選択します。その他の操作は、作成例の中で説明します。作成するアニメーション下記のアニメーションを作成します。新規プロジェクトから作成します。使用する画像それぞれの画像を右クリックして、画像の右に書いた名前をつけて保存して下さい。Objects』にある『Sprite』を、『Canvas(アプリの画面を作成するウインドウ)』へドラッグアンドドロップ画面右の『Propertiesウインドウ』で『Sprite』のプロパティを下記のように変更*書いていないパラメータは変更していません。Resource』:start.pngこの図ではスタートボタン用スプライトを配置し、画像ファイルを設定しています。Frame』にチェックを入れた状態でノードのプロパティを変更すると、現在のフレームの関連する項目に、自動でキーフレームが追加されるようになります。『0フレーム目』と『30フレーム目』を結んでいる線が矢印になります。『MainScene.csd』と『NodeChara.csd』ともに『Animationウインドウ』の現在のフレーム(青いライン)を『0フレーム目』の位置にする実行時にシーン・ノードを呼び出した時に、保存した時のフレームの位置の状態で呼びだされます。『MainScene.csd』と『NodeChara.csd』での作業を切り替えるには、『Canvas』の上部のタブをクリックするか、『Resourcesウインドウ』でファイルをダブルクリックします。IDE』が起動します。2』での作業は終了です。IDE』での作業は、次のブログに書くことにします。クリックしてツリーを展開した時、デフォルトでは『Skew』と『Scale』と『Position』の行だけが表示されます。Resource(画像)』や『Opacity(不透明度)』、『Color(色)』の行が無いので、それらのキーフレームが作成出来ません。Frame』にチェックをつけた状態で、そのプロパティを変更することで追加されます。frame』:チェックすると、最後のフレームとして1番目の画像のフレームが追加されます。あとがき記事は長いですが、作業量はそんなに多くない思います。慣れればアニメーションを全てコードで書くより、断然楽になりますね。Creator以前、こちらの記事の続きです。Creatorアニメーションを使いたいのですが、使い方がよくわからないの...2016-03-01Blenderで2Dのロゴが光るアニメーションを作るBlenderで2Dのロゴがきらっと光るアニメーションを作成します。2で画面作成:Coco...下記の記事の続きです。(8)参加グループプログラミングリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!mmorleyさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。