JumpGame/assets/Editer/edLayout.ts

// "map": [
//     {
//         "bg": "5",
//         "fs": []
//     },
//     {
//         "bg": "1",
//         "fs": []
//     },
//     {
//         "bg": "1",
//         "fs": []
//     },
//     {
//         "bg": "3",
//         "fs": []
//     }
// ],
// "mapX": 2,
// "mapY": 2,
// "BronID": 0,
// "BronX": 55,
// "BronY": 55

import footstepmove from "./footstepmove";

const { ccclass, property } = cc._decorator;
type ddddtype = {
    map: maptype[]
    mapX: number
    mapY: number
    BronID: number
    BronX: number
    BronY: number
}
type maptype = {
    bg: number
    fs: [{}]
}

@ccclass
export default class edLayout extends cc.Component {



    Click: cc.Node = null;

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start() {
        this.schedule(() => {

            let temp = this.node.children

            for (let index = 0; index < temp.length; index++) {
                const element = temp[index];

                if (element.childrenCount <= 0) {
                    let tempNOde = new cc.Node
                    tempNOde.parent = element
                    let mylabel = tempNOde.addComponent(cc.Label)

                    mylabel.fontSize = 80
                    mylabel.lineHeight = 80
                    mylabel.string = index + ''
                }

            }

        }, 1, 9999999999999)
    }

    onLoad() {

        // 监听键盘按下事件
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        // 监听键盘松开事件
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);



