Button pressed Image not displayed

Help & Support
1

Suppose am using a button and all I want is the image to be popped / appear when the button is pressed. Sorry am new to this platform am not much familiar with the game dev. Usually it works in a simple way in JS with HTML by calling the id/class. But if I don’t wanna use the Html or css, How it would initiate/pop the Image by only JS. Am new to prototype method as well, Can anyone help?

https://playcanvas.com/editor/scene/1177863

2

Hi @devstu ,

A good starting point is the User Interface Buttons tutorials. It explains how to setup an element/button component and add some simple logic to listen to input events (e.g. click).

Check it out here: User Interface - Buttons | Learn PlayCanvas

1 Like
3

Hello @Leonidas ,

I’ve tried that method from the Documentation and the tutorials, but it seems it’s not working, this issue is I guess am not able to code the JS properly. Tried the method provided in the learning area but no changes. I’ve made sure that the script is attached to the button entity from hierarchy as well

4

Hi @devstu! I tried to see what you’re missing in your project, but I think you broke the original project because I’m getting some strange errors and result on launch. Can you tell me what you changed?

2 Likes
5

Thing you need to know:

  1. Use a Screen when creating UI Elements.
  2. Always add an element component to the UI Elements. (Even if you think you don’t need it because sometimes they don’t perform the same way that you want if you don’t add the element entity.)
  3. Every UI element such as button and image should be child of the screen.

The task you want to achieve:

  1. Add a Screen.
  2. Add a button on it.
  3. Enable input on it on button.
  4. Add a picture that you want to display. ( Uncheck the enabled in entity component just for the pic.)
  5. Add a script in the button.
  6. Get the reference of the image in that script and just enable in on “mousedown” event.

Something I forgot to say after seeing your project:
The hierarchy should be like:

UI Screen(parent) > Button(child)
UI Screen(parent) > Image(child)

The UI Screen is the same. The button should be a child of the screen.

1 Like
6

I’ve only deleted a secondary button called hotspot 2. Nothing else.

7

Did you ever solve this?