2019-06-06

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

Cocos Creator

＜今回やること！＞

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

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

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

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

　
　それでは作成開始です！

2019-05-25

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

Tiled Cocos Creator

＜今回やること！＞

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

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

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

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

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

2019-05-22

チュートリアルのスクリプトをTypeScriptで書く！：Cocos Creator

TypeScript Cocos Creator

＜今回やること！＞

こちらの記事でJavaScirptで作成したスクリプトをTypeScriptで書きます。

　
　Cocos Creatorは、スクリプトをJavaScriptとTypeScriptで書くことが出来ます。
　TypeScriptはJavaScriptから派生したもので、その名が示すように、型（Type）の定義が厳密になっています。

　TypeScriptを使うメリットは、型定義が厳密であるがために、オートコンプリート（コードの自動補完）が確実に使えることです。JavaScriptの場合は値やオブジェクトの代入時に型が決まるので、オートコンプリートが機能しない場合があります。
　そして型が厳密なことで代入ミスなどのケアレスミスが防げます。
　
　TypeScriptに詳しい方からはメリットはまだまだあると言われそうですが、私がTypeScriptを使う１番のメリットは上記の点によりコーディングの効率が上がることです。また、とりあえずJavaScriptからTypeScriptへ書き換える場合には、それほど変更点がないのも良い点です。
　
　以前、Cocos CreatorではCoffeeScriptが使用できましたが、現在は無くなっています。
　ですがTypeScriptは、Microsoftが開発した言語で、エディタのVSCodeもMicrosoft製です。Googleの社内標準言語に採用されたとの記事がありましたし、人気のプログラミング言語でも上位に挙げられるので、将来性はありそうです。
　
　TypeScriptのコードは、ファイルごとにまとめて記載します。
　チュートリアルをやってない方は、チュートリアルの記事を御覧ください。