ページ一覧
Cocos Creator 3 導入編
Cocos Creator 3 カンタン2Dゲーム制作
- プロジェクト作成と画面の説明
- (1)【トゥイーンの使い方】
- (2)【プレハブの使い方】
- (3)【衝突判定(コライダの使い方)】← 本記事
- (4)【アニメーションクリップの使い方】
- (5)【パーティクルの使い方】
- (6)【ラベルアトラスの使い方】
衝突判定をおこなう
アイテムが出るようになったので、次は衝突判定を行います。
それにはCollider
(コライダ)という機能を使います。
準備
2D物理演算システムの設定
メニューバーからProject
→Project Setting
を選択します。Project Setting
ダイアログが開きます。
左メニューのFeature Cropping
を選択します。
2D
という見出しのあるエリアで、2D Physics System
の右にあるプルダウンをBuiltin 2D Physics System
に変更します。
2Dの物理演算システムには「ビルトイン」と「Box2Dベース」の二種類があります。ビルトインは複雑な物理演算はできませんが、処理が軽く、ノードが重なったかどうかの判定処理に適しています。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F271948%2Ff559a039-ff5a-bd25-4dfc-ef7af668e0c9.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=24848c8a34849187d084975ff473d4b1)
コリジョンマトリックスの設定
左メニューのPhysics
を選択します。Collision Matrix
と書かれたエリアを表示します。
「+」ボタンを押すとテキストボックスが現れるので、Fish
と入力し緑のチェックマークを押します。同様にCoin
、Obstacle
の2つも入力します。
図に示すようにFish
の行と、Coin
、Obstacle
の列の交差点にチェックマークを付けます。
この後、ここで定義したGroupとノードを紐づけます。
チェックをONにしたGroup同士が「衝突判定」の対象となります。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F271948%2Fd402e1a9-bfa0-0569-6323-374a47730114.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=458142cf15f8553eabcdbcfd70c04bdd)
Project Setting
のダイアログを閉じます。
ノードにコライダを追加する
ヒエラルキーパネルのFish
を選択し、インスペクターパネルのAdd Component
を押します。
別の小窓が出るので、Search Name
と書かれたエリアにcollider
と入力します。
いくつか候補が出てきますがここではPolygonCollider2D
を選びます。
インスペクターパネルにcc.PolygonCollider2D
が追加されるので、Group
でFish
を選択します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F271948%2F1a9aa129-f0c4-ec0c-e6d5-1932ee92bb7d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f50c57e5e9a59d99a8038c8481fb0da6)
衝突範囲の設定
Editing
チェックボックスをONにすると、他のノードとの重なりを判定する範囲の設定ができます。
ここではPolygonCollider2D
を選んだので、非透過部分でくり抜かれた線が自動で設定されています。
マウス操作で頂点を移動できるので任意の範囲に設定します。
編集を終了するにはEditing
チェックボックスをOFFにします。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F271948%2Fc0cb1c19-d75e-a4b4-223e-6b06afa089d4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f0a33f47d16403dcaa79836b496e0c7b)
同様の手順で、アセットパネルにあるCoin
とSyuriken
のプレハブにもコライダを設定します。
このとき、設定するコライダはCircleCollider2D
を選びます。
またGroup
はそれぞれCoin
、Obstacle
を選択します。
先ほどと同様、Editing
チェックボックスをONにすると衝突判定する範囲の設定ができます。
今回はCircleCollider2D
ですので多角形ではなく円形で、大きさのみ変えられます。
スコアラベルを追加する
メニューバーのPanel
→Node Library
でノードライブラリパネルを開きます。
別ウィンドウで開いた場合は、ヘッダ部分をつまんで右側のペインにドッキングします。
その中からLabel
を選んでヒエラルキーパネルのCanvas
の配下にコピーします。
(Canvas
を右クリック、Create
→2D Object
→Label
でも同様です。)
名前をScore
とします。
インスペクターパネルから、position
、Anchor Point
、String
、Font Size
をそれぞれ入力します。
衝突判定スクリプト
アセットパネルに新規スクリプトを追加し、名前をFishCollision
とします。
以下のコードを記述します。
import { _decorator, Component, Node, Collider2D, Contact2DType, IPhysics2DContact, log, Label } from 'cc';
const { ccclass, property } = _decorator;
// コリジョングループ定数
enum CG {
default = 0,
fish = 2,
coin = 4,
obstacle = 8
}
@ccclass('FishCollision')
export class FishCollision extends Component {
@property(Label)
score: Label = null;
_score: number = 0;
start() {
// 衝突判定
this.enableCollider(true);
// スコアの初期化
this.score.string = "0";
}
onDestroy() {
this.enableCollider(false);
}
// 衝突判定の有効/無効切り替え
enableCollider(enable: boolean) {
let collider = this.getComponent(Collider2D);
if (enable) {
collider.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this);
} else {
collider.off(Contact2DType.BEGIN_CONTACT);
}
}
onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) {
switch (otherCollider.group) {
case CG.coin:
// コインにヒットした場合
this._score += 100;
break;
case CG.obstacle:
// 障害物にヒットした場合
this._score -= 100;
break;
}
// スコア更新
this.score.string = this._score.toString();
// コインまたは障害物の消滅
otherCollider.node.destroy();
}
}
魚のノードとスクリプトの紐づけ
ヒエラルキーパネルのFish
を選び、インスペクターパネルのAdd Component
で、今追加したスクリプトFishCollision
を紐づけます。
FishCollision
の枠が追加されたら、Score
の枠がブランクになっているので、右側のアイコンをクリックし、Score
を選びます。これによりスクリプト内でシーン上のスコアラベルが更新できます。
ここまでの動きの確認
▶ボタン(またはctrl+P
)で動きを確認してみましょう。正しく作れていれば、アイテムとヒットしたときにスコアをカウントします。
スクリプトの解説
衝突判定の開始
自身のノード(Fish
)からCollider2D
コンポーネントを取得ます。
collider.on()
を使ってContact2DType.BEGIN_CONTACT
イベント発生時に、this.onBeginContact
を呼び出すよう設定しています。
let collider = this.getComponent(Collider2D);
collider.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this);
衝突イベント発生
onBeginContact()
メソッドでは、イベント発生時の情報が引数として渡されます。
otherCollider.group
を使って衝突した対象のノードの種類を特定し、スコアの加算・減算を行います。
コリジョングループはビット単位で管理されており、コリジョンマトリックスの画面で設定したGroup名に対応するindex
の1,2,3は、それぞれ2,4,8となります。
ゲームの演出上、衝突したらアイテムは消したいので、衝突対象に対しdestroy()
でノードを消滅させます。
otherCollider.node.destroy();