モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

物理エンジンを使ったシンプルなゲームを作る! その3完成(スクリプトを作成):Cocos Creator

<今回やること!>

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

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

続きを読む

物理エンジンを使ったシンプルなゲームを作る! その2(アニメーションとプレハブを作成):Cocos Creator

<今回やること!>

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

続きを読む

物理エンジンを使ったシンプルなゲームを作る! その1(タイルマップでステージ作成):Cocos Creator

<今回やること!>

  • 物理エンジンを使ったシンプルなアクションゲームを作成します。
    • ゲームに必要な絵、音、フォント等のリソースを入手します。
    • タイルマップエディタの『Tiled』を使用して、ステージを作成します。
    • ゲームシーンを作成し、サイズをタイルマップのステージに合わせます。
    • シミュレーターのサイズをタイルマップのステージに合わせます。
 
 作成するのは、自動で走り続けるプレイヤーをジャンプさせて、障害物を避けつつコインを集めるゲームです。操作は、スペースキーによるジャンプだけです。
    f:id:mmorley:20190531092459g:plain
 シンプルなゲームですが、アクションゲームに必要な様々な要素が含まれています。
  • タイルマップによるステージの作成とコインや障害物の配置
  • プレイヤーが走ったり、ジャンプしたりするフレームアニメーションの作成
  • 物理エンジンを使ったプレイヤの動きや、コイン・障害物との衝突判定
  • プレイヤーの表示位置を固定するカメラの設定
  • BGM、効果音の設定
  • ベストスコアの保存
  • スタート、リスタートボタンの設定
    などなど
 
 それでは作成開始です!

続きを読む

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

<今回やること!>

  • 『Tiled』マップエディターで、タイルマップを作成します。
    見た目の作成だけでなく、オブジェクトの配置も行います。
  • 作成したタイルマップをCocos Creatorで読み込みます。
    配置したオブジェクトのデータを読み込みます。
 
 タイルマップとは、タイルセットやマップチップと呼ばれる色々なパターンのタイルを並べて、ゲームのステージやマップを作成したものです。
  • タイルセット(マップチップ)
    f:id:mmorley:20160519214336p:plain:w400
  • タイルマップで作成したステージ
    f:id:mmorley:20160519215403p:plain:w400
 1枚絵を使用するよりも使用する画像サイズが小さく、同じタイルセットで様々なパターンのマップが作成出来ます。タイルセットは素材配布サイト入手可能で、有償のものも無償のものもあります。
 
 『Tiled』は、タイルセットからマップを作るためのエディタです。
    f:id:mmorley:20160519221945p:plain:w500
 無料で使用可能です。(寄付は募っています。)MacWindowsLinux版が配布されています。
 
 『Tiled』のファイル形式『.tmx』は、Cocos Creatorでサポートされています。
 『Tiled』で配置したオブジェクトの位置、形状、サイズ等のデータをCocos Creatorで容易に扱うことが出来ます。
 
 『Tiled』の使い方と、Cocos Creatorへタイルマップを読み込む方法をまとめました。

続きを読む

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

<今回やること!>

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

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

続きを読む

アニメ調の雲を作成する!:Blender

<今回やること!>

  • アニメ調の雲を作成します。
    f:id:mmorley:20190521135749p:plain:w300
 
 写真のようなリアルな雲ではなくて、無作為にモコモコした雲を作成します。
 
 記事中のキー操作については、Windowsの場合は『option』キーを『alt』キーに置き換えて下さい。

続きを読む

マニュアルのチュートリアルをやってみる! その3(完):Cocos Creator

<今回やること!>

  • こちらの記事の続きを行います。
    mmorley.hatenablog.com
  • スコアの表示、ゲームが失敗した時のシーンのリロードや効果音の再生の処理等を追加します。
 
 今回でチュートリアル完了です。

続きを読む