モーリーのメモ

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

モーリーのメモ

マリオみたいな2Dアクションゲームを作る! その7 タイルマップでステージを作る:Cocos Creator

 ◆ Cocos Creatorスーパーマリオみたいな2Dアクションゲームを作ります。◆
 ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
 ◆ 最初から読みたい場合はココをクリックして下さい。◆
 
 こちらの記事の続きです。

 
 今回は、タイルマップでステージを作成します。
 タイルマップとは、タイルセット(マップチップ)と呼ばれる色々なパターンのタイルを並べて、ゲームのステージやマップを作成したものです。1つタイルセットで様々なステージが作成出来ます。
    f:id:mmorley:20200421224150p:plain
 
【 注意 】この記事で使用しているCocos Creator v2.3.3は、VS Codeデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
 v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
 既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。
    f:id:mmorley:20200422191834p:plain

続きを読む

マリオみたいな2Dアクションゲームを作る! その6 プレイヤーにアニメーションを追加する:Cocos Creator

 ◆ Cocos Creatorスーパーマリオみたいな2Dアクションゲームを作ります。◆
 ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
 ◆ 最初から読みたい場合はココをクリックして下さい。◆
 
 こちらの記事の続きです。

 
 今回は、プレイヤーにアニメーションを追加します。
 プレイヤーの『停止・歩く・ジャンプ(落下)』の動きに合わせて、アニメーションを再生します。
 
【 注意 】この記事で使用しているCocos Creator v2.3.3は、VS Codeデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
 v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
 既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。
    f:id:mmorley:20200422191834p:plain

続きを読む

マリオみたいな2Dアクションゲームを作る! その5 二段ジャンプ、調節ジャンプを追加する:Cocos Creator

 ◆ Cocos Creatorスーパーマリオみたいな2Dアクションゲームを作ります。◆
 ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
 ◆ 最初から読みたい場合はココをクリックして下さい。◆
 
 こちらの記事の続きです。

 
 今回はプレイヤーの操作に、二段ジャンプと調節ジャンプを追加します。
  • 二段ジャンプ:ジャンプ中に空中でもう一度ジャンプします。
  • 調節ジャンプ:ジャンプキーを押す時間の長さによってジャンプの高さを調節します。
 
【 注意 】この記事で使用しているCocos Creator v2.3.3は、VS Codeデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
 v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
 既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。
    f:id:mmorley:20200422191834p:plain

続きを読む

マリオみたいな2Dアクションゲームを作る! その4 接触イベントで着地判定する:Cocos Creator

 ◆ Cocos Creatorスーパーマリオみたいな2Dアクションゲームを作ります。◆
 ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
 ◆ 最初から読みたい場合はココをクリックして下さい。◆
 
 こちらの記事の続きです。

 
 今回は、プレイヤーがブロック(地面など構造物のノード)に着地しているかどうかを接触イベントで判定する処理を追加します。連続するブロックを走り抜ける時に、着地を誤判定しないように工夫します。
 
【 注意 】この記事で使用しているCocos Creator v2.3.3は、VS Codeデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
 v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
 既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。
    f:id:mmorley:20200422191834p:plain

続きを読む

マリオみたいな2Dアクションゲームを作る! その3 プレイヤーをキー操作する:Cocos Creator

 ◆ Cocos Creatorスーパーマリオみたいな2Dアクションゲームを作ります。◆
 ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
 ◆ 最初から読みたい場合はココをクリックして下さい。◆
 
 こちらの記事の続きです。

 
 今回はプレイヤーをキーボードで操作出来るようにします。
 左右の移動とジャンプを実装します。
 
【 注意 】この記事で使用しているCocos Creator v2.3.3は、VS Codeデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
 v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
 既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。
    f:id:mmorley:20200422191834p:plain

続きを読む

マリオみたいな2Dアクションゲームを作る! その2 物理エンジンを使用する:Cocos Creator

 ◆ Cocos Creatorスーパーマリオみたいな2Dアクションゲームを作ります。◆
 ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
 
 こちらの記事の続きです。

 
 今回は、『プレイヤーキャラクター(以下、プレイヤー)』の動きを、物理エンジンで制御するための設定を行います。物理エンジンによって、プレイヤーが重力を受けて落下したり、地面に衝突して停止したりする動きが計算されます。
 
【 注意 】この記事で使用しているCocos Creator v2.3.3は、VS Codeデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
 v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
 既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。
    f:id:mmorley:20200422191834p:plain

続きを読む

マリオみたいな2Dアクションゲームを作る! その1 プロジェクトの作成:Cocos Creator

 ◆ Cocos Creatorスーパーマリオみたいな2Dアクションゲームを作ります。◆
 画像等の素材の入手、開発環境のセットアップから開始して、なるべく詳細に手順を載せていきます。
 ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
 
 アクションゲームには、プレイヤー、敵、足場のブロック、アイテム、スコア表示、カメラ、メニュー等の要素があります。
 これらを物理エンジン、タイルマップ、アニメーション、パーティクル、ビットマップフォントといった便利なシステムやツールを使って作ります。必要な素材やツールはなるべく無料のものを使います。
 
 Cocos Creatorは無料で使えるマルチプラットフォーム対応の開発環境です。
 特にブラウザでサクサク動くゲームが作れるのが魅力です。『RPGアツマール(niconicoの自作ゲーム投稿コミュニティサービス)』に投稿することも出来ます。
 
 今回は、Cocos Creatorのインストールから、新規プロジェクトの作成、そしてデバッグ環境を構築するまでを行います。デバッグ環境の構築では、繰り返し作業を楽にする設定を紹介します。
 Cocos Creatorを使うなら何を作るにしても、まず行う作業なので、ぜひ参考にして下さい。
  
【 注意 】この記事で使用しているCocos Creator v2.3.3は、VS Codeデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
 v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
 既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。

    f:id:mmorley:20200422191834p:plain

続きを読む