2.5d grid, matching sprites

[Queue]

Hello,

I am trying to get a "building" engine done. Where the user can place building on a 2.5d grid via drag and drop.

Generating the grid was rather simple (code appended in the end). But I am struggling with fitting in sprites.

My idea was to append a size (e.g. 2x2) to every sprite and then put the sprite on the closest possible position when dropped. Is this a convenient approach?

Do you have any ideas on how to append the size to an sprite in the most flexible way? e.g. if I want a sprite later on to have another size it should not involve "redesigning" the sprite itself and rather be somewhere close to only a changed number.

Best Regards

Queue

Mentioned Code snippet:

 function drawMapRectangle(x, y, size, angle, graphic) {
        graphic.moveTo(x, y);
        graphic.lineTo(x + size*angle, y - size);
        graphic.lineTo(x + size*angle*2, y - size);
        graphic.lineTo(x + size*angle, y);
        return graphic;
    }

    var app = new PIXI.Application(800, 600, { antialias: true });
    document.body.appendChild(app.view);

    var container = new PIXI.Container();


    // set a fill and a line style and draw a 2.5d rectangle via function
    for(var x = 0; x < 10; x++) {
        for (var y = 0; y < 10; y++) {
            var graphic = new PIXI.Graphics();
            graphic.lineStyle(2, 0x000000, 1);
            graphic.beginFill(0x00dd00, 1);
            graphic.interactive = true;
            graphic.mouseover = function (mouseData) {
                this.alpha = 0.5;
                console.log(this);
            };
            graphic.mouseout = function (mouseData) {
                this.alpha = 1;
            };
            container.addChild(drawMapRectangle((x+y)*20*3, 600-y*20, 20, 3, graphic));
        }
    }