[SOLVED] Mobile Buttons question

Help & Support
1

Hey there, I’m working on getting buttons setup that will work on touch presses. I’m not sure why I am not getting the console log printouts, this is my code. Edit: to clarify this script is attached to a button.

var MobileButtons = pc.createScript('mobileButtons');

// initialize code called once per entity
MobileButtons.prototype.initialize = function() {
    var touch = this.app.touch;
    this.entity.element.on('touchstart', this.onPress, this);
    this.entity.element.on('touchend', this.onRelease, this);
};

// update code called every frame
MobileButtons.prototype.update = function(dt) {
    
    
    
};

MobileButtons.prototype.onPress = function() {
    console.log("I'm being pressed!");
};

MobileButtons.prototype.onRelease = function() {
    console.log("I'm not being pressed!");
};
2

Hi @Aaron_B! Do you use a button component or an element component for it? If you use an element component for it make sure that the ‘Use Input’ option on the component is enabled. If you use a button component I think your script is not correct because then there is no ‘element’.

3

Well, I might be using both? do I only need one of these? Also it is selected.

image
image318×907 19.1 KB

4

Yes, as far as I know the button component is relatively new and that’s why it is not used in the tutorials yet. If you only use the element component in combination with your script, I can’t see what’s wrong.

5

Found something. Please try to add the event to your functions.

MobileButtons.prototype.onPress = function(event) {
    console.log("I'm being pressed!");
};

MobileButtons.prototype.onRelease = function(event) {
    console.log("I'm not being pressed!");
};
6

Hi @Aaron_B,

Would it be possible to post a link to the project in question?

7

Resolved via PM’s:

When testing touch events on a desktop browser, make sure you simulate touch events in the developers console:

2 Likes
8

I would also like to know this. How to use the button component on the right way?

9

The element component needs ‘Use Input’ enabled for buttons to accept user input. The button component is used so set different images or tints based on it’s state (pressed, hover, inactive).

You don’t need the button component to make a bit of UI user intractable.

10

So if I understand you correctly the button component alone can’t do it’s job? :thinking:

11

The button component isn’t responsible for rendering the image, just logic around a typical button.

12

I thought that the button component could also be used to activate an event, but now I know that this component is only for the visual effects. Thanks.

13

The button also handles events like the ‘click’ event that are specific to buttons.

Edit: actually the element also has that event :thinking:

14

For me the button component feels incomplete right now. If you say it handles events then give it also a text field because then you don’t need the element component anymore.

15

What do you mean it feels incomplete?

It handles changing the visuals based on input events (tint or switching the image on different states). I’m not sure what else it needs?

Not all buttons need text hence it’s normally a child element?

16

So if the button don’t need text you don’t need an element component to make the button work?

17

You need the element component to position, size and render the image.

The button component adds extra logic on top of the element component such as changing the visuals based on button state.

18

Right. Thanks.