COCOS CREATOR(TS)之按钮事件

一 : 前景介绍

为cc.Button添加事件的方法有很多种 , 本篇只讲解使用cc.Component.EventHandler的方法.因为此方案有一个最大的有点 : 可以获得cc.Event.EventTouch.但是此方案,相比如控件拖动方案要复杂一些,所以给出此Blog予以详解

二 : 详解

Ⅰ: 构建cc.Component.EventHandler对象

export class ClickEvent2CreatTool{
    private static _instance : ClickEvent2CreatTool = null;
    public static get Instance() : ClickEvent2CreatTool{
        if( !ClickEvent2CreatTool._instance ){
            ClickEvent2CreatTool._instance = new ClickEvent2CreatTool();
        }
        return ClickEvent2CreatTool._instance;
    }

    public create( $node : cc.Node , $component : string , $handler : string , $param : any ) : cc.Component.EventHandler{
        let $event : cc.Component.EventHandler = new cc.Component.EventHandler();
        $event.target = $node;
        $event.component = $component;
        $event.handler = $handler;
        if( $param )
            $event.customEventData = $param;
        return $event;
    }
}

PS create参数 :
①-> $node : 放置脚本的cc.Node
②-> $component : 脚本的名称
③-> $handler : 脚本中为事件处理的函数
④-> $param : 处理函数的用户自定义的参数

Ⅱ : 设计界面
①,结构图如下

②,UI效果图如下

③,BTN不用设置Click Events(我们不用拖控件的方案)

Ⅲ:脚本编写

import {ClickEvent2CreatTool} from "../tool/ClickEvent2CreatTool";

const {ccclass, property} = cc._decorator;

@ccclass
export default class MainMenu extends cc.Component {

    @property(cc.Button)
    btn_map: cc.Button = null;

    @property(cc.Button)
    btn_building : cc.Button = null;

    @property(cc.Button)
    btn_menu : cc.Button = null;

    private listener2Btn( $isAdd : boolean ) : void{
        if( $isAdd ){
            this.btn_map.clickEvents.push(ClickEvent2CreatTool.Instance.create( this.node , "MainMenu" , "clickHandler" , this.btn_map ));
            this.btn_building.clickEvents.push(ClickEvent2CreatTool.Instance.create( this.node , "MainMenu" , "clickHandler" , this.btn_building ));
            this.btn_menu.clickEvents.push(ClickEvent2CreatTool.Instance.create( this.node , "MainMenu" , "clickHandler" , this.btn_menu ));
        }else{
            this.btn_map.clickEvents.shift();
            this.btn_building.clickEvents.shift();
            this.btn_menu.clickEvents.shift();
        }
    }
    clickHandler( $event : cc.Event.EventTouch, $customEventData : any ) : void{
        switch( $customEventData ){
            case this.btn_map:
                console.log("map click");
                break;
            case this.btn_building:
                console.log("building click");
                break;
            case this.btn_menu:
                console.log("menu click");
                break;
        }
    }

    start () : void {
        this.listener2Btn( true );
    }

    onDestroy() : void{
        this.listener2Btn( false );
    }
}

PS create参数:
①-> this.node 既是UI中的MainMenu节点 , 这个节点会绑定此脚本
②-> MainMenu 脚本的文件名称
③-> clickHandler 脚本中clickHandler方法为Event处理方法
④-> this.btnmap 自定义的参数

Ⅳ : 在UI中使MainMenu节点绑定脚本MainMenu

Ⅴ : 结果

原文地址:http://blog.51cto.com/aonaufly/2350691

时间: 2024-08-02 00:33:26

COCOS CREATOR(TS)之按钮事件的相关文章

COCOS CREATOR(TS)之setTimeOut

