Hi I am new to playcanvas and although I am trying to learn and do it right I am totally stuck this time. I have used tiggers so that when I approach an object a text appears as a popup and when I move away, it disappears, but now I want it not to be a text but a concrete image. and I am a bit lost on how I can do it.
suggestions are welcome.
Hi @RUAN_DEGODO and welcome!
If I understand you correctly you can just change the type of the element component to ‘Image’ instead of ‘Text’.
Sorry late answer, im sleeping, first, thanks for the fast answer, and second not exactly. i have used this first person reference with tigger but i try to change, instead of the text pop up to an image pop up.
this is the reference i use: PlayCanvas 3D HTML5 Game Engine
but i have no idea how to do it, i’ve been using playcanvas for a month only, and this time i’m stuck to the max.
my intention is to create a trigger that I can hide in an object, when I get close the pop up / image I want and when I get out of tigger’s range it disappears. come on invisible image when I’m not close, visible when I’m in its collision range.
I am very bad at UI
You want to use HTML for your UI? I don’t have an example project in mind, but if you search for ‘html image’ here on the forum, you will find some topics that may be useful.
thanks, I will look, although what I want is very simple but I do not know how to do it, is an image, or image element, that when something comes in contact with its collider, it appears and when nothing is in contact with its collider, it disappears.
Personally I would use an entity with an image element. Then you can easily upload your image to the editor and attach it to the element.
Do you want to use the image in 2D or 3D?
a 2D image but I don’t know how to do it, I create the2d element, load the image, add collider, but I don’t know how to make it invisible when no one is touching it.
Something like the example project you shared. You need to create a trigger. With the trigger you can enable and disable the entity.
https://developer.playcanvas.com/en/tutorials/collision-and-triggers/
this.app.root.findByName('NameOfEntity').enabled = true;
this.app.root.findByName('NameOfEntity').enabled = false;
thanks i go to try made new trigger and check what happend.
in the end it does not work what I had thought, the trigger tutorial did not help me, to do other things yes, but this time for what I would like to do nothing.
If you share the editor link of your project I can check your setup.
https://playcanvas.com/editor/scene/1675299
here is the imagen i want, show when the player touch the colision, and hide when no touch the colision.
all suggestion is good welcome.
If you add the script below to your trigger entity (with the image element), it will work.
var Trigger = pc.createScript('trigger');
// initialize code called once per entity
Trigger.prototype.initialize = function() {
this.entity.collision.on('triggerenter', this.onTriggerEnter, this);
this.entity.collision.on('triggerleave', this.onTriggerLeave, this);
};
Trigger.prototype.onTriggerEnter = function(entity) {
if (entity) {
this.entity.element.enabled = true;
}
};
Trigger.prototype.onTriggerLeave = function(entity) {
if (entity) {
this.entity.element.enabled = false;
}
};
Your project is loading very slow, I suggest to remove or optimize your assets like very large textures.
2 Likes
I’m sorry to take so long to reply I was off and with fever, thank you very much for the help right now I’m going to try it.
I’m learning, I’m learning, little by little I’ll be able to optimize it better and do more things, I hope. hehehehehe thank you very much for the help.
1 Like