LayaAir引擎学习日志7----AS3语言中FlashDevelop中显示文本Hello Layabox(AS3)

来源:互联网 发布:电脑没有网络连接 编辑:程序博客网 时间:2024/06/05 17:28

本文采用AS3语言在FlashDevelop环境中显示文本Hello Layabox,学完本篇即为完成LayaAir引擎的第一个程序。在学习本篇前务必保证先阅读完:FlashDevelop开发环境配置

第一步 新建FlashDevelop项目

    步骤一:打开FlashDevelop,在菜单栏找到“项目”然后点击“新建项目”。

3eda9f18c6450b837c37568181235d8e_b.jpg

    步骤二:选择”AS3 Project“类型,输入项目名称,选择项目存放位置后,点击“确定”完成新建项目的操作。

3eda9f18c6450b837c37568181235d8e_b.jpg

  


第二步 配置项目

2.1 引用引擎库       

    步骤一:在项目面板点击“项目属性”按钮,打开项目属性配置窗口。

3eda9f18c6450b837c37568181235d8e_b.jpg

    步骤二:点击“添加类路径”选择LayaAir引擎所在目录,然后点击“确定”完成LayaAir引擎库的引用。

blob.png

 

2.2 将swc添加到库

    在下载引擎的时候,引擎包解压缩后,我们可以看到3个swc文件,分别为根目录的“playerglobal.swc”和LayaAirFlash目录下的“LayaAirFlash.swc”、子目录下的“glsl2agal.swc”。playerglobal.swc是用于在开发过程中使用LayaAir引擎API提示。另两个swc文件是发布Flash版本用到的。如果不考虑发布Flash版本,“LayaAirFlash.swc”、“glsl2agal.swc”也可以不添加到库。


    步骤一:在新建的项目studyLayaAirAS3下添加一个libs文件夹。


3eda9f18c6450b837c37568181235d8e_b.jpg

    步骤二:将下载解压后的LayaAir引擎根目录下“playerglobal.swc”通过鼠标点中拖拽的方式,拖到刚创建的libs文件夹下。或者是复制粘贴的方式,粘贴到libs文件夹下。然后右键点中swc文件,再左键点击“添加到库”,分别添加到库中。

blob.png

 


第三步 显示文字“Hello Layabox”

3.1 新建类文件HelloLayabox

    步骤一:右键“src目录”添加一个新类。(提示:添加的类文件必须在src目录下,或者通过“添加类路径”引用进来,否则是无法被编译的)

8236f19ffdb17c55d5afaea4d4542890_b.jpg

    步骤二:将类名称设置为HelloLayabox

3eda9f18c6450b837c37568181235d8e_b.jpg

3.2 在H5页面上显示“Hello Layabox”

    步骤一:将HelloLayabox.as设为文档类。

3eda9f18c6450b837c37568181235d8e_b.jpg


    步骤二:将一个“Hello Layabox”的文本添加到舞台,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package {
 import laya.display.Text;
  
 /** @author Charley */
  
 public class HelloLayabox {
  public function HelloLayabox() {
   //创建舞台,默认背景色是黑色的
   Laya.init(600300);
   var txt:Text = new Text();
    
   //设置文本内容
   txt.text = "Hello Layabox";
    
   //设置文本颜色为白色,默认颜色为黑色
   txt.color = '#ffffff';
    
   //将文本内容添加到舞台 
   Laya.stage.addChild(txt);
  }
 }
}


    步骤三:完成代码编写后,使用之前定义的编译快捷键(Alt+F5),把AS3代码编译成HTML5。

3eda9f18c6450b837c37568181235d8e_b.jpg

        编译完成后,编译器自动启动chrome查看显示结果。

3eda9f18c6450b837c37568181235d8e_b.jpg

    步骤四:如上图所示,“Hello Layabox”已经显示出来了,但是比较简陋,下面我们就让“Hello Layabox”变的更好看些,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package {
 import laya.display.Text;
  
 /**
  * @author Charley
  */
 public class HelloLayabox {
  public function HelloLayabox() {
   //创建舞台
   Laya.init(600300);//舞台默认背景色是黑色的
   var txt:Text = new Text();
   txt.text = "Hello Layabox";
    
   //设置文本颜色
   txt.color = '#FF0000';
   //设置文本字体大小,单位是像素
   txt.fontSize = 66;
    
   //设置字体描边
   txt.stroke = 5;  //描边为5像素
   txt.strokeColor = '#FFFFFF';
    
   //设置为粗体
   txt.bold = true;
    
   //设置文本的显示起点位置X,Y
   txt.pos(60100);
    
   //设置舞台背景色
   Laya.stage.bgColor = '#23238E';
    
   //将文本内容添加到舞台
   Laya.stage.addChild(txt);
   
  }
 }
}


    运行结果如下图所示:

3eda9f18c6450b837c37568181235d8e_b.jpg

    至此,如果您能跟随本篇入门教程,完成上图的显示,恭喜您入门成功,我们已经完成了第一个采用AS3语言开发的HTML5程序,也说明了LayaAir的开发环境配置无误。


不懂的可以加我的QQ群: 172719352(LayaAir引擎交流群 )欢迎你的到来哦,看了博文给点脚印呗,谢谢啦~~

0 0
原创粉丝点击