一 : 前景 有很多前端可能觉得setTimeOut不值得一讲,But,在不同的平台setTimeOut的执行是有一定的规则需要遵守,有时也叫迫于无奈.比如,前几日的开发中发现一个非常奇怪的现象 , 就是setOutTime在Web / 微信IDE端都是可以起作用的 , 但是一旦到了手机微信中运行,好似就不那么灵光了.今日抽了点时间好好测试了一番 , 内容如下: 二 : 测试 Ⅰ,测试环境如下(使用TS代码)Ⅱ,代码1,测试思想分别给出有参数(setTimeOut自带传参和setTimeOut不

COCOS CREATOR(TS)之节点鼠标事件

一 : 前景 以官方的Demo为例子(HelloWorld)①-> UI层级结构②-> Canvas的属性 二 : 编码(Helloworld.ts) const {ccclass, property} = cc._decorator; @ccclass export default class Helloworld extends cc.Component { @property(cc.Label) label: cc.Label = null; @property text: string

COCOS CREATOR(TS) 之HTTP通信

一 : XMLHttpRequest的封装 export class HttpCell{ private _xhr : XMLHttpRequest = null; private _server_url : string = null; private _callback : ( $isSucc : boolean , _http : HttpCell ,$data : any ) => void = null; private _timeout : number = null; privat

COCOS CREATOR(TS)之SrollBar的基本修改

一 : 前言 初始化的ScrollBar如下:看到这个的时候 , 我有几点一下感悟 :① -> 我觉得scrollBar(滚动条)很丑 , 而且我不需要滚动条② -> 我我的背景不错 , but我还是希望是透明的 , 以看到底层的棕色背景这就是需要修改原(官方)ScrollBar的地方,之所以作出如上的修改需求,是因为在Game中,大部分这样的界面,都不需要滚动条和背景 . 当然特殊的除外(比如聊天,可能需要一个) 二 : 修改 Ⅰ ,移除滚动条① -> 选择ScrollView节点(N

Cocos Creator 按钮响应事件

Cocos Creator版本:v1.7.0-rc.2 一.方法一 1.在LoginSceneCavans的脚本文件LoginScene.js中增加btnClick函数 btnClick(event, customEventData){ console.log("event=",event.type," data=",customEventData); }, 2.按步骤在(按钮wx_btn的属性检查器)上进行操作 ①在Click Events中填上1,然后编辑器自动

Cocos Creator开发中的按钮节点的事件处理方法

Cocos Creator开发中的按钮节点的事件处理方法 Cocos Creator基于Cocos2d-x(C++方案),提出全新的编程理念.Cocos Creator是以内容创作为核心的游戏开发工具,在Cocos2d-x基础上实现了彻底脚本化(可以使用Javascript.Typescript或者Coffeescript).组件化和数据驱动等特点.但是,在事件处理机制上并不显得简单,至少是新手初学阶段如此.下面我们通过场景制作中按钮组件的事件处理机制来说明这个问题. 试验目的 通过为按钮组件设

【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合

[Cocos Creator ](千人群):  432818031 上一篇,介绍了Himi在使用过cc所有组件后的一篇总结,没有具体介绍每个组件的原因在于官方文档很齐全,而且也有视频的介绍. 所以希望童鞋们可以把我这两篇博文当成对组件.脚本两部分开发的整理与总结. 后续的文章,Himi应该主要更新一些官方还未补充或者还没有的教程.避免无用功. 下面直接放出代码,因为不是很难理解.所以不再一一赘述,都是常用的函数.事件监听.动作回调.定时器等开发过程中必接触的. 大致内容如下: cc 属性介绍 获

cocos creator Touch事件应用(触控选择多个子节点)

最近参与了cocos creator的研究,开发小游戏,结果被一个事件坑得不行不行的.现在终于解决了,分享给大家. 原理 1.触控事件是针对节点的 2.触控事件的冒泡,是直接关系冒泡,父子可以,孙子不行,就是不能隔代冒泡 3.父节点不响应触控事件,肯定是被孩子节点遮挡了,只要孩子节点也监听一下事件,父节点就可以响应了 4.触控位置是绝对坐标,相对于整个canvas,节点位置相对于父节点,相对位置可以与绝对坐标相互转化 5.节点是否被触控到,touch start事件可以肯定被触摸到,但是一个节点

cocos creator动画编辑器学习

动画是一个渐变的过程,怎么样在cocos creator的动画编辑器中实现这个过程. 一.层级关系: 1节点.2动画(Animation).3动画剪辑(Animation Clip).4属性轨道.5动画帧 a.  动画(Animation)是节点上的一个组件. b.  动画剪辑(Animation Clip)就是一份动画的声明数据,将它挂载到动画(Animation)上作为一个属性进行设置. c.  动画剪辑(Animation Clip)上可添加多个属性轨道来控制不同属性. d.  在一条属性