微信小游戏开发

 private onAddToStage(event:egret.Event) {
        RES.getResByUrl('/resource/assets/bg.jpg',this.onComplete,this,RES.ResourceItem.TYPE_IMAGE);
    }
    private onComplete(event:any):void {
        var img: egret.Texture = <egret.Texture>event;
        var bitmap: egret.Bitmap = new egret.Bitmap(img);
        this.addChild(bitmap);
    }

11.绘制图

1）加载完绘制

private onAddToStage(event:egret.Event) {
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onGroupComplete, this);
        RES.loadConfig("resource/default.res.json", "resource/");
        RES.loadGroup("preload");
    }
    private onGroupComplete()
    {
        var img:egret.Bitmap = new egret.Bitmap();
        img.texture = RES.getRes("bgImage");
        this.addChild(img);
    }

2）九宫格中心延伸图

        var img:egret.Bitmap = new egret.Bitmap();
        img.texture = RES.getRes("box");
        img.width *= 2;
        this.addChild(img);
        var img2:egret.Bitmap = new egret.Bitmap();
        img2.texture = RES.getRes("box");
        var rect:egret.Rectangle = new egret.Rectangle(30,31,40,41);
        img2.scale9Grid =rect;
        img2.width *= 2;
        img2.y = 150;
        this.addChild(img2);

30：区域1 的宽度值。

31：区域1 的高度值

40：区域2 的宽度值

41：区域4 的高度值

Warning #1018: 9宫格设置错误

3）图片的平铺

平铺在容器中：

         var img:egret.Bitmap = new egret.Bitmap();
        img.texture = RES.getRes("box");
        img.fillMode = egret.BitmapFillMode.REPEAT;//平铺属性
        img.width *= 2;
        img.height *= 3;
        this.addChild(img);

4）纹理集组合多图片

将大量的图片拼合为一张图片从而减少网络请求，原先加载数次的图片资源现在加载一次即可

使用：http://edn.egret.com/cn/docs/page/135

5）截屏

http://edn.egret.com/cn/docs/page/500

12.绘图

0）清除绘图效果

shp.graphics.clear();

1）矩形

        var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill( 0xff0000, 1);
        shp.graphics.drawRect( 0, 0, 100, 200 );
        shp.graphics.endFill();
        this.addChild( shp );

2）带边框矩形

        var shp:egret.Shape = new egret.Shape();
        shp.x = 20;
        shp.y = 20;
        shp.graphics.lineStyle( 10, 0x00ff00 );//边框厚度  颜色
        shp.graphics.beginFill( 0xff0000, 1); //矩形填充色  透明度
        shp.graphics.drawRect( 0, 0, 100, 200 );
        shp.graphics.endFill();
        this.addChild( shp );

3）边框圆形

        var shp:egret.Shape = new egret.Shape();
        shp.x = 100;
        shp.y = 100;
        shp.graphics.lineStyle( 10, 0x00ff00 );
        shp.graphics.beginFill( 0xff0000, 1);
        shp.graphics.drawCircle( 0, 0, 50 ); //圆
        shp.graphics.endFill();
        this.addChild( shp );

4）线

        var shp:egret.Shape = new egret.Shape();
        shp.graphics.lineStyle( 2, 0x00ff00 );
        shp.graphics.moveTo( 10,10 );//起点
        shp.graphics.lineTo( 100, 20 );//终点
        shp.graphics.endFill();
        this.addChild( shp );

5）收尾相连线

var shp:egret.Shape = new egret.Shape();
shp.graphics.lineStyle( 2, 0x00ff00 );
shp.graphics.moveTo( 68, 84 );
shp.graphics.lineTo( 167, 76 );
shp.graphics.lineTo( 221, 118 );
shp.graphics.lineTo( 290, 162 );
shp.graphics.lineTo( 297, 228 );
shp.graphics.lineTo( 412, 250 );
shp.graphics.lineTo( 443, 174 );
shp.graphics.endFill();
this.addChild( shp );

6）绘制曲线

下图是一张二次贝塞尔曲线的结构图。

        var shp:egret.Shape = new egret.Shape();
        shp.graphics.lineStyle( 2, 0x00ff00 );
        shp.graphics.moveTo( 50, 50);//起点
        shp.graphics.curveTo( 100,100, 200,50);//控制点  终点
        shp.graphics.endFill();
        this.addChild( shp );

7）圆弧

drawArc( x:number,
 y:number, 
radius:number, 
startAngle:number,
 endAngle:number,
 anticlockwise:boolean ):void

圆心在 (x, y) 位置，半径为 radius 。后面的参数表示根据 anticlockwise ：如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

