LayaAir-图集动画

1.准备图集资源

在laya/assets/目录下添加图片资源，在IDE编辑器打开编辑模式，点击左下角刷新资源树，点击工具栏->发布，或按F12,发布成功后就可以使用图集资源。在res/atlas 中会生成3个文件，.rec文件 .arlas文件 .png文件。

2.加载图集动画

（1）loadAtlas()

//初始化舞台
Laya.init(1334, 750,Laya.WebGL);
//创建动画实例
this.roleAni = new Laya.Animation();
//加载动画图集，加载成功后执行回调方法
this.roleAni.loadAtlas("res/atlas/role.atlas",Laya.Handler.create(this,onLoaded));
function onLoaded(){//添加到舞台Laya.stage.addChild(this.roleAni);//播放动画this.roleAni.play();
}

（2）createFrames()

//初始化舞台
Laya.init(1334, 750,Laya.WebGL);
//创建动画实例
this.roleAni = new Laya.Animation();
//加载动画图集，加载成功后执行回调方法
this.roleAni.loadAtlas("res/atlas/role.atlas",Laya.Handler.create(this,onLoaded));
function onLoaded(){//添加到舞台Laya.stage.addChild(this.roleAni);//创建动画模板dizzinessLaya.Animation.createFrames(aniUrls("die",6),"dizziness");//循环播放动画this.roleAni.play(0,true,"dizziness");
}
/*** 创建一组动画的url数组（美术资源地址数组）* aniName  动作的名称，用于生成url* length   动画最后一帧的索引值，*/
function aniUrls(aniName,length){var urls = [];for(var i = 0;i<length;i++){//动画资源路径要和动画图集打包前的资源命名对应起来urls.push("role/"+aniName+i+".png");}return urls;
}

（3）loadImages()

//初始化舞台
Laya.init(1334, 750,Laya.WebGL);
//加载完动画的图集后执行回调方法onLoaded
Laya.loader.load("res/atlas/role.atlas",Laya.Handler.create(this,onLoaded));
function onLoaded(){//创建动画实例this.roleAni = new Laya.Animation();//添加到舞台Laya.stage.addChild(this.roleAni);//通过数组加载动画资源，然后用play方法直接播放。由于loadImages方法返回的是Animation对象本身，可以直接使用“loadImages(...).play(...);”语法。this.roleAni.loadImages(aniUrls("move",6)).play();
}
/*** 创建一组动画的url数组（美术资源地址数组）* aniName  动作的名称，用于生成url* length   动画最后一帧的索引值，*/
function aniUrls(aniName,length){var urls = [];for(var i = 0;i<length;i++){//动画资源路径要和动画图集打包前的资源命名对应起来urls.push("role/"+aniName+i+".png");}return urls;
}

LayaAir-图集动画相关推荐

layaAir引擎制作游戏的图集动画、时间轴动画、和骨骼动画总结二
一.角色序列帧.ani动画的制作 1.在项目管理器中创建动画文件 2.创建动画模板,编辑动效名称 3.编辑序列帧动画 .ani格式动画的代码控制 1.动画加载loadAnmition() 2.播放与停 ...
Laya 笔记-LayaAir基础篇
屏幕适配获取浏览器DPR (Device Pixel Ratio)设备像素比:Laya.Browser.pixelRatio 逻辑宽高(逻辑分辨率的宽高):Laya.Browser.clientWi ...
html5引擎 laya,html5引擎LayaAir
LayaAir是核心库仅100K左右的新一代HTML5引擎,Layabox第二代H5引擎LayaAir正式开放下载.LayaAir支持动画.UI.粒子.骨骼.物理等系统;支持AS3.TypeScrip ...
【游戏开发实战】Unity老工程师开始搞Laya了，不想看官方文档，那就看我的教程吧（Laya2.12.0版本 | 案例 | 入门 | 教程）
文章目录一.前言二.我做的Laya案例集合工程三.LayaAir IDE下载四.Hello World工程 1.新建空项目 2.新建场景:HelloWorld.scene 3.创建一个Labe ...
太空动作游戏《Phobos Vector Prime》创作经验分享
本文将由来自Gunstar Studio的几位技术大牛将分享他们在太空动作游戏<Phobos Vector Prime>中制作爆炸效果.角色纹理和构建关卡的方法技巧. 项目简介 Gunst ...
x-studio(Lua调试器，粒子编辑器，UI编辑器，代码编辑器，csb恢复工具)
最新版本:x-studio 10.0.9000.29(2020年4月14日更新) 官网: https://x-studio.net 官方教程: https://docs.x-studio.net x- ...
siki学院_Unity初级案例_愤怒的小鸟_学习笔记1/3
说明:本次学习开始于2018年9月23日,至9月26日已看完全部教学视频,并已基本完成该案例的制作,历时四天.本文档为我在学习过程中,通过记事本记录的学习过程,对于该游戏案例的制作过程并不十分详尽,不 ...
超长干货！Cocos Creator 粒子系统详解，零代码实现逼真自然效果
在上一篇<Cocos Creator 渲染实战:地编篇>中我们主要介绍了 3D 户外场景的搭建,本文中我们将了解粒子系统的使用方法和一些典型自然效果的实现,制作一个粒子效果的通常流程是: ...
悬挑脚手架卸载钢丝绳要求_安全不可忽视！脚手架搭设彩色图集，动画展示施工全过程，抠细节...
安全不可忽视!脚手架搭设彩色图集,动画展示施工全过程,抠细节无论从事何种工作,安全第一!尤其是工程兄弟们,整天呆在施工现场,面临的危险和意外更多,因此更要注意安全.其中,脚手架就是我们必须注意的一项 ...

LayaAir-图集动画

LayaAir-图集动画相关推荐

最新文章

热门文章