初步学习Egret心得

在所有的项目都做完的情况下，自己自学了一天的白鹭引擎，特对一天的收获和问题总结如下：
首先是白鹭引擎的开发工具，白鹭引擎有十几款不同功能的开发工具，而我们在使用白鹭引擎最常用的就是Egret Wing 这个白鹭引擎的可视化编辑工具也是IDE工具。白鹭引擎是一款基于H5游戏开发的引擎，使用的语言是typescript（英文比较low也不知道有没有写错 =.= 尴尬）反正就是JavaScript的超集。它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。使用Egret Wing可以很方便的编辑UI界面，需要注意的是在使用EUI编辑界面的时候再使用的时候必需和界面里面的ID名称相同否则会出现报错。
白鹭引擎和cocos的一些不同点：
自己学习开发的这个项目是一个答题类型的游戏。所有对于题库的读取白鹭引擎和cocos就有一定的区别。在cocos中如果使用的是webStrom开发工具则需要使用一个load text文件的API。具体代码如下。

cc.loader.loadTxt("res/NBA.csv",function(err,data){
if(err){
//cc.log(err);
return
            }else {
//cc.log(data)
var gameData = data.split("\n");
for(var i= 1;i<gameData.length-1;i++){
var arr = gameData[i].split(",");
                    gameDataob[arr[0]] = gameDataob[arr[0]] ||{};
                    gameDataob[arr[0]] = {
                        id:arr[0],
                        question:arr[1],
                        answer1:arr[2],
                        answer2:arr[3],
                        answer3:arr[4],
                        answer4:arr[5],
                        rightAnswer:arr[6],
                    }
                }
                that.updateQuestion();
                that.setButtonVisable();
                that.rigtAnswerArr = [];
for(var index in gameDataob){
var ob = gameDataob[index];
                    that.rigtAnswerArr.push(ob.rightAnswer);
                    cc.log(ob.rightAnswer,"+++++++++++++++++++")
                }
            }
        });

由代码可以看到的是直接使用加载cc.loader.loadText()这个方法，第一个参数就是你需要加载的文本文件的资源路径，第二个参数就是一个匿名函数，在函数里面我们可以对需要加载的文件数据进行一些出来。在这里我是给数据进行裁剪，裁剪成我需要的数据样式。而在白鹭引擎中就与这个方式不同。代码如下：

var text:string = [] = RES.getRes("NBA_txt");
var gamedata = text.split("\n");
for(var i:number=1;i<gamedata.length-1;i++){
var arr = gamedata[i].split(",");
this.gameData[arr[0]] = this.gameData[arr[0]] ||{};
this.gameData[arr[0]] = {
                    id:arr[0],
                    question:arr[1],
                    answer1:arr[2],
                    answer2:arr[3],
                    answer3:arr[4],
                    answer4:arr[5],
                    rightAnswer:arr[6]
                }
            }

在白鹭引擎中首先需要注意的一点就是必须先对资源进行预加载。当然在cocos中也是需要的，但是相比之下白鹭的资源加载更加的简单方便。可以对需要的加载的资源进行分组管理。在加载的时候直接加载资源组就可以了。在加载资源组的时候回在加载的json文件中给所有的文件名称已key的形式保存起来。每次需要使用的时候直接使用key的值就行。当然在加载的时候回根据文件的类型给加载的文件解析成相应的格式。比如图片格式。在加载的时候默认选的的加载类型为image。所以如果需要加载文本文件的话直接给文件的后缀名改为txt格式。然而会在加载的时候回默认会选择这个文本文件的加载类型为text。var text:string = [] = RES.getRes("NBA_txt"); 可以看到的是加载text格式的文件返回回来的是一string类型的数据。在白鹭中使用的开发语言是TypeScript，所以不像JavaScript那样对数据类型的要求不是那么的严格。定义一个数组可以存任意数据类型的数据。在TypeScript中必需保证数组的数据类型和需要存储的数据类型一致才能正常的使用。（这样是我个人的理解，也没有看到过官方的解释）因为在对数据的处理的时候需要用到字符串的裁剪的API。split 所有我就直接定义成一个字符数组。而对于数据的处理是和JavaScript的处理方法一致。

2：在开发的过程中因为使用的是白鹭的EUI 编辑的界面，因为开发需要我是在一个按钮组件上又添加了一个文本框组件，每次点击按钮都会更改按钮的状态。但是在调试的过程中因为文本框在按钮的上面给他点击给覆盖了。在开发遇到这个问题的时候想到是Coco中点击事件的穿透效果。但是白鹭引擎中的点击事件与Cocos的点击事件存在一定的差异。后面查询了文档之后才发现，在白鹭中可以使用一个API关闭每个组件的点击事件。this.label1.touchEnabled =false; 加入这句话就会关闭文本框的点击事件。就解决了穿透的问题。

3白鹭引擎中的进度条：
在白鹭引擎中可以使用EUI 直接加入进度条组件。如果是使用项目默认的资源，这样的话如果使用过EUI 的话就非常的简单了。而在游戏的开发中很多的时候我们都需要使用自己的图片资源作为进度条的图片，初步学习Egret心得在加入了进度条组件之后选中设计师模式会出现这样一个界面。有一个皮肤的选项卡。当然里面的皮肤是自己制作的。如果不会的话也没关系可以直接创建一个新的EUI项目给里面默认的进度条皮肤拷过来。在进度条皮肤里面就可以更改图片样式初步学习Egret心得其中1表示的是进度条的底层背景图片，2表示的是进度条的背景图片。只有更改这两个资源。就可以是默认的进度条资源更换成自己想要的。进度条的实现的具体代码如下：

 this.initProgressBar();        
this.btn_play.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onclickPlay,this);
        }
private initProgressBar(): void {
//this.pBar = new eui.ProgressBar();
this.pBar.maximum = 100;//设置进度条的最大值
this.pBar.minimum = 0;//设置进度条的最小值
this.pBar.width = 352;
this.pBar.height = 22;
this.addChild(this.pBar);
this.pBar.value = 0;//设置进度条的初始值
//用timer来模拟加载进度
this.gameTime= new egret.Timer(10,0);
this.gameTime.start();
this.gameTime.addEventListener(egret.TimerEvent.TIMER,this.timerHandler,this);
//timer.stop();
        }
private timerHandler(): void {
this.pBar.value += 1;
            console.log(this.pBar.value,"数据的数据")
if(this.pBar.value >= 100) { 
this.btn_play.visible = true;
this.gameTime.stop();
this.pBar.visible = false;                
            }
        }

这里使用的是time来模拟进度条效果。先定义一个time，设置好时间的间隔，然后给时间添加时间事件。this.pBar = new eui.ProgressBar(); 如果这句话不写，要想进度条能正常使用的前提就是在exml皮肤文件中存在pBar这个进度条组件，而且名称必需一致。

本人也是白鹭的小白，以上就是自己在练习白鹭开发中遇到的一些问题的总结，如果什么问题请见谅也请提出宝贵意见，大家共同学习。

未完待续。。。。。。。。。。。。。。。。。

秒客网

初步学习Egret心得

相关文章