ArcCamera Broken on Mobile

Hi guys,

I’m working on a new mobile game and I have just encountered an issue with ArcCamera. I have tested it in Chrome mobile view and Android emulator. The video below will give you a better idea of what I’m talking about.

Could someone please help me out, I have no idea why the camera works well on the browser but not on mobile, thanks.

maybe it’s a canvas thingie, are you resizing the engine on canvas size change ?

Yeah, it works well on the browser, both Firefox and Chrome. The issue only shows up when I switch to mobile view in Chrome or test it on Android emulator.

were you able to reproduce it on a playground ?
I think it would be make it easier for the community to help you.

I was unable to reproduce it in the playground. But here is the PG code I’ve been playing around with.
https://www.babylonjs-playground.com/#7IE2MD#7

I think the issue could be related to creating a new class when the Go button is pressed which creates and starts the engine. The rotated camera is the only issue here and not sure how to reproduce that in the PG.

is it rotated ? I feel like the camera viewport was cropped, could you maybe print out some logs to check the rotation of the camera plus the position of the player,

I can see that you’re locking the target to the player, have you tried setting the camera target to the player too ?

Yeah, it looks like the camera moves closer, perhaps to Zero. Also, the camera lockedTarget is set.

this.mainCamera.lockedTarget = player

Console Log (When game starts)
Player Position _Vector3 {_isDirty: false, _x: 0, _y: 0, _z: 0}
Camera Rotation _Vector3 {_isDirty: true, _x: 0, _y: 0, _z: 0}

I have also removed the player from the camera target and retested, still getting the same issue.

Camera new instance and initial values

protected alpha = 1.571;
protected beta = 1;
protected radius = 30.7266;

this.mainCamera = new ArcRotateCamera(
GameEnum.PLAYER_CAMERA,
this.alpha,
this.beta,
this.radius,
new Vector3(0, 1, 0),
scene
);

can you try to set the camera fov mode to horizontal:

camera.fovMode = BABYLON.Camera.FOVMODE_HORIZONTAL_FIXED

That fixed the camera alignment issue but now the camera is too close to the player and changing the camera radius doesn’t help as the player isn’t visible within the camera and the level is completely off-center.

I noticed the camera isn’t affected if I switch to mobile view during gameplay. It only happens when I refresh the browser.

I’ll be 100% honest here and say that I am not sure what the problem is. If there are simple steps to reproduce that with a playground or a link (that reproduces the problem), maybe the team will be able to check it out.
Otherwise, it seems like @MeshSlayer is doing an awesome job helping out here :slight_smile:

1 Like

I agree, @MeshSlayer has been great. :smile: I have been trying to reproduce the issue with the playground but no luck yet. I will crack on for now and keep trying to repro and if I manage to do so I will post here. Thanks for all the help @MeshSlayer.

I think I will deploy as a PWA for now and tackle the mobile issues in the near future.

Sorry I got caught up with some work and couldn’t respond.
Some screenshots may help here. or if you can deploy it and provide us with a link it would be much better.
As @RaananW it’s kind of tricky to debug without a playground.

Hi @MeshSlayer, no worries I will drop a link here once it’s deployed, thanks again.