I need help with my multiplayer game (which is coming together nicely). I need help with assembling a skin selection UI with functional skin to other players making you unique. How would I accomplish this? I have a name selection that performs as directed, I am rather sure that the skin function would be the same way.
This is the game as of right now with buildings such as houses, and an FBI station as well as nature like Palm trees, bushes, and plants.
Hi @Jacob_Mcbride,
The multiplayer functionality for the skins would be similar to the chat functionality in the screenshot above, where each message sent by a player is sent to everyone, likewise for a skin, when a player sets their skin, you can send the skin ‘color’ to all the other players.
If you are having trouble setting up the UI for the skin selection, I would suggest you to go through the Playcanvas UI basics:
https://developer.playcanvas.com/en/user-manual/user-interface/user-interface-basics/
2 Likes
Yes, I am as well as the code to process this.
To be more specific I need to make a whole now script and I need help while I am doing so, I can give you the chat script if you will help with this.
var GamePlayManagerScript = pc.createScript(‘gamePlayManagerScript’);
GamePlayManagerScript.attributes.add(‘mainMenuComp’, {type: ‘entity’});
GamePlayManagerScript.attributes.add(‘inputBoxNickNameComp’, {type: ‘entity’});
GamePlayManagerScript.attributes.add(‘playButtonComp’, {type: ‘entity’});
GamePlayManagerScript.attributes.add(‘chatBoxPanelComp’, {type: ‘entity’});
GamePlayManagerScript.attributes.add(‘inputBoxChatMsgComp’, {type: ‘entity’});
GamePlayManagerScript.attributes.add(‘scrollContentPanelComp’, {type: ‘entity’});
GamePlayManagerScript.attributes.add(‘verticalScrollbarComp’, {type: ‘entity’});
GamePlayManagerScript.attributes.add(‘msgHolderImageComp’, {type: ‘entity’});
GamePlayManagerScript.attributes.add(‘networkEntity’, {type: ‘entity’});
GamePlayManagerScript.attributes.add(‘playerEntity’, {type: ‘entity’});
GamePlayManagerScript.attributes.add(‘otherEntity’, {type: ‘entity’});
GamePlayManagerScript.attributes.add(‘Door’, {type: ‘entity’});
// initialize code called once per entity
GamePlayManagerScript.prototype.initialize = function() {
this.app.mouse.disableContextMenu();
this.mainMenuComp.enabled = true;
this.networkEntity.enabled = false;
this.playerEntity.enabled = false;
this.otherEntity.enabled = false;
this.chatBoxPanelComp.enabled = false;
this.gameStarted = false;
this.allowMovement = false;
this.lastMsg = "";
this.nicknameVal = "";
this.playButtonComp.element.on('click', function (evt) {
setTimeout(function(){
this.nicknameVal = this.inputBoxNickNameComp.script.input.getCleanValue();
// console.log('btn clicked ' , this.nicknameVal);
if(this.nicknameVal !== "")
{
this.playerEntity.findByName('playerNickText').element.text = this.nicknameVal;
this.mainMenuComp.enabled = false;
this.networkEntity.enabled = true;
this.playerEntity.enabled = true;
this.chatBoxPanelComp.enabled = true;
this.gameStarted = true;
this.allowMovement = true;
}
else
{
alert("You did not enter a NickName! Please go back and enter a NickName to play the game.");
}
}.bind(this),100);
}, this);
};
// update code called every frame
GamePlayManagerScript.prototype.update = function(dt) {
if(this.gameStarted === true)
{
if (this.app.keyboard.wasPressed(pc.KEY_ENTER))
{
// console.log(this.inputBoxChatMsgComp.script.input.checkFocus());
if(this.inputBoxChatMsgComp.script.input.isFocued() === true)
{
var textBoxVal = this.inputBoxChatMsgComp.script.input.getCleanValue();
this.lastMsg = textBoxVal;
this.inputBoxChatMsgComp.script.input.deleteValue();
this.inputBoxChatMsgComp.script.input.blur();
if(this.lastMsg !== "")
{
this.networkEntity.script.network.sendMsg(this.nicknameVal,this.lastMsg);
}
}
else
{
this.inputBoxChatMsgComp.script.input.focus();
}
// console.log("this.lastMsg = ", this.lastMsg);
}
if(this.inputBoxChatMsgComp.script.input.isFocued() === true)
{
this.allowMovement = false;
}
else
{
this.allowMovement = true;
}
}
};
GamePlayManagerScript.prototype.addMsgInChatBox = function(nicknameVal, actualMsg) {
// console.log("GamePlayManagerScript.prototype.addMsgInChatBox = ",nicknameVal, actualMsg);
var msgHolderImageComp = this.msgHolderImageComp.clone();
msgHolderImageComp.findByName('sentMsgText').element.text = nicknameVal + " : " +actualMsg;
msgHolderImageComp.tags.add('msgBlock');
this.scrollContentPanelComp.addChild(msgHolderImageComp);
msgHolderImageComp.enabled = true;
if(this.scrollContentPanelComp.findByTag('msgBlock').length * msgHolderImageComp.element.height > 260)
{
this.scrollContentPanelComp.element.height = this.scrollContentPanelComp.findByTag('msgBlock').length * msgHolderImageComp.element.height;
this.verticalScrollbarComp.scrollbar.value = 1;
}
};
// swap method called for script hot-reloading
// inherit your script state here
// GamePlayManagerScript.prototype.swap = function(old) { };
// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/
How would I add a skin selector into this script that functions as directed?
Hi @Jacob_Mcbride! It’s impossible to read your post if you add your code without using the code highlighter. Please use the button shown below and add all your code between the signs.
ok