HTML5/JavaScript 2.5D - Making the ground in its own plane

Question

So, I'm really interested in starting an HTML5/JavaScript project that mimics this type of 2.5D style: http://superflashbros.net/2009/02/22/blue-rabbits-climate-chaos/

I'm personally trying to stay away from third-party scripts, and just keeping the core of the code pure JavaScript. However, my knowledge of trig isn't the best, so what would be the most appropriate way to tackle this perspective? I'm essentially wanting a game made with 2D sprites, but the ground plane (and perhaps buildings, as in the flash game) is skewed to give it a 3D feel. I'm not wanting to make a "Mode 7" engine (ie. SNES games like Mario Kart), as from my understanding that draws the ground in sections.

Any advice or resources I should look into?

score 5 · Answer 1 · answered Jul 08 '12 at 05:45

I only ask you to read more about this, and just so you know, I tried to do this one and I achieved a good result but I halted that project because of my new job.

Anyway, you can look into some game engines written in javascript for starters, here is the list of the well known game engines you might find interesting:

1- Three.Js

2- GameQuery (JQuery Plugin)

3- Isogenic engine

You can also check this blog post for more info 66+ Open Source JavaScript Game Engine for Serious Developers

Note: I know that you like to code your own javascripts and trust me this is a very good habit, However my advice is to try at least one Javascript game engine (if you can try more than one it will be good) to see how different engines work and how they run under the hood, that my friend will inspire you as well as help you to understand these engines to even make your own engine (this is NOT impossible).

I am not saying that you should try as much as you possible (coz that will be obviously pointless) but I am telling you to make small (tiny if possible) games with the engine of choice, I mean to get an idea of how Javascript game engines work in 2D then move to 2.5D or even 3D using WebGL technology.

Thank you for this, I'll definitely take a look into these engines as a form of inspiration. — clicheName, Jul 15 '12 at 10:35

score 4 · Answer 2 · answered Jul 15 '12 at 04:17

I checked your reference game out, and understand what you mean by "2.5D". From my understanding, the best way to tackle this problem is to create a pseudo third dimension by transforming the x,y coordinates of objects. You would have a function that does the transformation for you, and here is my best guess of an example.

// This function takes in a x- and y-coordinates of an object corner and returns the
// coordinates of the corresponding back corner of an object.
var transform = function(x,y) {
  // The farther the character is from the object, the more skew there would be.
  // Here "char" is your globally recognized game character. If it was not in the scope
  // of the function you'd have to pass it as a parameter.
  var skew = (char.x > x) ? (char.x - x) : (x - char.x);
  var newx = (skew * 0.1); // obviously this would be variable depending on your liking

  // If the object corner is not on the ground (y == 0) then subtract from it's value,
  // otherwise add.
  var newy = (y > 0) ? (y - 10) : (y + 10);
};

In my example 10 is the amount of distance units to change the y-coordinate by. This is how it appears your example game does it. Hope my input helps,

Reagan

This is a good start for the direction I was interested in. I was simply at a loss of where to even begin, so thank you. — clicheName, Jul 15 '12 at 10:36

HTML5/JavaScript 2.5D - Making the ground in its own plane

2 Answers2