laya_layaair - CSDN
精华内容
参与话题
  • 本课程主要是2D游戏开发《乖宝逃亡》,使用的引擎是laya,版本是2.2.0. 通过本课程的学习能让初学者更快的使用laya引擎制作2d小游戏
  • 利用Layabox1.0 开发的3D微信小游戏案例,从Unity导出场景到在Layabox里应用,再到开发,本课程适合想入门微信3d小游戏的开发者。 注:只提供美术资源,不提供源代码,源代码需另购买。 源代码地址:...
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。作者|王小强来源|https://my.oschina....
        

    欢迎点击「算法与编程之美」↑关注我们!

    本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

    作者|王小强

    来源|https://my.oschina.net/wxqdoit

    简述

    LayaAir 是基于HTML5开源引擎,所开发的游戏既可以网页运行,也可以打包Android & ios app运行,目前更到1.7.19.1 beta版本,本次使用1.7.18稳定版。 本文介绍laya的下载安装,项目创建,目录结构,环境配置与es6+的支持,及具体开发知识,网页端发布等等方面。

    下载安装

    官网传送门:www.layabox.com

    进入首页看到如下两个下载按钮:

    640?wx_fmt=png

    此刻就让人有点懵逼了,layaAir Engine可以理解为引擎内核(源码),IDE就是集成开发工具了,直接下载IDE就好,因为下载下来的已经集成对应版本的源码包了(你会发现,每一个版本的源码都有对应版本的IDE。截止目前更到1.7.19.1 beta版本,为了稳定还是使用1.7.18版本。如下(对,你没看错,蓝色那个,点...点...点它:

    640?wx_fmt=png

    下载完成之后是一个zip压缩包,不用安装的,直接解压到你想放的位置,完事儿之后就可以使用了:

    640?wx_fmt=png

    就是他了(.exe文件,双击吧,看到如下界面你就完成第一步了!

    640?wx_fmt=png

    项目创建与目录结构

    点击新建项目,弹出如下框:

    640?wx_fmt=png

    选择默认的UI示例项目,类型选择JavaScript项目,如果你会as或者ts也可以选它,然后点击创建,创建完成进入代码模式,简单标注了一下:

    640?wx_fmt=png

    接下来什么将调试器选择chrome调试,点击三角按钮或者按f5运行,你会看到如下一个巨丑的页面弹出来emmmm(真的很丑,但是只要正常看到,这一步就算完成了)。

    640?wx_fmt=png

    接下来是目录结构,传送门:https://ldc.layabox.com/doc/?nav=zh-js-1-0-0,不过这个里面说的hin多hin杂,在这里简单说重点:

    项目运行配置文件(.laya文件夹)。

    1. launch.json,当你将项目移动或拷贝到别处的时候需要修改,什么路径统统要改。

    2. 如果你用chrome运行项目,会有一个chrome文件夹,不用管他,垃圾东西。

    项目的输出目录(bin文件夹)。项目编译后的东西都在里面,什么动画,图集,你的源码等等,最后项目发布也是从这个目录发布

    1. lib,全是引擎的源码包,不用的可以删除

    2. res,资源文件,图片图集,音频文件都可以在里面

    3. index.html,点进去看看,里面说的很清楚了

    UI项目目录(laya)。其实这些都看自己的喜好,没有规定的话,只要合理爱咋咋地吧。

    1. laya/assets目录用来存放UI页面、粒子等组件所需的图片资源。

    2. laya/pages目录用来存放LayaAirIDE创建页面布局生成的文件。

    代码提供文件目录(libs),不用管他。

    项目代码目录(src)。

        这个就比较牛逼了,全是你的代码,不过后面我们不在里面开发。

    目录结构也介绍完了,这一节大概就是这些,下一节讲解配置我们真正的而开发环境。

    环境配置

    既然是属于h5前端开发,自然要配置一系列的工具。webpack,babel,gulp等等。(如果大家不想使用这些工具,直接用项目默认的开发模式也可以,前面也足够了)

    • 安装Node.js,推荐稳定版本8.x吧(不会问度娘。

    • 在项目根目录新建文件夹www(其实开发文件夹应该叫做src的,无奈被默认的目录占用了,src这个文件夹不能动他,因为构建的ui文件类会在里面,稍后我们输出webpack的main.js也会放在里面。然后项目编译时会用到src)。

    • 接下来切换到下方的终端(没有看到的话f5一下吧),用npm安装如下一堆依赖的东西(你可以直接建一个package.json文件,将下面的考进去,然后npm install,谢谢赶紧我~~)。完了之后www会有一个node_modules文件夹,全是刚才装的b:

    • {
        "name": "webpack-demo",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "webpack": "webpack"
        },
        "author": "wxq",
        "license": "ISC",
        "dependencies": {
          "babel-cli": "^6.26.0",
          "babel-core": "^6.26.0",
          "babel-loader": "^7.1.2",
          "babel-plugin-transform-runtime": "^6.23.0",
          "babel-polyfill": "^6.26.0",
          "babel-preset-env": "^1.6.1",
          "dateformat": "^3.0.3",
          "gulp": "^3.9.1",
          "gulp-babel": "^7.0.1",
          "gulp-less": "^3.4.0",
          "gulp-util": "^3.0.8",
          "webpack": "^3.10.0",
          "webpack-stream": "^4.0.0"
        }
      }
      

      创建.babelrc文件,里面是babel的预设集配置等,如果你不想懂,可以直接copy进去:

      {
        "presets": ["env"],
        "plugins": [[
          "transform-runtime",
          {
            "helpers": false,
            "polyfill": false,
            "regenerator": true,
            "moduleName": "babel-runtime"
          }
        ]]
      }
    • 创建webpack.config.js文件,这个是webpack的配置文件,主要配置webpack打包的入口文件口和输出文件,之后会时候gulp的自动任务执行webpack打包,同时会将es6(es7、es8)通过bable转译为es5。

    • 创建gulpfile.js文件,这个是gulp的配置文件,如果你不想懂,也可以直接copy进去:

      const gulp = require("gulp");
      //转译JavaScript
      gulp.task("webpack",()=>{
          const webpack = require("webpack-stream");
          const  config = require("./webpack.config");
          gulp.src("./src/**/*.js")
              .pipe(webpack(config))
              .pipe(gulp.dest("../src/"))
      });
      
      gulp.task("watch",function(){
          gulp.watch("./src/**/*.js",['webpack']);
      });
      
      gulp.task("default",["webpack",'watch']);

      解释一下吧,引入依赖gulp,创建三个任务,第一个是打包任务,webpack执行,第二个是watch任务监听文件变化自动执行第一个任务,这样就不需要每次修改文件都去执行gulp命令了,美滋滋~~,第三个默认任务,就是去执行上面两个咯。

    • 执行npm install gulp -g 安装gulp到全局(必须安装到全局 全局 -g),不然会报错。640?wx_fmt=png

     上述步骤完成且没有问题之后,成功之后再去执行gulp命令吧,如图我将www下面的src文件夹下面的所有东西都打包到了根目录下的src文件夹的mian.js文件里面:

    640?wx_fmt=png

    640?wx_fmt=png

    然后打开你的www-->src-->main.js:

    640?wx_fmt=png

    就长这样啦,然后去把index.html里面的代码改改吧,噢啦,环境搭建完成。

    <!--IDE生成的UI文件-->
    	<script src="../src/ui/layaUI.max.all.js"></script>
    	<!--jsfile--startTag-->
    	<script src="../src/main.js"></script>
    	<!--jsfile--endTag-->

    如果到这里,你没有如遇到什么难题,那我们就可以准备进入正题了,emmmm。

    开发入门

    舞台搭建与适配

    开发目录下新建的main.js文件全部代码删除,然后不用管它,接下来:

    GameMain.js:

    export class GameMain {
        constructor() {
        }
        static init() {
            Laya.MiniAdpter.init();
            Laya.init(768, 1366, Laya.WebGL);
            Laya.stage.bgColor = "#5a7b9a";
            //水平对齐方式,水平居中
            Laya.stage.alignH = Laya.Stage.ALIGN_CENTER;
            //垂直对齐方式,垂直居中
            Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
            //按照宽度
            Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL;
            //屏幕适配,横屏还是竖屏,默认不改变
            Laya.stage.screenMode = Laya.Stage.SCREEN_NONE;
            //禁用多点触控
            Laya.MouseManager.multiTouchEnabled = false;
        }
    }

    如果es6不懂的可以先去补一下,创建一个静态的方法init()。

    Laya.MiniAdpter.init();//如果不考虑微信小游戏可以不加,当然加上也不会怎样。

    Laya.init(768, 1366, Laya.WebGL);//初始化舞台大小,记住这个尺寸是设计大佬给的,她们的图都按照这个尺寸来做的。宽、高、渲染方式。

    Laya.stage.bgColor = "#5a7b9a";//这个舞台背景,爱咋咋地吧。

    接下来的全是做是配的,copy贴上去就对了。还有其他的适配方式,以及参数,自己去官网看吧,反正我怎么不用。

    关于图集打包与资源加载策略

    在进入main文件之前讲一讲这两点:图集打包与资源加载。

    图集打包:

    进入编辑模式,你懂我意思吧:

    640?wx_fmt=png

    看图的时候不要问我拿来那么多文件,看重点:在这个界面,当你按下f12的时候,会发布代码,并将红色框里的文件夹里面的图片,按分文夹的方式打包成图集,这些文件就是在www/laya/assets下面,发布完成之后,你在bin/res/atlas下面看到图集的.png与.atlas(json)文件,这两个文件都是一一对应的。

    注意:在编辑模式按f9可以进行设置,包括图集的大小,当然,这里主要也是设置图集大小。

    这图集打包就这样咯,接下来是资源加载↓↓↓↓↓

    资源加载:

    关于资源加载如果做过游戏都知道,有一个载入界面,载入界面用到的所有资源最好是放在游戏包里面,进行第一次加载。第一次加载完成之后就是加载游戏需要的其它大部分资源,这里面的资源有可能是在本地,也有可能加载网络资源,一般需要写一个资源加载类。

    简单介绍laya里面的资源加载类该如何写:

    主要使用Laya.loader.load()方法进行加载,该方法有三个参数:

    Laya.loader.load(this.resources, Laya.Handler.create(this, loaded), Laya.Handler.create(this, loading, null, false));

    第一个,资源,如果单个加载,可以写字符串路径,如果批量加载,写成数组对象:

    let res = [
      {url: "res/atlas/start.atlas"},
      {url: "res/atlas/activity.atlas"},
      {url: "res/atlas/popup.atlas"},
      {url: "res/atlas/comp.atlas"},
      {url: "res/atlas/part.atlas"},
      {url: "res/atlas/shareMask.atlas"},
      {url: "res/atlas/common.atlas"},
      {
         url: "res/sound/btn_click.mp3",
         name: "btn_click",
         type: Laya.Loader.SOUND
      },
      {
         url: "res/sound/btnShowSound.mp3",
         name: "btnShowSound",
         type: Laya.Loader.SOUND
      }
    ]

    name可以作为名字调用资源,如果不写,用的时候只能通过字符串路径调用资源;

    type是资源类型,也可以不写,但最好写上

    第二个:加载完成的回调,只返回true或者false,

    第三个:加载过程的回调,返回的是数字,从0-100。

    上一下完整的代码:

    import {GameMain} from './base/GameMain.js'
    import {ResLoader} from './utils/ResLoader.js'
    import {MainBoard} from "./base/MainBoard";
    import {UserUtils} from "./utils/UserUtils";
    import {GlobalData} from "./base/GlobalData";
    import {GameEvent} from "./utils/GameEvent";
    import {LayoutUtils} from "./utils/LayoutUtils";
    
    GameMain.init();
    Laya.loader.load("res/atlas/loading.atlas", Laya.Handler.create(this, function (e) {
        let resManager = ResLoader.getInstance();
        let loading = new ui.view.gameLoadingUI();
        Laya.stage.addChild(loading);
        let sp_mask = loading.sp_mask;
        sp_mask.optimizeScrollRect = true;
        resManager.loaded((e) => {
            let mainBoard = MainBoard.getInstance();
            let user = UserUtils.getInstance();
            user.getWxUser({
                sucFn: () => {
                    console.log('登陆成功v1.0.0');
                    Laya.stage.addChild(LayoutUtils.getInstance().map.get("gameStartUI"));
                    Laya.stage.removeChild(loading);
                    mainBoard.initMainBoard();
                    GameEvent.getInstance().bindListenEvent();
                    GameEvent.getInstance().remarkGameTime();  
                }, errFn: () => {
                    alert('登陆失败');
                }
            });
    
        }, (e) => {
            let process = parseInt(e * 100);
            loading.progress_text.text = process + '%';
            sp_mask.scrollRect = new Laya.Rectangle(0, 0, 5.2 * process, 24);
        });
    }));
    

    resManager是我自己写的资源加载管理器,做统一资源管理,其实跟这加载一样,只是资源多,封装了一下。

    多说一句:单例模式

    因为这里基于es6的类,常常需要实例化类,像资源加载这种只需要实例化一次的就需要用到js的单例模式,具体实现如下:

    export class ResLoader {
    
        static getInstance() {
            return ResLoader.instance ? ResLoader.instance : ResLoader.instance = new ResLoader();
        }
    
        constructor() {}
    }

    UI创建

    如果你不想通过它的编辑器创建界面也是可以的,只不过全部用代码来实现比较麻烦,看看他的ui有哪些组件吧,传送门:https://layaair.ldc.layabox.com/api/?category=UI&class=laya.ui.AsynDialog

    640?wx_fmt=png

    什么Image,Text,Button,Sprite全部自己写也很不爽。不过你可以试试用自己写代码的方式来进行游戏布局,比如我写的一些:

    diyPopup(btnImgs) {
            let length = btnImgs.length;
            let btnArr=[];
            let popupUI = this.map.get('gamePopupUI');
           for (let i = 0; i < 3; i++) {
              popupUI.removeChildByName(`btn${i===0?'':i}`)
           }
            if (length === 1) {
                let btn = new Laya.Image().size(262, 116).pos(250, 678);
                btn.skin = btnImgs[0];
                btn.name = 'btn';
                btnArr.push(btn);
                popupUI.addChild(btn);
            } else if (length === 2) {
                let btn1 = new Laya.Image().size(262, 116).pos(67, 678);
                btn1.name = 'btn1';
                btn1.skin = btnImgs[0];
                let btn2 = new Laya.Image().size(262, 116).pos(443, 678);
                btn2.name = 'btn2';
                btn2.skin = btnImgs[1];
                btnArr.push(btn1,btn2);
                popupUI.addChild(btn1);
                popupUI.addChild(btn2);
            }
            //遮罩
            popupUI.bg_wrap.graphics.clear();
            popupUI.bg_wrap.graphics.drawRect(0, 0, Laya.stage.width, Laya.stage.height, "#000000");
            return {popupUI:popupUI,btnArr:btnArr}
        }
    
        //自定义
        diyIcon(iconArr) {
            let length = iconArr.length;
            let mainUI = this.map.get('gameMainUI');
            mainUI.icon_wrap.destroyChildren();
            let iconUI = [];
            if (length === 1) {
                let icon = new Laya.Image().size(77, 68).pos(258, 0);
                icon.skin = iconArr[0];
                mainUI.icon_wrap.addChild(icon);
                iconUI.push(icon)
            } else if (length === 2) {
               for (let i = 0;i < length;i++){
                   let icon = new Laya.Image().size(77, 68).pos(207+i*(30+77), 0);
                   icon.skin = iconArr[i];
                   mainUI.icon_wrap.addChild(icon);
                   iconUI.push(icon)
               }
            } else {
                for (let i = 0;i < length;i++){
                    let icon = new Laya.Image().size(77, 68).pos(169+i*(15+77), 0);
                    icon.skin = iconArr[i];
                    mainUI.icon_wrap.addChild(icon);
                    iconUI.push(icon)
                }
            }
            return iconUI;
        }

    还是用编辑器拖拖拉拉舒服,点击view新建页面/场景,最好把逻辑类勾,本人当时没有勾上,就全部发布到一个文件里面去了,下面会说的。然后直接往上怼:

    640?wx_fmt=png

    做完之后按f12发布,就会发布到src/ui下面的layaUI.max.all.js里面。

    接下来在代码里面引用:

    let gameMain= new ui.view.gameMainUI();
    Laya.stage.addChild(gameMain);//添加到舞台,removeChild()你懂吧

    如此,页面场景也可以自己搭建好了。其实还有一部分是粒子和动画,但是我觉得这个可以看看官网给的教程(我司有做粒子和动画的,我不会),传送门:https://ldc.layabox.com/doc/?nav=zh-js-2-1-10

    这一入门部分也就告一段落,基本上可自己写出一个demo。下一篇准备讲讲使用laya的API以及其中遇到的巨坑。laya系列完了之后准备再写一个egret入门与坑的系列。如果有错误的地方,还请多多指教。

    拓展阅读:

     where2go 团队


       

    微信号:算法与编程之美          

    640?wx_fmt=jpeg

    长按识别二维码关注我们!

    温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

    展开全文
  • 第一步往需要添加脚本的对象属性中的runtime属性中填写需要添加的包名加类名,并保存发布(保存Ctrl+s,发布Ctrl+F12) ... export class imageRunTime extends Laya.Image{ public scaleTime:number = ...

    第一步往需要添加脚本的对象属性中的runtime属性中填写需要添加的包名加类名,并保存发布(保存Ctrl+s,发布Ctrl+F12)

    第二步创建脚本,目录如下图

    第三步填写代码

    /**
    * name 
    */
    module game{
    	export class imageRunTime extends Laya.Image{
    		public scaleTime:number = 100;
    		constructor(){
    			super();
    			this.anchorX= this.anchorY = 0.5;
    			this.on(Laya.Event.MOUSE_DOWN,this,this.scaleSmal);
    			this.on(Laya.Event.MOUSE_UP,this,this.scaleBig);
    			//this.on(Laya.Event.MOUSE_OUT,this,this.scaleSmal);
    		}
    		private scaleSmal():void{
    			Laya.Tween.to(this,{scaleX:0.8,scaleY:0.8},this.scaleTime);
    		}
    		private scaleBig():void{
    			Laya.Tween.to(this,{scaleX:1,scaleY:1},this.scaleTime);
    		}
    	}
    }

    第四部创建UI视图

    import View=laya.ui.View;
    import Dialog=laya.ui.Dialog;
    module ui.Scenes.test {
        export class TestSceneUI extends View {
    
            public static  uiView:any ={"type":"View","props":{"y":0,"x":0,"width":1920,"height":640},"child":[{"type":"Image","props":{"y":0,"x":0,"skin":"image/BG.jpg","cacheAs":"bitmap","alpha":1}},{"type":"Image","props":{"y":285,"x":1144,"skin":"image/hero2.png","runtime":"game.imageRunTime"}},{"type":"Image","props":{"y":285,"x":910,"visible":true,"skin":"image/hero1.png","runtime":"game.imageRunTime"}},{"type":"Image","props":{"y":283,"x":726,"skin":"image/hero0.png","runtime":"game.imageRunTime"}},{"type":"Image","props":{"y":289,"x":1031,"skin":"image/hero3.png","runtime":"game.imageRunTime"}}]};
            constructor(){ super()}
            createChildren():void {
            			View.regComponent("game.imageRunTime",game.imageRunTime);
    
                super.createChildren();
    
                this.createView(ui.Scenes.test.TestSceneUI.uiView);
    
            }
    
        }
    }

    第五步程序入口处预加载资源

    import WebGL = Laya.WebGL;
    // 程序入口
    class GameMain{
        constructor()
        {
            Laya.init(1920,640, WebGL);//image.atlas
            Laya.loader.load("res/atlas/image.atlas",Laya.Handler.create(this,this.onload));
        }
        private onload():void{
            var bgUipage:ui.Scenes.test.TestSceneUI = new ui.Scenes.test.TestSceneUI();
            //bgUipage.graphics.drawRect(0,0,300,300,"#ff00ff");
            Laya.stage.addChild(bgUipage);
        }
    }
    new GameMain();

     

    展开全文
  • Laya引擎基础与实例学习

    千次阅读 2018-05-18 15:27:22
    相关网盘免费资源下载... 1.如果使用typescript那么首先要安装node.js 然后如下,安装typescript的环境: 2.typescript与C# 编写模式相同完全使用类来进行 ...5.回调方法(函数指针)必须由laya.h...

    相关网盘免费资源下载...

    1.    如果使用typescript那么首先要安装node.js

    然后如下,安装typescript的环境:

     2.    typescript与C# 编写模式相同完全使用类来进行

     

    3.    所有能现实的控件都派生自sprite,都是精灵

    4.    控件默认的锚点(中心)是左上角点  

    5.    回调方法(函数指针)必须由laya.handler.create—>来进行创建

     

    6.    页面发布后的,被打包成图集à设计与开发分离!

     

    7.    F5可以刷新项目,包括删除资源后进行刷新等

    8.    自动动画模式,要勾选“动画编辑模式”

     

    9.    页面设计修改完,以后一定要发布,然后才能把页面的控件变化反应到页面源码中,

    10.  页面的图集加载完毕后,就可以显示相应的页面

     

    11.  加载资源的两种方式:

     

    *****************************登录界面*************************** 

    1.    页面设计与 页面加载的流程:

     

    2.    入口页面的js文件的放置顺序,  layaUi.max.all.js一般放置在最上面,因为其他页面的js文件会使用到其中的类,!

     

    3,对话框直接使用this.close 方法关闭

     

    4.在C#中,override和new都会覆盖父类中的方法。那它们两者之前有什么区别呢?

    ·        override是指“覆盖”,是指子类覆盖了父类的方法。子类的对象无法再访问父类中的该方法。

    ·        new是指“隐藏”,是指子类隐藏了父类的方法,当然,通过一定的转换,可以在子类的对象中访问父类的方法。

     

    5.runtime属性的应用:可以对原生的类的功能进行扩展

     

    6.关闭当前dialog是用this.close( )

    7.多组的皮肤命名方式:

     

     

    8.list用var命名,用以在后期绑定数据源泉,而其中每项的子控件的用name来命名,

    侦听回调的参数设置(设为false为执行多次!)

     

    12. 设计模式下的资源要放在  Asset中,  编码模式(运行模式)下资源可以直接放置在Bin下(与界面编辑无关)

    13.单选组checkGroup的selectHander属性的使用

     

    13. 资源添加看不到,可以使用F5进行刷新

     

     

    14. 如果一个容器中的子控件要按照索引要进行操作,每个控件要按Item0..item1..来进行命名:

     

    15.  添加库文件的步骤:

     

    ******************unity3D导入到laya中******************

    1.    Uinity3D For laya的导出插件:

     

    2.    Unity模型导入到laya中的路径

    3.    添加相机移动组件给相机:

     

    相关网盘免费资源下载...

     

    展开全文
  • Laya

    2019-08-09 17:53:02
    官网:http://ldc.layabox.com/ 官方视频教程:http://layabox.ke.qq.com/ 文档:https://ldc2.layabox.com/doc/?nav=zh-ts-1-0-2 LayaAir功能介绍 LayaAir引擎主要包括 引擎库与LayaAir IDE两大核心部分 ...

    官网: http://ldc.layabox.com/

    官方视频教程: http://layabox.ke.qq.com/

    文档: https://ldc2.layabox.com/doc/?nav=zh-ts-1-0-2

    LayaAir功能介绍

    LayaAir引擎主要包括 引擎库与LayaAir IDE两大核心部分

    LayaCloud与LayaNative是引擎的生态组合部分

    LayaAir2.0引擎库功能

    LayaAir2.0引擎不仅保持了1.0的原有功能,比如:

    精灵、矢量图、文本、富文本、位图字体、动画、骨骼、音频与视频、滤镜、事件、加载、缓动、时间、网络、UI系统、物理系统、TiledMap、prtocol等API;

    还新增内置了box2d物理引擎、组件化支持,以及150多款3D功能,比如:

    新增的主要官方材质包括PBRStandardMaterial、PBRSpecularMaterial以及UnlitMaterial材质等。

    纹理方面,增加多种纹理参数配置(mipmap、format、wrapModeU、wrapModeV、filterMode、anisoLevel), 增加纹理上传像素接口, GPU纹理压缩。

    动画方面,新增Animator动画融合功能crossFade,新增动画多层混合播放,动画更新机制调整为实时插值,大幅减少内存和动画流畅度表现,新增多种材质属性动画

    支持开发2D、3D、VR的产品研发,支持Canvas与WebGL模式,支持同时发布为HTML5、Flash、APP(IOS、安卓)微信小游戏,QQ玩一玩多种版本。

    2. 基础篇

    2.1 我得第一个程序:

    <1. 运行后黑屏,修改.laya目录下的compile.js 文件,修改启动类为HelloLayabox.ts

    <2. 找不到库时,先看看有没有错误,再重新打开写。

    2.2 显示列表

    ​ 显示对象在舞台上显示之前,还需要有一个过程,那就是先添加到显示列表中。显示列表的作用就是将显示对象进行数据索引,用于层级的显示顺序(后添加的在最上层显示),然后在舞台上显示。

    2.3 文本

    通过laya.display.Text类添加文本,给文本设置字体样式、颜色、大小等。

    视频: 熟悉IDE的通用导航与菜单功能:

    UI组件可视化编辑:

    Text,界面输入后要使用回车键。

    界面主要有三块:

    <1. 工程面板

    ---自带的东西默认是隐藏的

    ---可以给资源(eg:图片)可以设置默认全局属性)是一种设置预设的方式。

    <1. 层级面板

    场景中物体的层级顺序等

    可以锁定

    <2. 预览面板

    <3. 组件面板

    F9: 打开项目设置

    创建容器:把多个物件锁在一起。

    滤镜效果虽好,但是尽可能地不要用,滤镜不继承组件,滤镜不是组件

    动态文本/静态文本  动态时候使用FillText,而Text是每次都是提交这么,不断创建大量的图集去提交

    动态重复字文字共享,静态则超过阈值就创建的. 一个是一个字一个字的提交,一个是整个文本的提交。

    UI组件库:

    1. 基础组件:

    2. 容器组件:多张图组合

    Dialog  : 弹窗

    View :需要相对布局时 ,必须是UI组件,否则可以转换成UI组件,image   

    sence:不需要相对布局时 

    节点与非节点  继承与非继承

     

    穿透:https://ke.qq.com/course/391284?taid=3649876093433972

    button:默认是接收鼠标点击事件的,但是Image默认是不用点击事件的 。

    Image需要时需要改为true,如下图:即遮挡住了

    而,下图设置成false,则时是按照宽高来遮挡的,不是按照显示图形形状来的。负责区域修正,不是负责穿透

    下图为true,则优先检测父对象。

    注意:下图两个矢量图,则在两个图形中间也会视为整体

    学习TS语言的网址:  www.tslang.cn   翻译的类的官网

     

    展开全文
  • 我的想法是先从Laya的2D游戏下手,老项目——先使用Laya完成水管鸟实操再说。 1:循环滚动的背景图 在CocosCreator的学习日志里,我也写过这个功能,但在creator中我是在update中直接缩减节点的x来实现节点向左...
  • 记录Unity转LayaLaya高级应用)

    千次阅读 2019-08-12 11:20:28
    附上官网Demo链接 ...name=Laya3DCombineHtml 顺便说一下,我使用的版本是2.1.0 想实现上面图中Laya与HTML结合的效果,光使用官方的代码是不够的。先看一下官方代码: class Laya3D...
  • 开发H5游戏引擎的选择:Egret或Laya

    万次阅读 多人点赞 2017-06-01 22:20:16
    一、H5游戏开发的引擎介绍开发H5游戏的引擎有很多,比如egret、laya、cocos-js等等。这里主要是分析的是egret和laya,因为我们团队是从as3转过来的。所以天然地在有as3基因的egret和laya之中挑选一个。 Egret ...
  • Laya_TS 鼠标点击事件

    千次阅读 2019-05-29 21:22:32
    module laya{ import Sprite = Laya.Sprite; import Stage = Laya.Stage; import Event = Laya.Event; import Browser =Laya.Browser; import WebGL = Laya.WebGL; export class Timer_D...
  • LayaAIR 开发格斗游戏

    2019-07-30 16:20:33
    LayaAIR 开发格斗游戏 这是一个小实验。实验证明laya可以开发格斗游戏。 欢迎下载检验实验效果。
  • Laya Stage

    2019-09-20 00:03:18
    舞台是显示游戏元素的平台,在游戏视觉编程中,一切游戏的元素必须添加到舞台才能被显示。因此,舞台是放置对象的最终容器。舞台自身也是一种可以显示的对象,从编程角度来讲,任何对象都具有属性...引擎版本:Laya...
  • Laya Sprite

    2019-09-22 23:56:44
    游戏中Sprite精灵是在屏幕中能够被控制的显示对象,如果屏幕中的显示对象不能被控制那就只是一个节点。准确来说,Sprite精灵是一个能够通过...laya.display.Sprite Class Laya.Sprite Inheritance Sprite / No...
  • 基于Laya实现ViewPager页面切换效果

    千次阅读 2019-03-10 02:09:32
    页面切换效果,Laya提供了ViewStack组件,可以切换页面,但是效果有些生硬,可以看看官网文档提供的效果。(http://ldc.layabox.com/doc/?nav=zh-as-2-3-16) 我这里提供的效果是通过手势滑动实现页面切换,同时也...
  • Laya Event

    2019-09-25 03:39:08
    事件Event指的是由系统事先设定的、能被对象识别和响应的动作,事件是指对象对于外部动作的响应,当对方发生了某个事件,就会执行于此事件对应的代码。 事件处理机制 事件处理机制 ...外部动作触发事件源上的事件...
  • Laya Base

    2019-08-14 15:17:17
    在线文档 http://layaair.ldc.layabox.com/api/ 在线案例 http://layaair.ldc.layabox.com/demo/?category=2d&group=Sprite&name=DisplayImage 官方案例 https://github.com/layabox/layaair-demo 开发...
  • Laya Tween

    2019-10-22 10:28:37
    游戏开发中的缓动动画是提升游戏UI体验的重要因素之一,比如对话框弹出和关闭、按钮动效出现于消失、道具飞入背包等,可以使用LayaAir引擎提供的Tween缓动类与Ease类实现。LayaAir引擎的Tween类与Ease类结合使用,能...
  • Laya Timer

    2019-10-09 18:35:33
    Timer 是时钟管理类,是一个单例,无需手动实例化,直接使用 Laya.Time 访问。 构造函数 new Laya.Timer(autoActive?:boolean):Timer 结构 值 Package laya.utils Class Laya.Timer Inheritance Timer /...
  • Laya Loader

    2019-09-19 03:51:40
    资源加载是指游戏进入时都会有一个给资源载入界面,载入界面中用到的资源最好是放在游戏包中,进行首次加载...Laya.Loader 类可用来加载文本、JSON、XML、二进制、图像等资源。 项目 值 Package laya.net.Loa...
  • Laya Text

    2019-10-11 01:22:42
    文本 Text 结构 描述 Package laya.display Class public class Text Inheritance Text / Sprite / Node / EventDispatcher / Object ...LayaAir可以通过laya.display.Text类添加文本,给文本设置字体...
1 2 3 4 5 ... 20
收藏数 5,188
精华内容 2,075
关键字:

laya