        //绑定事件
        //因为摇杆很小，如果给摇杆绑定事件玩家将很难控制，摇杆的背景比较大，所以把事件都绑定在背景上是不错的选择
        this.node.on(cc.Node.EventType.TOUCH_START, this.starttt, this);//当手指在背景上移动时触发move事件
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.move, this);//当手指在背景上移动时触发move事件
        this.node.on(cc.Node.EventType.TOUCH_END, this.finish, this);//当手指在目标节点区域内离开屏幕时触发finish事件
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.finish, this);//当手指在目标节点区域外离开屏幕时触发finish事件
    }

    onKeyDown(event) {
        switch (event.keyCode) {
            case cc.macro.KEY.a:
                this.zuo()
                this.zuo()
                break;
            case cc.macro.KEY.d:
                this.you()
                this.you()
                break;
            case cc.macro.KEY.w:
                this.shang()
                this.shang()
                break;
            case cc.macro.KEY.s:
                this.xia()
                this.xia()
                break;
            // 添加更多按键处理逻辑
        }
    }

    onKeyUp(event) {
        switch (event.keyCode) {
            case cc.macro.KEY.a:
                console.log('A 键被松开');
                break;
            case cc.macro.KEY.b:
                console.log('B 键被松开');
                break;
            // 添加更多按键处理逻辑
        }
    }

    onDestroy() {
        // 在组件销毁时，取消键盘事件监听
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.off(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
    }

    startpos: cc.Vec2
    starttt(event: cc.Event.EventTouch) {
        this.startpos = event.getLocation()
    }

    move(event: cc.Event.EventTouch) {//负责移动摇杆 手指移动时调用




        console.log(event.getLocationX(), event.getLocationY());


        this.node.x += (event.getLocationX() - this.startpos.x) * 0.1
        this.node.y += (event.getLocationY() - this.startpos.y) * 0.1


        this.node.x += event.getDeltaX()
        this.node.y += event.getDeltaY()
    }

    finish() {//摇杆弹回原位置

    }

    initx(x) {
        console.log(x);
        this.heng = x
        this.init()
    }
    inity(y) {

        console.log(y);

        this.shu = y
        this.init()
    }


    heng: number = 0
    shu: number = 0

    init() {

        if (!this.heng || !this.shu) {
            return
        }
        this.node.setContentSize(750 * this.heng, 1334 * this.shu)

        let total = this.heng * this.shu
        let background = this.node.getChildByName("background")

        this.node.children.forEach((e, i) => {
            if (i != 0) {
                e.destroy()
            }
        })

        for (let index = 0; index < total; index++) {
            if (index == 0) {
                background.on('touchstart', (event) => {
                    console.log(index);
                    if (window['selectNode']) {
                        (window['selectNode'].opacity = 255)
                        window['selectNode'].children.forEach(e => {
                            e.color = cc.Color.WHITE
                        })
                    }

                    background.opacity = 180
                    window['selectNode'] = background
                })


                let Label = background.getChildByName("Label")
                Label.getComponent(cc.Label).string = index.toString()
                continue
            } else {
                let temp = cc.instantiate(background)
                temp.parent = this.node

                let Label = temp.getChildByName("Label")
                Label.getComponent(cc.Label).string = index.toString()
                temp.on('touchstart', (event) => {
                    console.log(index);


                    if (window['selectNode']) {
                        (window['selectNode'].opacity = 255)
                        window['selectNode'].children.forEach(e => {
                            e.color = cc.Color.WHITE
                        })
                    }
                    window['selectNode'] = temp
                    temp.opacity = 180
                    temp.children.forEach(e => {
                        e.color = cc.Color.RED
                    })
                })
            }
        }



    }


    hengjiayi() {
        let my_laye = this.node.getComponent(cc.Layout)
        my_laye.startAxis = cc.Layout.AxisDirection.HORIZONTAL
        var a = cc.instantiate(this.node.children[this.node.childrenCount - 1]);
        a.parent = this.node

    }
    hengjianyi() {
        let my_laye = this.node.getComponent(cc.Layout)
        my_laye.startAxis = cc.Layout.AxisDirection.HORIZONTAL
        this.node.children[this.node.childrenCount - 1].destroy()
    }
    shujiayi() {
        let my_laye = this.node.getComponent(cc.Layout)
        my_laye.startAxis = cc.Layout.AxisDirection.VERTICAL
        var a = cc.instantiate(this.node.children[this.node.childrenCount - 1]);
        a.parent = this.node


    }
    shujianyi() {
        let my_laye = this.node.getComponent(cc.Layout)
        my_laye.startAxis = cc.Layout.AxisDirection.VERTICAL
        this.node.children[this.node.childrenCount - 1].destroy()
    }

    /////





    shang() {
        this.node.y += 20
    }
    xia() {
        this.node.y -= 20
    }
    zuo() {
        this.node.x -= 20
    }
    you() {
        this.node.x += 20
    }

    shanchu() {
        if (window['selectfootstep']) {
            window['selectfootstep'].destroy()
        }
    }


    daoru() {

        this.heng = (window['dd'] as ddddtype).mapX
        this.shu = (window['dd'] as ddddtype).mapY;

        this.init()

        let mmmp = (window['dd'] as ddddtype).map


        mmmp.forEach(e => {
            e.bg
            e.fs
        })


        for (let i = 0; i < this.node.children.length; i++) {
            const node = this.node.children[i];
            const data = mmmp[i];

            const url = "res/bg/bg" + data.bg
            // cc.resources.load(url, cc.SpriteFrame, (err, spriteframe) => {
            //     if (err) {
            //         return
            //     }

            //     let sprite = node.getComponent(cc.Sprite);
            //     sprite.spriteFrame = spriteframe;
            // });

            let bundle = cc.assetManager.getBundle("sub");
            bundle.load(url, cc.SpriteFrame, (err: Error, spriteframe) => {
                if (err) {
                    return
                }

                let sprite = node.getComponent(cc.Sprite);
                sprite.spriteFrame = spriteframe;
            });



            for (let j = 0; j < data.fs.length; j++) {
                const element = data.fs[j];

                const url = "res/footstep/footstep" + element['sp']
                // cc.resources.load(url, cc.Prefab, (err, Prefab) => {
                //     if (err) {
                //         return
                //     }

                //     let a = cc.instantiate(Prefab);
                //     a.parent = node
                //     a.active = true

                //     a.setPosition(element['x'], element['y'])
                //     a.setRotation(element['ro'])
                //     a.setScale(element['sc'])
                //     a.addComponent(footstepmove)
                // });

                let bundle = cc.assetManager.getBundle("sub");
                bundle.load(url, cc.Prefab, (err: Error, Prefab) => {
                    if (err) {
                        return
                    }

                    let a = cc.instantiate(Prefab);
                    a.parent = node
                    a.active = true

                    a.setPosition(element['x'], element['y'])
                    a.setRotation(element['ro'])
                    a.setScale(element['sc'])
                    a.addComponent(footstepmove)
                });
    
            }
        }
    }


    out() {

        // 将JavaScript对象转换为JSON字符串

        let tempmap = this.node.children


        let subMapData = {
            map: [],
            mapX: 0,
            mapY: 0,

            BronID: 0,
            BronX: 0,
            BronY: 0,
        }




        for (let index = 0; index < tempmap.length; index++) {
            const element = tempmap[index];

            let Mapdata = {
                bg: '',
                fs: []
            }



            Mapdata.bg = (element.getComponent(cc.Sprite).spriteFrame.name).replace(/[^0-9]/ig, "")

            for (let index1 = 1; index1 < element.children.length; index1++) {
                const prop = element.children[index1];
                Mapdata.fs.push(
                    {

                        sp: prop.name.replace(/[^0-9]/ig, ""),
                        // sp: prop.getComponent(cc.Sprite).spriteFrame.name.replace(/[^0-9]/ig, ""),
                        // sp: prop.getComponent(cc.Sprite).spriteFrame.name,
                        ro: prop.rotation,
                        sc: prop.scale,
                        x: prop.position.x.toFixed(2),
                        y: prop.position.y.toFixed(2)
                    }
                )
            }
            subMapData.map.push(Mapdata)
        }
        subMapData.mapX = this.heng
        subMapData.mapY = this.shu

        subMapData.BronID = 0
        subMapData.BronX = 55
        subMapData.BronY = 55

        console.log(subMapData);
        const jsonData = JSON.stringify(subMapData);
        console.log(jsonData);

        this.saveForBrowser(jsonData, 'map1')


    }

    /**
     * 存字符串内容到文件。
     * @param textToWrite  - 要保存的文件内容
     * @param fileNameToSaveAs - 要保存的文件名
     */
    private saveForBrowser(textToWrite, fileNameToSaveAs) {
        let textFileAsBlob = new Blob([textToWrite], { type: 'application/json' });
        let downloadLink = document.createElement("a");
        downloadLink.download = fileNameToSaveAs;
        downloadLink.innerHTML = "Download File";
        if (window.webkitURL != null) {
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        }
        downloadLink.click();
    }

}