egret 白鹭笔记（2020）简单笔记

1. 目录结构

   • 核心文件夹 .src文件夹，所有项目的源代码都放在这个目录下。
   • Main.ts 为项目入口类，也称文档类。
   • egretProperties.json 是项目的配置文件
   • resource 目录是用来存放项目所需的所有资源
   • LoadingUI.ts 是加载过程中的辅助显示组件，用来显示加载进度
   • libs 目录下包含项目各模块所对应的所有类
   • 项目编译的文件存储到 bin-debug 目录下

2. 开启调试

   • 通过 egret run -a 命令来实时监听文件是否修改

 

1. 

   1.shape 可以用来绘制一些简单的图形，用它中graphics类中封装号的绘图方法
   
    // 1.定义一个矢量图
           var circle : egret.Shape = new egret.Shape();
           // 2.开始绘制图片，并设置填充颜色
           circle.graphics.beginFill(333333);
           // 3.开始绘制
           circle.graphics.drawCircle(100,200,100);
           // 4.结束绘制
           circle.graphics.endFill();
           // 5.把绘制的圆添加到页面上
           this.addChild(circle);
   
   //可以用 this.removeChild(circle) 来删除元素

    

2. 显示列表与容器类
   • 所有的容器全部继承于 DisplayObjectContainer 类，类中封装了显示列表的常用功能
   • 功能：添加删除子对象，检测子对象，设置叠放次序等
   • 添加显示对象到显示列表：this.addChild(shpe)
   • 删除显示对象：this.removeChild(shape)
3. 事件与用户交互
   • 事件类是承载事件信息以及一些事件处理方法的对象，每个事件都有关联的事件类型
   • 常见的事件对象有：

     1.触摸事件 egret.TouchEvent
     2.声音事件 egret.SoundEvent
     3.定时事件 egret.TimeEvent
     4.文本事件 egret.textEvent
     5.网络加载状态事件 egret.HTTPStatusEvent
     6.I/O错误事件 egret.IOEvent

   • 侦听某个时间用 addEventListener(事件类.事件类型,事件处理函数，事件处理函数的this对象) 方法来注册事件侦听器,移除监听：removeEventListener

   • // 指定此对象是否接收触摸或其他用户输入。不设置 touchEnabled 为true ，显示列表上的任何 DisplayObject 实例都不会接收触摸事件或其他用户输入事件。
     circle.touchEnabled = true;

      

4. 处理资源

   • 项目所需的图片。需要在resource/default.res.json中配置

5. 设置文本

       let text:egret.TextField = new egret.TextField();
       // 水平居中
       text.textAlign = egret.HorizontalAlign.CENTER;
       // 垂直居中
       text.verticalAlign = egret.VerticalAlign.MIDDLE;
   
       // 如果想给文本设置背景色，要先开启
       text.background = true
   
       // egret 能用 模板字符串的！太感人了！！！

    

6. 设置图片属性：

   // 设置宽高
   obj.width,obj.height
   
   //设置居中
   //1. 计算出来
   obj.x = stageW/2 - obj.width/2
   
   //2. 设置锚点的方式
   obj.anchorOffsetX = obj.width/2
   obj.x = stageW/2
   
   //3. 绘制遮罩
   var zhezhao : egret.Shape = new egret.Shape();
   zhezhao .graphics.beginFill(0xff0000);
   zhezhao .graphics.drawCircle(stageW/2,obj.height/2,obj.width/2);
   zhezhao .graphics.endFill();
   obj.mask = zhezhao
   
   //4. 让图片旋转
   
   var change = () =>{
       // 设置obj默认的旋转角度
       obj.rotation = 0;
       // 使用 Tween 动画库来激活 obj
       egret.Tween.get(obj).to({
           rotation:360
       },5000).call(change,this);
       // call()让他反复调用自己
   }
   
   change()

7. 设置滚动容器：

   // 定义个滚动视图
   var scroll:egret.ScrollView = new egret.ScrollView();
   // 设置可滚动范围
   scroll.width = stageW;
   scroll.height = stageH;
   
   this.addChild(scroll)
   
   // 实例化一个容器
   var content:egret.Sprite = new egret.Sprite();
   // 设置容器可以滚动
   scroll.setContent(content)
   
   // 要game库

    

8. 增加音频：

   var audio = RES.getRes('文件名')
   audio.play()

9. 屏幕适配：创建项目时就可以选择屏幕，注意舞台尺寸！具体方式还不知道

10. 容器：

    1.在 EUI 提供的容器中， Group是最强大的，它的呈现只取决于内部的显示对象
    2.Group 操作内部对象的方法和 Sprite 基本一致，只是增加了两个方法 getElementAt() 获取子对象 和
    numElements() 字类个数
    3.如果内容超出了容器的尺寸，默认是全部显示的，可以设置 'scrollEnabled=true' 来隐藏超出部分
    
    // 滚动控制容器
    
    1.滚动控制容器 eui.Scroller
    
    

     

11. 按钮：

    1.按钮控件对应的类是 'eui.button'
    
    2.按钮可以设置禁用，禁用的按钮会进入 disabled 视图状态，且不再相应交互
    
    btn.enabled = false;

     

https://blog.csdn.net/qq_42044542/article/details/108766493 另一篇笔记