activate and deactivate object on mobile detection | needle — tools for creators | Page 1

agile gull Jul 11, 2023, 10:49 AM

#

Hi guys how can I activate a game object and deactivate another game object when it is detected that the browser is opened in mobile ?

I'm using this to detect mobile

import { isMobileDevice } from "@needle-tools/engine" if( isMobileDevice() )

zealous dawn Jul 11, 2023, 10:54 AM

#

There's a handy component called DeviceFlags for that 👍

agile gull Jul 11, 2023, 11:05 AM

#

zealous dawn There's a handy component called `DeviceFlags` for that 👍

to detect mobile devide or to enable and disable gameobjects ?

zealous dawn Jul 11, 2023, 11:06 AM

#

You can add this to an object and it turns it on or off based on your selection from the device mask

#

So, this is to drive the objects directly without you writing any code 👍

agile gull Jul 11, 2023, 11:08 AM

#

for visible off i should turn off the check box ?

zealous dawn Jul 11, 2023, 11:09 AM

#

yes

agile gull Jul 11, 2023, 11:10 AM

#

so I'm doing this only for canvas

and I'm making a different canvas for mobile,

so i will just add this to desktop canvas and uncheck mobile? or should i uncheck for mobile for desktop canvas and for mobile canvas i should uncheck desktop ?

zealous dawn Jul 11, 2023, 11:12 AM

#

Most probably you want to drive both objects

agile gull Jul 11, 2023, 11:13 AM

#

okay, so will add on both the canvas

And will uncheck mobile and desktop respectively

and all other objects in the scene are activate on both mobile and desktop right ?

zealous dawn Jul 11, 2023, 11:15 AM

#

yes the rest of the scene will be untouched. If you are unsure about what a component does, just open it and have a look for yourself :) Some are quite simple.

agile gull Jul 11, 2023, 11:43 AM

#

zealous dawn yes the rest of the scene will be untouched. If you are unsure about what a comp...

thanks it works perfectly

#

do we also have something like this for scripts that enable scripts by ckecking mobile/desktop ?

covert lake Jul 11, 2023, 11:51 AM

#

Not right now - but we could perhaps expose something like that in the DeviceFlags script via a UnityEvent 🤔 then you could do anything

zealous dawn Jul 11, 2023, 11:57 AM

#

agile gull do we also have something like this for scripts that enable scripts by ckecking ...

script will be always on a gameobject, you can drive the gameobject with the DeviceFlags.

Do you feel you would want to enable/disable single script?

You can always do this in your components:

awake() {
   this.enabled = isMobileDevice();
   if(!this.enabled) return

   // rest of awake implem
}

agile gull Jul 11, 2023, 12:17 PM

#

zealous dawn script will be always on a gameobject, you can drive the gameobject with the Dev...

isnt checking inside the script if the website is opened on mobile or not ?

zealous dawn Jul 11, 2023, 12:18 PM

#

Sorry, could you rephrase that? I'm not sure if i follow.

agile gull Jul 11, 2023, 12:22 PM

#

the above code you sent

isnt it checking if the website is opened on mobile or not ?

zealous dawn Jul 11, 2023, 12:23 PM

#

Yes

agile gull Jul 11, 2023, 12:29 PM

#

but how can i disable the script if i see the mobile device is detected?Sorry I'm not a Ts coder I'm using chatgpt so far.

I have two script to rotate the game object, one used mouse touch, other uses pointer (this one is for mobile)

If both scripts are enabled then the rotation on desktop is not affected but the rotation on mobile is affected and it only wants the pointer script on the object to rotated the game object smoothly, so on mouse rotation script i want that if the mobile device is detected the script disables itself

zealous dawn Jul 11, 2023, 12:30 PM

#

I see, i presume both scripts are on the camera gameobject?

agile gull Jul 11, 2023, 12:37 PM

#

nope the world game obbject, the worls is rotating

#

