Question

我有以下代码与最新的craftyjs：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin:0;
        }
    </style>

    <script type="text/javascript" src="crafty.js"></script>
    <script>

        Crafty.c("Planet", {
            Planet: function(radius, map) {
                this.radius = radius;
                this.map = map;
                return this;
            },

            draw: function() {
                var ctx = Crafty.canvas.context;

                var x = 100;
                var y = 100;

                var offsetX = 0;

                var map = this.map;

                ctx.save();

                ctx.beginPath();
                ctx.arc(x, y, this.radius, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.clip();

                var scale = (this.radius * 2) / map.height;
                ctx.drawImage(map, 0, 0, map.width, map.height, x - this.radius - offsetX * scale, y - this.radius, map.width * scale, map.height * scale);

                ctx.beginPath();
                ctx.arc(x, y, this.radius * 1.04, Math.PI * 0.70, Math.PI * 1.30, false);
                ctx.shadowColor = "black";
                ctx.shadowBlur = 5;
                ctx.shadowOffsetX = 5;
                ctx.stroke();
                ctx.beginPath();
                ctx.arc(x, y, this.radius * 1.04, -Math.PI * 0.30, Math.PI * 0.30, false);
                ctx.shadowColor = "black";
                ctx.shadowBlur = 5;
                ctx.shadowOffsetX = -5;
                ctx.stroke();

                ctx.restore();
                console.log('drawing');
            }
        });


        Game = {

          // Initialize and start our game
          start: function() {
            // Start crafty and set a background color so that we can see it's working
            Crafty.init(500,500);

            Crafty.scene('Game', function() {
                Crafty.load(["1.jpg", "ship.png"],
                    function() {
                        Crafty.sprite("ship.png", {player_spr:[0,0, 48,48]});

                        Crafty.background("url('space.jpg')");
                              Crafty.e("2D, Canvas, Planet")
                              .Planet(40, Crafty.asset('1.jpg'));

                              var b2d = Crafty.e("2D, Canvas, player_spr, Actor, Fourway")
                              .multiway({W: -90, S: 90, D: 0, A: 180})
                              .attr({z: 4});

                            Crafty.viewport.clampToEntities = false;

                            Crafty.viewport.follow(b2d,0,0);

                });
            });

            Crafty.scene('Game');

          }
        }

        window.onload = Game.start;
    </script>
</head>

<body>

</body>

</html>

纹理是：

文件： 1.jpg

档案： ship.png

结果画布渲染图像：

result

这是一个奇怪的错误！我能用它做什么？狡猾的精灵与自定义绘图冲突......（它显示精灵透明度）

Answer 1

CraftyJS Github版修复了这个问题！

使用grunt编译。

感谢您的回答！

与craftyjs png精灵和自定义绘制的数字的麻烦？

1 个答案: