在Craftyjs中更改精灵框架
Change sprite frame in Craftyjs
如何手动将精灵从第0帧设置为第1帧?
//Load assets
Crafty.sprite("assets/img/q.png", {
qd1 : [ 0, 0, 17, 16 ],
qd2 : [ 0, 17, 17, 16 ]
});
var a=Crafty.e("2D, Canvas, SpriteAnimation, qd1").attr({x : 355, y : 225});
通过Sprite.sprite()
更改精灵表中使用的精灵
因此,在您的情况下,将第二帧中的第一个精灵更改为第二个精灵:
Crafty.e("2D, Canvas, qd1")
.attr({x : 355, y : 225})
.one("EnterFrame", function() {
this.sprite(0, 17, 17, 16);
});
下面是一个片段,演示了一个不断变化的精灵。请注意,使用了Crafty.sprite
的替代表示法,这让您可以自由地根据瓦片坐标而不是像素坐标进行思考。
Crafty.init();
Crafty.background('white');
// define spritesheet, each tile spans 60x60 px, 9 sprites in one row
Crafty.sprite(60, "https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/images/spritesheet-2x.png", {
first_sprite : [ 0, 0 ]
});
Crafty.e("2D, Canvas, first_sprite")
.attr({x : 0, y : 0, idx : 0})
.bind("EnterFrame", function(frameData) {
if (frameData.frame % 100 === 0) // trigger roughly every 2 seconds
this.sprite(++this.idx % 9, 0); // cycle through the 9 available sprites
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.6.3/crafty-min.js"></script>
</head>
<body>
</body>
</html>
相关文章:
- 在play2框架中向json对象添加下拉列表项
- 打字精灵动画
- 如何在离子框架+有角度的框架中制作顶部标签
- 如何在另一个html文件的框架中包含图像
- 如何重置内嵌框架
- 聚合物是一个框架而不是一个库.如何模块化地使用web组件
- 在EaselJS中设置精灵表动画时出现问题
- 用于图像和基于浏览器的图表的图表框架
- 没有装饰的小型浏览器框架
- Chrome开发工具中使用了哪些框架和库
- 闭包js框架-将ArrayBuffer转换为字符串
- three.js:如何让透明的png精灵投射和接收阴影
- 类似于Prism的Knockout js框架
- 如何使用Pixijs获取在加载的精灵表资产中定义的图像
- 在其他javascript框架模板中运行angular指令
- 如何在 Craftyjs 中使用多行精灵表而不手动指定框架
- TweenJS对精灵的框架进行粗花处理
- 在Craftyjs中更改精灵框架
- 在Phaser框架中给予精灵一个覆盖
- 在Enchant JS框架中创建一个循环运动的精灵