JavaScript Canvas2D实现SpriteSheet角色动画

一、SpriteSheet

目前市面上H5游戏的图片资源，基本都是采用SpriteSheet打包成图集来使用的。这样可以减少网络加载的次数，从而提升性能。另外的原因就是随着webgl的普及，把多张图片打包成一张纹理，减少纹理的频繁上传，这样也可以提升性能。本文主要是讨论使用Canvas实现的2D序列帧动画的SpriteSheet的解析和动画播放。

二、实现准备

使用HTML DOM CanvasRenderingContext2D 对象处理。
json配置描述每个动画图片在大图里面占用的位置和大小(这里采用egret的生成的动画数据)
caiyi_idle.json

{"res": {"1_4_1": {"x": 0,"y": 0,"w": 109,"h": 149},"1_4_3": {"x": 217,"y": 0,"w": 102,"h": 148},"1_4_2": {"x": 320,"y": 0,"w": 99,"h": 150},"1_4_0": {"x": 110,"y": 0,"w": 106,"h": 146}},"mc": {"caiyi_idle": {"labels": [{"end": 4,"frame": 1,"name": "1_4"}],"frameRate": 5,"frames": [{"duration": 1,"y": -148,"res": "1_4_0","x": -85},{"duration": 1,"y": -150,"res": "1_4_1","x": -80},{"duration": 1,"y": -150,"res": "1_4_2","x": -78},{"duration": 1,"y": -149,"res": "1_4_3","x": -81}],"events": []}}
}

3.动画序列图
caiyi_idle.png

4.源码例子下载

5.最终表现效果：

6.开发工具：IntelliJ IDEA

三、实现过程原理

获取到 CanvasRenderingContext2D对象

//获取canvas对象
var canvas = document.getElementById("canvas2D");
//2d渲染对象
context = canvas.getContext("2d");

加载json配置和SpriteSheet大图片

xmlRequest = new XMLHttpRequest();
xmlRequest.open("GET", "caiyi_idle.json", true);
xmlRequest.send(null);

加载到游戏中，转成json对象，里面有对应的数据结构。这个很重要，每一帧显示什么样的图片就靠这个数据了。

var imageLoad = new Image();
imageLoad.src = "caiyi_idle.png";

使用setTimeout作为动画计时器
简单实现，实际游戏的话，会比这个复杂一些。

//启动动画
setTimeout(tick, 1000 / frameRate);

每次心跳都调用CanvasRenderingContext2D对象的drawImage方法。
drawImage的语法：

drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,destX, destY, destWidth, destHeight)

参数

image：所要绘制的图像。这必须是表示 <img> 标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。

x, y：要绘制的图像的左上角的位置。

width, height：图像所应该绘制的尺寸。指定这些参数使得图像可以缩放。

sourceX, sourceY      ：图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。

sourceWidth, sourceHeight：图像所要绘制区域的大小，用图像像素表示。

destX, destY：所要绘制的图像区域的左上角的画布坐标。

destWidth, destHeight：图像区域所要绘制的画布大小。

实现关键代码：

//进行绘图，这里是渲染大的部分图像
context.drawImage(image,rect.x,rect.y,rect.w,rect.h,240 + frame.x,200 + frame.y,rect.w,rect.h);

四、完整实现代码

代码中有比较详细的注视。
html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body onload="main()"><canvas id="canvas2D" width="800" height="600">Please use!</canvas><script src="MainTest.js"></script>
</body>
</html>

js代码

