0

我正在尝试使用 HTML5 和画布创建游戏。目前我正在使用 KineticJS 库。

到目前为止，我所做的事情是放大和缩小，从舞台内的图层拖动，以及从一些对象拖动。这一切都很好而且很快。

但是，游戏还需要一个景观，人们可以在其中建造房屋、麦田等。还需要一些树木和其他细节。这一切都让画布非常饱满。

因此，为了进行测试，我制作了一个 10000 x 10000 像素的画布层，并将其制作成 100 x 100 的 100 x 100 像素的图块。只是这花了很多时间，甚至没有加载。

所以我用更少的瓷砖（25 x 25）尝试了它，它确实加载了，但是当我尝试缩放、拖动舞台或拖动一个对象时，它非常非常慢，而且它都需要包含更多的对象。

所以主要问题是：任何人都可以向我咨询哪种方法最适合上述故事吗？画布是正确的选择，还是有其他（和更好的）选择？

4

2 回答 2

2

我找到了一个完美的解决方案！

我打算将画布与一些常规的 HTML（如 div）结合起来。我做了这个，它在这个 div 中创建了一个 15000x15000 像素的字段，我创建了 225 个新的 div，其中将包含画布对象。每个画布对象的大小为 100x100 像素。

总加载时间约为 4 秒，我将使用一些 javascript 和 div 构建缩放、拖动。

<!DOCTYPE HTML>
<html>
<head>

    <style>
        body,html {
            margin: 0px;
            padding: 0px;
        }
        #container{
            width: 15000px;
            height: 15000px;
        }
        .canvas{
            float: left;
            margin: 0px;
            padding: 0px;
            height: 1000px;
            width: 1000px;
        }
    </style>

    <script src="/js/jquery.js"></script>
    <script src="/js/kinetic.js"></script>

</head>
<body>
<div id="zoomer" style="position: absolute;"></div>
<div id="container">
    <?php for ($x = 1;$x<=15;$x++){?>
        <?php for ($y = 1;$y<=15;$y++){?>
            <div class="canvas" id="blok<?php echo $x;?>-<?php echo $y;?>"></div>
        <?php } ?>
    <?php } ?>
</div>
<script>
    var bk = {};
    $.each($(".canvas"),function(){

        var id = this.id;
        bk[id] = new Kinetic.Stage({
            container: this.id,
            width: 1000,
            height: 1000
        });

        var ly = new Kinetic.Layer();

        for(x = 0;x<10;x++){
            for(y = 0;y<10;y++){
                var r = Math.random();
                var g = Math.random();
                var b = Math.random();

                var tile = new Kinetic.Rect({
                    width: 100,
                    height: 100,
                    x: x * 100,
                    y: y * 100,
                    fill: "rgb("+ parseInt(255*r) +","+ parseInt(255*g) +","+ parseInt(255*b) +")"
                });
                ly.add(tile);
            }

        }
        ly.draw();

        bk[id].add(ly);

    });

</script>
</body>
</html>

无论如何，感谢您的努力！

于 2013-03-13T13:30:45.397 回答
2

10,000 x 10,000 像素的地图太大了。

从概念上讲，这很好。诀窍是不要保留/绘制整个事物！即，即使您的地图那么大，您也只能在角色周围绘制/更新 500 x 500 像素或任何视口的图块/对象.

请参阅这篇文章，以及西蒙的回答来实现这一点。

这是与答案相关的示例 jsFiddle （完全归功于 Simon Sarris）。

于 2013-03-12T23:20:20.343 回答