其中 startAngle 和 endAngle 都使用的是弧度表示。startAngle 的起始点是从 x 轴方向开始计算的。

下面的例子绘制了一个从 0 到 π 的圆弧：

        var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill( 0x1122cc );
        shp.graphics.drawArc(200,200,100,0,Math.PI,true);
        shp.graphics.endFill();
        this.addChild( shp );

http://edn.egret.com/cn/index.php/apidoc/egret243/name/global.Math ：数学相关

http://edn.egret.com/cn/docs/page/674 ：高级画图形

http://edn.egret.com/cn/docs/page/496 ：多图形绘制

8）文本

在文本中添加多个换行符\n，让刚才的文本从横向排列变为纵向排列

var label:egret.TextField = new egret.TextField(); 
label.text = "这是一个文本"; 
this.addChild( label );

//自身的宽度与高度
console.log( label.width + "+" + label.height);

label.width = 70;
label.height = 70;
label.textColor = 0xff0000;

//字体 楷体
label.fontFamily = "KaiTi";

文本创建后，默认在容器的左上角

对文本的布局分为横向和纵向两种。

横向布局可以设置文字居左，水平居中，居右。

纵向布局可以设置文字居顶，垂直居中，居底。

横向设置：

label.textAlign = egret.HorizontalAlign.RIGHT;
label.textAlign = egret.HorizontalAlign.CENTER;

纵向设置：

label.verticalAlign = egret.VerticalAlign.BOTTOM;
label.verticalAlign = egret.VerticalAlign.MIDDLE;

9）文本描边-加粗-斜体

        //设置描边属性
        label.strokeColor = 0x0000ff;
        label.stroke = 2;

加粗和斜体是：

        //设置粗体与斜体
        label.bold = true;
        label.italic = true;

10）文本多样式-超链接

http://edn.egret.com/cn/docs/page/146：多样式

http://edn.egret.com/cn/docs/page/149 ：超链接

http://edn.egret.com/cn/docs/page/292 ：可输入文本

13.滤镜

比如将游戏卡片变成灰色（死亡了）等：http://edn.egret.com/cn/docs/page/947

14.`Timer`倒计时

只需要关心两个属性，三个方法和两个事件即可：

两个属性分别是 delay 与 repeatCount ,两个属性分别表示每次间隔的时间（以毫秒为单位）和执行的次数（如果次数为0，则表示不停的执行）。

关心的三个方法为 start 、 reset 和 stop。从方法的字面意思中不难理解，三个方法的作用分别是开始计时，重新计时和暂停计时。

最后需要关心的两个事件分别为 TimerEvent.TIMER 和 TimerEvent.TIMER_COMPLETE 。这两个事件分别在计时过程中触发和计时结束后触发。

class TimerDemo extends egret.DisplayObjectContainer
{
    public constructor()
    {
        super();
        //创建一个计时器对象
        var timer:egret.Timer = new egret.Timer(500,5);
        //注册事件侦听器
        timer.addEventListener(egret.TimerEvent.TIMER,this.timerFunc,this);
        timer.addEventListener(egret.TimerEvent.TIMER_COMPLETE,this.timerComFunc,this);
        //开始计时
        timer.start();
    }
    private timerFunc()
    {
        console.log("计时");
    }
    private timerComFunc()
    {
        console.log("计时结束");
    }
}

日志为：

16.循环调用事件

实现的方法有两种，注册侦听 ENTER_FRAME 事件和调用startTick全局函数。监听 ENTER_FRAME 将会按照帧频进行回调，而startTick一般以 60 帧回调。

补充：getTimer()用以获取全局的 Egert 框架启动时间毫秒数。（console.log(egret.getTimer() 345)）

这里有一点需要注意的是，Egret 需要从浏览器中获取当前的时间，而浏览器从用户的系统中获取时间，
当用户手动修改本地时间时可能会导致我们获取到的时间不准确。当用户有意欺骗浏览器时可能会造成
我们的程序出现问题。这在任意 JavaScript 前端程序中都有可能遇到。当我们希望程序更加稳固的
时候加入合适的服务端后台验证是有必要的，是可以被考虑的。要权衡开发的成本，评估用户修改本
地时间造成的影响，是可以被考虑的。

简单帧动画：

http://edn.egret.com/cn/docs/page/875 ：实现其他方式

只管羊毛薅

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
微信小游戏开发

目录知识收集： 1.资源文件导入 2.this.addChild(circle2) 3.层级关系 4.多次添加显示对象到显示列表 5.删除操作的注意点 6.容器深度相关1) 容器现容纳个数：2) 插队：3) 消除4）交换深度5）设置深度（自带容...
复制链接

扫一扫

专栏目录