var w = 600

var h = 380

​

var stage = new PIXI.Stage(0x66FF99);

var renderer = PIXI.autoDetectRenderer(w, h);

document.body.appendChild(renderer.view);

​

requestAnimFrame(animate);

​

var n = 12; // CHANGE THIS

​

​

var at = 64; // tile width

​

var ad = 0.01; // gap between tiles

var ar = 1; // rotation of 1 gives you 45 Degrees

var ai = 2; // 2 gives you isometric view

var as = 1.0; // scale

​

var ox = (n * 2 + 1) * at * as // w  / 2;    // offset

var oy = ((n * 2 + 1) * at - at) * as / ai // ox/ai // (h - at) / 2;

​

​

// var borderX = 0 //at*as*n / 2

// var borderY = borderX

​

var borderL = -ox * 2 + w

var borderR = 0

var borderD = -(oy + at * as / ai) * 2 + h

var borderU = 0

​

var tooRight = true

var tooLeft = true

var tooHigh = true

var tooLow = true

​

var velx = 0

var vely = 0

​

var delx = 0

var dely = 0

​

var dragMode = 0 // 0: drag, 1: paint

var dragging = false

​

var count2 = 0

​

var background = new PIXI.DisplayObjectContainer();

var myContainer = null

​

​

​

var mt1 = new PIXI.Text(" ", {

    font: "12px Arial"

});

mt1.position.x = 10;

mt1.position.y = 20;

stage.addChild(mt1);

​

var mt2 = new PIXI.Text(" ", {

    font: "12px Arial"

});

mt2.position.x = 10;

mt2.position.y = 40;

stage.addChild(mt2);

​

mt3 = new PIXI.Text(" ", {

    font: "12px Arial"

});

mt3.position.x = 10;

mt3.position.y = 60;

stage.addChild(mt3);

​

// function clearStage()

// {

//     for (var i = stage.children.length - 1; i >= 0; i--) {

//         stage.removeChild(stage.children[i]);

//     };

// }

​

​

function initScene() {

    // clearStage()

​

    // Math.seedrandom('abc')

​

​

    for (var i = -n; i <= n; i++) {

        for (var j = -n; j <= n; j++) {

            initTile(i, j);

​

            // var c = Math.floor(Math.random('abc')*16777215).toString(16)

            c = '009900'

            if (j < -7) c = '990000'

            if (i < -7) c = '990000'

            if (j > 7) c = '990000'

            if (i > 7) c = '990000'

​

            if (i == -5) c = '000099'

​

            setTile(i, j, c);

​

        }

    }

​

​

    console.log(background.getBounds())

    var d = background.getBounds()

​

    // render the tilemap to a render texture

    var texture = new PIXI.RenderTexture(ox * 2, (oy + at * as / ai) * 2)

​

    texture.render(background);

​

    // create a single background sprite with the texture

    // var myContainer = new PIXI.Sprite(texture);

    myContainer = new PIXI.Sprite(texture);

​

    stage.addChild(myContainer);

    myContainer.x = -400

    myContainer.y = -400

​

​

    myContainer.interactive = true;

    myContainer.mousedown = myContainer.touchstart = function (data) {

        dragging = true;

        mt1.setText('yay.')

        this.sx = data.getLocalPosition(myContainer).x * myContainer.scale.x;

        this.sy = data.getLocalPosition(myContainer).y * myContainer.scale.y;

        delx = dely = 0

        velx = vely = 0

    }

    myContainer.mouseup = myContainer.touchend = function (data) {

        dragging = false;

        mt1.setText('no dragging yet. ')

​

​

​

​

        if (delx == 0) {

            console.log('click')

            setGraphicTileColor(isoToIndex(this.sx, this.sy), '0xFF0000')

            texture.render(background);

        } else {

            velx = Math.floor(this.position.x - delx)

            vely = Math.floor(this.position.y - dely)

            delx = dely = 0

            console.log('drag -->', this.position.x, this.position.y, delx, dely, velx, vely)

​

        }

​

​

    }

​

​

​

    myContainer.mousemove = myContainer.touchmove = function (data) {

        var newPosition = data.getLocalPosition(myContainer);

        var c = isoToIndex(newPosition.x, newPosition.y)

        var i = c[0]

        var j = c[1]

​

​

        delNow = new Date().getMilliseconds()

​

​

​

        if (dragging) {

​

            var newPosition = data.getLocalPosition(this.parent);

            delx = this.position.x

            dely = this.position.y

            // }

​

​

            this.position.x = newPosition.x - this.sx;

            this.position.y = newPosition.y - this.sy;

​

​

​

        } else {

            mt2.setText((delx - this.position.x) + "xy/ij: " + newPosition.x + ', ' + newPosition.y + ' / ' + c);

        }

    }

​

}

