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

Global Game Jam 直前!!

2016.01.11 PlayCanvas運営事務局

Agenda

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

About me

GMOクラウドの津田です。

GGJは3年連続で

東京工科大学会場に参加してました。

4年目も結局東京工科大学会場行きます。

http://globalgamejam.org/users/ryotaro-tsuda

What is PlayCanvas

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

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

オープンソース JavaScript
3Dゲームエンジン エクストリームプログラミング
HTML5 + WebGL リアルタイムマルチプレイ
クロスプラットフォーム ブラウザゲーム
リッチメディア広告 WebVR

PlayCanvas Engine

https://github.com/playcanvas/engine

・MIT License

・JavaScript 96% !!

・サイズ 





コード全文 8MB
ランタイムコード 2.43MB
gZip圧縮後 147KB

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 cloud(クラウド型) ロビー,ルーム,RPC
photon server(ミドルウェア型) WebRPC/Webhooks
Free Start マルチプラットフォーム対応
クライアント/サーバ通信 全世界対応

国内ご採用事例

Event・Session

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

 

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

 

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

 

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

PlayCanvas × Photon

PlayCanvas × Photon

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」公開予定
     
  • この後も、勉強会・ワークショップ続々開催予定!
    乞うご期待ください

最後に...

一緒に働ける仲間を

大募集中!!


詳細はこちら

ありがとうございました!

アンケートにご協力ください↓

deck#20170111

By ryla

deck#20170111

  • 430

More from ryla