前几天领导跟我们说我们项目打算出一个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控件,接下来我们再添加一个图片显示,首先我们先找一张要显示的图片,把它添加到如下目录:
然后编写代码:
- 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")
- }
- }
- }
复制代码 点击运行也是能显示出来的,
但是当我用FlashDevelop 打开这个项目的时候,运行时发现图片没显示出来,(FlashDevelop开发环境配置在这里),FlashDevelop运行时是运行在谷歌浏览器的,我刚开始怀疑是谷歌浏览器的原因,但当我用LayaAirIDE
通过谷歌浏览器调试是是能显示的
这是用LayaAirIDE编译运行的截图
然后下面是用FlashDevelop编译运行的截图
我们可以通过对比上下两张结果图发现前者能正常运行是因为通过 --disable-web-security 这个命令标记,然后我按F12 查看浏览器控制台输出日志发现图片不能正确显示是报错了,
通过万能的百度我们发现这是 跨域访问错误的问题 ,看看浏览器地址我们发现是 file:// 开头的,而不是http:// 开头,访问的是本机的一个绝对地址,而图片在该helloworld程序的地址是相对的,所以我们没能显示出来。
怎么办呢?看前者的运行效果图我们就能找到解决方法了,我们发现前者的运行效果图 有个黄色的警告 --disable-web-security ;
解决方法:
右键谷歌浏览器快捷方式 - 属性 -- 快捷方式 -- 目标 ;在后面追加 --allow-file-access-from-files --disable-web-security 就OK了。
图片就显示出来了
|