ボーンを使って走る2Dアニメーションを作る！：DragonBones

【 今回やること！ 】

• DragonBonesを使って、2Dの走るアニメーションを作ります！
  
• 作成したアニメーションをGIFファイルで出力します。

　
　素材の画像はInkscapeで描きました。ゲームっぽく2.5頭身キャラです。

　アニメーションにするためにパーツに分けています。

　この作業は少し手間ですが、1コマずつ描くより少ない労力、データサイズでいろいろなモーションが作成出来ます。
　
　今回の作るアニメはこちらです。
　＊gifです。画像をクリックすると動きます。

　
　それでは作成を開始します！

画像の周りに透明な余白を追加する！：Node.js

【 今回やること！ 】

• Node.jsで、画像処理ライブラリの『Jimp』をインストールします。
  
• 画像の周りに余白を追加するプログラムを作成します。
  • フォルダ内の複数の画像ファイルを一括処理します。

　
　下記の記事のあとがきで、画像の周りに余白が欲しいという話をしました。

mmorley.hatenablog.com

　
　やりたいのはこんな感じです。

　
　GIMPやIncscape等の画像編集・加工ソフトで出来ますが、画像ファイルの数が多いと面倒なので、Node.jsのプログラムを書いて一括処理できるようにします。
　
　それでは作成します！

メッシュとボーンで１枚絵からアニメーションを作る！：DragonBones

【 今回やること！ 】

• DragonBonesを使ってアニメーションを作成します。
  
• 作成したアニメーションをCocos Creatorで使用します。

　
　DragonBonesは、無料で使える2Dアニメーション作成ツールです。メッシュとボーンを使って、１枚の絵でアニメーションを作成することも出来ます。
　
　今回作成するアニメーションです。＊画像をクリックすると再生します。

　　
　Cocos Creator自体にもアニメーション作成機能はありますが、DragonBonesの方が機能は豊富です。複数の画像からアニメーションを作る際の階層の管理もしやすいです。
　
　Cocos Creatorには、DragonBones用のコンポーネントがあるので、作成したアニメーションを簡単に使用できます。
　
　それでは作成を開始します！

物理エンジンを使ったシンプルなゲームを作る！ その３完成（スクリプトを作成）：Cocos Creator

＜今回やること！＞

• 物理エンジンを使ったシンプルなアクションゲームを作成します。
  こちらの記事の続きです。
  mmorley.hatenablog.com
  その１はこちら
  物理エンジンを使ったシンプルなゲームを作る！ その１（タイルマップでステージ作成）：Cocos Creator - モーリーのメモ
  　
  
• スクリプトを作成します。
  
• スクリプトをコンポーネントとしてノードに追加します。
  
• スクリプトで設定したプロパティにノードやアセットを登録します。
  
• ボタンのクリックイベントを登録します。

　
　今回はスクリプトの作成、つまりプログラミングを行います。
　Cocos CreatorはJavaScriptとTypeScriptの2つの言語が選べますが、TypeScriptを選択しました。TypeScript未経験でも、JavaScript経験者ならすぐに分かると思います。
　TypeScriptについては、下記の記事も御覧ください。

mmorley.hatenablog.com

　それでは作成を開始します！

物理エンジンを使ったシンプルなゲームを作る！ その２（アニメーションとプレハブを作成）：Cocos Creator

＜今回やること！＞

• 物理エンジンを使ったシンプルなアクションゲームを作成します。
  こちらの記事の続きです。
  mmorley.hatenablog.com
  
• ビジュアルな環境で、プレハブとノードを作成します。
  
• フレームアニメーションを作成します。
  
• アニメーションに終了時に実行する関数名を登録します。
  
• 物理エンジンでノードの動きや衝突を計算するために、物理コンポーネントを設定します。
  
• スコア、ベストスコア、ゲームスタート時のカウントダウン用のラベルを配置します。
  
• スタート、再スタート用のボタンを配置します。

　
　それでは作成を開始します！

物理エンジンを使ったシンプルなゲームを作る！ その１（タイルマップでステージ作成）：Cocos Creator

＜今回やること！＞

• 物理エンジンを使ったシンプルなアクションゲームを作成します。
  • ゲームに必要な絵、音、フォント等のリソースを入手します。
    
  • タイルマップエディタの『Tiled』を使用して、ステージを作成します。
    
  • ゲームシーンを作成し、サイズをタイルマップのステージに合わせます。
    
  • シミュレーターのサイズをタイルマップのステージに合わせます。

　
　作成するのは、自動で走り続けるプレイヤーをジャンプさせて、障害物を避けつつコインを集めるゲームです。操作は、スペースキーによるジャンプだけです。

　シンプルなゲームですが、アクションゲームに必要な様々な要素が含まれています。

• タイルマップによるステージの作成とコインや障害物の配置
  
• プレイヤーが走ったり、ジャンプしたりするフレームアニメーションの作成
  
• 物理エンジンを使ったプレイヤの動きや、コイン・障害物との衝突判定
  
• プレイヤーの表示位置を固定するカメラの設定
  
• BGM、効果音の設定
  
• ベストスコアの保存
  
• スタート、リスタートボタンの設定
  などなど

　
　それでは作成開始です！

Tiledによるタイルマップの作成とオブジェクトデータの取得を行う！：Cocos Creator

＜今回やること！＞

• 『Tiled』マップエディターで、タイルマップを作成します。
  見た目の作成だけでなく、オブジェクトの配置も行います。
  
• 作成したタイルマップをCocos Creatorで読み込みます。
  配置したオブジェクトのデータを読み込みます。

　
　タイルマップとは、タイルセットやマップチップと呼ばれる色々なパターンのタイルを並べて、ゲームのステージやマップを作成したものです。

• タイルセット（マップチップ）
  
  
• タイルマップで作成したステージ
  
  

　１枚絵を使用するよりも使用する画像サイズが小さく、同じタイルセットで様々なパターンのマップが作成出来ます。タイルセットは素材配布サイト入手可能で、有償のものも無償のものもあります。
　
　『Tiled』は、タイルセットからマップを作るためのエディタです。

　無料で使用可能です。（寄付は募っています。）Mac、Windows、Linux版が配布されています。
　
　『Tiled』のファイル形式『.tmx』は、Cocos Creatorでサポートされています。
　『Tiled』で配置したオブジェクトの位置、形状、サイズ等のデータをCocos Creatorで容易に扱うことが出来ます。
　
　『Tiled』の使い方と、Cocos Creatorへタイルマップを読み込む方法をまとめました。