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

Uncategorized
1.1k words

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

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

今回の目標

左右キーでバーを動かせるようにします。

前回までのあらすじ

キャンバスの3Dステージに床と壁を使って枠を作りました。

今回はこの枠の中に バーを置いて十字キーで動かせるようにします。

壁の色を変える

まず、前回作った壁の色を変えます。

壁の色を変える方法は MeshRenderer の Materials を色付きのマテリアルに変更すると変わります。

色付き Material の作成

Assets で右クリックし Create > Material の順で選択して、新規マテリアルを作成します。

名前は「WhiteMaterial」にしました。

WhiteMaterial を選択して Properties の Effect を「builtin-phong」に変更します。

diffuseColor をお好みな色に変更します。

今回は 白マテリアル を作るので 白色 にしました。

最後に「Apply」を押して 白マテリアル の完成です。

枠に白マテリアルを設定

作った マテリアル を 3Dモデルに設定します。

Kabe を選択し、WhiteMaterial を Properties の Materials にドラッグすると マテリアルを設定することが出来ます。

4方向の壁を白くしてみました。

3D Box でバーを作る

ボールを跳ね返すために、左右に動かせるバーを作ります。

3D Box を作成

まず、枠を作った時と同じように キャンバスに 3D Box を作成します。

名前は「Player」としました。

位置と尺度を設定

位置(Position) と 尺度(Scale) をいい感じに設定します。

今回は、位置 x0 y20 z380、尺度 x80 y30 z25 にしました。

マテリアルを設定

壁用の白マテリアルと同じ要領で、バー用のマテリアルを作って「Player」に設定します。

今回は、青マテリアルを作って設定しました。

左右キーを押したら左右に動くようにする

左右キーを押したら左右に動くようにします。

言語は TypeScript を使います。TypeScript は、JavaScript と互換性があり、なおかつ 静的型付けとクラスベースオブジェクト指向言語なので、JavaScript より コーディング時のバグが生まれにくくなっています。

スクリプトファイルを開く

プログラムを組んで、バーを動かせるようにします。

で、まずプログラム記述するスクリプトファイルを開きます。

Assets内の Scriptフォルダに「Hellowold」があるので、選択し右クリックで「Open In Explorer」を選びます。

Cocos Creator プロジェクトの Scriptフォルダ が開くので、その中にある「Helloworld.ts」をテキストエディッタで開きます。

私は、テキストエディッタに「Visual Studio Code」を使っています。オススメです。

VS Code で開いた時に 赤い波線 が出る場合は？

Cocos Creator の 「Developer」メニューの VS Code Workflow > Update VS Code API Source の順で選択します。

すると、VS Code に Cocos Creator の API が読み込まれるようになり、赤い波線が消えます。

バーを動かすプログラムを組む

「Helloworld.ts」を以下のように修正して、上書き保存をします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const {ccclass, property} = cc._decorator;
 
@ccclass
export default class Helloworld extends cc.Component {
 
    @property(cc.Node)
    Player: cc.Node = null;
 
    AccLeft: Boolean = false;
    AccRight: Boolean = false;
 
    start() {
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
    }
    
    update(){
        if (this.AccLeft) {
            this.Player.x -= 8;
        }
        else if (this.AccRight) {
            this.Player.x += 8;
        }
    }
 
    onKeyDown(event: cc.Event.EventKeyboard) {
        switch (event.keyCode) {
            case cc.macro.KEY.left:
                this.AccLeft = true;
                break;
            case cc.macro.KEY.right:
                this.AccRight = true;
                break;
            default:
                break;
        }
    }
 
    onKeyUp(event: cc.Event.EventKeyboard) {
        switch (event.keyCode) {
            case cc.macro.KEY.left:
                this.AccLeft = false;
                break;
            case cc.macro.KEY.right:
                this.AccRight = false;
                break;
            default:
                break;
        }
    }
}

バーとプログラムを関連付けさせる

次に Cocos Creator 側で、バーとプログラムを関連付けさせます。

まず「Canvas」を選択し、Properties の「Add Component」をクリックし Custom Component > Helloworld を選択します。

そうすると、キャンバスに Helloworldコンポーネント が追加されます。

次に、Node Tree の Player を Helloworldコンポーネント の Player にドラッグして、関連付けさせます。

こんな感じになれば、関連付けOK

動作確認

ここまで出来たら、実行ボタンを押して動作確認をします。

左右キーでバーが動かない場合は、一度画面内をクリックすると操作できるようになります。

おわりに

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

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

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