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 另一篇笔记 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值