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

建築×PlayCanvas!仮想万博作りたい人向けハンズオン

【建築×PlayCanvas!仮想万博作りたい人向けハンズオン】

はじめに

このハンズオンでは、7月1日~(作品提出締切
5月31日)から開催される"仮想万博"にPlayCanvasのシーンをアップするために必要な手順を説明していきます。

■Blenderでの設定
・modelの構造(動くオブジェクトと固定オブジェクトで分ける)
・マテリアル設定
・FBXのエクスポート設定
・注意点 FBXとテクスチャデータのパス

■PlayCanvasプロジェクトのフォーク
・First Person Building_HandsOnのフォーク
・PlayCanvasエディターの説明

■PlayCanvasで3Dmodel設定
・FBXのデータインポート
・ビューポートへ表示
・MeshColliderの設定

■コード説明
・自動ドアの開閉

■作成したプロジェクトを公開する
・プロジェクトのパブリッシュ

※PlayCanvasのアカウントが作成済みであるという前提で行います。

Blenderでの設定

modelの構造

今回は必要最低限の要素にまとめます。
blender01.png
メッシュ単位でマテリアルを設定し、動くオブジェクト、動かないオブジェクトで結合します。
blender05_1.png
なるべくオブジェクトはまとめた方がドローコール数の削減になり表示速度がスムーズになります。
この時、オブジェクトの原点はワールド位置0,0,0回転0,0,0スケール0,0,0にしてください。

マテリアル設定

今回はUV展開は行わず、メッシュに基本的なカラーとスペキュラを設定しています。
Blederの場合はプリンシパルBSDFを使用します。PlayCanvasは各3Dソフトのデフォルトマテリアルのの設定を引き継げます。
建築物のモデリングではソフトシェーディングを適用した場合、エッジをはっきり見せたい部分にベベル処理やエッジ追加を行います。
モデリング、マテリアルの設定が完了したらFBXのエクスポートを行いましょう。

FBXのエクスポート設定

エクスポート設定は下記のように設定してください。
blender07.png
※FBX変更後にテクスチャやfbxのパスを変更しない(テクスチャのリンクが切れる)

PlayCanvasプロジェクトのフォーク

こちらのURLのプロジェクトをフォーク(複製)します。
https://playcanvas.com/project/669054/overview/first-person-building_handson
このプロジェクトは一人称視点&キャラクターコントローラーがセットされているプロジェクトです。

プロジェクトのフォーク

フォークボタンをクリックし、任意のプロジェクト名を入力後、enterキーもしくはforkボタンをクリック
playCanvas01.png
playCanvas03.png
複製されたプロジェクトが開きますので、"EDITOR"ボタンをクリック。PlayCanvasのビジュアルエディターが開きます。
playCanvas04.png
SCENES選択画面のUntitledをクリックするとビジュアルエディターが使用可能になります。
playCanvas05.png

PlayCanvasエディターの説明

PlayCanvasはスクリプト作成以外の作業をこのEditorから操作することができます。Editorの構成は以下のようになっています。
editor.png
各要素は以下のとおりです。

1. シーン(SCENE)
シーンビューには製作中のゲーム世界(シーン)が表示され、自由な位置・角度から眺めることができます。

2. インスペクター(INSPECTOR)
シーンの中で選択肢中のオブジェクトが持つ属性を表示・編集するためのビューです。 属性には座標やメッシュ
といった見た目上のものから、衝突判定や物理制御に関するパラメーターなどもあり、その他ユーザー定義のものもここに表示されます。

3. ヒエラルキー(HIERARCHY)
シーン内に存在するオブジェクトの一覧が表示されます。 編集中のシーン内でオブジェクトをコピー/ペーストしたり、適切な名前をつけて整理することもできます。

4. アセット(ASSETS)
製作中のプロジェクト(ゲーム全体)に含まれるモデル、スクリプト、グラフィックやサウンドなどのデータ、その他のリソースがファイル単位で表示されます。

5. メニュー(MENU)
シーンのビューモードやプロジェクトセッティング等の作業が行えます。

PlayCanvasで3Dmodel設定

プロジェクトのHIERARCHYを見ると"Level"という室内モデルが既に入っています。
playCanvas06.png
右上の"Laonch"ボタンをクリックし、実行画面を確認してみましょう。
playCanvas07.png
W,A,S,Dで移動、spaceでジャンプします。

FBXのデータインポート

PlayCanvasのASSETS欄に新規で"BuildingModel"とい言う名前でフォルダを作成します。
playCanvas10.png
playCanvas11.png
BuildingModelを選択した状態で、"+"ボタンのAdd AssetsからUploadでデータをインポートもしくはローカルフォルダからドラック&ドロップでASSETSにインポートします。
playCanvas12.png
playCanvas13.png
playCanvas14.png
FBXのマテリアル設定が正しく行えていると、カラーやスペキュラ強度が引き継がれた状態でマテリアルが展開されます。
また、FBXは自動でJavaScriotが解読可能なJSON形式へ自動変換されます。FBX自体は使用しないので削除しても構いません。

ビューポートへ表示

