本ワークショップには

PlayCanvasアカウントが必要です

playcanvas.com

※アカウント作成後、再度playcanvas.comへアクセスしてください

※音が出ます！音量を0にするかスピーカーオフにしてください

PlayCanvas × PhotonでマルチプレイWebGLゲームを作っちゃおう

2016.01.11 PlayCanvas運営事務局

Agenda

• About me
• Presentation(5min)
  • What is PlayCanvas
  • What is Photon
• HansON (45min)
  • (Team Making)
  • Play time
• アンケートにご協力ください

About me

What is PlayCanvas

エンジン ＋ エディタ ＋ コミュニティ 一体型の

クラウド型ゲーム開発プラットフォーム

PlayCanvas Engine

https://github.com/playcanvas/engine

・MIT License

・JavaScript 96% !!

・サイズ　

2016.12

PlayCanvas Editor

WebVR in Second

Non Compiling, Non Reloding

Visual Editor / Code Editor / Team Development

PlayCanvas Community

Explore

Community

What is Photon

ネットワークゲームを作るための機能を提供した

サービス＆ミドルウェア

国内ご採用事例

世界最大級のオンラインゲーム開発エンジン｜Photon Realtime 日本スペシャルサイト

Event・Session

協力・対戦ゲームを支えるPhotonの新リリース情報、最新事例の詳解 : GTMF2015

マルチプレイを実現するネットワークエンジンの決定版『Photon』の本音を語るディベロッパー座談会＆最新情報 : CEDEC2015

Cocos2d-x/Marmalade&Photon最新事例 : GTMF2016

ネットワークエンジンの現在・過去・未来 ～Photonもあるよ！～ :CEDEC2016

PlayCanvas × Photon

PlayCanvas × Photon

Photon-for-PlayCanvas

HandsON-start

これを共同編集してゲームを完成させます！

注意事項

・特定の形にしていく必要は有りません

・遠慮する必要はありません

・自由に作業していただいてかまいません

・ステージ，ギミック，ルール，アセットの追加等

・cautionディレクトリ以下はphotonやゲームシステムの処理entity郡なので、取り扱い注意

HandsON-Entry

Join Game

Tips

非同期モード

基本は"stage"フォルダの中を編集します。

/floor 床のオブジェクト

/wall 壁のオブジェクト

/Cylinder スタート地点の棒(当たり判定なし)

/Plane スタート地点の板

/Speedup スピードアップアイテム(黄色)

/Spin スピンアイテム(赤色)

Duplicate　オブジェクトをコピーする

Ctrl + C, Ctrl+V もしくはCtrl + Dでも可

オブジェクトを選択します

SCENEビューからオブジェクトに対する操作ができます

Translate オブジェクトの位置を変更します

Rotate オブジェクトの回転を変更します

Scale オブジェクトのサイズを変更します

HERARCHY オブジェクトを選択

SCENE オブジェクトを操作する

INSPECTOR オブジェクトのプロパティ

Translate

Rotate

Scale

Speedup, Spinオブジェクト

Scriptがアタッチされています

パラメータが調節可能です

level : 加速度、角速度

reflash : 復活までの時間(second)

新しいEntityを作成する

stageを選択

new entity から追加するentityを選択

コンポーネントを追加する

Collision 当たり判定

Rigidbody 剛性(物理挙動)

Script 任意のスクリプト

スクリプティング

ScriptコンポーネントのEditボタンから

編集可能

var Test = pc.createScript('test');

// initialize code called once per entity
//イニシャライズメソッド、実行時に最初の1フレームだけコールされる
Test.prototype.initialize = function() {
    this.second = 0;
};

// update code called every frame
//アップデートメソッド、実行時にフレームコールされる
Test.prototype.update = function(dt) {
    //dt...デルタタイム
    this.second += dt; // 実行時間(second)が取得可能
    console.log(this.second) // デバッグ用コンソール出力
};

// swap method called for script hot-reloading
// inherit your script state here
// スワップメソッド、コード保存時に一度だけ呼ばれるメソッド
// Test.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/

var Test = pc.createScript('test');
//attributeの追加　Unityで言うところのSerialize field
Test.attributes.add('speed',{type:'number'});
//type...number,vec2,vec3,asset,entity


//アップデートメソッド、実行時にフレームコールされる
Test.prototype.update = function(dt) {
    //オブジェクトの座標を取得
    var position = this.entity.getLocalPosition();
    var rotation = this.entity.getLocalEularAngles();

    //オブジェクトを動かす(等速)
　　this.entity.translate(0,this.speed,0);//y軸方向に移動
　　this.entity.rotate(0,this.speed,0);//y軸方向に回転

    //オブジェクトを動かす(物理)
    this.entity.rigidbody.applyForce(0,this.speed,0);//y軸方向に力を加える
    this.entity.applyTorque(0,this.speed,0);//y軸方向に回転力を加える
    //Impluseは爆発的な加速

    //オブジェクトを移動させる(定数)
    this.entity.setLocalPosition(0,0,0);//原点に移動

    //オブジェクトを移動させる(物理オブジェクトの場合)
    this.entity.rigidbody.teleport(0,0,0);//原点に移動

};

スクリプティング

基本操作

Parse 更新

var Test = pc.createScript('test');

//イニシャライズメソッド
test.prototype.initialize = function(){
    //衝突判定用コールバックを定義する
    this.entity.collision.on('collisionenter',this._col,this);
    //第一引数、イベントトリガー　collisionenter, collisionend
    //第二引数　コールバック関数
    //第三引数　スコープ（基本this）
};

Test.prototype._col = function(object){
    //衝突時に呼び出されるコールバック関数
    //衝突はイベントドリブン
    
    console.log(object) // 引数はぶつかったオブジェクトを返す

    if(object.other.name == "car"){//もし衝突したオブジェクトの名前が"car"だったら
        object.other.rigidbody.applyImpulse(0,1,0)//衝突した対象を加速させる
        //Speedupはこんな感じの実装
    }

};

スクリプティング

当たり判定

collision

half extents 当たり判定

modelのなかの薄緑の部分

※stageフォルダ下のオブジェクトはfitcolliderスクリプトによって自動的にフィット

PUBLISH

-21:00

play time

同期モード

team1

おわりに

いかがでしたか？

PlayCanvas × Photon

の可能性を感じていただければ幸いです

「これを使ってこんなことができそう！」

という熱いディスカッションをお待ちしています。

今後の予定

• 1/20-22   Global Game Jam 2017
  PlayCanvasのプロモーションコード配布予定！
   
• 2/18         Game Creators Conference@大阪
  VRブース、　新作「ShareVR」公開予定
   
• この後も、勉強会・ワークショップ続々開催予定！
  乞うご期待ください

最後に...

一緒に働ける仲間を

大募集中！！

詳細はこちら