Placing objects in a 48px grid

[TufanMeric]

I don't know if it fits this forum but i'm gonna ask it anyway, feel free to remove if it doesn't belong here.

I'm making a tower defense-like game and i want players to be able to place objects anywhere they want in a grid full of 48 pixel blocks.

There are 2 problems:

Problem 1 - Mouse position

I was following the drag&drop tutorial, it worked before i destroyed the math behind it.

As you can see in this gif, object is not in the center of the mouse, which is very annoying.

Problem 2 - Object position

You might've noticed that the object doesn't exactly fit in the grid, this only happens when the screen height is not divisible by 48.

Drag & Drop code

    this.BuildingList = new PIXI.Container();
    this.minerContainer = new PIXI.Container();

    this.BuildingList.x = Math.floor(this.game.app.screen.width / 2 / 48) * 48;
    this.BuildingList.y =
      Math.floor((this.game.app.screen.height / 48) * 48) - 48;
    this.minerContainer.on('pointerdown', function(event) {
      this.data = event.data;
      this.alpha = 0.5;
      this.dragging = true;
    });
    this.minerContainer.on('pointerup', function() {
      this.alpha = 1;
      this.dragging = false;
      this.data = null;
    });
    this.minerContainer.on('pointermove', function() {
      if (this.dragging) {
        var newPosition = this.data.getLocalPosition(this.parent);
        newPosition.x = Math.floor(newPosition.x / 48);
        newPosition.y = Math.floor(newPosition.y / 48);

        this.x = newPosition.x * 48;
        this.y = newPosition.y * 48;
      }
    });

minerContainer is a child in BuildingList, which is a children of stage, how can I fix the problems above?

[taoprox]

Problem 1 can be solved by subtracting half the size of the image from both x and y.

I am not too sure what you mean in problem 2, it looks like it is aligning properly.

[TufanMeric]

Just now, taoprox said:

it looks like it is aligning properly.

It's not if you look at both the objects at the end of the gif, second one is on a bit higher y than the first one

[jonforum]

for grid, play with modulus operator
https://www.w3schools.com/js/js_operators.asp

Just search on youtube, you will see how create grid with modulus operator

youtube.com/watch?v=nvMheqDMHK0

math.floor here can be replace by Double bitwise

~~

for snap to grid, modulus will also solve your issue, but you will need to play and study it before.

 

[ivan.popelyshev]

Floor or | 0 is fine too

[ivan.popelyshev]

I know whats wrong with it. Whats your css? "width=100%; height=100%" ?

Make sure that css size of canvas element is exactly its width/height. Check if you use any "translate(stuff)" operators in css. 

Read this paragraph: https://github.com/pixijs/pixi.js/wiki/v4-Gotchas#css-transforms-on-canvas

If you have scale on stage to compensate for something, dont forget to transform mouse coords to local with "worldContainer.toLocal" (its about parent) or http://pixijs.download/dev/docs/PIXI.interaction.InteractionData.html#getLocalPosition , actually same thing, calls toLocal somewhere in the code.

[TufanMeric]

This is the best i could do, which didn't solve the problem.

    this.minerContainer.on('pointermove', function() {
      if (this.dragging) {
        var newPosition = this.data.getLocalPosition(this.parent);

        this.x = newPosition.x - (newPosition.x % 48);
        this.y = newPosition.y - (newPosition.y % 48);
      }
    });

I think it may have something to do with how i place the background, I have no idea if it's the correct way of doing it or not.

    this.camera = new PIXI.Container();
    this.camera.position.set(
      this.app.screen.width / 2,
      this.app.screen.height / 2
    );    
    this.imageSprite = new PIXI.TilingSprite(
      PIXI.Loader.shared.resources['assets/grass.png'].texture,
      38400,
      38400
    );

    this.camera.addChild(this.imageSprite);

I don't have any transforms on css and i don't scale anything.

[jonforum]

try look here, it basic and not use pixijs, but pixi use same logic.
https://codepen.io/osublake/pen/b46392f9d230db0521502815ae836106

https://codepen.io/MAW/pen/OPWLOx
 

those demo are good and show you some basic math formula

[TufanMeric]

6 minutes ago, jonforum said:

try look here, it basic and not use pixijs, but pixi use same logic.
https://codepen.io/osublake/pen/b46392f9d230db0521502815ae836106

https://codepen.io/MAW/pen/OPWLOx
 

those demo are good and show you some basic math formula

I can place objects perfectly to the grid now

        var x =
          this.data.global.x + game.camera.pivot.x - game.app.screen.width / 2;
        var y =
          this.data.global.y + game.camera.pivot.y - game.app.screen.height / 2;
        game.socketManager.sendPlace(
          game.entityTypes.MINER,
          x - (x % 48),
          y - (y % 48)
        );

but i still have the problem 1, i couldn't make dragging look the same as how it looks when i place it. Will upload a gif.

Edit: Here's the gif