/*** 程序入口*/
function main()
{//获取canvas对象var canvas = document.getElementById("canvas2D");console.log("canvas:" + canvas);//2d渲染对象context = canvas.getContext("2d");console.log("context:" + context);//XMLHttpRequest加载json配置文件xmlRequest = new XMLHttpRequest();xmlRequest.open("GET", "caiyi_idle.json", true);xmlRequest.onreadystatechange = onreadystatechange;xmlRequest.send(null);
}
//xmlRequestxml的状态改变
function onreadystatechange()
{if (xmlRequest.readyState==4){//加载成功，生成json对象idleConfig = JSON.parse(xmlRequest.responseText);//加载图片var imageLoad = new Image();imageLoad.onload = function (event){//加载完成，初始化json配置图像image = event.target;initImage();}imageLoad.src = "caiyi_idle.png";}
}
function initImage()
{console.log("准备处理SpriteSheet.......");/** 当前帧 **/currentFrame = 0;movieData = idleConfig.mc["caiyi_idle"];/** 帧频 **/frameRate = movieData.frameRate;/** 提取出的动画全部帧数 **/frames = movieData.frames;/** 最大帧 **/maxFrame = frames.length;//启动动画setTimeout(tick, 1000 / frameRate);
}/*** 动画心跳函数，按照一定的频率定时执行*/
function tick()
{//获取帧数据和每帧的位置以及宽高数据var frame = frames[currentFrame];var rect = idleConfig.res[frame.res];//先清掉原来的画布context.clearRect(0,0,480,240);//画个背景，设置背景颜色context.fillStyle = "#003366";//填充个480 * 240的矩形context.fillRect(0,0,480,240);//进行绘图，这里是渲染大图的部分图像，具体看api参数。context.drawImage(image,rect.x,rect.y,rect.w,rect.h,240 + frame.x,200 + frame.y,rect.w,rect.h);currentFrame++;//如果等于最打帧，则重新从0开始if(currentFrame >= maxFrame)currentFrame = 0;//启动动画,循环播放setTimeout(tick.bind(this), 1000 / frameRate);
}

运行mainTest.html最终显示结果：

JavaScript Canvas2D实现SpriteSheet角色动画相关推荐

【Salvation】——怪物角色动画主角碰撞死亡动画
[Salvation]--怪物角色动画&主角碰撞死亡动画写在前面:这个动画功能同样也是使用JavaScript编写脚本,在Unity3D游戏引擎的环境中实现,在怪物的角色动画中,很多与人物相 ...
《强化学习周刊》第39期：近似最优深度、多智能体广义、角色动画强化学习...
No.39 智源社区强化学习组强化学习研究观点资源活动周刊订阅告诉大家一个好消息,<强化学习周刊>已经开启"订阅功能",以后我们会向您自动推送最 ...
javascript实现汉诺塔动画效果
javascript实现汉诺塔动画效果当初以为不用html5也很简单,踩了javascript单线程的大坑后终于做出来了,没事可以研究下,对理解javascript的执行过程还是很有帮助的,代码很烂 ...
Adobe Illustrator的教程：如何建立扁平化设计角色动画
即使你不能也借鉴,您可以创建一个简单的步骤人物. 学习设计特点,并按照在这个video.flash角色设计/动画CC角色设计中使用的设计过程中的任何字符". Adobe Illustrato ...
【建议收藏】找不到免费的角色动画？来试试mixamo
你好,我是你的技术探路者郑洪智,你可以叫我大智. 今天给你分享我的一个秘密武器. 很多童鞋问我,我自己做游戏,从哪搞角色和动画啊?Asset Store负担不起,各种网站上的资源质量参差不齐,耗费了很 ...
【译】用 JavaScript 和 Emoji 做地址栏动画
原文地址:Animating URLs with Javascript and Emojis 原文作者:Matthew Rayfield 译者:Wpeach 你可以在地址栏使用 emoji(和其它图形 ...
个人技术总结——Unity中角色动画制作及动画切换逻辑的实现
这个作业属于哪个课程软件工程实践2022春-F班这个作业要求在哪里软件工程实践总结&个人技术博客这个作业的目标课程回顾与总结+个人技术总结其他参考文献 <Unity2018教 ...
unity2D学习笔记-角色动画
unity2D学习笔记-角色动画角色移动动画效果(重点!!!!!) 创建:Animator与Animation 状态转换跳跃从fall到idle Hierarchy中创建一个Sprite作为载 ...
3D游戏角色动画——Elaina(全流程人物建模)
1.有如上的文件包,资源包太大,有需要的请联系作者,不是共享文件! 3D游戏角色动画期末大作业任务书一.任务要求: 要求把自选一个游戏人物+动物模型做一个完整的展示动画视频.具体要求包括 ...
UE角色以及角色动画超详细流程干货！这次是step by step！
文章转自魔型志. 大家好,今天给大家带来一个虚幻引擎角色动画的一个干货!这真的是干货!这次是幻工作室另一位资深艺术家西蒙所带来. 给大家简单介绍下西蒙,来自幻羽科技,技术美术,幻羽第一个加入的美术艺术 ...