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: http://dev.plastbox.org/isoengine/ It's continually being modified though, so it might not work at all every now and then.