Jump to content

Placing objects in a 48px grid


Recommended Posts

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?

Link to comment
Share on other sites

for grid, play with modulus operator

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


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.


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.app.screen.width / 2,
      this.app.screen.height / 2
    this.imageSprite = new PIXI.TilingSprite(


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

Link to comment
Share on other sites

6 minutes ago, jonforum said:

try look here, it basic and not use pixijs, but pixi use same logic.


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


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...