Starting an HTML canvas game with no graphics skills

Question

I want to do some hobby game development, but I have some unfortunate handicaps that have me stuck in indecision; I have no artistic talent, and I also have no experience with 3D graphics. But this is just a hobby project that might not go anywhere, so I want to develop the stuff I care about; if the game shows good potential, my graphic "stubs" can be replaced with something more sophisticated. I do, however, want my graphics engine to render something approximate to the end goal.

The game is tile-based, with each tile being a square. Each tile also has an elevation. My target platform (subject to modification) is JavaScript rendering to the HTML 5 canvas, either with a 2D or WebGL context.

My question to those of you with game development experience is whether it's easier to develop an isometric game using a 2D graphics engine and sprites or a 3D game using rudimentary 3D primitives and basic textures? I realize that there are limitations to isometric projection, but if it makes developing my throwaway graphics engine easier, I'm OK with the visual warts that would be introduced. Or is representing a 3D world with an actual 3D engine easier?

Answer 1

Generally speaking, 2D and pseudo-3D (such as isometric and other axonometric projections) is much easier than 3D in many regards.

First of all, 3D game logic is way more complex than 2D - many simple techniques for things like collision detection and physics simply don't work in 3D, and even for those that do, wrapping your head around what happens is significantly harder in 3D. (After all, we humans are built for living on a relatively flat surface, so our brains are inherently 2.5D).

Another problem is that 3D artwork is a lot more complex. With 2D graphics, you only have one viewpoint to consider; if your sprite looks good in the editor, it will look good in the game. In 3D, you are typically using mesh models, and they are dynamically shaded, and both the viewpoint and the light direction can be virtually anything. Your models still need to look convincing at all times, which makes creating them much harder than 2D sprites.

And then there are the technical constraints of the web:

• WebGL is not yet universally available; getting it to run at all involves quite some black magic on some platforms, and even if it does work, performance characteristics are quite unreliable. 2D canvas, by contrast, works out-of-the box on any recent browser and OS. Doing 3D graphics on a 2D canvas, while perfectly possible, requires considerable trickery to get partial occlusion right (either clipping polygons against each other yourself, or using the sub-optimal Painter's Algorithm), and textured primitives are pretty much impossible. You'll also have to write all the lighting code yourself. A typical isometric graphics engine, however, is perfectly doable on a 2D canvas.
• Javascript is single-threaded, and wasn't meant to provide accurate low-granularity timing, which you need for smooth graphics. Hickups in animation smoothness are much more tolerable in a 2D game than in 3D, unless the 3D scene is mostly static and doesn't involve a moving camera.

Answer 2

This is an extremely late answer but if you're still at it or working on something similar lately...

Sprites all the way! I worked for a long time in 3D graphics, and it's complicated. The research is always changing there, game engines are going to crazy heights, etc. You can end up spending months just learning about how to implement the latest effects and shaders, e.g. Just animating a character with bones when you start can take quite a bit of time from designing the scene graph and motion hierarchy to the IK solver.

3D modeling is also time-consuming. It can sometimes be faster if you are going for a very blocky 3D look or something since you just make a simple model and don't have to draw all the individual frames. If you're trying to make an elaborate 3D model with complex textures though, just the process of UV mapping and painting and rigging/skinning (if it's a character) might take longer than it takes you to plow through a dozen sprite sheets.

Isometric does make it a little bit tricky -- it's hard to draw isometric graphics... I'll get to that below.

I have no artistic talent, and I also have no experience with 3D graphics [...]

How about retro style? It's getting a resurgence. By that, I mean really chunky pixel art, like this:

It's old-school-stylish and this kind of style can actually pass for a commercial indy game.

The game is tile-based, with each tile being a square. Each tile also has an elevation.

Does it absolutely have to be isometric? Isometric graphics are really hard to draw. I used to do pixel art ages ago (not at all as an artist, just as a starving indy gamedev) and isometric was so hard. My lack of artistic skills showed through the most there with that kind of perspective, since I couldn't draw things properly in perspective.

It's easier to use goofy perspective like in that screenshot above, or more appropriately for yours, a top-down view. If the concept of elevation is not absolutely crucial to convey visually, like in a tactical RPG or strategy game, you can always use tiles that kind of represent that concept another way. Example:

... you can use this kind of tile view with mountains and forests and stuff with varying elevation if it's a turn-based game. It doesn't communicate the concept of elevation so directly visually, but if it's not crucial to do so, this would really help you focus on the gameplay a lot more and this kind of style still tends to be popular on web and mobile kind of contexts.

At least I used to draw sprites and tiles like in this immediate game above, and that was still time-consuming. Isometric would eat all my time, even though I still think 2D is easier. Maybe it would be useful to hook up with an artist buddy if the elevation concept is crucial to communicate visually, like in this game:

Answer 3

2D isometric sprites based game is significantly easier than 3D in HTML canvas.