モーリーのメモ

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

モーリーのメモ

マリオみたいな２Dアクションゲームを作る！ その１ プロジェクトの作成：Cocos Creator

Cocos Creator VSCode TypeScript PlatformerGame

　◆ Cocos Creatorでスーパーマリオみたいな２Dアクションゲームを作ります。◆
　画像等の素材の入手、開発環境のセットアップから開始して、なるべく詳細に手順を載せていきます。
　◆ このシリーズの他の記事を見るには『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

目次

使用環境

　私が使用している環境です。

Cocos Creatorをインストールする

　最初に『Cocos DashBoard』をインストールして、次に『Cocos DashBoard』上で、エディターをインストールします。
　

    ブラウザで作業

  1. 下記のサイトを開きます。
    www.cocos.com
  2. 『V2.3.3』の『DOWNLOAD DASHBOARD』をクリックします。
    f:id:mmorley:20200411173939p:plain
    『CocosDashboard-v1.0.5-win32-040209.exe』がダウンロードされます。

    Windowsで作業

  3. 『CocosDashboard-v1.0.5-win32-040209.exe』をダブルクリックして実行します。

    Cocos Dashboardインストーラで作業

  4. 『OK』をクリックします。
    f:id:mmorley:20200324202203p:plain
  5. インストール先を入力して『I agree to the License terms and conditions.』にチェックを入れた後、『INSTALL』をクリックします。
    f:id:mmorley:20200411174317p:plain
  6. 『Next』をクリックします。
    Windowsアプリケーションを作りたい場合は『Install Visual Studio 2017』にチェックします。
    チェックを入れなくてもブラウザで動くアプリは作成できます。
    f:id:mmorley:20200324203140p:plain
  7. 『このアプリがデバイスに変更を加えることを許可しますか？ CocosDashBoard』で『はい』をクリックします。
    インストールが実行されます。
  8. 『Run』をクリックします。
    f:id:mmorley:20200324204246p:plain
    Cocos Dashboardが起動します。

    Cocos Dashboardで作業

  9. アカウントとパスワードを入力して、『Sign in』をクリックします。
    アカウントが未作成の場合は『Sign up』をクリックすると登録ページが開きます。
    メールアドレスを登録して、送られてくるメールで認証する形式です。
    f:id:mmorley:20200411175934p:plain
  10. 『Editor』タブを開いて、『Download』をクリックします。
    f:id:mmorley:20200411184613p:plain
  11. 『Cocos Creator 2.3.3』のインストールボタンをクリックします。
    f:id:mmorley:20200411184808p:plain
    エディターがインストールされます。

VS Codeのインストール

　VS CodeはMicrosoft製の無料で使えるコードエディタです。
　インストールした後に日本語化とChromeでデバッグするための拡張機能を追加します。
　

    ブラウザで作業

  1. 下記のサイトを開きます。
    code.visualstudio.com
  2. サイト内の『Download for Windows Stable Build』をクリックします。
    f:id:mmorley:20200423205459p:plain
    『VSCodeUserSetup-x64-1.44.2』がダウンロードされます。
  3. 『VSCodeUserSetup-x64-1.44.2』をダブルクリックして実行します。
  4. 『同意する』を選択して、『次へ』をクリックします。
    f:id:mmorley:20200423213846p:plain
  5. インストール先を指定して、『次へ』をクリックします。
    f:id:mmorley:20200423213916p:plain
  6. そのまま『次へ』をクリックします。
    f:id:mmorley:20200423213938p:plain
  7. 任意の追加タスクを選択して、『次へ』をクリックします。
    f:id:mmorley:20200423214133p:plain
  8. 『インストール』をクリックします。
    f:id:mmorley:20200423214217p:plain
  9. 『完了』をクリックします。
    f:id:mmorley:20200423214229p:plain
    　
    VS Codeが起動します。

    VS Codeで作業

  10. 『Extensions』のアイコンをクリックして、検索窓に"Japanese Language Pack for Visual Studio Code"と入力し、検索結果の『Install』をクリックします。
    f:id:mmorley:20200423214615p:plain
    日本語化されるのは再起動後です。続けてインストールします。
  11. 検索窓に"Debugger for Chrome "と入力し、検索結果の『Install』をクリックします。
    f:id:mmorley:20200423214758p:plain
  12. VS Codeを閉じます。

画像を入手する

　キャラクター、背景、足場ブロック類、アイテム等の画像を入手します。
　

    ブラウザで作業

  1. 下記のサイトを開きます。
    いろいろな人がゲームに使える画像を提供してくれているサイトです。
    マリオ的なゲームのジャンル名：”platformer”で検索すると素材が見つかります。
    opengameart.org
  2. ライセンスを確認します。
    ページの左側にライセンス表示があり、クリックするとライセンスの詳細が分かります。
    f:id:mmorley:20200218130752p:plain
    今回使う画像は『CC0 1.0ユニバーサル （CC0 1.0）』で、商用目的でも許可なく使うことが出来ると書いてありました。ありがたいです。
  3. 『Platformer Pack Redux (360 assets).zip』をクリックして入手します。
    f:id:mmorley:20200218130445p:plain

    Windowsで作業

  4. 『Platformer Pack Redux (360 assets).zip』を右クリック→『すべて展開』→『展開』をクリックして解凍します。

