吾知网

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 2267|回复: 1

as3用FlashBuilder/FlashDevelop开发html5环境配置

[复制链接]
发表于 2017-12-21 15:17:35 | 显示全部楼层 |阅读模式
第一步: LayaAir Engine下载
    1.1 引擎下载
     使用LayaAirIDE开发的话,下载LayaAirIDE会自带引擎包。若开发者使用第三方工具开发,那需要先下载引擎。在官网首页或者开发者中心菜单中,拥有引擎下载的链接入口,打开链接后会出现引擎各个版本的下载列表,每一个版本均提供AS3、TS、JS三种开发语言,选择对应的开发语言包,直接点击下载即可(http://ldc.layabox.com/index.php ... =lists&catid=28)。
    1.2 引擎包目录结构介绍     
由于本篇介绍的是FlashDevelop开发环境,所以我们下载AS3版本的引擎包。当下载解压后,可以看到AS3版本的目录结构如下图所示:
  • “LayaAirFlash”目录内是发布Flash的版本才需要的引擎库代码。
  • “libs”引擎代码目录,LayaAir引擎库代码处于该目录的src子目录中。
  • “laya.js.exe”为Windows系统下的AS3代码编译器,用于将AS3代码编译为JS代码。
  • “LayaJSMac”为苹果MAC系统下的AS3代码编译器,用于将AS3代码编译为JS代码。
  • “playerglobal.swc”用于替换AS3原生编译器SDK,去除原生API语法提示,增加引擎API提示。


第二步 安装Google Chrome浏览器
    当执行AS3代码编译后,默认调用Chrome浏览器打开运行项目,需要安装此浏览器进行项目调试。已安装的可跳过本步骤。

第三步 配置FlashDevelop中的AS3编译环境
    步骤一:打开FlashDevelop,在菜单栏里找到“宏”并打开“编辑宏”面板。
    步骤二:首先点击“添加”增加一条宏命令,然后选中刚刚增加的宏命令,在“Label”栏修改宏命令的菜单名称为“LayaCompiler”,以及在“Shortcut”栏设置宏菜单快捷键为“Alt+F5”(快捷键设置仅作参考,不要和别的快捷键冲突)。

    步骤三:在“Entries”栏的右侧位置点击“...”操作区域,打开“字符串集合编辑器”窗口。
    步骤四:在字符串集合编辑器面板里,输入宏指令:
1
2
SaveAllModified
RunProcessCaptured|D:\LayaBox\LayaAirAs3_1.5.5\as\laya.js.exe;"$(ProjectPath)";iflash=false;

(Tips:“D:\LayaBox\LayaAirAs3_1.5.5\as\laya.js.exe”应为laya.js.exe的实际所在路径。MAC系统下为“D:\LayaBox\LayaAirAs3_1.5.5\as\LayaJSMac”)

    步骤五:点击”确定“完成宏指令配置后,已经完成宏命令“LayaJsCompiler”全部配置,并即时生效,直接点击“关闭”按钮即可。

至此,建立项目前的LayaAir引擎下载,浏览器下载,FlashDevelop环境下的AS3编译器配置就结束了。

第四步 配置Flash Builder中的AS3编译环境
    步骤一:打开Flash Builder,找到“外部工具 配置”并打开该配置窗口。

    步骤二:在配置窗口内,右键选中“程序”,点击“新建”,打开新建配置窗口。
    步骤三:首先修改外部程序名称为“LayaCompiler”。然后点击“浏览文件系统”找到“laya.js.exe”或者直接复制”laya.js.exe”的路径粘贴到“位置”输入栏。最后在“自变量”栏里输入"${project_loc}\.actionScriptProperties;iflash=false",点击”应用“即可完成本次配置。
(Tips:“D:\LayaBox\LayaAirAs3_1.5.5\as\laya.js.exe”应为laya.js.exe的实际所在路径。MAC系统下为“D:\LayaBox\LayaAirAs3_1.5.5\as\LayaJSMac”)

至此,建立项目前的LayaAir引擎下载,浏览器下载,Flash Builder环境下的AS3编译器配置就结束了。

 楼主| 发表于 2017-12-21 15:36:49 | 显示全部楼层
第三节 新建项目
步骤一: 打开Flash Builder,在菜单栏里点“文件”,然后选中“新建”点击 “ActionScript项目”,进入创建项目的窗口。
步骤二: 在“项目名”输入栏里输入项目名称,然后在“文件夹”输入栏里输入项目存储目录或者是点击“浏览”选择存储的目录。最后点击“下一步”进入引擎编译与引擎库配置的“构建路径”窗口。
步骤三: 在构建路径的配置窗口里,点击“添加SWC”,按下图步骤的操作,将引擎包里的“playerglobal.swc”添加进来。然后删除系统自带的编译SDK,仅保留“playerglobal.swc”即可。最后点击“源路径”配置引擎库。
步骤四:在“源路径”面板点击“添加文件夹”,输入“引擎库所在目录”或点击“浏览”选择“引擎库所在目录”,然后点击确定和完成,即完成了引擎库的导入。

第四节 显示文字“Hello Layabox”
步骤一:菜单栏 “文件” 中选中 “新建”,单击“ActionScript类”,打开新建类文件的窗口。
步骤二:在名称栏输入HelloLayabox,点击 “完成”新建一个ActionScript类
步骤三:将HelloLayabox.as设置为默认应用程序后,然后将一个“Hello Layabox”的文本添加到舞台,代码如下:
package
{
    import laya.display.Text;
    /**
     * ...
     * @author Charley
     */
    public class HelloLayabox
    {         
        public function HelloLayabox()
        {
            //创建舞台,默认背景色是黑色的
            Laya.init(600, 300);
            var txt:Text         = new Text();
                        
             //设置文本内容
            txt.text         = "Hello Layabox";


            //设置文本颜色为白色,默认颜色为黑色
            txt.color        = '#ffffff';
           
             //将文本内容添加到舞台
            Laya.stage.addChild(txt);      
        }
         
    }  
}
步骤四:完成代码编写后,使用之前配置的编译器,开始编译,编译完成后会自动启动chrome运行代码。

运行结果如下图所示:

步骤五:“Hello Layabox”虽然显示出来了,但是太简陋了,下面我们就让“Hello Layabox”变的好看一些,代码如下:
package
{
    import laya.display.Text;
    /**
     * ...
     * @author Charley
     */
    public class HelloLayabox
    {         
        public function HelloLayabox()
        {
            //创建舞台
            Laya.init(600, 300);//舞台默认背景色是黑色的
            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(60,100);
            
             //设置舞台背景色
            Laya.stage.bgColor  = '#23238E';


            //将文本内容添加到舞台
            Laya.stage.addChild(txt);
            
        }
         
    }

}
运行结果如下图所示:
至此,如果您能跟随本篇入门教程,完成上图的显示,恭喜您入门成功,我们已经完成了第一个采用AS3语言开发的HTML5程序,也说明了LayaAir的开发环境配置无误。更多LayaAir引擎开发的API使用方法,请前往官网Layabox开发者中心查看在线API与在线DEMO。
在线API文档地址:
在线DEMO文档地址:

第五节 WebGL开启
LayaAir引擎默认采用Canvas模式渲染,如果想要启动WebGL模式,需要在初始化舞台的时候的进行设置,例如:
默认Canvas模式渲染的写法为
Laya.init(600, 500);
WebGL模式渲染的AS3写法为
Laya.init(600, 500,WebGL);
开启WebGL模式后,在支持WebGL的环境下,会优先采用WebGL 3D模式渲染,在不支持WebGL的环境下,会自动切换为Canvas 2D渲染模式。
启用WebGL模式的LayaAir引擎,在FPS性能方面可以媲美APP,也超出Canvas模式很多,但编译出的JS文件体积也会变大,所以开发者可以依据项目自身情况自行取舍WebGL模式是否开启。
写在最后
在本篇文章中仅对引擎部分进行了入门级指引,请大家保持对Layabox开发者中心的关注,我们更多教程会逐步的丰富起来,及时更新到开发者中心。感谢大家的信赖,在开发过程中如有任何问题,请及时通过问答社区反馈给我们,我们将尽最大的努力快速处理和解决。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|吾知网 ( 粤ICP备13013563号-1 )

GMT+8, 2019-10-24 09:32 , Processed in 1.109375 second(s), 7 queries , Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表