精华内容
下载资源
问答
  • FairyGUI-layabox A flexible UI framework for LayaAir Engine, working with the FREE professional Game UI Editor: FairyGUI Editor. Official website: 关于版本 目前有三个主要的分支: master 是用于LayaAir...
  • A Docker image for creation protobuf files compatible with LayaAir(Layabox). 说明   支持Laya 2.x的版本请访问   随着Html5游戏行业的发展,H5游戏的类型慢慢地从单机小游戏、轻交互休闲游戏到重交互竞技类...
  • layabox飞机大战源码

    2018-02-05 14:47:33
    基于layabox官方教程的飞机大战源码, 包含游戏素材
  • Layabox2.0框架

    2019-04-23 18:20:31
    2.0版本的laya基础框架,带uimanager socket通讯,资源管理,数据类,
  • 迷你游戏 介绍 Laya小游戏框架 简化了LayaBox的工作流程,更加方便的使用各个工具开发小游戏。 参与贡献 YaYaLuoYa: :
  • LayaBox as3写的飞机大战小例子,只写了部分,剩余部分自己扩展。
  • Layabox_as 导出安卓并互相调用domo 使用layaide导出Android_studio后即可在Android_studio中导出apk
  • 主要介绍了layabox2.0命令行在vscode中编译打包问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 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

    展开全文
  • create-laya-app create layabox app cli Usage npx create-laya-app my-app-name cd my-app-name && npm i && npm start TODO 自动修改package.json中的项目名称,自动安装package里的依赖包。但是我懒。
  • 本人使用的是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分享论坛。 是一款6边形消除游戏,游戏复杂度比官网的Demo复杂点,因为官网的Demo太简单了。想了解一下其它用法,所以才到网上搜索的。 作者我就不公布了,也是一位在Laya开发者社区分享的。 希望...
  • 视频教程地址:https://edu.csdn.net/course/detail/25731?pre_view=1 本课程仅提供源码:游戏开发教程链接打开上面链接即可。
  • laya Box 引擎

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

    2019-04-15 10:11:53
    这个工具可以讲已经打成图集的图片批量转换回原来的单图。
  • Layabox 打地鼠完整代码,打开就能使用,会报错,把报错的部分注释了就行,他说是资源文件,注释就能使用
  • 教程以LayaBox引擎为环境 ,重点放在GLSL语言的学习,经典光照的计算,各种纹理贴图的原理与使用,PBR、NPR、SSS等渲染类型的实现。 手把手在Layabox环境下进行逐行代码的教学,期望帮助大家进入WebGL Shader...
  • 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

    展开全文
  • layabox使用初体验

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

    游戏H5前端 配合后台接口传输协议活动数据,渲染视图。
    1.开发环境是在layabox上进行的,他是类似vscode的编辑器
    在这里插入图片描述
    2.游戏里有的数据是通过策划配表获得的,展示如下:
    在这里插入图片描述
    从而读取背包或领取奖励的内容。
    3.导入美术制作的动画效果步骤:
    ①spine动画导出,png图片压缩
    在这里插入图片描述
    在这里插入图片描述
    导入的是out文件夹。
    ②战斗动画+freestyle动画的png和sk文件(共4个)放入:\release\client\ledoures\effect

    spine动画导出,png图片压缩,png和sk文件放入\release\client\ledoures\effect
    /release/client/ledoures/config/fight/WeaponConf.json
    加被动技能: HappyFightH5_proj\trunk\client\src\common\ShowUpAnimation.ts
    在这里插入图片描述
    在这里插入图片描述
    \release\client\ledoures\config\fight\npc.json内容:
    "skin24"{"skin":"nezha","idle":"freestyle_nezha","specialAction":"effect_hjq","specialAction2":"effect_hjq","specialWeapon":25,"specialSkill":0,"height":280}


    4.图片大小会影响场景编辑器的响应 所有图片需要压缩,压缩网址 [TinyPNG](https://tinypng.com/)

    Common URL

    ① 大banner图,需要更新资源的内容 E:\HappyFightH5_proj\release\client\ledoures\actpic

    ②所有入口文件不可注释!! E:\HappyFightH5_proj\trunk\client\bin\config\icon.json

    对应icon/头像框的图片路径 E:\HappyFightH5_proj\trunk\client\laya\assets\ui\main

    ③通用商店更新资源

    E:\HappyFightH5_proj\release\client\ledoures\shop

    ④启动页面 E:\HappyFightH5_proj\trunk\client\laya\assets\ui\beforeEnterGameLoading

    ⑤活动面板 E:\HappyFightH5_proj\trunk\client\laya\assets\ui\comp 下是活动面板的样式

    ⑥ C:\Users\v_suviwang\AppData\Roaming\LayaAirIDE 编辑器缓存,删除该文件就可以。

    ⑦ E:\HappyFightH5_proj\trunk\public\doc 前端开发文档


    展开全文
  • 学习 Layabox 这个仓库用于记录我学习 layabox 的示例代码 徽章
  • 浪费了整整一下午 在此记录一下layabox的坑 主要注意事项步骤1.2 node.js安装 环境变量参照:https://www.jianshu.com/p/13f45e24b1de 第一个坑:注意不要自己下载js 只有10.x版本的能成功 如果已经安装了 要卸载...
  • layabox 学习笔记

    2020-09-25 15:49:04
    初次接触laya,随手写了点个人笔记。 this.owner //相当于 cc this.node as 类型断言,很多时候laya的编译报错,就需要类型断言,比如一个图片,绑定一个脚本,在脚本内写上 this.owner.x = 100; 这样的就可能...
  • 升级layabox编辑环境 最近用nodejs写一些功能,有些特性需要v14才支持,而本机的node还是v10版本,决定将node升级一下。完之后,发现layabox无法编译了升级到shen所以研究了一下layaair-cmd2的编译原理,gulp,将...
  • 项目需要使用LayaBox做一个给3D物体动态描边的一个功能,前前后后踩了一些坑算是把这个东西给做出来了把我改好的代码贴上,分享给大家。 (1)想要使用描边你的引擎版本必须 >=2.9.0 (2)你必须下载 Laya官方的...
  • Layabox 亮度滤镜矩阵

    2019-10-09 10:41:48
    public static var FILTERARRAY:Array = [ 1,0,0,0,n, 0,1,0,0,n, 0,0,1,0,n, 0,0,0,1,0 ]; n为程度-255-255 ...
  • Egret和LayaBox

    千次阅读 2019-02-19 18:32:46
    Egret 一.加载js文件 二,LayaBox加载js 引入&lt;script&gt;&lt;/script&gt;方式
  • Layabox的2d精灵的性能优化

    千次阅读 2021-02-01 17:05:38
    在使用Layabox的2d精灵时,我们会需要很多渲染图片的需求,那么,如果做到使用最小的代价实现图片的渲染呢。 合并图集 为什么要合并图集呢。如果你一个图片是由多张图片组成的,正常情况,在webgl模式下,渲染一张...
  • layabox 摇杆制作

    2021-03-07 20:30:06
    layabox 摇杆制作## 摇杆开发是手机游戏不可少的一部分,这里记载下我的实现方式. 注意好结构 1.初始化和事件绑定 2.按下,滑动,抬起操作 3.收尾
  • layabox 节点查找

    千次阅读 2019-07-08 23:18:14
    layabox也是一个树形结构。 如果一个组件类绑定到节点上面,可以通过 this.owner来获取绑定的节点。 获取一个节点的父亲节点,则使用 this.owner.parent 获取节点所在的场景 this.owner.scene 根据名称查找孩子节点...
  • 一、在使用LayaAir2 编辑器做3D 项目时,参考API 文档,导入自己创建的 Unity3D 场景资源时,修改代码,会出现不渲染问题。...修改编辑器 类库,导入 Laya.Physics3D.js(其他模型导入相应的Physics3D): ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,909
精华内容 763
关键字:

layabox