前言

动画是游戏的最基本组成部分
利用LAnimation类和循环时间，可以轻松实现一组动画的播放
准备一张照片，包含任务的动作

引入库

lufylegend官网
开发建议：<script src="./lufylegend-1.10.1.min.js">
学习建议：<script src="./lufylegend-1.10.1.js"></script>

使用流程

引入库件
创建<div>
使用init函数初始化工作

函数解析

init(speed, divid, width, height, completeFuc, type)
- speed：游戏速度设定
- divid：canvas传入此div内部
- width,height：游戏宽高
- completeFunc：游戏初始化完成后，调用此函数
LAnimation(layer,data,list)
- layer：LSprite对象
- data：LBitmapData对象
- list：存储坐标的二维数组
数组通过LGlobal.divideCoordinate(width,height,row,col)
- width,height：宽，高
- row,col：行数，列数
- 此函数会将传入的宽高按照行数和列数进行拆分计算，从而得到二维数组
- 例如图片为256x256，拆分代码LGlobal.divideCoordinate(256,256,4,4)

 <div id="legend">Loading...</div><script>init(50, "legend", 500, 350, () => {let loader = new LLoader();loader.addEventListener(LEvent.COMPLETE, event => {let bitmapdata = new LBitmapData(loader.content, 0,0,64,64);let list = LGlobal.divideCoordinate(287,287,4,4)let layer = new LSprite();addChild(layer);let anime = new LAnimation(layer, bitmapdata, list);layer.addEventListener(LEvent.ENTER_FRAME, () => {anime.onframe();});});loader.load("animation.png", "bitmapData");});</script>

代码讲解

人物动起来，其实是将第一行图片逐个循环播放
LAnimation类的onframe()：将所播放的图片列号加1，在循环事件中播放，就成了动画
要实现所有的图片循环播放，需要用到setAction
setAction(rowIndex, colIndex)：可以改变图片的行号和列号
- rowIndex：数组行号
- colIndex：数组列号

移动运动

    <div id="legend">Loading...</div><script>init(50, "legend", 500, 350, () => {let loader = new LLoader();loader.addEventListener(LEvent.COMPLETE, event => {let bitmapdata = new LBitmapData(loader.content, 0,0,64,64);let list = LGlobal.divideCoordinate(287,287,4,4)let layer = new LSprite();addChild(layer);let anime = new LAnimation(layer, bitmapdata, list);layer.addEventListener(LEvent.ENTER_FRAME, () => {let action = anime.getAction();switch(action[0]) {case 0:layer.y += 5;if(layer.y >= 200)  anime.setAction(2);break;case 1:layer.x -= 5;if(layer.x <= 0)    anime.setAction(0);break;case 2:layer.x += 5;if(layer.x >= 200)  anime.setAction(3);break;case 3:layer.y -= 5;if(layer.y <= 0)    anime.setAction(1);break;}anime.onframe();});});loader.load("animation.png", "bitmapData");});</script>

代码讲解

getAction取得当前播放动画的行号和列号，返回是个数组
[ 1 , 2 , 3 , 4 ] [1,2,3,4] [1,2,3,4]分别代表着"下，左，右，上"4个方向，然后移动，根据到达的位置改变移动方向
layer.y += 5：控制着图像移动的节奏和步伐
layer.y >= 350 - 287/2：则控制着移动的空间，最大公式是:

c a n v a s 高度 − 整体图的高度分成的行数 × 单个图在 c a n v a s 显示的高度 × 2 canvas高度 - \frac{整体图的高度}{分成的行数} \times 单个图在canvas显示的高度 \times 2 canvas高度−分成的行数整体图的高度×单个图在canvas显示的高度×2

JS-lufylegend游戏动画-人物运动相关推荐

html页面角落放动漫人物,L2Dwidget.js L2D网页动画人物添加
hexo 添加live2d看板动画 https://www.jianshu.com/p/3a6342e16e57 首先贴出官网代码按如下步骤执行 1️⃣ 首先检查博客主目录下面的 package.j ...
js简单交互动画，运动吧
今天看了一下慕课网上讲解js简单动画的视频教程,讲解确实挺细致的,大家可以去慕课网搜一下.OK,下面的内容就是我的学习总结,以方便日后的"回访",哈哈!由于是总结,我就不贴完整的源 ...
游戏动画中有哪些动画原理？
如果您正在学习游戏或对游戏制作感兴趣,那么您对游戏制作的哪些部分感兴趣?游戏设计(游戏计划)?角色设计?动画?显示(菜单屏幕设计还是游戏期间的显示)?背景?影响?还是编程? 我已经玩了很长时间的游戏, ...
原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
如何制作流畅有力的游戏动画+Skullgirls案例分析
游戏动画与影视动画制作虽然看似有共通之处,但其实差别很大. 游戏动画是为玩家交互体验服务,同时需要与程序合作使其在设备上流畅运行,因此也有各种制作上的限制与要求. 在旧金山每年一度举办的游戏开发者大会 ...
语音识别插件_2D动画唇动合成，根据语音自动生成动画人物口型
蕾师师发自凹非寺量子位报道 | 公众号 QbitAI 只需要输入一段语音,代码会自动生成与之相对的动画唇形. 还是毫无违和感的那种. 这是一个在GitHub上拥有501星的开源项目,叫做Rhu ...
游戏角色是怎么动起来的？3D游戏动画系统介绍
讲师简介:杨帆,腾讯互动娱乐北极光工作室群,客户端开发高级工程师.11年程序开发经验,参与了PC平台<天涯明月刀>的开发,完成了其动画.战斗及各种客户端玩法的实现,现任一款MMORPG手游 ...
使用HTML+CSS+JS 实现粒子动画
:阿余 :2022-3-2-2 :如有错误,敬请指正.感谢! 使用HTML+CSS+JS 实现粒子动画 1 设置网页的样式 2 移动鼠标生成粒子 3 为每个粒子生成随机颜色属性 4 让粒子动起来 5 ...
【最终幻想15 国王之剑】制作介绍1：不再是游戏动画，而是“电影”制作
日文链接:http://cgworld.jp/interview/201606-kgffxv-01intro.html [最终幻想]系列在全世界有着累计销售1亿1500万份的成绩.用与最新的游戏[最终 ...

JS-lufylegend游戏动画-人物运动

文章目录

前言

引入库

使用流程

函数解析

代码讲解

移动运动

代码讲解

JS-lufylegend游戏动画-人物运动相关推荐

最新文章

热门文章