初学LayaAir引擎遇到的第一个坑

黄永康

本帖的地址：https://bbs.sunofbeaches.com/thread-6306-1-1.html
版权声明：本文为作者所有，未经作者允许不得转载--->温馨提示：请加上原文地址！

前几天领导跟我们说我们项目打算出一个H5版的游戏，让我们先了解一下LayaAir引擎和AS3语法（我们这项目已经做了一个完整的手游客户端，采有cocos2d引擎加 lua写的），然后我就跟着LayaBox官网一步一步学习，没想到刚开始学就遇到坑了。

第一步：用LayaAirIDE创建AS3项目，这里照着教程来基本没问题，创建完项目后我们开始编写我们的第一个HelloWorld程序；

第二步：编写第一个HelloWorld；找到 src/LayaSample.as 文件，写入如下代码

package {
import laya.webgl.WebGL;
import laya.display.Text;
import laya.display.Sprite;
public class LayaSample {
public function LayaSample() {
//初始化引擎默认背景色是黑色的
Laya.init(1136, 640,WebGL);
var text:Text = new Text();
//设置文本内容
text.text = "Hello Laya!";
//设置文本颜色为白色，默认颜色为黑色
text.color = "#ffffff";
//设置字体大小
text.fontSize = 30;
//将文本内容添加到舞台
Laya.stage.addChild(text);
}
}

复制代码

点击运行

得到如下运行结果：

我们的第一个HelloWorld已经完成了，我们只添加了一个Text控件，接下来我们再添加一个图片显示，首先我们先找一张要显示的图片，把它添加到如下目录：
TIM截图20180526170002.png

然后编写代码：

package {
import laya.webgl.WebGL;
import laya.display.Text;
import laya.display.Sprite;
public class LayaSample {
public function LayaSample() {
//初始化引擎默认背景色是黑色的
Laya.init(1136, 640,WebGL);
var text:Text = new Text();
//设置文本内容
text.text = "Hello Laya!";
//设置文本颜色为白色，默认颜色为黑色
text.color = "#ffffff";
//设置字体大小
text.fontSize = 30;
//将文本内容添加到舞台
Laya.stage.addChild(text);
showImg();
}
private function showImg():void{
//方法1：使用loadImage
var img:Sprite = new Sprite();
img.pos(200, 0);
Laya.stage.addChild(img);
img.loadImage("res/a.png")
}
}
}

复制代码

点击运行也是能显示出来的，
TIM截图20180526170553.png

但是当我用FlashDevelop 打开这个项目的时候，运行时发现图片没显示出来，（FlashDevelop开发环境配置在这里），FlashDevelop运行时是运行在谷歌浏览器的，我刚开始怀疑是谷歌浏览器的原因，但当我用LayaAirIDE TIM截图20180526171908.png

通过谷歌浏览器调试是是能显示的
这是用LayaAirIDE编译运行的截图
TIM截图20180526172011.png

然后下面是用FlashDevelop编译运行的截图
TIM截图20180526180942.png

我们可以通过对比上下两张结果图发现前者能正常运行是因为通过 --disable-web-security 这个命令标记，然后我按F12 查看浏览器控制台输出日志发现图片不能正确显示是报错了，
TIM截图20180526173033.png

通过万能的百度我们发现这是跨域访问错误的问题，看看浏览器地址我们发现是 file:// 开头的，而不是http:// 开头，访问的是本机的一个绝对地址，而图片在该helloworld程序的地址是相对的，所以我们没能显示出来。
怎么办呢？看前者的运行效果图我们就能找到解决方法了，我们发现前者的运行效果图有个黄色的警告 --disable-web-security ；
解决方法：
右键谷歌浏览器快捷方式 - 属性 -- 快捷方式 -- 目标；在后面追加 --allow-file-access-from-files --disable-web-security 就OK了。 TIM截图20180526174957.png