egret 学习笔记
原创
准备
- EgretLauncher
- EgretLauncher 中安装引擎
- EgretLauncher 中安装 Egret Compiler
基础说明
各文件夹说明
- .wing：包括 Egret 项目的任务配置文件和启动配置文件。
- wingProperties.json：Egret Wing 项目配置文件。
- bin-debug：项目调试时，所产生的文件存放于此目录。
- libs：库文件，包括 Egret 核心库和其他扩展库存放于此目录。
- resource：项目资源文件存放于此目录。
- scripts：项目构建和发布时需要用到的脚本文件存放在此目录。
- src：项目代码文件存放于此目录。
- template：项目模板文件存放于此目录。
- egretProperties.json：项目的配置文件。具体的配置说明可以参考：EgretProperties说明
- index.html：入口文件。具体的配置说明可以参考：入口文件说明
- manifest.json：网页清单文件。
- tsconfig.json：typescript 编译配置文件。
命令行
1、运行名为【HelloWorld】的一个项目
egret run HelloWorld
2、编译名为【HelloWorld】的一个项目
egret build HelloWorld- create 创建新项目
create project_name [--type core|eui] - create_lib 创建新第三方库项目
egret create_lib lib_name - create_app 从h5游戏生成app
egret create_app app_name -f h5_game_path -t template_path - build 构建指定项目
egret build [project_name] [-e] [--target wxgame|bricks|ios|android] - publish 发布项目
egret publish [project_name] [--version [version]] [--target wxgame|bricks|ios|android] - run 启动本地服务器,并在默认浏览器中运行指定项目
egret run [project_name] [--port 3000] - clean 重置项目中的引擎代码
egret clean [project_name] - upgrade 升级项目代码
egret upgrade [project_name] --egretversion [target version] - make 修改引擎源码后，编译引擎源码。如果没有特殊需求，不建议普通用户使用
- info 获得Egret信息，如当前Egret版本，以及安装路径
- help 了解各个 command 的细节
egret help [command]
入口文件 index.html
<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
data-entry-class="Main"
data-orientation="auto"
data-scale-mode="showAll"
data-frame-rate="30"
data-content-width="640"
data-content-height="1136"
data-multi-fingered="2"
data-show-fps="false" data-show-log="false"
data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
</div>开发说明
显示对象
视觉图像，全部基于 DisplayObject 扩展。
属性
- alpha：透明度
- width：宽度
- height：高度
- rotation：旋转角度
- scaleX：横向缩放
- scaleY：纵向缩放
- skewX：横向斜切
- skewY：纵向斜切
- visible：是否可见
- x：X轴坐标值
- y：Y轴坐标值
- anchorOffsetX：对象绝对锚点X
- anchorOffsetY：对象绝对锚点Y
核心显示类
类 | 描述 |
|---|---|
DisplayObject | 显示对象基类，所有显示对象均继承自此类 |
Bitmap | 位图，用来显示图片 |
Shape | 用来显示矢量图，可以使用其中的方法绘制矢量图形 |
TextField | 文本类 |
BitmapText | 位图文本类 |
DisplayObjectContainer | 显示对象容器接口，所有显示对象容器均实现此接口 |
Sprite | 带有矢量绘制功能的显示容器 |
Stage | 舞台类 |
扩展
class MyGrid extends egret.Shape{
public constructor(){
super();
this.drawGrid();
}
private drawGrid(){
this.graphics.beginFill( 0x0000ff );
this.graphics.drawRect( 0, 0, 50,50 );
this.graphics.endFill();
this.graphics.beginFill( 0x0000ff );
this.graphics.drawRect( 50, 50, 50, 50);
this.graphics.endFill();
this.graphics.beginFill( 0xff0000 );
this.graphics.drawRect( 50, 0, 50,50 );
this.graphics.endFill();
this.graphics.beginFill( 0xff0000 );
this.graphics.drawRect( 0, 50, 50,50 );
this.graphics.endFill();
}
}显示容器
继承自 DisplayObjectContainer > DisplayObject。
常用操作
- 添加、删除子对象
- 访问子对象
- 检测子对象
- 设置叠放次序
常用容器 Sprite
Sprite 继承自 DisplayObjectContainer，添加了 Graphics 功能。
自定义容器
class GridSprite extends egret.Sprite
{
public constructor()
{
super();
this.drawGrid();
}
private drawGrid()
{
this.graphics.beginFill( 0x0000ff );
this.graphics.drawRect( 0, 0, 50,50 );
this.graphics.endFill();
this.graphics.beginFill( 0x0000ff );
this.graphics.drawRect( 50, 50, 50, 50);
this.graphics.endFill();
this.graphics.beginFill( 0xff0000 );
this.graphics.drawRect( 50, 0, 50,50 );
this.graphics.endFill();
this.graphics.beginFill( 0xff0000 );
this.graphics.drawRect( 0, 50, 50,50 );
this.graphics.endFill();
}
}变换操作
- 锚点:
anchorOffsetX、anchorOffsetY - 位置和平移:
x、y - 尺寸:
width、height、scaleX、scaleY - 旋转:
rotation - 斜切:
skewX、skewX
显示列表
/* 建立显示对象 */
var spr:egret.Sprite = new egret.Sprite();
spr.graphics.beginFill( 0x00ff00 );
spr.graphics.drawRect(0, 0, 100, 100);
spr.graphics.endFill();
/* 添加显示对象 */
this.addChild( spr );
/* 删除显示对象 */
this.removeChild( spr );删除显示对象时，其必须有父级
if( spr.parent ) {
spr.parent.removeChild( spr );
}管理子对象
- 获取子对象的数量:
容器.numChildren - 添加到指定位置:
addChildAt() - 删除指定子对象:
removeChild(obj) - 删除指定深度:
removeChildAt(num) - 删除所有子对象:
removeChildren() - 交换不同深度对象:
swapChildren(A, B)、swapChildrenAt(numA, numB) - 访问子对象:
getChildAt(num)、getChildByName(obj.name) - 重设子对象深度:
setChildIndex(obj, num) - 重设子对象深度(更高效):
zIndex, 需要容器包含sortableChildren = true
矢量绘图
矩形
class GraphicsTest extends egret.DisplayObjectContainer
{
public constructor()
{
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
}
private onAddToStage(event:egret.Event)
{
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 );
}
}圆形
drawCircle( x:number, y:number, radius:number): void直线
moveTo( x:number, y:number): void
lineTo( x:number, y:number): void曲线
curveTo( x1:number, y1:number, x2:number, y2:number ): void圆弧
drawArc( x:number, y:number, radius:number, startAngle:number, endAngle:number, anticlockwise:boolean ):void清空绘图
shp.graphics.clear();遮罩
形状遮罩
shp.mask = new egret.Rectangle(20,20,30,50);对象遮罩
mySprite.mask = maskSprite;碰撞
矩形碰撞
var isHit:boolean = shp.hitTestPoint( x: number, y:number );像素碰撞
var isHit:boolean = shp.hitTestPoint( x: number, y:number, true:boolean );矩形碰撞检测，是判断显示对象的包围盒是否与一点相交；而像素碰撞检测，是判断显示对象的图案（非透明区域）是否与一点相交。
文本
var label:egret.TextField = new egret.TextField();
label.text = "This is a text!";
this.addChild( label );输入文本
var txInput:egret.TextField = new egret.TextField();
txInput.type = egret.TextFieldType.INPUT;
txInput.inputType = egret.TextFieldInputType.TEXT; // PASSWORD | TEL
txInput.setFocus();位图文本
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
this.once( egret.Event.ADDED_TO_STAGE, this.onAddToStage, this );
}
private onAddToStage( evt:egret.Event ) {
RES.getResByUrl( "resource/cartoon-font.fnt", this.onLoadComplete, this, RES.ResourceItem.TYPE_FONT );
}
private _bitmapText:egret.BitmapText;
private onLoadComplete( font:egret.BitmapFont ):void {
this._bitmapText = new egret.BitmapText();
this._bitmapText.font = font;
this._bitmapText.x = 50;
this._bitmapText.y = 300;
this.addChild( this._bitmapText );
}
}事件
控制类
class SampleDate extends egret.DisplayObjectContainer
{
public constructor()
{
super();
//创建一个男朋友
var boy:Boy = new Boy();
boy.name = "男朋友";
//创建一个女朋友
var girl:Girl = new Girl();
girl.name = "女朋友";
//注册侦听器
boy.addEventListener(DateEvent.DATE,girl.getDate,girl);
//男朋友发送要求
boy.order();
//约会邀请完成后，移除侦听器
boy.removeEventListener(DateEvent.DATE,girl.getDate,girl);
}
}发起类
class Boy extends egret.Sprite
{
public constructor()
{
super();
}
public order()
{
//生成约会事件对象
var daterEvent:DateEvent = new DateEvent(DateEvent.DATE);
//添加对应的约会信息
daterEvent._year = 2014;
daterEvent._month = 8;
daterEvent._date = 2;
daterEvent._where = "肯德基";
daterEvent._todo = "共进晚餐";
//发送要求事件
this.dispatchEvent(daterEvent);
}
}监听类
class Girl extends egret.Sprite
{
public constructor()
{
super();
}
public getDate(evt:DateEvent)
{
console.log("得到了" + evt.target.name + "的邀请！" );
console.log("会在" + evt._year + "年" + evt._month + "月" + evt._date + "日，在"+ evt._where+ evt._todo);
}
}事件定义
class DateEvent extends egret.Event
{
public static DATE:string = "约会";
public _year:number = 0;
public _month:number = 0;
public _date:number = 0;
public _where:string = "";
public _todo:string = "";
public constructor(type:string, bubbles:boolean=false, cancelable:boolean=false)
{
super(type,bubbles,cancelable);
}
}监听器
listenerName(evt:Event):void {...}
事件发送者.addEventListener(事件类型, 侦听器, this);
事件发送者.removeEventListener(事件类型, 侦听器, this);
事件发送者.hasEventListener(事件类型);
显示对象实例.touchEnabled = true;.hasEventListener(事件类型);事件优先级
public addEventListener(type:string, listener:Function, thisObject:any, useCapture:boolean = false, priority:number = 0)触摸事件 egret.TouchEvent
- TOUCH_BEGIN：当用户第一次触摸启用触摸的设备时（例如，用手指触摸配有触摸屏的移动电话或平板电脑）触发
- TOUCH_CANCEL：由于某个事件取消了触摸时触发
- TOUCH_END：当用户移除与启用触摸的设备的接触时（例如，将手指从配有触摸屏的移动电话或平板电脑上抬起）触发
- TOUCH_MOVE：当用户触碰设备并移动时进行触发，而且会连续触发，直到接触点被删除
- TOUCH_TAP：当用户在触摸设备上与开始触摸的同一 DisplayObject 实例上抬起接触点时触发（相当与点击事件）
网络
发送请求
/**
* 下面的示例使用 egret.HttpRequest 类进行网络通信。
*/
class Main extends egret.DisplayObjectContainer {
private statusGetLabel:egret.TextField;
private statusPostLabel:egret.TextField;
public constructor() {
super();
this.sendGetRequest();
this.sendPostRequest();
}
private sendGetRequest():void {
var statusGetLabel = new egret.TextField();
this.statusGetLabel = statusGetLabel;
statusGetLabel.size = 18;
statusGetLabel.text = "GET request being sent to httpbin.org";
this.addChild(statusGetLabel);
statusGetLabel.x = 50;
statusGetLabel.y = 40;
var params = "?p1=getP1&p2=getP2";
var request = new egret.HttpRequest();
request.responseType = egret.HttpResponseType.TEXT;
request.open("php/get_test.php"+params,egret.HttpMethod.GET);
request.send();
request.addEventListener(egret.Event.COMPLETE,this.onGetComplete,this);
request.addEventListener(egret.IOErrorEvent.IO_ERROR,this.onGetIOError,this);
request.addEventListener(egret.ProgressEvent.PROGRESS,this.onGetProgress,this);
}
private onGetComplete(event:egret.Event):void {
var request = <egret.HttpRequest>event.currentTarget;
console.log("get data : ",request.response);
var responseLabel = new egret.TextField();
responseLabel.size = 18;
responseLabel.text = "GET response: \n" + request.response.substring(0, 50) + "...";
this.addChild(responseLabel);
responseLabel.x = 50;
responseLabel.y = 70;
this.statusGetLabel.text = "Get GET response!";
}
private onGetIOError(event:egret.IOErrorEvent):void {
console.log("get error : " + event);
}
private onGetProgress(event:egret.ProgressEvent):void {
console.log("get progress : " + Math.floor(100*event.bytesLoaded/event.bytesTotal) + "%");
}
private sendPostRequest() {
var statusPostLabel = new egret.TextField();
this.statusPostLabel = statusPostLabel;
this.addChild(statusPostLabel);
statusPostLabel.size = 18;
statusPostLabel.x = 300;
statusPostLabel.y = 40;
statusPostLabel.text = "Sending POST request to httpbin.org";
var params = "p1=postP1&p2=postP2";
var request = new egret.HttpRequest();
request.responseType = egret.HttpResponseType.TEXT;
request.open("php/post_test.php",egret.HttpMethod.POST);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(params);
request.addEventListener(egret.Event.COMPLETE,this.onPostComplete,this);
request.addEventListener(egret.IOErrorEvent.IO_ERROR,this.onPostIOError,this);
request.addEventListener(egret.ProgressEvent.PROGRESS,this.onPostProgress,this);
}
private onPostComplete(event:egret.Event) {
var request = <egret.HttpRequest>event.currentTarget;
console.log("post data : ",request.response);
var responseLabel = new egret.TextField();
responseLabel.size = 18;
responseLabel.text = "POST response:\n" + request.response.substring(0, 50) + "...";
this.addChild(responseLabel);
responseLabel.x = 300;
responseLabel.y = 70;
this.statusPostLabel.text = "Get POST response!";
}
private onPostIOError(event:egret.IOErrorEvent):void {
console.log("post error : " + event);
}
private onPostProgress(event:egret.ProgressEvent):void {
console.log("post progress : " + Math.floor(100*event.bytesLoaded/event.bytesTotal) + "%");
}
}请求位图
var imgLoader:egret.ImageLoader = new egret.ImageLoader;
imgLoader.once( egret.Event.COMPLETE, this.imgLoadHandler, this );
imgLoader.load( "resource/egret.png" ); imgLoadHandler( evt:egret.Event ):void{
let loader:egret.ImageLoader = evt.currentTarget;
let bmd:egret.BitmapData = loader.data;
//创建纹理对象
let texture = new egret.Texture();
texture.bitmapData = bmd;
let bmp:egret.Bitmap = new egret.Bitmap(texture);
this.addChild(bmp);
}- 服务器设置访问权限。
- 可以通过尝试修改 imgLoader.crossOrigin = 'anonymous' 来以匿名的方式访问。不过在使用 texture.toDataURL 时会报跨域问题。
- Webgl 渲染下，暂不支持跨域图片处理。
加载文本
var url = "resource/config/description.json";
var request:egret.HttpRequest = new egret.HttpRequest();
var respHandler = function( evt:egret.Event ):void{
switch ( evt.type ){
case egret.Event.COMPLETE:
var request:egret.HttpRequest = evt.currentTarget;
console.log( "respHandler:n", request.response );
break;
case egret.IOErrorEvent.IO_ERROR:
console.log( "respHandler io error" );
break;
}
}
var progressHandler = function( evt:egret.ProgressEvent ):void{
console.log( "progress:", evt.bytesLoaded, evt.bytesTotal );
}
request.once( egret.Event.COMPLETE, respHandler, null);
request.once( egret.IOErrorEvent.IO_ERROR, respHandler, null);
request.once( egret.ProgressEvent.PROGRESS, progressHandler, null);
request.open( url, egret.HttpMethod.GET );
request.send( );加载二进制
var url = "resource/assets/egret_icon.png";
var request:egret.HttpRequest = new egret.HttpRequest();
request.responseType = egret.HttpResponseType.ARRAY_BUFFER;
var respHandler = function( evt:egret.Event ):void {
switch ( evt.type ){
case egret.Event.COMPLETE:
var request:egret.HttpRequest = evt.currentTarget;
var ab:ArrayBuffer = request.response;
console.log( "respHandler:n", ab.byteLength );
break;
case egret.IOErrorEvent.IO_ERROR:
console.log( "respHandler io error" );
break;
}
}
request.once( egret.Event.COMPLETE, respHandler, null);
request.once( egret.IOErrorEvent.IO_ERROR, respHandler, null);
request.open( url, egret.HttpMethod.GET );
request.send( );时间控制 Timer
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("计时结束");
}
}心跳
class startTickerTest extends egret.DisplayObjectContainer {
public constructor() {
super();
this.once(egret.Event.ADDED_TO_STAGE,this.onLoad,this);
}
private star:egret.Bitmap;
private speed:number = 0.05;
private time:number = 0;
private onLoad(event:egret.Event) {
var star:egret.Bitmap = new egret.Bitmap(RES.getRes("star"));
this.addChild(star);
this.star = star;
this.time = egret.getTimer();
egret.startTick(this.moveStar,this);
}
private moveStar(timeStamp:number):boolean {
var now = timeStamp;
var time = this.time;
var pass = now - time;
console.log("moveStar: ",(1000 / pass).toFixed(5));
this.time = now;
return false;
}
}帧事件
class startTickerTest extends egret.DisplayObjectContainer {
public constructor() {
super();
this.once(egret.Event.ADDED_TO_STAGE,this.onLoad,this);
}
private timeOnEnterFrame:number = 0;
private onLoad(event:egret.Event) {
this.addEventListener(egret.Event.ENTER_FRAME,this.onEnterFrame,this);
this.timeOnEnterFrame = egret.getTimer();
}
private onEnterFrame(e:egret.Event){
var now = egret.getTimer();
var time = this.timeOnEnterFrame;
var pass = now - time;
console.log("onEnterFrame: ", (1000 / pass).toFixed(5));
this.timeOnEnterFrame = egret.getTimer();
}
}多媒体
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读