1
Vote

Moving around in a large scene with no character just asdw keys?

description

Hi,

I'm new to sheetengine, and just having a few issues rendering large scenes.

I am using the loadAndRemoveSheets() function like in the example files. I would like to be able to move around inside the world but without a character. I have created some action listeners for the asdw keys, when I use the asdw keys to move around the correct tiles are being created and destroyed. But the new tile does not position in the center of the canvas. Is it possible to get this newly drawn center tile to be displayed in the center of the canvas? I have tried sheetengine.scene.setCenter(targetp, targetpuv); but had little success.

Thanks for any help!

CODE:

$(function() {
    var canvasElement = document.getElementById('maincanvas');
    sheetengine.scene.init(canvasElement, {w:900,h:500});

    var centertile = {x:0,y:0,z:0};

    // define some basesheets
    var map = [];
    for (var x=-3; x<=3; x++) {
        for (var y=-3; y<=3; y++) {
            map.push({
                centerp: { x: x * 100, y: y * 100, z: 0 },
                orientation: {alphaD: 90, betaD: 0, gammaD: 0},
                size: {w:100,h:100},
                init: function() {
                    var basesheet = new sheetengine.BaseSheet(this.centerp, this.orientation, this.size);
                    basesheet.color = '#5D7E36';
                    return basesheet;
                }
            });
        }
    }

    // define some sheets
    for (var i=0; i<50; i++) {
        (function() {
            var w = Math.random()*10 + 30;
            var z = w;
            var c = Math.floor(Math.random()*3);
            map.push({
                centerp: {x:Math.random()*1000 - 500, y:Math.random()*1000 - 500, z:z},
                orientation: {alphaD:c == 0 ? 90 : 0, betaD:c == 1 ? 90 : 0, gammaD:c == 2 ? 90 : 0},
                size: {w:w,h:w},
                init: function() {
                    var sheet = new sheetengine.Sheet(this.centerp, this.orientation, this.size);
                    sheet.context.fillStyle = c == 0 ? '#006' : c == 1 ? '#600' : '#060';
                    sheet.context.fillRect(0,0,w,w);
                    return sheet;
                }
            });
        })();
    }

    sheetengine.scene.setCenter(centertile);

    loadAndRemoveSheets({x:0,y:0}, centertile);

    // draw initial scene
    sheetengine.calc.calculateAllSheets();
    sheetengine.drawing.drawScene(true);

    window.onkeydown = function(e){
        move( e.keyCode );
    };

    window.onkeyup = function(e){
        move( e.keyCode );
    };

    function move(key) {

        //var oldcentertile = $.extend( {}, centertile );

        var newcentertile = {x:0,y:0,z:0}
        if (key == 87) {
            newcentertile.y -= 1;
        } else if (key == 83) {
            newcentertile.y += 1;
        } else if (key == 65) {
            newcentertile.x += 1;
        } else if (key == 68) {
            newcentertile.x -= 1;
        }

        loadAndRemoveSheets( centertile, newcentertile );



        sheetengine.scene.setCenter(newcentertile);
        sheetengine.calc.calculateChangedSheets();
        sheetengine.drawing.drawScene(true);

        //sheetengine.drawing.drawScene(true);

    }

    function loadAndRemoveSheets(oldcentertile, centertile) {
        var boundary = { xmin: centertile.x * 100 - 300, xmax: centertile.x * 100 + 300, ymin: centertile.y * 100 - 300, ymax: centertile.y * 100 + 300 };

        console.log( boundary );
        console.log( oldcentertile );
        console.log( centertile );

        // remove sheets that are far
        for (var i=0;i<map.length;i++) {
            var sheetinfo = map[i];
            if (sheetinfo.centerp.x < boundary.xmin || sheetinfo.centerp.x > boundary.xmax || sheetinfo.centerp.y < boundary.ymin || sheetinfo.centerp.y > boundary.ymax) {
                if (sheetinfo.added) {
                    sheetinfo.sheet.destroy();
                    sheetinfo.added = false;
                }
            }
        }

        // add new sheets
        for (var i=0;i<map.length;i++) {
            var sheetinfo = map[i];
            if (sheetinfo.centerp.x < boundary.xmin || sheetinfo.centerp.x > boundary.xmax || sheetinfo.centerp.y < boundary.ymin || sheetinfo.centerp.y > boundary.ymax)
                continue;

            if (!sheetinfo.added) {
                sheetinfo.sheet = sheetinfo.init();
                sheetinfo.added = true;
            }
        }

        // translate background
        sheetengine.scene.translateBackground(
            {x:oldcentertile.x*100,y:oldcentertile.y*100},
            {x:centertile.x*100,y:centertile.y*100}
        );
    }

});

file attachments

comments

Freid001 wrote Jan 3, 2016 at 2:46 PM

Load.png

Freid001 wrote Jan 3, 2016 at 2:47 PM

move.png