"Level"と"Camera"モデルが邪魔なので、削除もしくは"Enabled"のチェックを外してください。
playCanvas09.png
ASSETS内の〇〇〇.jsonをシーンビューへドラック&ドロップしてください。
playCanvas15.png
playCanvas16.png
3Dソフト上で設定した原点情報を元に表示されますので、例えばオブジェクトの原点がオブジェクトを中心に設定されてる場合、PlayCanvasのシーンビュー上の中心(位置0,0,0)に表示されます。

各オブジェクトをシーンビューにアップしたらオブジェクト内を歩けるように設定していきます。

MeshColliderの設定

各建物オブジェクトのINSPECTER内のADD COMPONENTから"Collision""Rigit Body"を選択します。
playCanvas18.png
COLLISIONのTypeをMeshに変更し、Assetsに同じオブジェクトを選択すると、そのオブジェクトの形状のCollisionになります。
playCanvas19.png
playCanvas20.png

これで建物内を自由に移動することが出来るようになりました。lauchで確認してみましょう。

コード説明

ここではシンプルなアニメーション制御(自動ドアの開閉)に関する説明を行います。

自動ドアの開閉アニメーション

ドアもCOLLISIONRIGID BODYを追加します。COLLISIONのTypeはMesh、RIGID BODYのTypeはKinematicにします。

ScreenShot 18.jpg

扉の開くアニメーションを追加する

  1. ADD COMPONENTをクリック

  2. Animationを選択

  3. Add Assetsをクリック

  4. アニメーションを選択し。ADD SELECTIONをクリック

  5. DONEをクリック

  6. Activate・Loopのチェックを外します。

ドアを開閉するスクリプトを追加

  1. ADD COMPONENTからScriptコンポーネントを追加します。
  2. ADD SCRIPTをクリックし、doorというスクリプトを追加します。
  3. Select Entityをクリックします。
  4. Playerのエンテティをクリックします。

これで自動ドアを作成するためにスクリプト・アニメーションの設定は完了です。

追加したスクリプトについて

このスクリプトは、ドアに、属性で指定をしたエンテティが触れたらドアを3秒開けるというスクリプトになります。

APIについて

今回使用した主なAPIはこちらになります。

① イベントハンドラーについて

https://developer.playcanvas.com/en/api/pc.EventHandler.html

② AnimationComponent

https://developer.playcanvas.com/en/api/pc.AnimationComponent.html

③ CollisionComponent

https://developer.playcanvas.com/en/api/pc.CollisionComponent.html

④ RigidBodyComponent

https://developer.playcanvas.com/en/api/pc.RigidBodyComponent.html

 /*jshint esversion: 6, asi: true, laxbreak: true*/
const Door = pc.createScript('door');
Door.attributes.add("player", { type: "entity" })

Door.prototype.initialize = function () {
    const ANIMATION_NAME = "open" // ※アニメーション名を指定
    const animation = this.entity.animation.getAnimation(ANIMATION_NAME)
    const duration = animation.duration
    this.rayEnd = {x:1, y:1, z:1}
    this.isOpen = false
    this.timer = 0

    this.entity.on(`door:open`, () => {
        this.entity.rigidbody.enabled = false
        this.entity.animation.speed = 0.5
        this.entity.animation.play(ANIMATION_NAME)
        this.isOpen = true 

    })

    this.app.on(`door:close`, () => {
        const result = this.app.systems.rigidbody.raycastFirst(this.entity.getPosition(), this.rayEnd)
        if(result !== null){
            this.timer = 0
            return
        }
        this.entity.rigidbody.enabled = true
        this.entity.animation.speed = -0.5
        this.entity.animation.play(ANIMATION_NAME, duration)
        this.isOpen = false
    })

    this.entity.collision.on("collisionstart", (e) => {
        const { other } = e
        if (other.name === this.player.name && !this.isOpen) {
            this.entity.fire(`door:open`)
        }
    })
};

Door.prototype.update = function(deltaTime){
   if(!this.isOpen) return
   this.timer += deltaTime 
   if (!this.entity.animation.playing && this.entity.animation.duration +  this.timer > 3) {
        this.app.fire(`door:close`)
        this.timer = 0
    }
}

PlayCanvasのアニメーションについて

PlayCanvasのアニメーションに制御ついてはこちらの記事にアニメーションの制御について書いた記事がありますのでそちらをご参照ください。
【PlayCanvas】スクリプトによるアニメーション制御 ・順再生・逆再生・ループ

作成したプロジェクトを公開する

完成したプロジェクトをパブリッシュして、みんながプレイできるURLを生成します。

プロジェクトのパブリッシュ

左のメニュー、またはシーンの左上のManage Scenesから以下のPublish画面を開きます。
playCanvas29.png
playCanvas26.png

PUBLISH TO PLAYCANVASを選択して、一番下のPUBLISH NOWをクリックしてビルドは完了です。
playCanvas27.png

URLでPC、スマホ、VRデバイス、他ユーザーにもログインすることなく共有することができます。

以上で完了です。
お疲れさまでした。

shujimuna1102
3DCGデザイナー。キャラや背景、小物とか、エフェクト作ったりなんかしてました。 2018年よりWebGLで動くクラウド型ゲーム開発エンジン"PlayCanvas"の普及促進のため、モックやデモシーンの作成などをメインに活動してます。
https://twitter.com/shujimuna
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした