People ask me sometimes how I make my interactive tutorials. I'm going to write some “making of” articles to share the techniques I use.
For some of my projects I want the reader to drag something around on a diagram. I use the position to control some aspect of the diagram. The curved roads page uses this. I want an easy way to constrain the ways you can drag something, and I also want a way to transform the variable being controlled into a position on the screen. Here’s an example of the kinds of things I want to be able to do:
(On this blog I'll sometimes go into the “making of” the game programming tutorials I post on my site.)
For my pathfinding pages I wanted to support "painting" on the map to make or erase walls. When you change the map, the pathfinding algorithm updates the paths. Here's how paint works:
mouseup event handlers on all the tiles.
- When you press the mouse button, I toggle the tile you're pointing to.
- When you move the mouse, I set the tiles you pass over to match the tile you first clicked on.
- When you release the mouse, I stop tracking the mouse.
For example, if there are three tiles
A B C and you are over
A without a wall, then press the mouse button, I put a wall at
A (toggle). If you then move the mouse over
B, I make
B a wall (set to whatever
A has). And then if you release the mouse over
C, I'll set
C to a wall as well.
When I first published the Introduction to A* article two weeks ago, I still had an item on my bug list to fix map editing on a touch screen. I wasn't sure why it wasn't working. I figured the touch events
touchend would map cleanly to
mouseup. But they didn't. After some debugging, I figured out that the
touchend events get sent to the object that received the
touchstart event. That means instead of seeing
C.mouseup, I am seeing
A.touchend. I don't receive events on
C at all.
To fix this, for touch events I look up the x,y position of the touch and map that back onto a tile. This is sort of annoying, as I figure browsers already have a way to map pixel locations to SVG DOM objects, but I don't know how to harness that lookup. Fortunately, most of the diagrams are simple square grids, so the code to map pixels to grid locations is easy.
There are some more tweaks for the page to work well on touch screens, but it should mostly work now.
People sometimes ask about pathfinding on isometric grids. This is the wrong way to look at it.
You're finding paths in the game world. Isometric is not part of the game world. Isometric is how you look at the game world. Consider the shortest path from New York to San Francisco. Does the shortest path depend on how you hold the map? No! The person looking at the map does not matter. The shortest path is the same no matter how you are looking at the map.