精华内容
参与话题
问答
  • Layabox 2 使用其它编辑器开发layabox2d

    千次阅读 2019-08-14 23:11:27
    由于我习惯了使用webstorm进行代码的编写,所以尝试使用webstorm进行环境搭建一下layabox。 此开发环境是我通过webpack和layabox来实现的一个示例搭建。官方也有引擎代码下载,但是下载下来以后没有查到相应的使用...

    由于我习惯了使用webstorm进行代码的编写,所以尝试使用webstorm进行环境搭建一下layabox。
    此开发环境是我通过webpack和layabox来实现的一个示例搭建。官方也有引擎代码下载,但是下载下来以后没有查到相应的使用教程,无法进行配置。接着,我就通过创建一个新项目,将新项目文件夹内的bin文件夹转移过来,来实现的效果。
    这种实现方式有可能不是很好,但是绝对可用,而且还有代码提示,webstorm作为专业js开发工具,如果你是使用js学习layabox,可以尝试使用我的写的工具尝试。

    接下来先做准备工作:
    首先这个环境是我在我之前通过webpack配置的es6开发环境的基础上修改出来的。js-cli地址:
    https://github.com/johnson2heng/js-cli
    这个webpack的环境优势在于开发环境阶段只要代码保存,页面会自动刷新。支持css引用小文件打包,支持代码压缩等一些小功能。

    然后,你需要创建一个空的layabox2d项目,然后将libs(代码提示文件夹)复制到个人项目的根目录,这样环境将会获得代码提示功能。
    接着,我们将bin文件夹内有用的文件复制出来,分别是一个bin/libs文件夹和index.html,index.js。layabox生成的bin里面的index.html里面自动引入了index.js文件,而index.js文件内,又引入了四个文件,分别是三个layabox引擎的源码和一个js/bundle.js文件,这个bundle.js文件将作为我们的个人业务的混淆的代码文件(通过个人的源码生成这个文件)。

    大体思路是这样的,如果需要测试,可以直接去github上拉代码:
    https://github.com/johnson2heng/layabox-cli

    展开全文
  • 本人使用的是layabox ide 2.1版本。 首先创建一个空项目会发现左侧默认生成一些文件夹以及一些文件。 .laya 文件夹中存放一些项目开发中到发布需要的文件以及一些配置信息。 比如文件夹内的compile.js中33行就是...

    本人使用的是layabox ide 2.1版本。
    首先创建一个空项目会发现左侧默认生成一些文件夹以及一些文件。
    在这里插入图片描述

    .laya 文件夹中存放一些项目开发中到发布需要的文件以及一些配置信息。

    比如文件夹内的compile.js中33行就是设置项目文件的主入口。

    bin文件夹内是项目输出的文件,在编辑器上运行时,其实就是运行的bin文件夹下的html文件。

    laya文件夹存放的是项目的资源文件
    laya文件夹下的assets文件夹内是项目自带的一套ui图片
    在创建场景后,laya文件夹下会生成的pages文件夹,用于存放使用编辑器创建的场景和页面。

    libs文件夹内存放的是编辑器代码提示文件。

    src内存放项目逻辑文件,内部创建一个空项目会默认生成两个文件:Main.js和GameConfig.js
    Main.js是入口文件,用于初始化一些场景内容
    GameConfig.js是配置文件,里面的配置用于初始化场景,用于Main.js

    jsconfig.json为整个项目的编译配置,用于ts编译,源码貌似是用ts开发。、

    test1.laya文件为项目的入口,可以通过此文件识别是否为一个laya项目,test1为项目的名称。

    src文件

    我们可以先看一下Main.js文件的内容,其实官方已经注释的很明白了,我这里又详细了一下贴了出来

    import GameConfig from "./GameConfig";
    class Main {
    	constructor() {
    		//根据IDE设置初始化引擎	当前如果支持webgl则通过webgl来创建项目	
    		if (window["Laya3D"]) Laya3D.init(GameConfig.width, GameConfig.height);
    		else Laya.init(GameConfig.width, GameConfig.height, Laya["WebGL"]);
    		Laya["Physics"] && Laya["Physics"].enable(); //是否开启物理
    		Laya["DebugPanel"] && Laya["DebugPanel"].enable(); //是否开启调试框
    		Laya.stage.scaleMode = GameConfig.scaleMode; //场景适配模式
    		Laya.stage.screenMode = GameConfig.screenMode; //场景横竖屏
    		Laya.stage.alignV = GameConfig.alignV; //垂直对齐方式
    		Laya.stage.alignH = GameConfig.alignH; //水平对齐方式
    		//兼容微信不支持加载scene后缀场景
    		Laya.URL.exportSceneToJson = GameConfig.exportSceneToJson;
    
    		//打开调试面板(通过IDE设置调试模式,或者url地址增加debug=true参数,均可打开调试面板)
    		if (GameConfig.debug || Laya.Utils.getQueryString("debug") == "true") Laya.enableDebugPanel();
    		if (GameConfig.physicsDebug && Laya["PhysicsDebugDraw"]) Laya["PhysicsDebugDraw"].enable();
    		if (GameConfig.stat) Laya.Stat.show();
    		Laya.alertGlobalError = true;
    
    		//激活资源版本控制,version.json由IDE发布功能自动生成,如果没有也不影响后续流程
    		Laya.ResourceVersion.enable("version.json", Laya.Handler.create(this, this.onVersionLoaded), Laya.ResourceVersion.FILENAME_VERSION);
    	}
    
    	onVersionLoaded() {
    		//激活大小图映射,加载小图的时候,如果发现小图在大图合集里面,则优先加载大图合集,而不是小图
    		Laya.AtlasInfoManager.enable("fileconfig.json", Laya.Handler.create(this, this.onConfigLoaded));
    	}
    
    	onConfigLoaded() {
    		//加载IDE指定的场景
    		GameConfig.startScene && Laya.Scene.open(GameConfig.startScene);
    	}
    }
    //激活启动类
    new Main();
    
    

    可以看出,这个Main.js文件首先引入了GameConfig.js文件,然后通过引入的GameConfig.js文件内的配置进行初始化场景来添加数据。
    GameConfig.js文件我们无法直接修改,需要在编辑器内进行修改,我们可以通过进入‘编辑模式’后,点击F9来打开编辑框进行编辑。
    在这里插入图片描述
    打开项目设置,我们会发现当前的一些设置都是在设置场景的相关内容,比如初始场景,对应到Main.js里面的GameConfig.startScene && Laya.Scene.open(GameConfig.startScene); 即如果这里设置了,编辑的GameConfig.js的时候,将会在startScene 属性上生成目标场景名称。
    接下来,列一下主要配置设置

    设计宽高度,为当前场景设计时的宽度和高度。

    场景适配模式

    取值范围:
    “noscale” :不缩放;
    “exactfit” :全屏不等比缩放;
    “showall” :最小比例缩放;
    “noborder” :最大比例缩放;
    “full” :不缩放,stage的宽高等于屏幕宽高;
    “fixedwidth” :宽度不变,高度根据屏幕比缩放;
    “fixedheight” :高度不变,宽度根据屏幕比缩放;
    “fixedauto” :根据宽高比,自动选择使用fixedwidth或fixedheight;

    场景横竖屏

    取值范围:
    “none” :不更改屏幕
    “horizontal” :自动横屏
    “vertical” :自动竖屏

    垂直对齐方式

    取值范围:
    “top” :居顶部对齐;
    “middle” :居中对齐;
    “bottom” :居底部对齐;

    水平对齐方式

    取值范围:
    “left” :居左对齐;
    “center” :居中对齐;
    “right” :居右对齐;

    展开全文
  • LayaBox笔记原创(1)】LayaBox引入自定义第三方包 前言 首先说明一点博主写的原创文章,都是基于自己项目中使用到的,觉得实用的知识点进行分享 并不会解释过程中的原理,知识点解答之类的,博主希望每个...

    【LayaBox笔记原创(1)】LayaBox引入自定义第三方包

     

    前言

     首先说明一点博主写的原创文章,都是基于自己项目中使用到的,觉得实用的知识点进行分享

    并不会解释过程中的原理,知识点解答之类的,博主希望每个看到文章的人,自己按照步骤实现一遍

    慢慢掌握这些知识点,加上自己的理解,才能真正成为自己的知识,而不是作为一个参考文档,来学习理论知识。

    博主博客很丑,排版也不好,毕竟也有自己的工作,分享重于传达知识,不是做得很花里花哨宣传自己。

    以上,不爽的憋着,你也可以帮博主设计,万分感谢!

     

    代码

    1、创建Laya项目,选择ts语言

    2、编写Laya类,例如我们创建一个com.company.Person

     1 /**
     2 * 创建一个Person例子
     3 * @author wls
     4 * @date 2015-01-10
     5 */
     6 module com.company {
     7     export class Person {
     8         public name: string;        //公有属性
     9         private id: number;        //私有属性
    10         private _age: number;        //私有属性,用于getset访问器
    11         private static _sex: string;    //静态属性, 用于get访问器
    12 
    13         //带参数构造函数
    14         constructor(id: number) {
    15             this.id = id;
    16         }
    17 
    18         public get age(): number {
    19             return this._age;
    20         }
    21         public set age(value: number) {
    22             this._age = value;
    23         }
    24 
    25         public static get sex(): string {
    26             return this._sex;
    27         }
    28 
    29         public static set sex(value: string) {
    30             this._sex = value;
    31         }
    32 
    33         public get Id(): number {
    34             return this.id;
    35         }
    36     }
    37 }
    Person.ts

    3、保存、并编译,在bin目录下生成com.company.Person.jscom.company.Person.js.map

     1 /**
     2 * 创建一个Person例子
     3 * @author wls
     4 * @date 2015-01-10
     5 */
     6 var com;
     7 (function (com) {
     8     var company;
     9     (function (company) {
    10         var Person = /** @class */ (function () {
    11             //带参数构造函数
    12             function Person(id) {
    13                 this.id = id;
    14             }
    15             Object.defineProperty(Person.prototype, "age", {
    16                 get: function () {
    17                     return this._age;
    18                 },
    19                 set: function (value) {
    20                     this._age = value;
    21                 },
    22                 enumerable: true,
    23                 configurable: true
    24             });
    25             Object.defineProperty(Person, "sex", {
    26                 get: function () {
    27                     return this._sex;
    28                 },
    29                 set: function (value) {
    30                     this._sex = value;
    31                 },
    32                 enumerable: true,
    33                 configurable: true
    34             });
    35             Object.defineProperty(Person.prototype, "Id", {
    36                 get: function () {
    37                     return this.id;
    38                 },
    39                 enumerable: true,
    40                 configurable: true
    41             });
    42             return Person;
    43         }());
    44         company.Person = Person;
    45     })(company = com.company || (com.company = {}));
    46 })(com || (com = {}));
    47 //# sourceMappingURL=Person.js.map
    Person.js

    4、复制 Person.jsbin\libs\ 目录下,并删除bin\com.company.Person.js 及其目录

    5、删除Person.ts文件及其目录

    6、编写Person.d.ts提示类

     1 /**
     2 * 创建一个Person例子
     3 * @author wls
     4 * @date 2015-01-10
     5 */
     6 declare module com.company {
     7     export class Person {
     8         public name: string;        //公有属性
     9 
    10         //带参数构造函数
    11         constructor(id: number);
    12 
    13         public age: number;
    14 
    15         public static sex:string;
    16         //只有get方法的定义
    17         public readonly Id:number;
    18 
    19     }
    20 }
    Person.d.ts

    7、bin\index.html中,引入Person.js,就可以完成整个自定义第三方库的实现

    1     <!--jsfile--Custom-->
    2     <script src="libs/Person.js"></script>
    3     <!--jsfile--Custom-->
    index.html

    8、最后我们用个例子来测试一下

    1 //调用我们定义的第三方类库
    2         var person:com.company.Person = new com.company.Person(123);    //实例化一个Person,并传入ID
    3         person.name = "wls";    //设置名称,直接属性赋值
    4         person.age = 18            //设置年龄,get/set构造器赋值
    5         com.company.Person.sex = "安静的美男子";    //设置性别,静态get/set构造器赋值
    6         //输出结果
    7         console.log(">>>我是一个",com.company.Person.sex,"大名:",person.name,"年年都",person.age);
    View Code

     

    源码和对应操作图片下载: 

    链接:https://pan.baidu.com/s/1DpqkTUH1iU9uHdFmDNptjA
    提取码:39nr 

     

    转载于:https://www.cnblogs.com/wls-blogs/p/Laya.html

    展开全文
  • SVGA.layabox undefined

    2020-12-25 23:18:31
    <div><p>layabox版本 v1.7.12 试错步骤 1、 https://github.com/yyued/SVGAPlayer-Web/tree/master/patch/layabox/laya.webgl.js Replace to {LayaProjectDir}/bin/libs/laya.webgl.js 2、add after layabox libs 3...
  • layabox飞机大战源码

    2018-02-05 14:47:33
    基于layabox官方教程的飞机大战源码, 包含游戏素材
  • 比较了一下creator3D和layabox,还是选择了layabox。习惯了vscode调试,肯定要先配置一下环境了。 layabox有个不合理的地方就是,代码里边加了组件,回到ide不会自动刷新,还要重新编译打开一下,好烦啊。所以...

    比较了一下creator3D和layabox,还是选择了layabox。习惯了vscode调试,肯定要先配置一下环境了。

    layabox有个不合理的地方就是,代码里边加了组件,回到ide不会自动刷新,还要重新编译打开一下,好烦啊。所以vscode编译调试这个东西是非常有必要的。

    参考layabox官方文档配置的环境https://ldc2.layabox.com/doc/?nav=zh-as-3-0-9,但是感觉写的有点太细了。我自己做个简单的笔记。

    1、下载layabox,我下载的是目前最新的2.6.1了。

    2、nodejs,nodejs必须要10.x的,之前也装了nodejs版本控制工具nvm,直接新装一个10.x的就好了。

    3、vscode,chrome肯定是都会有的东西了。vscode安装插件debugger for Chrome,直接插件商店搜索安装就好了,我之前用creator调试的时候有装过。

    4、在layaair里边关联代码编辑器,然后新建一个项目,2.6.1是会自动创建launch.json的,低版本要自己创建。

    5、安装layaair命令行工具。layaair2-cmd和gulp。(这个工具可以不打开ide就能够编译运行代码,我觉得这个针对layabox不会自动刷新ide是最好的工具了。我可以改完代码直接编译运行,不需要去看那个憨憨的ide)。

    安装layaair2-cmd:npm i layaair2-cmd -g 

    (这个挺容易安装失败的,各种各样的问题,我的是安装之后显示失败,说已经本地有了,但是我的本地目录确实没有,所以在这个命令后边加上了 --force to overwrite就安装成功了。具体安装失败官网文档里还有好几种失败方式,还附了图)

    安装gulp:npm i gulp -g

    6、配置编译任务,顶部任务栏选择:终端->配置任务->使用模板创建->Others运行任意

    就会新建一个task.json的文件在 .vscode文件夹下,改一下command的值为layaair2-cmd compile。

    {

        "version": "2.0.0",

        "tasks": [

            {

                "label": "compile",

                "type": "shell",

                "command": "layaair2-cmd compile"

            }

        ]

    }

    这个时候就可以编译了,在vscode里边,ctrl + p,输入task,空格键加上上边配置的 compile,回车就可以看到底部的终端已经在编译了,下边再配置一下快捷键。

    7、配置编译快捷键。左下角设置,选择键盘快捷方式。

    右上角倒数第三个小图标打开json

    在打开的文件下添加自己的快捷键。

    // 将键绑定放在此文件中以覆盖默认值

    [

        {

            "key": "ctrl+enter", //请配置自己习惯的快捷键

            "command": "workbench.action.tasks.runTask",

            "args": "compile"

        }

    ]

    这时候在vscode中按下自己配置好的快捷键,就能够编译了。然后f5,就可以看到运行的效果了。

    改动代码,也不需要切laya ide去编译运行了,也可以直接在vscode中断点,控制台看输出,很方便。

     

    还有一个问题:我一开始配置好之后,f5打开的是一个空网页,报错信息是这样

    后来搜索了一下,在laya的论坛里看到说是vscode版本太高的缘故。要么降版本,还有一个解决方案就是在settings.json中加上

    "git.ignoreLimitWarning": true,

       "debug.javascript.usePreview":false

    这两行代码就可以了。

    展开全文
  • 利用Layabox1.0 开发的3D微信小游戏案例,从Unity导出场景到在Layabox里应用,再到开发,本课程适合想入门微信3d小游戏的开发者。 注:只提供美术资源,不提供源代码,源代码需另购买。 源代码地址:...
  • layabox 节点查找

    千次阅读 2019-07-08 23:18:14
    layabox也是一个树形结构。 如果一个组件类绑定到节点上面,可以通过 this.owner来获取绑定的节点。 获取一个节点的父亲节点,则使用 this.owner.parent 获取节点所在的场景 this.owner.scene 根据名称查找孩子节点...
  • Layabox 打地鼠完整代码,打开就能使用,会报错,把报错的部分注释了就行,他说是资源文件,注释就能使用
  • <div><ol><li>Patch laya.webgl.js library ...<a href="https://github.com/yyued/SVGAPlayer-Web/issues/11">issues11: SVGA.layabox undefined</a></p>该提问来源于开源项目:svga/SVGAPlayer-Web</p></div>
  • Layabox创始人兼CEO,谢成鸿 谢成鸿是谁? 1999年,1个人,3个月用DHTML技术赚300万。 2000年,创立全球最大插件式页游平台“可乐吧”,后来卖出几千万。 2004年,创业端游,研发十年,亏损超1亿。卖房支付员工...
  • LayaBox as3写的飞机大战小例子,只写了部分,剩余部分自己扩展。
  • Egret和LayaBox

    2019-02-19 18:32:46
    Egret 一.加载js文件 二,LayaBox加载js 引入&lt;script&gt;&lt;/script&gt;方式
  • LayaBox 游戏文字提示

    2020-06-22 14:00:47
    LayaBox 游戏提示 private static tips: Array<Laya.Label> = []; public static showTip(msg: string,owner: laya.display.Node): void { let label: Laya.Label; if (this.tips.length <= 0) { ...
  • 主要介绍了layabox2.0命令行在vscode中编译打包问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • Layabox_as 导出安卓并互相调用domo 使用layaide导出Android_studio后即可在Android_studio中导出apk
  • layabox html5

    2018-03-14 18:29:00
    https://www.layabox.com/product/ 转载于:https://www.cnblogs.com/hshy/p/8569363.html
  • Layabox 实现画 刚体线

    2019-07-24 14:07:40
    Layabox 的刚体里面只有一个b2PolygonShape,而为了实现画刚体线,我们需要用到复合Shape,也就是多个Shape组成一个刚体。 此时如果用Layabox自带的Collider就实现不了,所以我们需要继承ColliderBase来实现复合体...
  • Layabox技术讲座分享

    2018-12-20 21:26:10
    今天有幸听了Layabox公司技术负责人做的技术宣讲,关于LayaAir 2.0。收获不少,在此记录一下。 目前Layabox公司主推LayaAir 2.0,不过还是beta版本,演讲者也说了,如果是开发3D游戏,一定要用2.0;如果是开发2D...
  • 资源是来自LayaBox分享论坛。 是一款6边形消除游戏,游戏复杂度比官网的Demo复杂点,因为官网的Demo太简单了。想了解一下其它用法,所以才到网上搜索的。 作者我就不公布了,也是一位在Laya开发者社区分享的。 希望...
  • 用了LayaBox已经半年多了,给我的感受就是每一个版本都有或多或少的bug,博主是先从事Unity再做Laya的,所以刚开始做 H5的3D 小游戏就遇到了一个难以理解的坑 ----- 3D物体碰撞器偏移,这种问题出现在2.4之前的任何...
  • layabox溢出容器部分不显示

    千次阅读 2018-10-08 21:32:56
    layabox中的box,其中的子元素不会受到box大小的限制,超出容器尺寸的部分仍然能够显示出来, 并且layabox没有前端常用的overflow属性,要起到溢出隐藏的效果,需要用到panel,但是一般不推荐使用,对性能 消耗较...
  • layabox - 龙骨动画

    2019-11-27 17:45:50
    layabox 使用龙骨动画的时候杂七杂八的事情很多 资源未加载完 崩溃 龙骨动画添加帧动画报错等等 Failed to load resource: net::ERR_FILE_NOT_FOUND [file:///G:/program/20191112/bin/res/spine/undefined] ...
  • Layabox 实现 PageView 翻页

    千次阅读 2019-07-24 13:56:52
    Layabox 中没有 PageView这个组件,cocos creater中有,但是我们可以轻松地使用 List来实现PageView功能。 具体方式是计算出滚动后要停在所在的Cell的索引值,使用通过 List的tweenTo方法来滚动到相应位置。 先看...
  • layabox 调用IOS方法 的做法

    千次阅读 2019-03-19 20:49:15
    layabox 打包成IOS工程,代码需要交互,互相调用,那么怎么样互相调用方法呢? layabox代码: public class MainView extends MainUI{ public function MainView(){ trace("---------------2"); testButton....
  • layabox使用初体验

    2020-06-16 14:48:07
    1.开发环境是在layabox上进行的,他是类似vscode的编辑器 2.游戏里有的数据是通过策划配表获得的,展示如下: 从而读取背包或领取奖励的内容。 3.导入美术制作的动画效果步骤: ①spine动画导出,png图片压缩 ...
  • LayaBox热更新问题

    2020-07-02 10:56:07
    项目环境: LayaBox 1.8.5,Native v1.0.5,使用layadcc更新机制 问题描述: 项目原本在ios上有一个正常的版本在运行了,期间的热更新是没有任何问题的。后面又提审了一个版本,在这ios审核的期间,又热更了一些新的...
  • Layabox matter.js Demo

    2018-08-29 21:53:06
    Layabox matter.js 的一个小Demo,可用于入门 https://pan.baidu.com/s/10gbVwNnSlxjLswBVy9D9FQ
  • LayaBox技术白皮书

    2015-02-12 17:43:57
    Layabox是一个专门针对AS3程序员开发Html5产品的解决方案(本文以图片的方式进行呈现,网络慢的用户请耐心等待) ...
  • laya Box 引擎

    2018-09-10 18:11:54
    用于H5游戏开发的引擎,能开发微信小程序,使用起来方便,支持3种语言开发

空空如也

1 2 3 4 5 ... 20
收藏数 652
精华内容 260
关键字:

layabox