0

I'm trying to create a game with HTML5 and a canvas. At the moment I am using the KineticJS library.

The things I have working so far are zooming in and out, dragging from a layer within the stage, and dragging from some objects. This all works nice and fast.

However, the game also needs a landscape, where people can build houses, grainfields etc. Also there need to be some trees and other details. This all makes the canvas very full.

So to test, I made a canvas layer of 10000 x 10000 pixels and made it in 100 x 100 tiles of 100 x 100 px. Just this took so much time it didn't even load.

So I tried it with less tiles (25 x 25) and this does load, but when I try to zoom, drag the stage or drag an object, it is very, very slow and it all needs to contain many more objects.

So the main question is: Can anyone consult me of which method I can use best for the above story? Is a canvas the correct option, or are there other (and better) options?

Jarrod
  • 9,349
  • 5
  • 58
  • 73
Robert
  • 31
  • 2

2 Answers2

2

A 10,000 x 10,000px map is waaay to large.

Conceptually, this is fine. The trick is not to hold-in-memory/draw the whole thing! ie, even if your map is that large you'll only ever draw/update the tiles/objects for the 500 x 500px, or whatever your viewport is, around your character.

See this post, and Simon's answer to achieve this.

And here is the example jsFiddle (full credit to Simon Sarris) associated with the answer.

Community
  • 1
  • 1
Jarrod
  • 9,349
  • 5
  • 58
  • 73
  • 10,000 x 10,000 is not to large for the type of game i'm trying to make. The game will be a settlers game where you can build your own 'city' to gain resources and build an army. With your army you eventually can attach your enemy. Mayby this makes it more clear. The example you give from Simon Sarris will have the same issue as i have now.. Just because of the amounts of elements in my canvas. – Robert Mar 13 '13 at 09:30
2

I found a perfect solution!

I'm going to combine canvas with some regular HTML like div. I have made this, it makes a field from 15000x15000 px within this div i make 225 new divs which will contain the canvas objects. Every canvas object will have a size from 100x100 px.

The total loading time is about 4 seconds, and I will build the zooming, dragging with just some javascript and divs.

<!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>

Anyway, thanks for the effort!

Robert
  • 31
  • 2