Help us understand the problem. What is going on with this article?

PlayCanvasで「Roll a Ball」をつくる②

More than 1 year has passed since last update.

前回のおさらい

前回はアカウント作成と簡単なエディタの見方までやりました。
今回は空のプロジェクトから「Roll a Ball」をつくっていきます。

はじめに

一旦PlayCanvasのトップページに戻ります。
するとログイン前とは見た目が変わっていると思います。
image

HOME

PlayCanvasのコミュニティです。現在進行中のプロジェクトについてリリースノートを書いたり、共有したりします。オープンソースのコミュニティらしく、開発者同士の交流の場になっています。

PROJECT

自身の開発したプロジェクトが並んでいます。

ACCOUNT

アカウント設定ができます。

プロジェクトの新規作成

「PROJECT」を選択し、「NEW」から新規プロジェクトを作成します。
image
「Blank Project」を選択していることを確認して、「roll a ball」と言う名前でプロジェクトを新規作成します。

image
プロジェクトができたら、「EDITOR」を選択してエディタを開きます。

ゲームの作成

床の作成

まず床を作ります。最初にある「Plane」エンティティを選択します。
インスペクターから、scaleを(20,1,20)に変更し、Nameを「Ground」に変更しましょう。
image

カメラの配置

ヒエラルキーから「Camera」を選択すると、左上にカメラが見ているビューが表示されます。
image
デフォルト位置だと、全体を移すことができていないので、全体が写る場所にカメラの場所を編集しましょう。
インスペクタービューよりカメラを
Position
 x: 0, y: 16, z: 23
Rotation
 x: -35, y: 0, z: 0
に変更します。

実行してみる

シーンビュー右上の「▶」を選択することでゲームが実行されます。
image
このときこのように別ウィンドウで実行することで、シーンビューの変更が即時的にlaunchに反映されます。

Playerの作成

ヒエラルキーから「Box」を選択し、Nameを「Player」, ModelコンポーネントのTypeを「Sphere」にします。
image
Playerができました。

Playerを動かす

プレイヤーエンティティをキーボード入力から制御します。
エンティティを動かすには、座標で動かす方法と物理で動かす方法と2つあるのですが、今回は物理で動かす方法を実装して行きます。

Groundに剛性を持たせ、あたり判定を追加する。

Groundを選択し、インスペクターからコンポーネントを追加します。
image
まず衝突の当たり判定を決めるcollisionコンポーネントを追加します。

追加するとこのように薄くBoxがシーンに表示されます。
image
これがGroundそのものの当たり判定です。Collisionコンポーネントの「Half extents」より修正できますので実際の見た目と同じになるように(10,0.01,10)に編集します。
image
このようにmodelと同じ大きさになればOKです

次にRigid bodyを追加してオブジェクトに剛性を持たせます。
image
Rigid bodyコンポーネントを追加することで、オブジェクトが剛性を持ち、物理オブジェクトとして機能します。
Groundは動かない物理オブジェクトなのでRigid bodyのtypeはStaticのままでかまいません。

Playerエンティティを編集する

Playerエンティティにも同様に、collisionコンポーネント、Rigid bodyコンポーネントを追加します。
image
PlayerのmodelはSphereなので、collisionのtypeを「Sphere」にします。
また、動きまわるため、Rigid bodyのTypeを「Dynamic」に設定します。

Playerエンティティを操作するためのスクリプトを追加する。

Playerエンティティを操作するスクリプトを書いて行きます。
まず、Playerエンティティに「Add Component」よりスクリプトコンポーネントを追加します。
image
するとインスペクターの一番下にスクリプトコンポーネントが追加されているので、「ADD Script」より「New Script」を選択します。
image
するとスクリプト名を聞かれるので「PlayerControl」と入力してください。
image

これで空のスクリプトが作成されプレイヤーエンティティにアタッチされました。
image

スクリプトの記述

SCRIPTS > playerControlの「EDIT」を選択すると別ウィンドウでコードエディターが開き、コードの編集ができます。

PlayerControl.jsを以下のように書き換えます。

PlayerControl.js
var PlayerControl = pc.createScript('playerControl');

// initialize code called once per entity
PlayerControl.prototype.initialize = function() {

};

// update code called every frame
PlayerControl.prototype.update = function(dt) {
    if(this.app.keyboard.isPressed(pc.KEY_UP)){
        //上キーが押されたとき
        this.entity.rigidbody.applyForce(0,0,-1);
    }
    if(this.app.keyboard.isPressed(pc.KEY_DOWN)){
        //下キーが押されたとき
        this.entity.rigidbody.applyForce(0,0,1);
    }
    if(this.app.keyboard.isPressed(pc.KEY_RIGHT)){
        //右キーが押されたとき
        this.entity.rigidbody.applyForce(1,0,0);
    }
    if(this.app.keyboard.isPressed(pc.KEY_LEFT)){
        //左キーが押されたとき
        this.entity.rigidbody.applyForce(-1,0,0);
    }
};

実行して矢印キーでプレイヤーが動くことが確認できれば成功です。
image

https://qiita.com/ryotaro_/items/14f0d16ffeaddd537d5b

utautattaro
世界中の端末で自分の書いたコードを走らせることが夢です
https://utautattaro.com
playcanvas
"PlayCanvasは、ブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。PlayCanvas運営事務局は日本国内でのPlayCanvasの普及を目的に活動しています"
https://playcanvas.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away