0

我的页面上运行了一个 Crafty 实例，320x480。我正在尝试为一个小游戏开发一个菜单。在菜单场景的背景中，我想要一个旋转的风车式效果。

现在，轮换已经不是什么大问题了，我已经在游戏中出现了让事情无休止地移动的补间。但是我一辈子都不能把风车放在画布中间。

Crafty.defineScene("menu", function() {
Crafty.background("#000");

var bg = Crafty.e("2D, Canvas, Image, Tween")
    .image("img/pinwheel.jpg")
    .attr({x: 0, y: 0})
    .origin('center')
    .bind("Click", function(e) {
        Crafty.enterScene("game");
});

});

这是我在这里的代码。我还没有将补间用于旋转。

我尝试将它作为 DOM 元素而不是 Canvas 并尝试使用 CSS 来移动它，但 Crafty 似乎覆盖了这个 CSS。

有问题的图像是 2000 x 2000。我可以将其调整为 320 x 480，但是当它旋转时，边缘会出现。因此，图片必须是方形的，并且在旋转 45 度时也必须足够大以覆盖画布。但我就是不知道如何让图像的中心与画布的中心对齐！

4

1 回答 1

0

首先，将图像大小调整为您希望它在应用程序中显示的大小。
确保它与png文件中的透明/不存在的背景层一起保存。

然后您可以继续使用视口的宽度和高度使图像居中（它们被显式指定为参数Crafty.init或隐式设置为窗口的边界Crafty.DOM.window.width& Crafty.DOM.window.height）：

.attr({x: viewportWidth/2 - imageWidth/2, y: viewportWidth/2 - imageHeight/2,
       w: imageWidth, h: imageHeight})

看看下面的代码片段，看看一个旋转的例子。 

// setup Crafty
var gameWidth = 320,
    gameHeight = 480;

Crafty.init(gameWidth, gameHeight);
Crafty.background("#EEEEEE");

// the infinitely rotating, centered loading icon
var loadingIcon = Crafty.e("2D, Canvas, Image, Tween")
    .attr({x: gameWidth/2 - 230/2, y: gameHeight/2 - 230/2,
           w: 230, h: 230})
    .origin('center')
    .image("https://upload.wikimedia.org/wikipedia/commons/7/7e/OS_X_10.11_Beta_Beach_Ball.jpg")
    .bind("TweenEnd", function() {
      this.tween({rotation: this.rotation - 360}, 2000);
     });

// start rotating the icon
loadingIcon.trigger("TweenEnd");

// stop rotating the icon sometime later (e.g. when assets have loaded)
//loadingIcon.cancelTween("rotation");
<script src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.6.3/crafty-min.js"></script>

于 2015-10-25T10:14:32.243 回答