Example of drag & drop on isometric grid?

Post reply
1 favourites
  • 9 posts
From the Asset Store
Grid - snap to grid
$5 USD
Snap to visible grid - perfect solution for any game genre
paradine's avatar
paradine

  • I've seen a few examples of object/character movement on a grid using directional controls, but is there an example that shows how to use drag & drop or similar to constrain the movement of a sprite to an isometric grid?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Do you have an isometric grid already set up? Not all isometric grids are created at the same size/angle, so the exact way to do it would depend on what you've got.

    I'd assume any isometric grid set up already has a way to translate screen coordinates to grid locations, which means you should have a way to get/snap to the nearest grid. Then you would just set the position of the object to the nearest grid coordinate every tick instead of the mouse coordinate.

  • Thanks for the response. The challenge I'm having is that the target grid points are offset because of the isometric arrangement, as opposed to standard horizontals/verticals.

    Can you point me to an example that shows what you suggest?

  • I created an old tutorial about isometric mouse snapping. Principles are same for drag&drop. But as oosyrag pointed, calculations will change depending on angle.

    https://www.construct.net/en/tutorials/z-ordering-isometric-grid-749

  • Thanks for the helpful responses, but I'm still not able to work out the math.

    I'm using a grid that's based on a 30° angle, so a slope of 0.577 (or gradient of 57.7%). Apparently substituting those values in the formula doesn't work, or I didn't set up the values correctly?

  • What is the size of your tile?

    Edit: Never mind, here is an example with any size tile. It's a little messier to read though.

    dropbox.com/s/452gu6gpqbbi4ka/isoexample.c3p

    Some additional tweaks in this particular example include centering the origin tile 0,0 by ORIGINOFFSET, which is viewportwidth/2, and offsetting the mouse screen coordinate input by tile.height/2 to center the highlight, since the origin point of each tile is currently at the top of the tile instead of the center.

    Basically it's still "Get the nearest isometric tile coordinate from the mouse location, and set the object position to the screen coordinates corresponding to the tile coordinates".

    The main difference from orthographic projection is that any given x or y isometric position requires both an x and y input to get, while in an orthographic system you would only need an x input to map to an x coordinate, and y input for y coordinate.

  • Wow, that's fantastic oosyrag, thanks so much. I'm guessing this is a Construct version of the article you posted from the ClintBellanger site?

    Looking around the net at other isometric game examples, I assume most people use the 2:1 ratio of tile dimensions because it's easier to do the math. Interestingly, in the illustration field, isometric art is generally more often created using 30° angles, presumably because 30 is an easier number than the 26.57° that's needed for 2:1 tiles.

    Next I'm hoping I can adapt the info from your isometric z-order project.

    Thanks again for the example.

  • I believe the example I posted should work with any size/ratio tile. Just change the size of the sprite object for the tile. Let me know if it breaks and I'll take a look again.

Post reply
  • 9 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)