HTML5动画/游戏神器---AlloyStick

来源：互联网发布：淘宝skype充值编辑：程序博客网时间：2024/06/06 01:08

《文章只是用于自己学习记录之用》

css3中的tansfrom和HTML5中Canvas对前端动画的帮助是异常强大的，今天在HTML5中国上看到了一篇文章，链接备忘：

http://www.html5cn.org/article-9114-1.html

AlloyStick------>power by Tencent AlloyTeam ，感觉又是一个NB的东东，学习永无止境，况且咱还什么都没学啊！

1.是什么：

AlloyStick是一款专为HTML5开发的2D骨骼动画引擎。可以用于HTML5动画开发、HTML5游戏开发。AlloyStick主要由骨骼动画引擎和骨骼动画编辑器两部分组成。

骨骼动画编辑器提供强大的骨骼动画编辑功能，拖拽骨骼组合角色，通过设置动画关键帧，输出动画数据。js动画库根据输出数据，依靠强大的自动补间和骨骼关系，就可以制作出逼真、生动的Canvas骨骼动画，可以畅快的运行在PC、手机、平板等设备里。（跟Flash玩的差不多，）

AlloyStick: js动画库+ 动画编辑器

各自的作用如下：

骨骼动画的的优点（js动画库：alloystick.js ,官网去下）：　　AlloyStick 官网：http://alloyteam.github.io/AlloyStick/（详细介绍）

》动画更加逼真，基于骨骼运动的角色看上去会更加生动逼真（这不是我等屌丝程序猿该关心的事，就不要去深究原理了）

》图片资源占最小的存储空间，相比于Spriter动画，骨骼动画的图片容量可以减少90%（woooooh! 这应该是一大幸事啊!）

》过渡动画自动生成，动作更加流畅（跟flash有些相似吧）

》骨骼可控，轻松实现角色装备的更换，甚至可以对某骨骼做特殊控制或事件监听

》骨骼事件帧，动画执行到某个动作或某个帧时，触发自定义事件行为

》动作数据继承，多角色可共用一套动画数据（省事啊，赞）

》可结合物理引擎和碰撞检测，应用广泛

》结合精灵图动画制作混合动画，精灵图作为骨骼动画蒙皮，扬长避短

可视化编辑动画（动画编辑器 Animator editor 自己到网上下载）

》拖拽骨骼组合人物角色，关节依附，自由摆动姿势

》动作间智能自动补间，动作切换的过渡动画自动完成
》可绘制矢量图作为骨骼素材，矢量输入矢量输出，并且图片素材可矢量输出模型
》提供基础矢量素材库，除了火柴人的基本素材，还提供额外素材设计

2.什么是骨骼动画

一个骨骼动画主要由3部分组成：骨骼数据、蒙皮数据、动画数据，有了这三部分数据，就可以由AlloyStick渲染出生动的骨骼动画了。这三部分数据当然不需要手动生成，只需要在编辑器中操作，即可自动生成。生成数据后，就可以向下面这样调用执行骨骼动画了(demo官网)：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>骨骼动画Demo</title>    <style type="text/css" media="screen">        html, body { background-color: #666666;}        body { margin:0; padding:0; overflow:hidden; }    </style></head><body>    <canvas id="canvas" width="800px" height="600px">    抱歉，你的浏览器不支持canvas，建议你使用Chrome浏览器，杜绝360浏览器。</canvas>    <!-- 蒙皮资源以img标签的形式引入，也可用js引入-->    <img src="./data/texture.png" id="xiaoxiaoImg" style="display:none;"></body><!-- 注意这里的js加载顺序，先加载游戏引擎，再加载资源js--><script src='./js/alloystick_v0.4.js'></script><script src='./data/xx_resource.js'></script><script>var demoApp = function(){    var canvas = document.getElementById('canvas'),        textureImg = document.getElementById('xiaoxiaoImg');    var scene = new alloyge.Scene(canvas.getContext('2d'));    var player = new alloysk.Armature('xiaoxiao',textureImg);    // animationName ,totalFrames,transitionFrame,isLoop    player.playTo('roll',100,15,true);    player.setPos(300,300);     player.setEaseType(false);    scene.addObj(player);    // 启动FPS监听器 (辅助功能 非必须)    alloyge.monitorFPS(scene);    // 开始场景里的动画，并且可以传入callback循环调用    scene.start();}window.onload = demoApp;</script></html>

第一步引入alloystick.js，再加入资源resource.js。其中注意的是蒙皮png是以img标签引入，当然也可js的方式加载。resource.js里面包括蒙皮数据，骨骼关系数据，和所有动作数据包括动画名字和参数。

第二步，根据资源文件new出舞台对象Stage和角色对象Armature，Stage对象管理Armature对象。playTo方法时核心方法，让角色播放不同动作动画，你可以增加事件去切换不同动作。最后启动舞台stage.start().

0 0