UI Problems - Not detecting clicks where I think it should

Help & Support
1

I am new to playcanvas and still learning. I have a problem with clicking buttons made from Image Elements.
I have created script like this:

var Test = pc.createScript(‘test’);

//Attributes visible in inspector
//#region Attributes
Test.attributes.add(‘camera’, {
type: ‘entity’
});

Test.attributes.add(‘btn1’, {
type: ‘entity’
});

Test.attributes.add(‘btn2’, {
type: ‘entity’
});

Test.attributes.add(‘btn3’, {
type: ‘entity’
});

Test.attributes.add(‘bckgrnd’, {
type: ‘entity’
});
//#endregion
//end of region

// initialize code called once per entity
Test.prototype.initialize = function() {
// var t = this.btn1;
// this.btn1.element.color.set(122/255,122/255,122/255);
this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onSelect, this);

};

Test.prototype.onSelect = function (e) {
var cmr = this.camera;
var from = cmr.camera.screenToWorld(e.x, e.y, this.camera.camera.nearClip);
var to = cmr.camera.screenToWorld(e.x, e.y, this.camera.camera.farClip);

var result = this.app.systems.rigidbody.raycastFirst(from, to);
if (result) {
    console.log("Entity picked is: " + result.entity.name);
    var pickedEntity = result.entity;
    pickedEntity.element.color.set(122/255,122/255,122/255);
}

};

// update code called every frame
Test.prototype.update = function(dt) {

};

I was using stuff from entry picking tutorial (https://developer.playcanvas.com/en/tutorials/entity-picking/). I just want to change color on clicked images. I have set collision on btn1 (orange) and my code is detecting click somewhere around location where red image is. I am not sure why is that happening. What am I doing wrong? Does it have to do something with camera settings or something else. Maybe I am just still thinking in UNITY way cause I am using unity a lot.

Here is link to my project https://playcanvas.com/editor/scene/599274

2

If you are using buttons from the UI system, this is the tutorial that should be used: https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/