[TUTORIAL] How to make hyperlinks in PlayCanvas!

Useful Resources
,
1

Hello everyone, today i’ll show you how to make hyperlinks such as discord icon …etc.
Firstly, add a button without text like this:

image
image1322×659 149 KB

As you see i’ve two icons without text after that make sure that you add an “element” option and add in the “Mask Texture” an image of what you want like this:
image
image311×503 16.3 KB

After doing all this move to the script, make sure that you add a script element called Reddit or whatever you want.

Here is my code:

var Twitter = pc.createScript('twitter');

// initialize code called once per entity
Twitter.prototype.initialize = function() {
    this.entity.element.on('click', function() {
        window.open("https://twitter.com/");
    });
};

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

};

You can do the same thing but make sure that you change the “Twitter variable” to “Reddit or something else”
e.g:

var Reddit = pc.createScript('reddit');

// initialize code called once per entity
Reddit.prototype.initialize = function() {
    this.entity.element.on('click', function() {
        window.open("https://reddit.com/");
    });
};

Here is my video clip about hyperlinks:

That’s how to make HyperLinks in playcanvas ui if you had any problem with the code contact me.

8 Likes