• cocos creator基础-(七)cc.Button使用、以及不规则按钮区域的实现


    1: 掌握按钮的使用;
     
    cc.Button
     
    1:添加按钮的方法
    (1)直接创建带Button组件的节点;
    (2) 先创建节点,再添加组件;
    2:按钮组件, 按钮是游戏中最常用的组件, 点击然后响应事件;
    3: 按钮的过渡效果:
    过渡: 普通状态, 鼠标滑动到物体上, 按下状态, 禁用状态
      (1)没有过渡,只有响应事件;
      (2)颜色过渡, 过渡效果中使用颜色;
      (3)精灵过渡,使用图片过渡;
      (4)缩放过渡, 选项,在disable的时候是否置灰;
    4: 按钮禁用;
    5: 按钮添加响应事件 --> 节点-->组件 --> 代码的函数;
    6: 按钮传递自定义参数; ---> 字符串对象;
    7: Button响应这个触摸点击,所以Button所挂的这个节点,一定要有大小,如果你向大小(0, 0)的节点上,挂一个Button,这个是无法响应点击事件;+
     
    代码使用cc.Button
    1: 代码添加/获取cc.Button组件;
    2: 代码里面添加按钮的响应事件;
    3: 代码触发按钮指定的回掉函数;
    4: Component.EventHandler
      var eventHandler = new cc.Component.EventHandler();
      eventHandler.target = newTarget;
      eventHandler.component = "MainMenu";
      eventHandler.handler = "OnClick";
      eventHandler.customEventData = "my data";
      eventHandler.emit(["param1", "param2", ....]);
     
    cc.Class({
        extends: cc.Component,
    
        properties: {
            // foo: {
            //    default: null,      // The default value will be used only when the component attaching
            //                           to a node for the first time
            //    url: cc.Texture2D,  // optional, default is typeof default
            //    serializable: true, // optional, default is true
            //    visible: true,      // optional, default is true
            //    displayName: 'Foo', // optional
            //    readonly: false,    // optional, default is false
            // },
            // ...
            // 直接在编辑器里面绑定
            button: {
                type: cc.Button, // 
                default: null,
            },
        },
    
        // use this for initialization
        onLoad: function () {
            // 获取button组件
            this.start_button = this.node.getChildByName("ks_up").getComponent(cc.Button); 
    
    
            // 添加button组件
            this.red_button = this.node.getChildByName("red_button").addComponent(cc.Button);
            // 添加一个响应函数
            var click_event = new cc.Component.EventHandler();
            click_event.target = this.node;
            click_event.component = "game_scene";
            click_event.handler = "on_red_button_click";
            click_event.customEventData = "red_button_data_77777";
            // this.red_button.clickEvents = [click_event];
            this.red_button.clickEvents.push(click_event);
            // end 
    
            // 代码触发按钮的响应事件,而不用自己去触摸
            this.scheduleOnce(function() {
                var click_events = this.red_button.clickEvents;
                for(var i = 0; i < click_events.length; i ++) {
                    var comp_env_handle = click_events[i];
                    // 在代码里面触发按钮的响应函数
                    comp_env_handle.emit(["", "red_button_data_77777"]);
                }
            }.bind(this), 3);
            // end 
        },
    
        on_red_button_click: function(e, custom) {
            console.log("on_red_button_click: ", custom);
        },
        // 关卡按钮1-10, 第几关
        //  e 本次触摸的触摸事件
        // customEventData is String;
        on_button_click: function(e, level) {
            level = parseInt(level);
            console.log("on_button_click called:", level);
        },
    
        // called every frame, uncomment this function to activate update callback
        // update: function (dt) {
    
        // },
    });

    实现不规则的按钮点击区域(copy大佬的方法重写_hittest,方便好用)

    参考链接 http://blog.zovew.com/2018/03/18/Cocos-Creator不规则触摸点击实现/

    可以利用PolygonCollider组件实现一个不规则碰撞的方法。

    1. Node节点需要添加cc.PolygonCollider,否则按原函数处理
    2. 获取cc.PolygonCollider组件,检测碰撞。触摸点坐标需要转NodeSpace,并且Anchor为(0.5,0.5)即:节点中心为原点

    核心代码

    cc.Class({
        extends: cc.Component,
        editor: CC_EDITOR && {
            menu: 'i18n:Component/PolygonHitTest',
        },
        properties: {
        },
        /**
         * 加载
         */
        onLoad() {
            this.node._oldHitTest = this.node._hitTest.bind(this.node);
            this.node._hitTest = this.polygonHitTest.bind(this.node);
        },
        /**
         * 不规则多边形触摸测试
         * @param {触摸点} point 
         * @param {监听} listener 
         */
        polygonHitTest(point, listener) {
            var polygonCollider = this.getComponent(cc.PolygonCollider);
            if (polygonCollider) {
                point = this.convertToNodeSpace(point);
                point.x -= this.getContentSize().width / 2;
                point.y -= this.getContentSize().height / 2;
                return cc.Intersection.pointInPolygon(point, polygonCollider.points);
            } else {
                return this._oldHitTest(point, listener);
            }
        }
    });
  • 相关阅读:
    JDK源码分析 – HashMap
    牛哄哄的celery
    redis数据库基础篇
    RPC的入门应用
    Python的常用模块
    消息队列之真知灼见
    面向对象编程(2)
    python3的C3算法
    面向对象编程(1)
    CRM项目之stark组件(2)
  • 原文地址:https://www.cnblogs.com/orxx/p/10430605.html
Copyright © 2020-2023  润新知