Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have tried searching and reading for an answer, but the information I could dig up either didn't fit what I need or was in the form akin to "Just multiply the vectors with the inverse matrix of.." which to my brain (unfortunately) makes just as much sense as someone speaking Mandarin.

The plan is to use requestAnimationFrame and canvas for the drawing, and WebSockets for the communication. I already have a fair grasp of requestAnimationFrame and canvas, and some hacked together code for a php WebSockets server with support for most of the currently-in-use drafts. This is a project for fun and learning so please, no comments on how silly it is to write server software in php

The main hurdle arises when I try to implement movement. I have code for drawing a map both as staggered and diamond shaped. I even had click-to-walk type movement implemented, but I hit a wall when it came time to implement collision detection.

See, my player exists in the coordinate system of the canvas, along with mouse events etc. What I did was draw the character sprite in the middle of the canvas, and animate the offset of the map by the difference between the center of the canvas and a clicked point. Thing is, I would like to keep my "world" (e.g. map, player, objects/entities) in memory as a regular grid map, and just have everything drawn with isometric skewing. This would make implementing collision detection very simple.

As it is right now, adding 32px to the players x-coordinate doesn't move him along the maps x-axis but rather that of the canvas. If increasing the player's x moved him along the maps x-axis then as I said, implementing collision detection would be as simple as checking whether the next tile along that axis is blocking or not, and update my x-position based on that.

Short question is: given the player's x- and y-coordinates, how do I calculate the appropriate map offset so that increasing either coordinate will move the player along the appropriate "in-game" axis?

Thanks, and a link to my hacked together initial test: It's continually being modified though, so it might not work at all every now and then.

share|improve this question
consider revising, and cut the chase faster. also I do not feel that this has to do with your title – gardian06 Apr 29 '12 at 17:31
what about implementing traces (draw a line from the point on the screen the mouse exists on to the first thing it hits in the word) take the position of the camera, and the position of the pointer, and then do a ray trace to the game world – gardian06 Apr 29 '12 at 17:43
gardian06: Sorry for the long post. Didn't want to be yet another n00b asking for something without giving enough info for it to be possible to answer. The title is relevant because I have two different coordinate systems I need to convert between. I have the draw-offset of the map (where the player is), and I need to find the player's in-game coordinates. – PlastBox Apr 29 '12 at 17:53
I think canvas might be your problem (have not worked with php canvas, but have done work with other systems canvas) in order to work with the canvas, and translate between the canvas, and the world you need to use traces, but if you are able to implement a camera that is based on the players position in the world then that should clean up so much of the work for you, and you can implement cleaner. look into implementing a camera into your framework instead of canvas (as you said learning, and part of learning is stepping outside of comfort zone) – gardian06 Apr 29 '12 at 18:03

Look up transformation matrices, you might need both translation(x/y/z offset, basically) and projection. What you are looking for is an orthographic projection matrix.

Once you have created this maxtrix, multiplying your player position as a vector by the matrix will translate it from object/world coordinates to screen coordinates, i.e. your rotated map.

This will allow you to simply add one tile unit to your players x and/or y coordinate, transform them and get the screen coordinate.

Alternatively, you could transform initial direction (1, 0) and (0,1), to screen space, save those, and simply add one of those to your player's screen offset to move him around, however that won't leave you with transparent tile coordinates for your player.

As for detecting where the user clicked, since you are working in an isometric world everything should be parallel, so you figure out the directions for left/right/up/down in screen space, and then compare those with where the user clicked.

I'm in a rush now, I'll be back later if someone else hasn't posted more by then.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.