How to add function to a Button?

Cocos Creator
#1

In the docs. it says " Target = Node with the script component." does that mean that I have to create an empty node and add a script to it ? because in this case the game design approach would be very difficult and weird.

Edit:
I want to add a script to the “Click Events” in the button component so I can access functions inside it, I tried adding Prefab but it seems it only accepts Nodes.

So if I want to make Jump button and Fire button, what would be the best approach of linking them to the script that is already attached to the Player Prefab that allows it to do those functions?

#2

You can add component scripts to any Node, it can be empty, or it can have other components. A node is always pure Node, logic is applied to it via different components

Can be something like this:

  • Node
    • Sprite Component
    • Layout Component
    • User custom Component
#3

@pandamicro
I’m sorry I wasn’t clear before, I meant I want to add a script to the “Click Events” in the button component so I can access functions inside it, I tried adding Prefab but it seems it only accepts Nodes.

So if I want to make Jump button and Fire button, what would be the best approach of linking them to the script that is already attached to the Player Prefab that allows it to do those functions?

#4

So you may need to add a Node type property to a custom component which should be attached to the same Node which has also Button component. Then link the Player Node to the property. You should be able to use this Node property as target of click event, and set jump / fire function as callback

#5

Here is how to do it with button click event; example

  1. create a script, such as
    cc.Class({
    extends: cc.Component,

     startGame: function()
{
   alert("you just pressed the button");
}, })

2)create a new scence, and in Canavs, attach the script above by “Add Component”->“Add custom Component”
3) in the same canvas, insert a button component,
4)go to the bottun, in the button property, you see Click Event, and enter 1, then you will see [0], in cc.Node next to [0], then highlight the canvas under Node Tree window, drag it to cc.Node next to [0] under the click events. then you can select the script name in the first down arrow select menu, the 2nd down arrow menu, you can select the function you created in step 1…

Hope that helps, cheer!

1 Like
#7

Far out. thanks for posting this a year ago - even with these instructions it’s just taken me 20 minutes to get a single button changing a label’s text!

If it wasn’t for this post, I’d still be trying!

#8

I never use Creator buttons. I like to create my own buttons with a Sprite and adding a touch listener to them. Then I also have a cool “pressed” animation that I trigger whenever I touch the button. This allows me full control of the look/feel of my UI.

#9

Hi there.
I’m glad to meet you.
I need your help in a short time.
I want to add button on my first project of cocos creator.
Could you help me?
Best regards.

#10

Your answer is here: https://docs.cocos2d-x.org/creator/manual/en/getting-started/hello-world.html

Plus, technically in a tutorial I’m writing: https://slackmoehrle.cocos2d-x.org/en/

#11

Dear slackmoehrle.
thank you for your reply!
I make a game project at first.
By the way could I add my image animation to cocos creator?
Thank you

#12

Sure. Creator supports that. Check out the docs and examples. We show this.

#13

Thank you for your email.
I want to make boxing game with cocos creator. If you know about it, help me.
Is there the sample code for boxing game?
Thank you for your help.

#14

I don’t know of any source code specifically for boxing. Take a look at some old school NES videos for Punch Out. It should be easy to break down into pieces.