Cocos Creator で 3Dゲームを作る その４

Uncategorized
685 words

Cocos Creator で 3Dブロック崩しゲームを作る続きです。

https://noitaro.github.io/cocos-creator-3d-block-breaking-3/

今回の目標

ボールが当たったら消えるブロックを作ります。

ブロック追加

消えるブロック の元となる 箱 を追加します。

消えるブロックは 複数置く予定なので 一元管理できるように作っていきます。

そのため 空Node を作り、その中に 3DBox を配置します。

配置した 3D Box の設定を、壁やバーを作ったときと同じ要領で変更します。

  • 名前を分かりやすく「Block」に変更
  • Scale を X=80、Y=30、Z=25 に変更
  • 緑色のマテリアルを作って設定
  • 壁やバーと同じ材質の PhysicsMaterial を設定

上記設定を終えると、消えないブロックが完成します。

ボールが当たったら消える処理を追加

次に、ボールが当たったら消える処理を 今作ったブロック に追加します。

スクリプトファイル追加

処理を書くためのスクリプトファイルを追加します。

Assets の Script フォルダを選択してから右クリックで Create > TypeScript と選択して行きます。

名前は「Destroyer」と名付けました。

「Destroyer.ts」を下記のように書き換えます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    start () {
        let collider = this.getComponent(cc.Collider3D);
        collider.on('collision-enter', this.onCollision, this);
    }

    onCollision () {
        this.node.destroy();
    }
 
}

start関数は、プログラムが読み込まれた時に実行される関数です。

処理の内容は「自分に何かが当たったら自分自身を消す」こんな感じの処理になっています。

ブロックに処理を追加

今作ったスクリプトを ブロック に追加します。

Block を選択して 右の Add Component ボタンから Custom Component > Destroyer の順で選択して行きます。

ブロックに スクリプトを設定すると、ブロックが消えるようになります。

プレハブ化

消えるブロックが完成したので、コピーして複数並べます。

普通にコピーしてもよいのですが、今回はプレハブ化して再利用できるようにしたいと思います。

プレハブ化は簡単に出来ます。

Node Tree にある Block を、Assets にドラッグするだけです。

Node Tree の Block が青文字になり、Assets に Block がコピーされればOK

プレハブブロックを配置

後は、プレハブ化したBlock を好きなだけ配置すればOK

とりあえず、5個並べてみました。

おわりに

今回の作業も GitHub で公開しています。

よろしければ参考にどうぞ。

https://github.com/noitaro/cocos-creator-3d-block-breaking/releases/tag/0.4

次回は、ゲーム性を持たせるために ゲームクリア処理 を入れようと思います。