Multiplayer Avatar Color | needle — tools for creators | Page 1

pearl grove Mar 28, 2023, 4:07 AM

#

Hello, I'm setting up the color of my avatar using the PlayerColor.ts as a reference. Currently I'm able to update the color of the avatar, but I'd like to ask how can I replicate the color that my user has selected to the rest of the users. Thanks in advance.

raven root Mar 28, 2023, 7:31 AM

#

Hello @pearl grove the PlayerColor script's purpose is to uniquely color each connected user with a stable color (based on their networking connection id).

I'm not how familiar you are with coding but you can network the selected color in a custom script if you need different behaviour:
https://engine.needle.tools/docs/networking.html#manual-networking

But maybe it would be good to add that feature to the PlayerColor component 🙂

#

let me know how it goes

pearl grove Mar 28, 2023, 5:00 PM

#

raven root let me know how it goes

Thanks for your help. I'm an experienced c# dev, but a total noob with TS and JS. I've implemented the IModel interface on my class and I'm trying to send the gameobject this way: this.context.connection.send(this.connId, this.gameObject as IModel, SendQueue.Immediate);

#

Unfortunately I'm receiving this error message:

uncaught range error: maximum call stack size exceeded
/node_modules/.vite/deps/chunk-BYWKJQSH.js?cf5a31f5:5110:14
at JSON.stringify (<anonymous>)
at Mesh.toJSON(https:192.168.3.8:3000/...

raven root Mar 28, 2023, 5:08 PM

#

Ah ok so the IModel is your data model to send. It just forces you to implement a guid. But you would normally just add it to a new type like:

export class MyDataToSend implement IModel {
  guid : string;
  myColor:number;
}

#

the guid in your case would be the user's connection id most likely. this.context.connection.connectionId

pearl grove Mar 28, 2023, 6:27 PM

#

Thanks for your response. I've created my AvatarColorUpdate type. Before sending the message, I'm converting my THREE.Color into a number with bit shifting. Now the error message is not being displayed anymore, but the color isn't being updated over the network
const packedColor = ((col.r * 255) << 16) | ((col.g * 255) << 8) | (col.b * 255);
let myData = new AvatarColorUpdate(this.connId, packedColor);

raven root Mar 28, 2023, 6:46 PM

#

Do you alos subscribe to the event? Insteads of "this.connId" you need to define a event key (e.g "change-player-color") and then listen to the event to apply it (if(myData.guid === this.playerGuid) ...)

#

see https://engine.needle.tools/docs/networking.html#receiving

pearl grove Mar 28, 2023, 9:39 PM

#

        this.startCoroutine(this.waitForConnection());
        this.context.connection.beginListen("avatarColorUpdate", (data) => {
            let rdata = data as AvatarColorUpdate;
            console.log("===1==="+rdata.connId+"_"+rdata.color);
            console.log("===2==="+rdata.guid+"_"+rdata.myColor);
            console.log('received: ${JSON.stringify(data)}');
        });

#

I wrote the code above on the onEnable method, and I'm sending my information when a button is clicked: ```Typescript
let myData = new AvatarColorUpdate(this.connId, packedColor);
console.log("send: "+myData.connId+" and "+myData.color);
this.context.connection.send("avatarColorUpdate", myData, SendQueue.Immediate);

#

but not sure why I'm not receiving the data on the listener

raven root Mar 28, 2023, 9:45 PM

#

Are you connected to a room? (using the SyncedRoom component)

pearl grove Mar 28, 2023, 9:46 PM

#

I think I do

raven root Mar 28, 2023, 9:47 PM

#

Ah you might need to open a second browser window to receive it in the same room

pearl grove Mar 28, 2023, 9:47 PM

#

I'm running it on my desktop browser and sending the avatar data from a Quest browser

#

I'm running it locally

#

the color of the avatar is being set up on the Quest browser and works fine there, but is not being replicated to the desktop browser. I can see myself moving the avatar (using quest controllers) on the desktop browser, but the color remains the same

raven root Mar 28, 2023, 9:53 PM

#

And it's not received?

Just tried this here real quick, sending /receiving works for this case. QuestBrowser is using the desktop localhost url i assume, right?

 async onEnable(){
        await delay(1000);
        this.context.connection.beginListen("test", (data) => {
            console.log(data);
        });
        const myData = {
            time: Date.now(),
        };
        console.log("SEND");
        this.context.connection.send("test", myData);
    }

pearl grove Mar 28, 2023, 10:05 PM

#

raven root And it's not received? Just tried this here real quick, sending /receiving work...

Yes, the quest browser is using the desktop localhost url. I'll give a try to your code to see how it works here, will keep you posted, thanks!

pearl grove Mar 28, 2023, 10:32 PM

#

do you know what type should I import to avoid these issues?

raven root Mar 28, 2023, 10:33 PM

#

delay is in engine:

import { delay } from "@needle-tools/engine";

#

inspired by Task.delay() 🙂

pearl grove Mar 28, 2023, 10:37 PM

#

now the webxr displays black screen on both desktop and quest browser

#

Uncaught SyntaxError: ambiguous indirect export: delay

raven root Mar 28, 2023, 10:39 PM

#

can you show your script?

#

im importing just like that

pearl grove Mar 28, 2023, 10:39 PM

#

import { Behaviour, GameObject, serializable, delay } from "@needle-tools/engine";

raven root Mar 28, 2023, 10:39 PM

#

the full path would be @needle-tools/engine/src/engine/engine_utils

pearl grove Mar 28, 2023, 10:40 PM

#

raven root Mar 28, 2023, 10:41 PM

#

which version are you using? does adding .ts fix it?

#

ah no not delay

#

import { delay } from @needle-tools/engine/src/engine/engine_utils

pearl grove Mar 28, 2023, 10:42 PM

#

#

if I import this one, the webxr runs, but it displays an error message that says that delay is not a function

#

import { delay } from "@needle-tools/engine/node_modules/core-js/library/fn/delay.js";

raven root Mar 28, 2023, 10:57 PM

#

That's definitely wrong. Which needle-engine version are you on? Can you try restarting vscode?

#

the paths above are definitely right. Depending on your version with or without /src/ but src would be right if you're not 10 versions or so behind

pearl grove Mar 28, 2023, 10:59 PM

#

how can I tell what needle engine version I have installed?

raven root Mar 28, 2023, 10:59 PM

#

fastest would be

pearl grove Mar 28, 2023, 11:00 PM

#

raven root Mar 28, 2023, 11:00 PM

#

sometimes worth checking

raven root Mar 28, 2023, 11:00 PM

#

pearl grove

No version there 🙂 the screenshot i sent is from the ExportInfo component that you have in your scene

pearl grove Mar 28, 2023, 11:00 PM

#

"version": "2.45.0-pre",

raven root Mar 28, 2023, 11:00 PM

#

you can also check Unity's package manager

raven root Mar 28, 2023, 11:01 PM

#

pearl grove "version": "2.45.0-pre",

oh ok you're like 20 versions behind

#

We're currently on 2.67.4

pearl grove Mar 28, 2023, 11:02 PM

#

interesting, I started this project two months ago

raven root Mar 28, 2023, 11:02 PM

#

Then the path would be without src to delay

#

the networking code didnt change

pearl grove Mar 28, 2023, 11:03 PM

#

I'm updating the package to the latest available

raven root Mar 28, 2023, 11:03 PM

#

I'd advice to commit before updating 20 versions 🙂

pearl grove Mar 28, 2023, 11:03 PM

#

oh boy, too late

pearl grove Mar 29, 2023, 2:57 PM

#

I've updated the needle engine package to the latest available. But now I'm facing some issues finding some types and I can't find them anywhere within the needle project. Could they possibly been deleted during the update?

raven root Mar 29, 2023, 3:00 PM

#

No, they moved one directory in a few versions ago (in @needle-tools/engine/src/engine-component/WebXRAvatar for example)

#

You can run the updater if you want (Context menu on the ExportInfo component)

pearl grove Mar 29, 2023, 3:24 PM

#

Oh, ok, thanks. I ran the Web Project Updater. Now I'm receiving an error from the browser then I try to run the app locally

#

Se bloqueó la carga de un módulo de “https://192.168.3.8:3000/node_modules/@needle-tools/engine/engine/engine_utils” debido a un tipo MIME no permitido (“”).

raven root Mar 29, 2023, 3:24 PM

#

What does the error say? Have you restarted the server?

pearl grove Mar 29, 2023, 3:32 PM

#

I've restarted my computer, how can I restart the server?

raven root Mar 29, 2023, 3:35 PM

#

Open your project in Unity with the Needle Engine scene and click play

pearl grove Mar 29, 2023, 3:38 PM

#

A module from “https://192.168.3.8:3000/node_modules/@needle-tools/engine/engine/engine_utils” was blocked from loading due to an illegal MIME type (“”).

#

this is the error displayed on the browser's console

raven root Mar 29, 2023, 3:40 PM

#

Sounds like a cached file in the project. Can you try if it's fixed when you go to the ExportInfo component and hold ALT while clicking the Install button (It will perform a "Clean Install" of the web project, deleting the node_modules folder and local server caches)

pearl grove Mar 29, 2023, 3:43 PM

#

I've performed the Clean Install. The new installation has finished, then I clicked the Play button but the same error message is being displayed

#

should I restart my computer again?

raven root Mar 29, 2023, 3:44 PM

#

No that wont do anything here

#

You can check the chrome networking tab and try to figure out which script is possibly causing this (open with F12 in chrome, select the "Network" tab at the top and then refreshing your page)

pearl grove Mar 29, 2023, 3:48 PM

#

#

this is the only one marked in red

raven root Mar 29, 2023, 3:48 PM

#

and who is the Initiator? (in the screenshot the tab on the right)

pearl grove Mar 29, 2023, 3:49 PM

#

raven root Mar 29, 2023, 3:50 PM

#

should be something like this. It's a bit hard to help when the sceenshots only contain minimal information 😄

pearl grove Mar 29, 2023, 3:52 PM

#

I'm sorry, I'm totally unfamiliar with web development, so idk how to debug the console log

#

raven root Mar 29, 2023, 3:53 PM

#

ok so your UISelector script is trying to import a script that does not exist there anymore. Open the script in your editor (see screenshot) and change the import path to @needle-tools/engine/src/engine/engine_utils)

