1、运行名为【HelloWorld】的一个项目
egret run HelloWorld
2、编译名为【HelloWorld】的一个项目
egret build HelloWorld
create project_name [--type core|eui]
egret create_lib lib_name
egret create_app app_name -f h5_game_path -t template_path
egret build [project_name] [-e] [--target wxgame|bricks|ios|android]
egret publish [project_name] [--version [version]] [--target wxgame|bricks|ios|android]
egret run [project_name] [--port 3000]
egret clean [project_name]
egret upgrade [project_name] --egretversion [target version]
egret help [command]
<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 扩展。
类 | 描述 |
---|---|
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 继承自 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
/**
* 下面的示例使用 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);
}
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( );
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 删除。