Layabox引擎开发H5打地鼠游戏(一)

第一节 构造打地鼠界面

  1. 创建项目并导入资源;
  2. 制作打地鼠界面;
  3. 加载资源并显示界面;

代码及相关资源下载

创建项目并导入资源

创建项目
创建项目
本项目没有用到下图文件夹原有的组件,将图片全部删除
导入图片


这里写图片描述

制作打地鼠界面

切换到ui编辑界面
这里写图片描述
这里写图片描述
这里写图片描述
将背景拉到面板,选择水平居中和垂直居中
这里写图片描述
接下来要添加组件,为了避免进行了错误操作,建议把背景锁着
这里写图片描述
把老鼠拖动到洞里
这里写图片描述
对被揍的地鼠设置var为hit(如果图片叠在一起难以选中,可以先选择隐藏其他图片再进行操作)
这里写图片描述
对常态地鼠进行相似操作 命名var为normal
这里写图片描述
将三个组件设置为一个容器box
这里写图片描述

加载资源并显示界面

导出代码(?)
这里写图片描述
导出生成的东西:
这里写图片描述
这里写图片描述
默认512*512 超过大小图片会显示不打包 宽高可以自行修改
这里写图片描述


注意:两个目录可以修改 不要随意修改 路径要和index.html同级 不然会读取不到资源
这里写图片描述

发布出来的资源要和index.html同级,否则会读取不到

这里写图片描述


LayaUISample.js

var LayaUISample = (function(){
        (function(){
              //初始化引擎
              Laya.init(800,600);
              //设置stage颜色
              Laya.stage.bgColor = "#ffcccc";
              //加载资源
              Laya.loader.load("res/atlas/comp.json",Laya.Handler.create(this,onLoaded),null,Laya.Loader.ATLAS);
        })();
        function onLoaded(){
            var game=new Game();
            Laya.stage.addChild(game);
        }
})();

Game.js

var Game=(function(_super){
   function Game(){
       Game.super(this);
   }
   //注册类
   Laya.class(Game,"Game",_super);
   return Game;
})(ui.GameUI);

按照创建目录、制作界面、导入资源的方法,在LayaUISample.js运用了comp.json,但本人实践的时候并没有生成json,存在一个comp.atlas,将它的路径名改了然后运行。
这里写图片描述
成功显示

Layabox引擎开发H5打地鼠游戏(二)地鼠的显示、停留、消失、受击

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页