在Craftyjs中更改精灵框架

时间:2015-12-05 17:38:10

标签: javascript craftyjs

如何手动将精灵从第0帧设置为第1帧?

p = {}; %initialize cell array, as the polynomials have different lengths
for i=1:10
    [p{i},S] = polyfit(x,y,i);
    my_norm(i) = S.normr;
end
[~,k]=min(my_norm); %find the index of the minimum

f = polyval(p{k},x);
plot(x,y,'*',x,f,'-')
axis([0  3  -2.5  12])
title(['Order is: ',num2str(k),' norm is: ',num2str(my_norm(k))])

1 个答案:

答案 0 :(得分:0)

您可以通过Sprite.sprite()更改spritesheet中使用的精灵 所以在你的情况下,要将第一个精灵更改为第二帧中的第二个精灵:

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>
&#13;
&#13;
&#13;