Shulou(Shulou.com)06/03 Report--

Editor to share with you how to achieve button nodes in Cocos Creator development events, I believe that most people do not understand, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Based on Cocos2d-x (C++ Scheme), Cocos Creator puts forward a new programming concept. Cocos Creator is a game development tool with content creation as the core, which realizes the characteristics of thorough scripting (you can use Javascript, Typescript or Coffeescript), component-based and data-driven on the basis of Cocos2d-x.

However, the event handling mechanism is not simple, at least at the beginner stage.

Test purpose

Output a piece of text on the console by setting a click event for the button component.

Test procedure

Add a UI node Button to the Canvas node in the scene and select it, and notice that its event-related attributes are shown in the figure:

In other words, the Click Events attribute is a list type, which is empty by default, and each event added by the user consists of a node reference, a component name, a response function, and a custom event parameter component.

Only when we change the number of nodes in the Click Events event attribute list to be greater than or equal to 1, the corresponding event parameters are displayed. The meanings of each parameter are as follows:

The graphic effect is shown as follows:

The figure above shows changing the number of nodes in the Click Events event property list to 1.

Next, the above parameters need to be filled in in accordance with the above explanation.

To do this, we need to write a script specifically named MyComponent.js (note that the file name here is case-sensitive because it also represents the class name of the component), as follows.

Cc.Class ({

Extends: cc.Component

Properties: {}

OnLoad: function () {var clickEventHandler = new cc.Component.EventHandler (); clickEventHandler.target = this.node; / / this node node is the node to which your event handling code component belongs clickEventHandler.component = "MyComponent"; / / this is the code file name clickEventHandler.handler = "callback"; clickEventHandler.customEventData = "foobar"; var button = this.node.getComponent (cc.Button); button.clickEvents.push (clickEventHandler) }, callback: function (event, customEventData) {/ / where event is a Touch Event object, and you can get the sending node of the event var node = event.target; var button = node.getComponent (cc.Button) through event.target; / / the customEventData parameter here is equal to the "foobar" console.log ("para is:", customEventData) you set earlier;}

});

After saving the above script, add a "user script component" to this button node by clicking the "add component" button in the lower middle and lower part of the property inspector window in the scene and select the script you just created above.

Then, drag the button node in the level manager to the first parameter corresponding to the button event property, and based on that, select the second script component that has been bound to the button node and the third callback parameter (defined in the script above, which is callback). The results are as follows:

These are all the contents of the article "how to implement Button Node events in Cocos Creator Development". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.