Overview

Description

You can create multiplayer webGL Apps with PlayCanvas and Photon (and this plugin)

You just insert this plugin for your playcanvas project, you can be ready using photon.

The plugin is supporting both photon cloud and photon server.

Demo (photon cloud 20ccu @Tokyo.Japan Region)

move…WASD shot…enter (mobile,gamepad)

demo-6window *only pc

Project overview This project is all public.

Requirement

Only PlayCanvas

Usage

1. download this plugin
2. upload plugin files for your game project

3. app.js to become playcanvas script object
app.js must be playcanvas object. INSPECTOR > SCRIPT > SCRIPTS click "PARSE"
4. "SCRIPT LOADING ORDER"change
You should call Photon-Javascript_SDK.js and demoloadbalancing.js before app.js </br>
5. attached app.js to any object
6. after parse, fill your information. If you filled "server address" of PHOTON SERVER,must be using photon server.The colum should be blank when you want to use photon cloud.

7. Congratulations! You can ready to use photon

coding

if you attached app.js to ROOT object…

sendmessage

var photonobject;
somescript.prototype.initialize = function(){
    photonobject = this.app.root.children[0];//get root object
};

somescript.prototype.update = function(dt){
    photonobject.photon.raiseEvent(1, this.entity.getLocalPosition()); // send position data on Eventcode 1
    photonobject.photon.raiseEvent(2, this.entity.getLocalEulerAngles()); // send angle data on Eventcode 2
};

recivemessage

var photonobject;
somescript.prototype.initialize = function(){
    photonobject = this.app.root.children[0];//get root object
};

somescript.prototype.update = function(dt){
    photonobject.photon.onEvent = function(code, content, actorNr){//callback if you recive message
        switch(code){
            case 1: 
                console.log(content.data[0]); // Position.x
                console.log(content.data[1]); // Position.y
                console.log(content.data[2]); // Position.z
                break;
            case 2:
                console.log(content.data[0]); // angle.x
                console.log(content.data[1]); // angle.y
                console.log(content.data[2]); // angle.z
                break;
        }
    };
};

joinroom

//in update method...
photonobject.photon.onActorJoin = function(actor){//callback if Actor joined room
    if(actor.actorNr == this.myActor().actorNr)
    {
        //player join room
    }
    else
    {
        //other player join room
    }
};

//if other player joined room before you join 
photonobject.photon.onJoinRoom = function(){
    for(var i = 1;i < this.myActor().actorNr;i++){
        if(this.myRoomActors()[i]){
            if(!this.myRoomActors()[i].isLocal){
                //loop num of players in the room
            }
        }
    }
};

leaveroom

//in update method...
PhotonController.photon.onActorLeave = function(actor,cleanup){//callback if Actor leave room
    if(actor.actorNr == this.myActor().actorNr)
    {
        //if player leave room  
    }
    else
    {
        //other player leave room
    }
};

Hint

///////////////Simple object sync///////////////

// 1.Generate other player object
photonobject.photon.onActorJoin = function(actor){//callback if Actor joined room
    if(actor.actorNr != this.myActor().actorNr){
        //other player join room
        otherobject.generate(); // Generate otherobject
    }
};

//if other player joined room before you join 
photonobject.photon.onJoinRoom = function(){
    for(var i = 1;i < this.myActor().actorNr;i++){
        if(this.myRoomActors()[i]){
            if(!this.myRoomActors()[i].isLocal){
                //loop num of players in the room
                otherobject.generate(); // Generate otherobject
            }
        }
    }
};

// 2. Player Script: send transform
playercontrol.prototype.send = function(){
    photonobject.photon.raiseEvent(1, this.entity.getLocalPosition()); // send position data on Eventcode 1
    photonobject.photon.raiseEvent(2, this.entity.getLocalEulerAngles()); // send angle data on Eventcode 2
};

// 3. Other player Manager Script : recive transforms
otherplayercontrol.prototype.recive = function(){
    photonobject.photon.onEvent = function(code, content, actorNr){//callback if you recive message
        switch(code){
            case 1: 
                otherobject.setLocalPotisions(content.data[0],content.data[1],content.data[2]);
                break;
            case 2:
                otherobject.setLocalEularAngles(content.data[0],content.data[1],content.data[2]);
                break;
        }
    };
};

// 4. leave : Destroy object
PhotonController.photon.onActorLeave = function(actor,cleanup){//callback if Actor leave room
    if(actor.actorNr != this.myActor().actorNr)
    {
        //other player leave room
        otherobject.destroy();
    }
};

///////////////Serialize, Deserialize///////////////
somescript.prototype.send = function(){
    var message = "";
    message += this.entity.getLocalPosition().x + ",";
    message += this.entity.getLocalPosition().y + ",";
    .
    .
    .
    message += this.entity.getLocalEulerAngles().z;

    var oldmessage = "";
    if(message != oldmessage){
        PhotonController.photon.raiseEvent(1,message);
        oldmessage = message;
    }
};

somescript.prototype.recive = function(){
    photonobject.photon.onEvent = function(code, content, actorNr){//callback if you recive message
        switch(code){
            case 1: 
                var recivemes;
                recivemes = content.data.split(",");
                otherobject.setLocalPotisions(recivemes[0],recivemes[1],recivemes[2]);
                otherobject.setLocalEularAngles(recivemes[3],recivemes[4],recivemes[5]);
                break;
        }
    };
};

documentation

Photon-Javascript_SDK Client API Documentation

License

MIT License

Copyright (c) 2016 Ryotaro Tsuda

Author

ryotaro portal blog playcanvas

last update 2017-02-02 14:55:07