Cocos Creator で 3Dブロック崩しゲームを作る続きです。
今回の目標
ボールが当たったら消えるブロックを作ります。
ブロック追加
消えるブロック の元となる 箱 を追加します。
消えるブロックは 複数置く予定なので 一元管理できるように作っていきます。
そのため 空Node を作り、その中に 3DBox を配置します。
配置した 3D Box の設定を、壁やバーを作ったときと同じ要領で変更します。
- 名前を分かりやすく「Block」に変更
- Scale を X=80、Y=30、Z=25 に変更
- 緑色のマテリアルを作って設定
- 壁やバーと同じ材質の PhysicsMaterial を設定
上記設定を終えると、消えないブロックが完成します。
ボールが当たったら消える処理を追加
次に、ボールが当たったら消える処理を 今作ったブロック に追加します。
スクリプトファイル追加
処理を書くためのスクリプトファイルを追加します。
Assets の Script フォルダを選択してから右クリックで Create > TypeScript と選択して行きます。
名前は「Destroyer」と名付けました。
「Destroyer.ts」を下記のように書き換えます。
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 で公開しています。
よろしければ参考にどうぞ。
次回は、ゲーム性を持たせるために ゲームクリア処理 を入れようと思います。