`import { Behaviour, isMobileDevice } from "@needle-tools/engine";

export class RotateObject extends Behaviour {
private isMouseDown: boolean = false;
private mouseStartX: number = 0;
private initialRotation: number = 0;
private targetRotation: number = 0;
public rotationSpeed: number = 1; // Default rotation speed is 1
public smoothness: number = 5; // Smoothness factor, adjust as needed
public startDelay: number = 3; // Delay in seconds before rotation starts
private timeElapsed: number = 0;

awake() {
this.enabled = !isMobileDevice(); // Disable the script if it's opened on a mobile device
if (!this.enabled) return;
// Rest of the awake implementation
}

start() {
window.addEventListener("mousedown", this.onMouseDown.bind(this));
window.addEventListener("mousemove", this.onMouseMove.bind(this));
window.addEventListener("mouseup", this.onMouseUp.bind(this));
}

update() {
this.timeElapsed += this.context.time.deltaTime;

if (this.isMouseDown && this.timeElapsed >= this.startDelay) {
  const mouseDeltaX = this.context.input.mousePosition.x - this.mouseStartX;
  this.targetRotation = this.initialRotation + mouseDeltaX * this.rotationSpeed;
}

// Smoothly rotate towards the target rotation
const currentRotation = this.gameObject.rotation.y;
const newRotation = this.lerp(
  currentRotation,
  this.targetRotation,
  this.smoothness * this.context.time.deltaTime
);
this.gameObject.rotation.y = newRotation;

}

onMouseDown(event: MouseEvent) {
if (event.button === 0) {
this.isMouseDown = true;
this.mouseStartX = this.context.input.mousePosition.x;
this.initialRotation = this.gameObject.rotation.y;
}
}

onMouseMove() {
if (this.isMouseDown) {
// No need for any action here
}
}

onMouseUp(event: MouseEvent) {
if (event.button === 0) {
this.isMouseDown = false;
}
}

private lerp(a: number, b: number, t: number): number {
return (1 - t) * a + t * b;
}
}`

I think this fixed the issue, i think this is disabling the mouse script after it is checking the mobile device

zealous dawn Jul 11, 2023, 12:43 PM

#

For simpler code sharing, you can drop the .ts file right into discord and it will make a nice preview 👍

I see you had to wrap everything int to ` ` 😬

agile gull Jul 11, 2023, 12:43 PM

#

zealous dawn For simpler code sharing, you can drop the .ts file right into discord and it wi...

hahaha yeah

#

can you please confirm if this is diabling the script on mobile device detection ?

zealous dawn Jul 11, 2023, 12:47 PM

#

presumably yes 👍
this.enabled = !isMobileDevice();

you negate the result of isMobile so it works as isDesktop and thus the script is only enabled on desktop.

awake happens right when the object is created, the start should happen later and it is most probably conditioned by the enabled that we've set before. So it all should work.

But obviously you have the project in front of you, so please test it :) You can open your local build on mobile as well if you don't have a restricted network. Or you can deploy to glitch 👍

agile gull Jul 11, 2023, 12:53 PM

#

yes it works perfectly right now

the only issue i find is that it has video players in it showing animated small video clips, but 99% of the time the video will not play on the mobile device

zealous dawn Jul 11, 2023, 12:55 PM

#

videos can be odd, since you need to first interact / click on the page to be able to start a video. It is recommended to add a "welcome" screen that forces you to click on something.

agile gull Jul 11, 2023, 12:56 PM

#

so the video is inside a small art frame, and the art appears when the gizmos gets triggered

#

and there are many like this

zealous dawn Jul 11, 2023, 12:59 PM

#

So you're saying that the user interacts with the page before the video is played?

Can you deploy to glitch or show me more about the app? I'm bit unsure what is the concept here.

agile gull Jul 11, 2023, 12:59 PM

#

ya wait

#

please open it on the mobile, and in the website go to the art section there you will find the video player, right mow there is only one.

also check if rotation is happening smoothly on your side on mobile or you find some glitch

zealous dawn Jul 11, 2023, 1:15 PM

#

What a cute scene :)

covert lake Jul 11, 2023, 1:19 PM

#

Really cute 🙂

agile gull Jul 11, 2023, 1:20 PM

#

haha thanks 🙂

zealous dawn Jul 11, 2023, 1:20 PM

#

Hm, so it doesn't want to play the video with these warns in the console

#

