4
\$\begingroup\$

I've been making a roguelike-style game in HTML5 without using canvas (only divs) with pure JS (fiddle!). I've been trying to enlarge the tile size (font size) while keeping the player centered within the camera. For some reason, when the tile size isn't equal to the map size, the camera will be slightly off.

Note that the 3D effect is on purpose. Without it, the camera is still off center, and I believe it adds some much needed depth to the scene. :D

When tileScale (line 4 in the fiddle) is 9 (very undesirable; the dots on the player's y axis should be aligned, not at a slight angle):

The camera is off!

When tileScale is 25 (on point!):

The camera is on point.

Here's some relevant (trimmed) code:

window.onresize = function(){
    game.viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    game.viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    game.windowSize = Math.min(game.viewportWidth, game.viewportHeight);
    // Droid Sans Mono has a ratio of 3:4 (width:height), conveniently.
    // This may be problematic. I'm not sure.
    game.tileWidth = game.windowSize*.6 / game.tileScale;
    game.tileHeight = game.windowSize*.8 / game.tileScale;
}

// Update the camera position (needs help?)
this.updateCamera = function(){
    // Get player coordinates (-.5 because we need to get the player tile center)
    // times the tileWidth plus the game window (inner square) size divided by two.
    var left = ((-game.player.x-.5)*game.tileWidth+game.windowSize/2)+"px";
    var top = ((-game.player.y-.5)*game.tileHeight+game.windowSize/2)+"px";
    game.planeContainer.style.left = left;
    game.planeContainer.style.top = top;
}

How can I ensure that the dots in the center of the screen will be always lined up, instead of on a slight angle? My current evidence suggests that the position of the game.planeContainer object isn't being established correctly.

I know this is a super-tough problem, so any help will be greatly appreciated. Thanks in advance!

(Another fiddle link, in case you skimmed over the first one. :D)

\$\endgroup\$
9
  • \$\begingroup\$ I'm not sure what I'm supposed to be looking at in those screenshots. What about those images is a problem? \$\endgroup\$
    – jhocking
    Mar 17, 2015 at 1:36
  • \$\begingroup\$ I guess the problem wasn't exactly clear, I've edited my post. Basically, the dots on the player's y-axis should be aligned, as seen in the second screenshot. \$\endgroup\$ Mar 17, 2015 at 1:46
  • 1
    \$\begingroup\$ oh so you don't want that perspective look. I'm not familiar with that particular API, but it looks like game.planeContainer is a 3D plane being viewed at a slight angle. \$\endgroup\$
    – jhocking
    Mar 17, 2015 at 11:44
  • \$\begingroup\$ @jhocking, looking at the CSS, that is exactly what's happening. OP: The container div has perspective: 750px and the plane div has transform: rotateX(45deg) \$\endgroup\$ Mar 17, 2015 at 12:01
  • \$\begingroup\$ I've edited the post; the 3D effect is there on purpose and my goal is to keep it while properly centering the container div (e.g., The second picture has a slight 3D effect while being centered). :) \$\endgroup\$ Mar 17, 2015 at 16:55

1 Answer 1

1
\$\begingroup\$

I found a possible solution. Simply remove the position: absolute; CSS rule on inner-text. This works on all (tileScale)'s that I thought reasonable to test.

Here's the code without that rule http://jsfiddle.net/t38k1j8w/76/

I also found some other styling things and could explain my process but wasn't sure if it was important.

\$\endgroup\$
2
  • \$\begingroup\$ At first glance, this seems to work, but setting tileScale to 4 and looking at the line below the player shows that this does not exactly center the div (take a look at the leftmost yellow dot on said line). I'll keep this in mind; but note that the position: absolute rule here exists to center the text character in its containing tile div. Thanks for the insight, though! \$\endgroup\$ Mar 18, 2015 at 3:05
  • \$\begingroup\$ There was another way to do it but I stopped half of the way though since I found that removal to work. Can you explain the alignment you want in a little more detail. \$\endgroup\$
    – Josh
    Mar 18, 2015 at 4:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .