Cocos Creator滑动选择节点

最新推荐文章于 2023-01-25 10:33:53 发布

ming0527

最新推荐文章于 2023-01-25 10:33:53 发布

阅读量990

点赞数

分类专栏： Cocos Creator 游戏开发文章标签：游戏开发

本文链接：https://blog.csdn.net/qq_27176027/article/details/105922135

版权

本文介绍了在Cocos Creator中为斗地主游戏开发滑动选择手牌的功能，由于缺少内置组件，作者自行创建了DragChoose组件，该组件用TypeScript编写，适用于有滑动选择需求的场景。使用时需配合Layout组件，确保节点正确排列。

摘要由CSDN通过智能技术生成

功能需求

Cocos Creator 开发斗地主，滑动选取手上的手牌
问题：Cocos Creator没有滑动选取节点的组件，于是自己造轮子
说明：DragChoose组件用于在多个节点上滑动时，选择鼠标滑动区域内的节点，由于Cocos Creator 支持TypeScript，所以该组件由TypeScript语言编写，需要配合Layout组件使用，可以直接挂在相应的Node节点上

使用示例

扑克根节点上需要挂上Layout组件，对子节点下的扑克牌进行排列

示例代码

import ScrollSelect from "./ScrollSelect";

/**
 * 示例
 * 选中是为灰色
 * 选择完是绿色
 */

const { ccclass, property } = cc._decorator;
@ccclass
export class Example extends cc.Component {

    private _root: cc.Node
    private _scrollSelect: ScrollSelect;

    start() {
        this.initRoot();
        this.initEvent();
    }

    private initRoot() {
        this._root = cc.find("CardRoot", this.node)
        this._scrollSelect = this._root.getComponent(ScrollSelect)
    }

    private initEvent() {
        this._scrollSelect.OnStart = () => { this.OnChooseStart() }
        this._scrollSelect.OnMoving = (nodes: Array<cc.Node>) => { this.OnChooseCard(nodes) }
        this._scrollSelect.OnEnd = (nodes: Array<cc.Node>) => { this.ChooseCardEnd(nodes) }
    }

    private OnChooseStart() {
        let childrens = this._root.children
        for (let index = 0; index < childrens.length; index++) {
            const child = childrens[index];
            child.color = cc.Color.WHITE
        }
    }


    private OnChooseCard(nodes: Array<cc.Node>) {
        let childrens = this._root.children
        for (let index = 0; index < childrens.length; index++) {
            const child = childrens[index];
            if (nodes.ind