Pong GameをCocos Creatorで作ってみた！ Part1 : 設定と前準備【Cocos Creator】
皆様はじめまして！セルティと申します。最近ゲーム開発に興味を持ったのでCocos
Creatorを使ってさまざまゲームジャンルに挑戦し、ある程度形になったものはこのブロ
グを通じて発信していきたいと思いますのでよろしくお願いします！
使用環境
- OS：macOS Big Sur バージョン11.2.1
- ブラウザ：Google Chrome(x86_64)
- 開発環境：Cocos Creator v2.4.2
- コードエディタ：Visual Studio Code(以下VS Code)
Cocos DashBoardからプロジェクトを作ろう！(わかる人はスルーしてOK！)
まずは、土台となるプロジェクト作成から入ります。(インストールの仕方等について
は省いております！)
使用するエディターを合わせたい場合は、『Editor』を押して、ダウンロードを行ってください。
『Project』をクリックすると上記の画面を開くことができます。
今回はこのような手順で『Create and open』の青いボタンを押していただけると下
記のような画面が表示されるので、これでスタートします！
画面の大きさと素材を格納するフォルダーを作る
ゲーム画面
ゲーム制作に入る前に、画面の枠となる『Canvas』の大きさの設定とSimulatorの設
定など細かい部分を設定していく。『Project->ProjectSetting』を選ぶ。
『Projrct Preview->Design Resolution』の各数値を『Width: 816, Height: 624』に合
わせて『Save』する。
次にSimulatorの設定を行う。ゲームの挙動を確認する際には、画面上部の『再生ボタ
ン』を押して見ることができる。モードがブラウザとシュミレーターの二つがあるが、
シュミレーターの方がゲームの挙動とデバッガーの表示がみやすいので、シュミレータ
ーモードの設定をする。
『Cocos Creator->Preference』と選択し、『Previewv Run』を押して下記の画像の
ように設定を行う。 また、動作確認は後ほど行う。
フォルダーとシーンの作成
今度は画面左下の『Assets』というタブがあるのでその中の『assets』に以下の名前
のフォルダーを作成していく。
- Scene(ゲーム全体のデータを格納するフォルダー)
- Script(JavaScript/TypeScriptで書かれたスクリプトを格納するフォルダー)
- Prefab(特定のノードやスプライトをフォルダーに格納することで位置や数を意図的に変えることができる)
『Create->Folder』で青色のフォルダーを用意することができる。
次に画面では何も選択せず『command⌘ + S』をクリックすると下記のようにシーン
の保存画面に遷移するので、先ほど作った『Scene』フォルダーを選択して『Game』シ
ーンとして保存する。
ゲームに使う素材を用意する
続いてゲームで使う素材等を用意する。ここでは上から順に準備する
- 背景(色は青)
- パドル(プレイヤーとして動かせるようにする)
- ボール(形は正方形で簡単にしています)
- 壁(ボールが画面外に出ないようにする)
背景
まずはCanvasで右クリックし、『Create->Create Renderer Nodes->Sprite
Node(Splash)』の順で選択肢していく。
名前を『background』とする。
パドル(プレイヤー)
背景と同じように『Create->Create Renderer Nodes->Sprite Node(Splash)』の順に
用意する。
- 名前を『paddle』にする。(画像は『ball』とミスしてしまいました…。)
- Nodeプロパティの『Position』を『X: -350, Y: 0』にする。
- Nodeプロパティの『Size』を『W: 20, H: 80』に設定する。
- 『AddComponent->Collider Component->Box Collider』でBox Colliderを適用させる。
ここでシュミレーターが動作するか確認したいので、画面上部の『再生ボタン』ある
いは『command⌘ + p』で起動するので確認してください。
正常に動作すれば下記のようになるかと思います。(画面は全画面にしています。)
シュミレーターデバッガーは下記のように同時に起動します。
ボール
背景、ボールと同様に『Create->Create Renderer Nodes->Sprite Node(Splash)』の
順で用意する。
- 名前は『ball』とする。
- Nodeプロパティの『Size』を『W: 20, H: 20』に設定する。
- 『AddComponent->Collider Component->Box Collider』でBox Colliderを適用させる。
壁(上下左右４箇所作る)
上記と同様に『Create->Create Renderer Nodes->Sprite Node(Splash)』の順で２つ
用意する。
- 名前を『wallTop』, 『wallRight』とそれぞれつける。
- 『Position』を『X: 0, Y: -337』, 『X: 432, Y: 0』に設定する。
- 『Size』を『W: 1000, H: 50』, 『W: 50, H: 1000』に設定する。
- 『AddComponent->Collider Component->Box Collider』でBox Colliderを適用させる。
ここまで設定ができたら、『wallTop』, 『wallRight』を右クリックの『Duplicate』
(複製)をクリックする。
また名前をそれぞれ『wallBottom』と『wallLeft』にして『Position』の数値をそれぞ
れ『X: 0, Y: -337』, 『X: 432, Y: 0』とする。
今回はここまでになります！お疲れ様でした！
参考資料
まだCocos Creatorのインストール終わっていない方もここをみていただけるとさら
にわかりやすいかと思います！
今回の『Pong Game』を作る際に参考にさせていただいたブログページになります。
英語で書かれていますが、Google翻訳を駆使していただけると読めると思います。
次回以降でこちらを参考にしたスクリプトも書きますのでお待ちください…。
おわりに
今日久々にブログを書きましたがいかがだったでしょうか？画像が大きくみづらかっ
たり、貼りすぎてこんがらがると思いますが、次回以降で修正したりスクリプトで文字
を書いていきますので多少緩和されるかと思います。
ゲームの中身としてはやり込みや面白い要素を盛り込めるほど使いこなせていないの
で肩透かしを喰らってしまう方もいらっしゃるかもしれませんが、私も初心者ゆえに暖
かく見守ってください…。
それではこの後書き部分まで見ていただいた優しい方、本当にありがとうございまし
た！またお会いしましょう！
