[SOLVED] Menu position not updating

Help & Support
1

I have multiple menu’s in my scene. When I click on a button in my scene I want to update the position of the menu so that it stays in view. I thought this script would work but it does not update the position after the first time the menu was opened.

I think I’m missing something small!

OpenSelector.prototype.initialize = function() {

    this.openSelectorButton.element.on('click', function() {
        this.updatePositionMenu();
    }, this);        
};


OpenSelector.prototype.updatePositionMenu = function() {

const menuLayoutGroup = this.entity.children[11].children[0].children[0];

const offsetVehicleX = menuLayoutGroup.localPosition.x * -1;
const offsetVehicleY = menuLayoutGroup.localPosition.y * -1;
let defaultVehicleX = menuLayoutGroup.localPosition.x;
let defaultVehicleY = menuLayoutGroup.localPosition.y;


var worldPos = this.entity.localPosition;
var screenPos = new pc.Vec3();

// get screen space co-ord
this.camera.camera.worldToScreen(worldPos, screenPos);

// Take into account of pixel ratio
var pixelRatio = this.app.graphicsDevice.maxPixelRatio;
screenPos.x *= pixelRatio;
screenPos.y *= pixelRatio;

var device = this.app.graphicsDevice;

let anchorPosX = Math.floor(screenPos.x);
let anchorPosY = Math.floor(screenPos.y);
let deviceMiddleX = device.width / 2;
let deviceMiddleY = device.height / 2;

menuLayoutGroup.localPosition.x = defaultVehicleX;
menuLayoutGroup.localPosition.y = defaultVehicleY;

console.log('menuLocPosX before = ' + menuLayoutGroup.localPosition.x);
console.log('menuLocPosY before = ' + menuLayoutGroup.localPosition.y);


if (anchorPosX > deviceMiddleX) {
        if (anchorPosY > deviceMiddleY) {
            menuLayoutGroup.localPosition.x = offsetVehicleX;
            console.log('Anchor is bottom right of the screen!');

        } else {
            menuLayoutGroup.localPosition.y = offsetVehicleY;
            menuLayoutGroup.localPosition.x = offsetVehicleX;
            console.log('Anchor is top right of the screen!');
        }
    } else {
        if (anchorPosY > deviceMiddleY) {
            console.log('Anchor is bottom left of the screen!');
            
        } else {
            menuLayoutGroup.localPosition.y = offsetVehicleY;
            console.log('Anchor is top left of the screen!');
        }
    }
    
    console.log('menuLocPosX after = ' + menuLayoutGroup.localPosition.x);
    console.log('menuLocPosY after = ' + menuLayoutGroup.localPosition.y);
};
2

I have no idea if there is a problem with the script, but make sure all parts of the UI have a element component (for example of type ‘group’).

3

They do :+1: Still not working. The menu is being enabled the first time correctly but if I call the menu a second time at another place, it’s still in the same place. Strange thing is that in the console it looks like it should be working.

First time I call the menu:
image

Second time I call the menu:
image

In the console it states that it moved in the negative X position but it didn’t. It stays in the same position as the first time I enabled the menu.

4

Looking at your script, I don’t see where you set the actual position of the entity. I guess what you currently do is only overriding some values, but it doesn’t set a new position of the entity.

I expect to see something like below.

var pos = menuLayoutGroup.getLocalPosition();
menuLayoutGroup.setLocalPosition(offsetVehicleX, offsetVehicleY, pos.z);
1 Like
5

Ah that’s it! Thank you!

1 Like