近代诗欣赏【白鹭引擎】

朴灿烈づ我的快乐病毒、 2022-08-28 00:40 95阅读 0赞

### 文章目录 ###

*  小案例-近代诗欣赏：
 *  案例分析：
 *   *   *  需要哪些准备：
     *  一、完成诗歌欣赏项目：
     *   *  1. 创建一个游戏项目;
         *  2. 修改
         *  3. 替换默认的背景图片：
         *  4. 加载头像：
         *  5. 定义文本并添加内容，设置属性：
         *  6. 设置显示可滚动：
         *  7. 添加缓动动画：
         *  8. 添加背景音乐

# 小案例-近代诗欣赏： #

# 案例分析： #

### 需要哪些准备： ###

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.  在本地准备一张背景图（最好是竖形）；  
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-D5Y-w5aW9_size_20_color_FFFFFF_t_70_g_se_x_16]
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);

1.  设置图片的属性；

// 设置头像的宽高 
    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;

1.  声明滚动容器；

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

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

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

1.  注意：  
    需要把遮罩也添加到 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();

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-D5Y-w5aW9_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/5ca300ebe1654fd39437792681582978.png