0

HTML5とキャンバスを使用してゲームを作成しようとしています。現在、KineticJSライブラリを使用しています。

私がこれまでに取り組んできたのは、ズームインとズームアウト、ステージ内のレイヤーからのドラッグ、およびいくつかのオブジェクトからのドラッグです。これはすべてうまく機能します。

ただし、ゲームには、人々が家や穀物畑などを建てることができる風景も必要です。また、いくつかの木やその他の詳細が必要です。これはすべて、キャンバスを非常にいっぱいにします。

そこで、テストのために、10000 x 10000ピクセルのキャンバスレイヤーを作成し、100 x100pxの100x100タイルで作成しました。ちょうどこれはそれがロードさえしなかったのでとても時間がかかりました。

だから私はより少ないタイル（25 x 25）でそれを試しました、そしてこれはロードします、しかし私がズーム、ステージをドラッグするかオブジェクトをドラッグしようとすると、それは非常に非常に遅く、すべてにもっと多くのオブジェクトを含める必要があります。

したがって、主な質問は次のとおりです。上記の話に最適な方法を誰かに相談してもらえますか？キャンバスは正しいオプションですか、それとも他の（そしてより良い）オプションがありますか？

4

2 に答える 2

2

私は完璧な解決策を見つけました！

キャンバスをdivのような通常のHTMLと組み合わせます。私はこれを作成しました。この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 に答える