(Android - Samsung s9+ - a bit older android at this point)

agile gull Jul 11, 2023, 1:21 PM

#

so any way to solve this ?

zealous dawn Jul 11, 2023, 1:23 PM

#

Is the video player on a component that is disabled in the editor?

Can you potentialyl disable the play on awake and call Play from the spatial trigger?

agile gull Jul 11, 2023, 1:27 PM

#

zealous dawn Is the video player on a component that is disabled in the editor? Can you pote...

the object that has video player is active in the editor

#

how to play from spatial trigger ?

zealous dawn Jul 11, 2023, 1:29 PM

#

try this configuration (You can have the components on other objects)

agile gull Jul 11, 2023, 1:30 PM

#

ok let me try

#

it is working now, kinda laggy, and also at starts the art inside the frame looks transparent, so it takes some mini second to actually start the video till then the art is transparent.

please check on your side

zealous dawn Jul 11, 2023, 1:41 PM

#

You could actually put behind the screen a plane with a texture of the first frame. You would have to do that for every video.

Other variant is more code, and after first registered tap, it would play pause all videos to "wake them up" could be even worse.

I do not have experience with optimizing this, so sorry for not being able to give more advice.

zealous dawn Jul 11, 2023, 1:45 PM

#

agile gull it is working now, kinda laggy, and also at starts the art inside the frame look...

It still sometimes doesn't play.
On android Firefox and chrome.

agile gull Jul 11, 2023, 1:46 PM

#

zealous dawn You could actually put behind the screen a plane with a texture of the first fra...

its ok 🙂

btw in the team section there are team images(objects) how can we click on each teammate and go to their twitter ir whatever link provide in the script?

so basically a script for every teammate, when the object is clecked takes to respective profiles of each teammate

agile gull Jul 11, 2023, 1:46 PM

#

zealous dawn It still sometimes doesn't play. On android Firefox and chrome.

ohh i see, Ig I have to move forward with whatever it is on mobile

zealous dawn Jul 11, 2023, 1:47 PM

#

agile gull its ok 🙂 btw in the team section there are team images(objects) how can we cl...

There is OpenURL component , try that :)

agile gull Jul 11, 2023, 1:50 PM

#

that was sooooooo easy 😁 🫡

#

one last question

by any chance can we change this website name in window tab? for free version ?

zealous dawn Jul 11, 2023, 2:22 PM

#

Needle by default creates a vite project and that's for you to maintain and adjust.

You can start editing that by opening the workspace on the exportinfo component.

#

There should be an index.html

#

The name is usually tied to the scene name as well.

agile gull Jul 11, 2023, 2:23 PM

#

zealous dawn The name is usually tied to the scene name as well.

in the index.html ?

#

or unity

#

i think u mean unity

zealous dawn Jul 11, 2023, 2:25 PM

#

In unity

#

But try editing it in the html as well. there might be some default handling

agile gull Jul 11, 2023, 2:31 PM

#

I'll check

thanks alot for all the help

zealous dawn Jul 11, 2023, 2:32 PM

#

Let me know if it worked.
Good luck with the project 🌵

agile gull Jul 11, 2023, 2:43 PM

#

zealous dawn Let me know if it worked. Good luck with the project 🌵

the scene name worked 🫡

I wonder if i can also change the loading screen

zealous dawn Jul 11, 2023, 2:44 PM

#

Now there im not sure. That might be for paid users only, since it exposes some css classes which otherwise are not.

agile gull Jul 11, 2023, 2:45 PM

#

okay thanks man 🙂

covert lake Jul 11, 2023, 2:48 PM

#

About loading you can see the docs here: https://engine.needle.tools/docs/html.html#customizing-how-loading-looks

Needle Engine Documentation

Needle Engine is build as a web component.
This means just install @needle-tools/engine in your project and include anywhere in your web-project.

agile gull Jul 11, 2023, 7:52 PM

#

thanks

agile gull Jul 11, 2023, 8:30 PM

#

I have a canvas with world space, i can see the text ui in the game window but the ui doesnot apper=ar in browser

zealous dawn Jul 12, 2023, 11:47 AM

#

Do you have any errors in the console during runtime?

What is the name of your font?

