Javascript and HTML5 Canvas sprite
Javascript and HTML5 Canvas sprite
我正在关注有关精灵的教程:http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/我现在有一个精灵在工作,但我喜欢精灵有多个动画。这些动画应该取决于这个精灵应该具有的特定状态。
我喜欢做的是在旧的苹果游戏中创建伞兵空降。有关示例,请参阅 http://www.youtube.com/watch?v=pYujWCNUuNw你看到那些士兵从直升机上掉下来。当他们在地面上时,他们会闲置一段时间,然后他们开始时不时地走路。
这是我的精灵方法:
function sprite(options) {
var that = {},
frameIndex = 0,
tickCount = 0, ticksPerFrame = options.ticksPerFrame || 0, numberOfFrames = options.numberOfFrames || 1;
that.x = options.x, that.y = options.y,
that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;
that.update = function() {
tickCount += 1;
if (tickCount > ticksPerFrame) {
tickCount = 0;
// If the current frame index is in range
if (frameIndex < numberOfFrames - 1) {
// Go to the next frame
frameIndex += 1;
} else {
frameIndex = 0;
}
}
};
that.render = function() {
// Draw the animation
that.context.drawImage(that.image,
frameIndex * that.width / numberOfFrames,
0,
that.width / numberOfFrames,
that.height, that.x,
that.y,
that.width / numberOfFrames,
that.height);
};
return that;
}
如何让这个精灵拥有这些额外的动画选项?
谢谢
您可以使用指向每个区域的偏移值:
var offsets = [0, animation2x, animation3x, ...];
然后,当您使用表示偏移数组索引的整数值更改动画类型时,您可以执行以下操作:
var animation = 1;
hat.context.drawImage(that.image,
offsets[animation] + frameIndex * that.width / numberOfFrames,
....
您可能需要或想要向偏移量添加其他信息,这些信息也可能是包含帧数、大小等的对象。
伪示例可能如下所示:
var offsets = [{offset:0, frames:12, w:100, h:100},
{offset:1200, frames:7, w: 90, h:100},
...];
...
var offset = offsets[animation];
hat.context.drawImage(that.image,
offset.offset + frameIndex * offset.w / offset.frames,
....
if (frameIndex > offset.frames) ...
(可选)您只需为每个动画使用不同的图像并使用相同的方法,而是使用指向要使用的图像的指针存储对象。
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- IE9的HTML5 Canvas getImageData()函数存在问题
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 查找带有边框的HTML5 Canvas(点击)事件的坐标
- 加速我的复杂函数绘图仪(canvas+javascript)
- Canvas赢得't更新
- 从setInterval方法移动到带有sprite的requestAnimationFrame
- 在keydown(JS,Jquery)上更改HTML5 Canvas元素
- HTML5 Canvas访问控制允许原始错误
- Jasny bootstrap Off Canvas菜单:如何在导航栏下强制菜单滑动
- 在fabric.js中以PNG格式下载Canvas,给出网络错误
- 如何使用Canvas制作3D动画
- 带有内置图像对象的Canvas组件构造函数;t显示's图像
- Javascript Canvas使用getImageData(x,y,1,1).data获取颜色
- HTML5 Canvas toDataURL(“image/png”)适用于一些绘画,而有些则不然,不确定原因
- Canvas.toDataUrl(“image/png”)工作不正常
- Javascript和Canvas绘制中间有孔的圆
- 以编程方式将fabric-js-canvas的图像替换为hq图像,并重新计算其他对象的坐标和大小
- canvas没有从uri中绘制完整的图像
- Javascript and HTML5 Canvas sprite