#

Or just @needle-tools/engine should work too in this case

raven root Mar 29, 2023, 3:53 PM

#

pearl grove I'm sorry, I'm totally unfamiliar with web development, so idk how to debug the ...

no problem

pearl grove Mar 29, 2023, 3:57 PM

#

ok, now the app is running again on the browser, thank you very much, now I'll go back to the original issue to see how it goes

#

I'm using your code and I only see the ("==OnEnable==") and ("SEND") console logs on the quest browser

#

I'm running also the app on the desktop browser and the logs are from the quest browser

pearl grove Mar 29, 2023, 4:49 PM

#

async onEnable() 
    {     
        console.log("==OnEnable==");
        await delay(1000);
        this.context.connection.beginListen("test", (data) => {
            console.log(data);
        });
        const myData = {
            time: Date.now(),
        };
        console.log("SEND");
        this.context.connection.send("test", myData);        
    }

pearl grove Mar 29, 2023, 6:04 PM

#

great, I'm now receiving the message on the desktop browser, thanks for your help!

pearl grove Apr 18, 2023, 7:19 PM

#

Hi, I'd like to ask you some help sending my data over the network. I've just recently updated my Needle Engine Package to the 2.67.18 version. I'm trying to send the date for testing, but I'm only receiving: "[object Object]" on the console. Also tried sending my own data through the implementation of my own type, but I receive the same message on the listener

raven root Apr 18, 2023, 7:20 PM

#

You're receiving [object, Object] because you try to add it to a string.
If you want to log it and read it in the browser console just do it like so console.log("some string", data)

#

console.log can take as many or few arguments as you like and it will put them in the browser console. It's pretty nice

pearl grove Apr 18, 2023, 7:22 PM

#

Thanks for your quick response, so this line should display the data? console.log("listener received: "+data);

#

oh, the ","

#

let me try tht

#

wow, it worked. Not sure how that can make a difference hehe but thank you! It worked, I'll try again sending my data

raven root Apr 18, 2023, 7:25 PM

#

Well if you write "a string" + myObject it will try to concat that random javascipt object. It's invoking the toString() method on that object and by default that returns just the type name (it is the same as in c#).

#Multiplayer Avatar Color