agile gull Jul 13, 2023, 7:19 PM

#

zealous dawn Do you have any errors in the console during runtime? What is the name of your ...

it worked when i restarted unity

#

I see that the audio doesnot start right away in browser even though its on awake, i have to first move the character for some time and then it starts to play

covert lake Jul 13, 2023, 7:49 PM

#

Try clicking something in the scene. For audio to be played in the browser you need to interact with the site first (e.g. by clicking a button, touch move for example doesnt count). These are browser restrictions. That is also the reason the video doesnt play immediately (altough the video itself is allowed to play i think but it must be muted, perhaps the engine doesnt do that right!?)

agile gull Jul 13, 2023, 7:51 PM

#

covert lake Try clicking something in the scene. For audio to be played in the browser you n...

the video plays on awake on desktop

maybe I will keep the volume button to off at start

agile gull Jul 14, 2023, 9:44 AM

#

how can i enable a script by sending an event from from an animation clip ?

covert lake Jul 14, 2023, 9:52 AM

#

Events in animationclips are not supported - you can use signal tracks in the timeline tho to send events

#

Is that what you mean?

agile gull Jul 14, 2023, 10:30 AM

#

actually i want to enable a script when a button is clicked, the script is on different object, and ofcourse the script doesnot have a checkbox, other wise i would have used bool enable in button onclick events

covert lake Jul 14, 2023, 10:30 AM

#

Which script is that?

agile gull Jul 14, 2023, 10:31 AM

#

the world rotation script

#

because of sound issue i added a button at start before a user can do anything, and when the button is clicked the sound starts to play, but now the world has rotation script, and so can be rotated even if the button is not clicked, so i want the rotation or rotation script to be disabled unless the button is not clicked .

covert lake Jul 14, 2023, 10:33 AM

#

you can add a method like onEnable() { } in typescript so it will generate the C# OnEnable method - then you get the toggle in Unity

agile gull Jul 14, 2023, 10:35 AM

#

will the toggle be controlled from onclick button events ? I dont think i will see an option for it

covert lake Jul 14, 2023, 10:36 AM

#

Yes you can set enabled to on or off via a UnityEvent

agile gull Jul 14, 2023, 10:47 AM

#

#

dont see an option to enable disable the toggle

covert lake Jul 14, 2023, 10:50 AM

#

its this one

#

ah or do you want to disable this toggle?

agile gull Jul 14, 2023, 10:51 AM

#

i want to keep the script off unless the button is clicked

#

once the button is clicked the script should start working

covert lake Jul 14, 2023, 10:52 AM

#

Yes then turn it off in Unity and add the Unity event to set enabled to true when the button is clicked

covert lake Jul 14, 2023, 10:52 AM

#

covert lake its this one

via this bool enabled

agile gull Jul 14, 2023, 10:53 AM

#

how to add that check box ?

covert lake Jul 14, 2023, 10:54 AM

#

agile gull Jul 14, 2023, 10:54 AM

#

yes that i know

#

but

covert lake Jul 14, 2023, 10:54 AM

#

instead of the canvas etc it would be your RotateObject 🙂

agile gull Jul 14, 2023, 10:55 AM

#

covert lake Yes then turn it off in Unity and add the Unity event to set `enabled` to true w...

how to have this checkbox ?

#

lol

covert lake Jul 14, 2023, 10:55 AM

#

you already have it - no ?

agile gull Jul 14, 2023, 10:55 AM

#

sorry

#

i have it already

covert lake Jul 14, 2023, 10:55 AM

#

😄

agile gull Jul 14, 2023, 1:24 PM

#

thanks it worked

agile gull Jul 22, 2023, 3:28 PM

#

hey I have been tryting to use netlify, vut could not able to build.

clicked on create, got a token
2)Then I clicked on create website inside unity
Clicked build and deploy

Still not working, am I doing something wrong ?

covert lake Jul 22, 2023, 5:22 PM

#

Do you get any message in the console?

#

We saw it a few times when netlify's api didnt seem to work. Did you successfully upload? Creating a new website might take a few minutes until it is live (even if netlify's api says its ready)

#activate and deactivate object on mobile detection