Useful script for defining clickable regions

Help & Support
1

Just a little post from me to say I developed a really useful script last night:

https://playcanvas.com/editor/asset/5298060

It allows you to define clickable rectangular regions that fire events.

The script UI in the Editor is:

The box attribute defines the size and shape of the clickable region. The first two numbers are the coordinate of the bottom left corner of the box. The second two numbers are the width and height of the box. The box values are between 0 and 1, where a y value of 0 is the bottom of the screen and 1 is the top.

The debug attribute controls whether an outline of the defined region is rendered in the game, to help you place it. For example:

blob.jpg861×857 119 KB

The event attribute controls the name of the event fired from the app. So if you set this to ‘myevent’, you handle it anywhere in your game’s scripts with:

this.app.on('myevent', function () {
    console.log('Wow, this script is freaking awesome!');
});

Obviously, the main use case is triggering behavior on selecting screen areas - so UI buttons. Hope you find it useful!

2 Likes
2

Hmm that’s simple and genius at once, nice work will.

Although I am not sure, what I should like more, the script, or your awesome chess image :stuck_out_tongue:

Someday I would like to do a small community project with you guys, like a knowledge exchange between the devs and the community. If I look at the last contest and all your little side projects here, that could be a really cool project and you get an inside how some of the community users use your tools :wink:

Greetings,

Martin

1 Like