cocos creator 实现文件读写功能 网页版本(一)

3 篇文章 0 订阅

使用该方法,可以便于通过creator做些关卡编辑,生成数据,等操作

功能尚未整理完全,会慢慢加入:

网页版:

/** 
 * 文件操作
 * 点击按钮进行操作
 * 
 */
import FileMgr from "./FileMgr";

const {ccclass, property} = cc._decorator;

// import fs from `./fs`;

@ccclass
export default class WriteFile extends cc.Component {

    // LIFE-CYCLE CALLBACKS:
    @property(cc.Node)
    NodeScore : cc.Node = null;

    @property(String)    
    PathName : string = "";

    onLoad () {
        // jsb.fileUtils.writeStringToFile()
    }

    start () {

    }

    /**
     * 打开文件选择器+读取数据
     *
     * @memberof WriteFile
     */
    openLocalFile(){
        // 打开文件选择器
        FileMgr.getInstance().openLocalFile(null,(file)=>{
            console.log("file",file)
            // 读取数据
            FileMgr.getInstance().readLocalFile(file,1,(result)=>{
                console.log("file result",result)
            })

        });
    }

    /**
     * 保存数据到文件
     *
     * @memberof WriteFile
     */
    SaveFile(){
        let children =  this.NodeScore.children;
        let list = []
        for (let index = 0; index < children.length; index++) {
                let data = {
                    position : cc.v2(0,0),
                    scoreType : "",
                    scoreNum : 0,
                }
                let comp = children[index].getComponent("ScoreNode");
                data.scoreType = comp.ScoreType;
                data.scoreNum = comp.ScoreNum;
                data.position =  children[index].position;
                list.push(data);
        }

        FileMgr.getInstance().saveForBrowser(JSON.stringify(list),`json/${this.PathName}.json`);
    }

    // update (dt) {}
}
/** 文件操作管理类 */

// 读取文件方式
enum READ_FILE_TYPE {
    DATA_URL,// readAsDataURL, base64
    TEXT,// readAsText
    BINARY,// readAsBinaryString
    ARRAYBUFFER,// readAsArrayBuffer
}

export default class FileMgr{
    private static instance : FileMgr;
    public static getInstance(): FileMgr{
        if(!FileMgr.instance){
            FileMgr.instance = new FileMgr();
        }
        return FileMgr.instance;
    }

    /**
     * 打开文件选择器
     *
     * @param {string} accept
     * @param {(file: File) => void} callback
     * @memberof FileMgr
     */
    openLocalFile(accept: string, callback: (file: File) => void) {
        let inputEl: HTMLInputElement = <HTMLInputElement>document.getElementById('file_input');
        if (!inputEl) {
            // console.log('xxxxxx createElement input');
            inputEl = document.createElement('input');
            inputEl.id = 'file_input';
            inputEl.setAttribute('id', 'file_input');
            inputEl.setAttribute('type', 'file');
            inputEl.setAttribute('class', 'fileToUpload');
            inputEl.style.opacity = '0';
            inputEl.style.position = 'absolute';
            inputEl.setAttribute('left', '-999px');
            document.body.appendChild(inputEl);
        }

        accept = accept || ".*";
        inputEl.setAttribute('accept', accept);

        // inputEl.addEventListener('change', (event) => {
        //     console.log('xxx onchange1', event, inputEl.value);
        // });
        inputEl.onchange = (event) => {
            // console.log('xxx onchange2', event, inputEl.files);
            let files = inputEl.files
            if (files && files.length > 0) {
                var file = files[0];
                if (callback) callback(file);
            }
        }
        inputEl.click();
    }

    /**
     * 读取本地文件数据
     *
     * @param {File} file
     * @param {READ_FILE_TYPE} readType
     * @param {((result: string | ArrayBuffer) => void)} callback
     * @memberof FileMgr
     */
    readLocalFile(file: File, readType: READ_FILE_TYPE, callback: (result: string | ArrayBuffer) => void) {
        var reader = new FileReader();
        reader.onload = function (event) {
            if (callback) {
                if (reader.readyState == FileReader.DONE) {
                    // console.log('xxx FileReader', event, reader.result);
                    callback(reader.result);
                } else {
                    callback(null);
                }
            }
        };
        switch (readType) {
            case READ_FILE_TYPE.DATA_URL:
                reader.readAsDataURL(file);
                break;
            case READ_FILE_TYPE.TEXT:
                reader.readAsText(file);   //作为字符串读出
                //reader.readAsText(file,'gb2312');   //默认是用utf-8格式输出的,想指定输出格式就再添加一个参数,像txt的ANSI格式只能用国标才能显示出来
                break;
            case READ_FILE_TYPE.BINARY:
                reader.readAsBinaryString(file);
                break;
            case READ_FILE_TYPE.ARRAYBUFFER:
                reader.readAsArrayBuffer(file);
                break;
        }
    }
   
    /**
     * 保存数据到本地
     *
     * @param {*} textToWrite       要保存的文件内容
     * @param {*} fileNameToSaveAs  要保存的文件名
     * @memberof FileMgr
     */
    saveForBrowser(textToWrite, fileNameToSaveAs) {    
        if (cc.sys.isBrowser) {        
            console.log("浏览器");        
            let textFileAsBlob = new Blob([textToWrite], {type:'application/json'});        
            let downloadLink = document.createElement("a");        
            downloadLink.download = fileNameToSaveAs;        
            downloadLink.innerHTML = "Download File";        
            if (window.webkitURL != null){            
                // Chrome allows the link to be clicked            
                // without actually adding it to the DOM.            
                downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);        
            }else{            
                // Firefox requires the link to be added to the DOM            
                // before it can be clicked.            
                downloadLink.href = window.URL.createObjectURL(textFileAsBlob);            
                // downloadLink.onclick = destroyClickedElement;            
                downloadLink.style.display = "none";            
                document.body.appendChild(downloadLink);        
            }        
                
            downloadLink.click();    
        } 
    }

}

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
CocosCreator是一种基于 TypeScript的游戏开发引擎,而protobuf是一种数据序列化格式。要在CocosCreator中使用protobuf实现登录功能,首先需要进行以下几个步骤: 1. 下载protobuf库:在项目的assets目录中创建一个新的文件夹,例如"protobuf",然后从protobuf官方网站上下载protobuf的JavaScript库文件,并将其解压到该文件夹中。 2. 创建.proto文件:在项目的assets目录中创建一个新的文件,例如"login.proto",并在其中定义登录功能所需的消息结构。例如,可以定义一个"LoginRequest"消息,包含用户名和密码字段,并定义一个"LoginResponse"消息,表示登录结果。 3. 生成JavaScript代码:打开终端,进入到protobuf库所在的文件夹,执行以下命令来生成JavaScript代码文件: protoc --js_out=import_style=commonjs,binary:生成代码路径 -I=proto文件所在路径 proto文件 这将根据.proto文件生成对应的JavaScript代码文件,用于在CocosCreator中进行序列化和反序列化。 4. 在CocosCreator中使用protobuf:将生成的JavaScript代码文件拷贝到CocosCreator项目的assets目录中,然后在适当的地方引入protobuf库。 5. 编登录功能代码:在需要实现登录功能的脚本文件中,使用引入的protobuf库来序列化登录请求数据,并将其发送到服务器,并处理服务器返回的响应数据。 总的来说,使用CocosCreator和protobuf实现登录功能需要先创建.proto文件,然后通过protobuf库生成对应的JavaScript代码文件,并将其引入项目中,在代码中使用protobuf库进行消息的序列化和反序列化,以实现与服务器的通信。这样就可以在CocosCreator中使用protobuf来实现登录功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值