新規プロジェクトを作成する

　Cocos Creatorの新規プロジェクトを作成します。
　

  1. Cocos Dashboardを起動します。

    Cocos Dashboardで作業

  2. 『Project』タブを開いて、『New』をクリックします。
    f:id:mmorley:20200411185023p:plain
  3. 『Empty Project』を選択して、プロジェクトの名前と保存先を設定した後に『Create』をクリックします。
    ここではプロジェクト名を『PlatformerGame』にしています。
    f:id:mmorley:20200411210038p:plain
    Cocos Creatorのエディタが起動します。

VS Codeの設定ファイルを追加する

　プログラミングに必要なデバッグ構成、構文の強調表示、オートコンプリート等の設定ファイルをプロジェクトに追加します。
　

    Cocos Creatorで作業

  1. 『Developer』→『VS Code Workflow』にある『Update VS Code API Source』～『Add Compile Task』の５つをそれぞれクリックします。
    f:id:mmorley:20200325100941p:plain

VS Codeのデバッグ構成ファイルを編集する

　ここで行うのは、記事の冒頭に書いた『繰り返し作業を楽にする設定』です。
　VSCodeからデバッグ実行する際には、下記の手順を毎回行う必要があります。

  1. VS Codeでコードを保存します。
  2. Cocos Creatorのウィンドウを開いて外部エディタによる変更を反映します。
  3. VS Codeで『デバッグの開始』をクリックします。
　これを一発で出来るようにします。
　

    Cocos Creatorで作業

  1. 『Assets』パネルで『assets』フォルダを右クリック→『Create』→『Folder』をクリックします。
    f:id:mmorley:20200229211851p:plain
  2. 作成されたフォルダの名前を"script"に変更します。
    f:id:mmorley:20200409102241p:plain
  3. 『script』フォルダを右クリック→『Create』→『Typescript』をクリックします。
    f:id:mmorley:20200409102521p:plain
    『NewScript』はVS Codeを起動してプロジェクトフォルダを開くために作っています。
    また後で名前を変更して使います。
  4. 作成した『NewScript』をダブルクリックします。
    VS Codeが起動します。

    VS Codeで作業

  5. 『エクスプローラー』で『.vscode』のツリーを展開します。
    『launch.json』と『tasks.json』が表示されます。
    f:id:mmorley:20200409103506p:plain
  6. 『エクスプローラー』で『launch.json』をクリックして開き、下記のコードを貼り付けて保存します。

    {
    "version": "1.4.0",
    "configurations": [
        {
            "name": "Creator Debug: Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:7456",
            "sourceMaps": true,
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            // "diagnosticLogging": false, // ← コメントアウトする
            "pathMapping": {
                "/preview-scripts/assets": "${workspaceRoot}/temp/quick-scripts/assets",
                "/": "${workspaceRoot}"
            }, // ←『,（カンマ）』を追加
            "preLaunchTask": "compile"  // ← 事前に実行するタスクを登録   
        }
    ]
}

  7. 『tasks.json』をクリックして開き、下記のコードを貼り付けて保存します。

    {
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "compile",
            "command": "curl",
            "args": ["http://localhost:7456/update-db"],
            "type":"shell",
            // "isShellCommand": true,
            "isBackground": false, // ← falseに変更
            "group": "build",
            "presentation": {
                // Reveal the output only if unrecognized errors occur.
                "reveal": "always"
            }
        }    
    ]
}


　これでVSCodeでデバッグを実行した際に、Cocos Creatorを開かなくてもコードの変更が反映されるようになります。

実行時の解像度（表示サイズ）を設定する

　ここでは『RPGアツマール』の推奨サイズの『W:816×H624』に設定します。
　

    Cocos Creatorで作業

  1. 『Node Tree』パネルで『Canvas』をクリックします。
    f:id:mmorley:20200301102320p:plain
  2. 『Properties』パネルで下記のように設定します。
    選択中のノードのプロパティが表示されています。
    f:id:mmorley:20200301102649p:plain

シーンファイルを保存する

　最初から『Scene』パネルに表示されているシーンは保存されていません。名前を付けて『scene』フォルダに保存します。
　

    Cocos Creatorで作業

  1. 『Assets』パネルで『assets』フォルダに『scene』フォルダを作ります。
    f:id:mmorley:20200409104521p:plain
  2. 『Ctrl + S』キーを押して、『assets/scene』フォルダに”main”という名前を付けて保存します。
    f:id:mmorley:20200409105014p:plain
    下図のようになります。
    f:id:mmorley:20200409105207p:plain

プロジェクトのプレビューを設定する

　プレビュー実行時に、常に『main.fire』からスタートするように変更します。
　

    Cocos Creatorで作業

  1. 『Project』→『Project Settings...』をクリックします。
    f:id:mmorley:20200301171304p:plain
  2. 『Project Preview』を下記のように設定して『Save』をクリックします。
    f:id:mmorley:20200301171943p:plain
　
　今回はここまでです。お疲れさまでした。
　
　続きは、こちらの記事です。