How can I imitate interaction and movement in Diablo II?

Question

I'm prototyping a simple browser-based game. It's played from a top down perspective on a 2d canvas.

You left-click on a point on the map, and your character will begin walking to it. If you click on a different point on the map, then your character will begin walking to the new point.

It's similar to Diablo II. (a demonstration video)

How can I best imitate this movement system for a player? Ideas...

• Track current coords and target coords

• If target coords are exactly up, left, right, or down, then increment appropriate direction until you get there

• Implied else: target coords are in a quadrant. To make this movement look natural, character will have to move diagonally. For example, pretend the target is to the northeast. For each game frame, alternate incrementing current coordinates in the north and then east directions.

Answer 1

Your procedure sounds o.k. Whenever the user clicks somewhere on the canvas/map, take the players current position as starting-point and move to the clicked tile.

Instead of having different cases for straight and diagonal movement, you could use the Bresenham's line algorithm to get an optimal line from A to B.

This is all going to fall apart as soon as you introduce obstacles though (walls, trees, etc.). If that's the case, I suggest you implement some path-finding algorithm to find the path around the obstacles.

Answer 2

Are you familiar with graph theory concepts? Do some googling if you are not familiar.

Diablo II is a tile-based game using isometric tile rendering (as opposed to say Pokemon which is orthographic).

So, your map will need to be split up into tiles. Each tile would be a node in the graph with edges connecting to adjacent tiles. To move from tile A to tile B, you would run some sort path finding algorithm to determine which tiles your character should be walking on to get from A to B while avoid obstacles that occupy a number of tiles. Your character may not walk actual geometric shortest distance so to get a smoother path you need smaller tiles at a performance cost. For some advanced techniques you can refer to this paper which compares performance of several tile formats (hex, octal, square).

If you have no idea what I'm talking about then you probably want to start with something simpler...

Answer 3

I'm pretty sure Diablo allowed diagonal movement. (even though the sprites only faced in discrete directions, movement was basically in any direction). Remember the movement is based on vectors and depends on current framerate as well as character speed.

so basically:

on click(x,y):
   direction = {x: x-player.x, y:y-player.y}
   direction = normalize(direction)

on updateframe(elapsedms):
   multiplier = elapsedms / 1000 * player.movespeed
   player.x += direction.x * multiplier
   player.y += direction.y * multiplier

Answer 4

I don't know how experienced you are in JS/HTML5 for game design, but this site, it's isometric examples will explain how to make the needed functions for coords and moving around a map. Also how to do collision detection and map editing stuff.

Although the examples are in isometric the functions apply to any graphical game with the similar concepts. The only difference to non-isometric games to isometric games is the maths you apply in the functions. As you aim to do a top down view, the maths is much simpler... isometric is a bit of a mind twister at first.

Answer 5

You might check out how Mozilla's HTML5 game BrowserQuest implemented movement, as it works just like this, and the code is open source and well documented. For example, here is BrowserQuest's pathfinding function.