​

​

function setGraphicTileColor(ij, c) {

    var i = ij[0];

    var j = ij[1];

    var num = (i + n) * (2 * n + 1) + j + n

    var gr = background.getChildAt(num)

​

    // mt1.setText('yay: ' + num )

​

    gr.clear()

​

    gr.c = c

    gr.beginFill(c);

​

    gr.moveTo(gr.c1[0], gr.c1[1])

    gr.lineTo(gr.c2[0], gr.c2[1])

    gr.lineTo(gr.c3[0], gr.c3[1])

    gr.lineTo(gr.c4[0], gr.c4[1])

​

    gr.endFill();

    // }

}

​

function initTile(i, j) {

    var gr = new PIXI.Graphics();

    gr.i = i

    gr.j = j

    gr.c = 0

​

    gr.c1 = indexToIso(i + 1 - ad, j + ad)

    gr.c2 = indexToIso(i + 1 - ad, j + 1 - ad)

    gr.c3 = indexToIso(i + ad, j + 1 - ad)

    gr.c4 = indexToIso(i + ad, j + ad)

​

    gr.hitArea = new PIXI.Polygon([

    new PIXI.Point(gr.c1[0], gr.c1[1]),

    new PIXI.Point(gr.c2[0], gr.c2[1]),

    new PIXI.Point(gr.c3[0], gr.c3[1]),

    new PIXI.Point(gr.c4[0], gr.c4[1])]);

​

    background.addChild(gr)

​

}

​

function setTile(i, j, c) {

​

    var num = (i + n) * (2 * n + 1) + j + n

    var gr = background.getChildAt(num)

​

    gr.c1 = indexToIso(i + 1 - ad, j + ad)

    gr.c2 = indexToIso(i + 1 - ad, j + 1 - ad)

    gr.c3 = indexToIso(i + ad, j + 1 - ad)

    gr.c4 = indexToIso(i + ad, j + ad)

​

​

    if (c) setGraphicTileColor([i, j], '0x' + c);

​

}

​

​

function indexToIso(i, j) {

    var x = ox + (i - j * ar) * as * at;

    var y = oy + (j + i * ar) * as * at / ai;

    // console.log('i2iso: '+i,j,x,y)

    return [x, y]

}

​

​

function isoToIndex(x, y) {

    var b = as * at

​

    var s = x - ox

    var t = y - oy

​

    var j = (t - s * ar / ai) / (1 + ar * ar) * ai / b

    var i = (s + j * b * ar) / b

​

    i = Math.floor(i)

    j = Math.floor(j)

​

    // console.log( 'isoToIndex: ' + x,y,i,j)

    return [i, j]

}

​

initScene()

​

var winmode = ''

var timer = setInterval(function () {

    if (window.innerHeight > window.innerWidth) {

        winmode = 'portrait'

    } else {

        winmode = 'landscape'

    }

    mt3.setText(winmode)

}, 500)

​

​

​

​

    function animate() {

        // console.log(window.innerHeight, window.innerWidth  )

        // if(window.innerHeight > window.innerWidth){

        //   console.log("portrait");

        // }

​

        requestAnimFrame(animate);

​

        if (dragging) {

            count2 += 1

            mt1.setText((count2))

        } else count2 = 0

​

​

​

        if (velx > 0) {

            myContainer.position.x += velx;

            velx -= 1

            // console.log(velx)

        }

​

        if (velx < 0) {

            myContainer.position.x += velx;

            velx += 1

        }

​

        if (vely > 0) {

            myContainer.position.y += vely;

            vely -= 1

        }

​

        if (vely < 0) {

            myContainer.position.y += vely;

            vely += 1

        }

​

        if (myContainer.position.x < borderL) myContainer.position.x = borderL;

        if (myContainer.position.x > borderR) myContainer.position.x = borderR;

        if (myContainer.position.y < borderD) myContainer.position.y = borderD;

        if (myContainer.position.y > borderU) myContainer.position.y = borderU;

​

        renderer.render(stage);

    }