该文详细介绍了如何在EgretWing环境中构建一个项目，包括删除默认代码，设置背景图片，添加头像纹理图片，调整图片大小和位置，使用锚点居中，设置圆形遮罩，创建可滚动的文本内容，以及添加背景音乐和实现头像旋转的缓动动画。
首先打开我们的编译器，EgretWing,新建一个Egret项目。
新建好后如下图：
主要文件夹介绍
libs:包类文件夹
resource：资源文件夹
src：编写代码文件夹
template：前端文件夹
代码编写
1 打开src中Main.ts文件找到createGameScene()方法，这个方法是创建场景界面方法
2 它代码中删除掉不需要的代码（这是系统自带的显示代码没什么用），只留下下图部分（这是背景图的设置，还有背景图的宽和高）：
开始编写近代史案例
createGameScene()方法中编写
添加纹理图片（头像）
/**
* 创建场景界面
* Create scene interface
*/
protected createGameScene(): void {
let sky = this.createBitmapByName("bg_jpg");
this.addChild(sky);
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;
sky.width = stageW;
sky.height = stageH;
// 定义一个纹理 （头像）
let port: egret.Bitmap = new egret.Bitmap();
//加载图片纹理（头像）
port.texture = RES.getRes('touxiang_jpg');
//加载到列表中
this.addChild(port);
}
设置图片的宽和高
/**
* 创建场景界面
* Create scene interface
*/
protected createGameScene(): void {
let sky = this.createBitmapByName("bg_jpg");
this.addChild(sky);
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;
sky.width = stageW;
sky.height = stageH;
// 定义一个纹理 （头像）
let port: egret.Bitmap = new egret.Bitmap();
//加载图片纹理（头像）
port.texture = RES.getRes('touxiang_jpg');
//加载到列表中
this.addChild(port);
//设置头像的宽高
port.width = stageW / 2;
port.height = stageH /2;
//设置头像的宽高
port.width = stageW / 2;
port.height = stageH /2;
//设置锚点的方式来实现水平居中
//锚点也是一个点，是你的整个图片，缩放也好，位移也好，甚至位置也好的一个基点
//X点
port.anchorOffsetX = port.width /2;
//Y点
port.anchorOffsetY = port.height / 2;
//高的一半
port.x = stageW / 2;
// 图片的宽度的一半
port.y = port.height /2;
}
注意看：这个图片的位置已变。
设置图片的遮罩层
/**
* 创建场景界面
* Create scene interface
*/
protected createGameScene(): void {
let sky = this.createBitmapByName("bg_jpg");
this.addChild(sky);
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;
sky.width = stageW;
sky.height = stageH;
// 定义一个纹理 （头像）
let port: egret.Bitmap = new egret.Bitmap();
//加载图片纹理（头像）
port.texture = RES.getRes('touxiang_jpg');
//加载到列表中
this.addChild(port);
//设置头像的宽高
port.width = stageW / 2;
port.height = stageH /2;
//设置头像的宽高
port.width = stageW / 2;
port.height = stageH /2;
//设置锚点的方式来实现水平居中
//锚点也是一个点，是你的整个图片，缩放也好，位移也好，甚至位置也好的一个基点
//X点
port.anchorOffsetX = port.width /2;
//Y点
port.anchorOffsetY = port.height / 2;
//高的一半
port.x = stageW / 2;
// 图片的宽度的一半
port.y = port.height /2;
//设置遮罩
let circle: egret.Shape = new egret.Shape();
//绘制一个圆形来
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(stageW/2,port.height/2,port.width/2);
circle.graphics.endFill();
//设置原型遮罩，让头像变成圆形图片
port.mask =circle;
}
定义文本并添加内容，设置属性
....
//设置遮罩
let circle: egret.Shape = new egret.Shape();
//绘制一个圆形来
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(stageW/2,port.height/2,port.width/2);
circle.graphics.endFill();
//设置原型遮罩，让头像变成圆形图片
port.mask =circle;
//定义文本
let text: egret.TextField = new egret.TextField();
//直接添加到列表中
this.addChild(text);
//设置内容
text.text = "《乡愁》 余乡中 \n \n小时候\n \n乡愁是一枚小小的邮票\n \n我在这头\n \n母亲在那头\n ...";
//设置文本的宽度是屏幕（舞台）的宽度
text.width = stageW;
//设置文本的颜色
text.background = true;
text.backgroundColor = 0xe8fff5;
//设置文本的位置，距离头像底部 10
text.y = port.height+10;
//设置文本颜色
text.backgroundColor = 0x199fc2;
//设置文本的高度（文本内容上下留10）
text.height = text.height +10
//文本 居中 （水平/垂直）
text.textAlign = egret.HorizontalAlign.CENTER;
text.verticalAlign = egret.VerticalAlign.MIDDLE;
...
设置显示内容可滚动
声明滚动视图
声明滚动容器
修改头像和文本，让其加载到content可滚动容器中去
/**
* 创建场景界面
* Create scene interface
*/
protected createGameScene(): void {
let sky = this.createBitmapByName("bg_jpg");
this.addChild(sky);
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;
sky.width = stageW;
sky.height = stageH;
//定义滚动视图
let scroll: egret.ScrollView = new egret.ScrollView();
this.addChild(scroll);
//设置可滚动范围
scroll.width = stageW;
scroll.height = stageH;
let content1 :egret.Sprite = new egret.Sprite();
scroll.setContent(content1);
...
注：之前的代码添加在本页面的方法(this.addChild())需要修改添加到文本方法（content1.addChild()）中，其中将头像添加到文本中 是因为这里不添加会出现显示BUG
//# 将头像添加到文本中 是因为这里不添加会出现显示BUG
content1.addChild(circle);
//# 加载到文本列表中
content1.addChild(port);
//# 设置内容 这时的手机上可以进行对文本滚动了
text.text = "《乡愁》 余乡中 \n \n小时候\n \n乡愁是一枚小小的邮票\n \n我在这头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n";
完整代码：
/**
* 创建场景界面
* Create scene interface
*/
protected createGameScene(): void {
let sky = this.createBitmapByName("bg_jpg");
this.addChild(sky);
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;
sky.width = stageW;
sky.height = stageH;
//定义滚动视图
let scroll: egret.ScrollView = new egret.ScrollView();
this.addChild(scroll);
//设置可滚动范围
scroll.width = stageW;
scroll.height = stageH;
let content1 :egret.Sprite = new egret.Sprite();
scroll.setContent(content1);
// 定义一个纹理 （头像）
let port: egret.Bitmap = new egret.Bitmap();
//加载图片纹理（头像）
port.texture = RES.getRes('touxiang_jpg');
//# 加载到文本列表中
content1.addChild(port);
//设置头像的宽高
port.width = stageW / 2;
port.height = stageH /2;
//设置头像的宽高
port.width = stageW / 2;
port.height = stageH /2;
//设置锚点的方式来实现水平居中
//锚点也是一个点，是你的整个图片，缩放也好，位移也好，甚至位置也好的一个基点
//X点
port.anchorOffsetX = port.width /2;
//Y点
port.anchorOffsetY = port.height / 2;
//高的一半
port.x = stageW / 2;
// 图片的宽度的一半
port.y = port.height /2;
//设置遮罩
let circle: egret.Shape = new egret.Shape();
//绘制一个圆形来
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(stageW/2,port.height/2,port.width/2);
circle.graphics.endFill();
//# 将头像添加到文本中 是因为这里不添加会出现显示BUG
content1.addChild(circle);
//设置原型遮罩，让头像变成圆形图片
port.mask =circle;
//定义文本
let text: egret.TextField = new egret.TextField();
//# 直接添加到文本列表中
content1.addChild(text);
//# 设置内容 这时的手机上可以进行对文本滚动了
text.text = "《乡愁》 余乡中 \n \n小时候\n \n乡愁是一枚小小的邮票\n \n我在这头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n \n母亲在那头\n";
//设置文本的宽度是屏幕（舞台）的宽度
text.width = stageW;
//设置文本的颜色
text.background = true;
text.backgroundColor = 0xe8fff5;
//设置文本的位置，距离头像底部 10
text.y = port.height+10;
//设置文本颜色
text.backgroundColor = 0x199fc2;
//设置文本的高度（文本内容上下留10）
text.height = text.height +10
//文本 居中 （水平/垂直）
text.textAlign = egret.HorizontalAlign.CENTER;
text.verticalAlign = egret.VerticalAlign.MIDDLE;
}
添加背景音乐
将音乐（MP3格式）添加到如下资源文件夹中
..
//添加背景音乐
let sound = RES.getRes('xc_mp3');
sound.play();
}
添加缓动动画，实现头像不停旋转
//省略代码
...
//添加背景音乐
let sound = RES.getRes('xc_mp3');
sound.play();
//使头像转动起来
var change = ()=>{
//默认 port （头像变量名） 旋转角度为0
port.rotation = 0;
// 使用动画来激活头像
egret.Tween.get(port).to({
//旋转360度
rotation : 360
//设置5秒的旋转时间 call 回调函数 一直旋转这个方法
},5000).call(change);
}
//调用这个方法
change();
1150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
