近代诗欣赏【白鹭引擎】

小案例-近代诗欣赏：

案例分析：

需要哪些准备：

1. 一张背景图，一张人物头像（一首音乐）；
2. 一首《…》文本诗；
3. Bitmap：背景图，人物头像；
4. Textfield：加载文本；
5. ScrollView：滚动的组件；
6. Tween动画：人物头像旋转。

一、完成诗歌欣赏项目：

1. 创建一个游戏项目;

2. 修改

删除 createGameScene 里面多余的代码，删除之后是下面的样式：

private createGameScene() {
	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; 
}

3. 替换默认的背景图片：

1. 在本地准备一张背景图（最好是竖形）；
   
2. 注意：资源添加之后，上方会有是否保存的提示，我们选择【关闭】，然后 【ctrl / command + S】 手动保持即可。
3. 修改代码，重新编译

let sky = this.createBitmapByName("newbg_jpg");

4. 加载头像：

1. 拖动头像图片资源 preload 组里；
2. 自己定义一个 Bitmap 来放到舞台显示该头像；

// 定义一个 
bitmap let portrait = new egret.Bitmap();
// 加载图片纹理 
portrait.texture = RES.getRes('ygz_jpg'); 
// 添加到显示列表 
this.addChild(portrait); 

3. 设置图片的属性；

// 设置头像的宽高 
portrait.width = stageW * 0.5; 
portrait.height = stageH * 0.5;  
// 设置锚点的方式来实现水平居中 
portrait.anchorOffsetX = portrait.width * 0.5; 
portrait.anchorOffsetY = portrait.height * 0.5;  
portrait.x = stageW * 0.5; 
portrait.y = portrait.height * 0.5;  
// 如果它的锚点在原点 0，0 的位置，设置水平居中 
//portrait.x = stageW * 0.5 - portrait.width * 0.5;  
// 设置遮罩 
var circle: egret.Shape = new egret.Shape(); 
// 绘制一个圆 
circle.graphics.beginFill(0xff0000); 
circle.graphics.drawCircle(stageW * 0.5, portrait.height * 0.5, portrait.width * 0.5); circle.graphics.endFill(); 
this.addChild(circle);  
// 设置圆形遮罩，让头像变成圆形图片 
portrait.mask = circle;

5. 定义文本并添加内容，设置属性：

/***诗文***/ 
var text: egret.TextField = new egret.TextField();  

// 直接添加到显示列表中 
this.addChild(text);  

//设置内容 
text.text = `....`;  
        
// 设置文本的宽度是屏幕的宽度 
text.width = stageW;  

// 设置文本的背景色 
text.background = true; 
text.backgroundColor = 0x1EBEB;  

//设置文本的位置，距离头像底部 10 
text.y = portrait.height + 10;  

//设置字体颜色 
text.textColor = 0x313131;  

//设置文本的高度（文本内容上下留 10）
text.height = text.height + 20;  

//设置文本居中（水平，垂直） 
text.textAlign = egret.HorizontalAlign.CENTER; text.verticalAlign = egret.VerticalAlign.MIDDLE;

6. 设置显示可滚动：

1. 声明滚动视图；

/***************滚动视图***************/ 
// 定义一个滚动视图
var scroll: egret.ScrollView = new egret.ScrollView(); 
// 添加到显示列表 
this.addChild(scroll); 
// 设置可滚动范围 
scroll.width = stageW; 
scroll.height = stageH;

2. 声明滚动容器；

// 定义一个容器 
var content: egret.Sprite = new egret.Sprite(); 
// 设置容器可以滚动 
scroll.setContent(content);

3. 添加头像和文本到容器中；

// 添加头像和文本到容器中 
content.addChild(portrait); 
content.addChild(text);

4. 注意：
   需要把遮罩也添加到 content 可滚动视图上，否则会出现遮罩不动的情况。

content.addChild(circle);

7. 添加缓动动画：

/***************头像滚动***************/ 
var change = () => { 
// 默认 portrait 旋转角度为 0  
portrait.rotation = 0; 
// 使用 Tween 动画库来激活 
portrait egret.Tween.get(portrait).to({
     rotation: 360 
	}, 10000).call(change, this);
} 
// 调用 change 函数 
change();

8. 添加背景音乐

添加背景音乐，在资源加入到工程文件 default.res.json 以后：

/***************背景音乐***************/ 
var player = RES.getRes("zxmzf_mp3"); 
player.play();