How do I set a sprite's position to the nearest image point?

  • I'm working on a block puzzle minigame that I intend to use as an inventory management sort of deal for a larger game.

    In this game, the player needs to arrange blocks on a grid.

    The player can click and drag the pieces onto the grid and rotate them with A and D. If the player drops the piece on the boundary, or on top of another piece. the piece returns to its home area.

    My question is, how do I get these pieces to "click" into place, so that when the actual graphics for the pieces are brought in (which will snugly take up the entire grid space) they all line up nicely and neatly? I had the idea of making the grid underneath a sprite, and placed image points at the center of each black node. I figured I could have the pieces check to see if they are colliding at all with any other pieces or bounding boxes, then, once those checks are passed, have it align an image point on the piece with an image point on the grid.

    However, either this sort of thing isn't supported or I just don't know how to access those features.

    Does anyone have a suggestion on how to achieve this piece clicking effect?

  • You can make a grid with square sprites and use "Pick nearest" to find the nearest cell.

    Or use a tilemap, it has SnapX and SnapY expressions.

    Or you can do it with math. Say your grid cells are 10*10px. And player drops a piece at x=77, y=22

    Use these formulas to find the nearest cell:

    nearestX = (round(x/10)*10)=80

    nearestY = (round(y/10)*10)=20

    Once you know the destination coordinates, you can move your piece there using a behavior like MoveTo or LiteTween.

    Or without any behaviors:

    On every tick

    Piece set x to lerp(piece.x, destinationX, dt*4)

    Piece set y to lerp(piece.y, destinationY, dt*4)

  • I'll give this a try and report back!

  • It's a bit strange, but I can't seem to locate Pick Nearest in my Construct at all. I've found a few images and topics where people refer to Pick Nearest, but I don't seem to have it in mine. Is this something I have to download from somewhere?

    I have my square cell sprites prepared and laid out, as well as my drag and drop behavior set on my red and blue pieces, but none of these seem to have this condition available.

    So I decided to try laying out the tilemap as you suggested, and I got so far as On RedPiece DragDrop Dropped > Set X "Tilemap.SnapX". What expression goes in the parenthesis to snap my piece

  • Add event -> CellSprite -> Pick nearest/furthest -> Nearest to (x=Piece.x, y=Piece.y)

    With TileMap:

    On Piece drop

    ...Piece set x to TileMap.SnapX(Piece.X)

    ...Piece set y to TileMap.SnapY(Piece.Y)

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I was able to get the Tile Map method to work! My pieces are dropping in properly and giving the player points! Thank you!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)