How to join a room with Photon

Help & Support
,
#1

I have a question with connecting to a room. The current project entry screen is taken from another project. I am wondering if Photon has a method to join a particular room. As in one user creates a random room, the second user can see the name/id of this room from the room-list, the user can type in this name basically and hit joinRoom. If room, exists, and room is not full, user can successfully join.

Is there any way to implement this? As atm, I only have joinRandomRoom and joinRandomRoomOrCreate.

I see in the photon-loadbalancing script, I have this joinRoom thing I have not implemented. Is this the method I need to achieve what I want?

#2

@Alexis_Shaju Yes the API provides a method to get a room list.

https://doc-api.photonengine.com/en/javascript/current/Photon.LoadBalancing.LoadBalancingClient.html

You would request a room list when you enter the sever connection.

var RoomList = pc.createScript('roomList');
RoomList.attributes.add("leaderboard", { type: "entity" });
RoomList.attributes.add("template", { type: "asset", assetType: "template" });

RoomList.prototype.initialize = async function () {
    if (!this.app.loadBalancing || !this.app.loadBalancing.isInLobby()) {
        await pc.changeSceneAsync("MainMenu");
        return;
    }

    this.rooms = [];
    this.entries = [];

    this.roomListUpdate();

    this.app.on("loadbalancing:onRoomList", this.roomListUpdate, this);
};

RoomList.prototype.roomListUpdate = function () {
    this.rooms = this.app.loadBalancing.availableRooms();
    this.clear();
    this.rooms.forEach((data, i) => {
        this.addEntry(this.leaderboard, i, data.name);
    });
};

RoomList.prototype.clear = function () {
    this.entries.forEach(entry => {
        entry.destroy();
    });
    this.entries = [];
};

RoomList.prototype.addEntry = function (parent, position, name) {
    const entry = this.template.resource.instantiate();
    entry.findByName("Position").element.text = position.toString();
    entry.findByName("Name").element.text = name.toUpperCase();
    this.entries.push(entry);

    parent.addChild(entry);
    entry.translateLocal(0, position * -100 - 60, 0);
};

Room-list example

#3

@Tirk182 Sorry, I seem to have been unclear.
I have the room-list implemented, is it possible to implement a button alongside a textbox, where user enters name of room and clicks joinRoom. If this room exists, then user connects successfully.

#4

@Tirk182

image
image1611×679 62.1 KB

I see this is in the docs, I’m wondering what is the best way to implement this. Is it just as easy as creating an input field and taking in what value the user enters when they press joinRoom?

#5

@Alexis_Shaju Yes you could use something like this to help you do the text input.

https://developer.playcanvas.com/en/tutorials/ui-text-input/

Or maybe use the position on the name on the list to enable the user to enter a number selection.

#6

@Tirk182 Does playcanvas support any dropdown menu’s, so that user can select from like a dropdown and just click joinroom?

#7

Unfortunately not, but maybe one of the topics below can help you.

#8

I didn’t realise it was as simple as that. Thanks for the text input. Still having some stylistic issues but the logic of joining a room is working.

Just a question in regards to joining a room with Photon, well, joining the launch page I mean, does playcanvas allow any usernames to be forwarded to launch website?

What my group intends to do is build a login screen, we have a temporary one with html and css, hopefully converting to vue soon. We are using firebase to login to this website, and when we hit play, the playcanvas game should launch from the login website.

Is it possible for me to forward a username(with the launch url) and use that value in playcanvas?

#9

Yes you can pass user details via URL and you can get them inside the game as well by using following code.

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
          tmp = item.split("=");
          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}

However it is not a good approach the user credentials will be appearing in URL. You can integrate the game in your react website by using iframe or you can use this following package.

#10

@Alexis_Shaju I see you are using a Firebase App and Hosting ,I think, to host your game. Are your sign ins using Firebase Authentication? If so are you just looking for a way to gather that information for the sign in instead of the browser based login? Also, from experience have you set anonymous sign in authentication? Not sure what your structure is currently but if you want to keep things on the safe side turn off anonymous and just keep standard email sign in so you can verify users. You can PM me if you have further questions.

#11

@Tirk182 I am using firebase to host a login website. I am saving a username that the user enters upon account creation, and I wanted to forward the user who is logged in, to our game hosted on playcanvas alongside his username, and use that username in the game. This is what my intention was. I don’t want to send any personal player details over to playcanvas, just the username.

1 Like
#12

How would this be sent to playcanvas from let’s say an external website? Would I just set the assign value to my playcanvas launch link/egUsername=username, or something like that?

#13

You can use unique user id and can embed it to url via parameter like ?userid=“123”
When a user opens playcanvas game link it would have a userid as a parameter so you can fetch the user details using that token on game load.

1 Like
#14

@Hassan_Amjad1 Thank you very much for this, and for your code to fetch the username. It works and now I can retrieve username from firebase website and use it in my project!!