DOM vs Canvas

It’s been a while I suppose one day I will need to write a post about how to manage your time in order to create a game, work full time and be a good husband (and if I wait with writing this tutorial I will need to add an additional chapter about kids ). But right now I want to break the silence to think aloud.

When I think about the future game I want to make it with html5 canvas. Gives possibilities, they say, it’s the best base for future html5 games, they say. The closest thing to making “traditional” computer games. And then I saw this.

It’s exciting just to analyze it. Someone created half of a Street Fighter game. The stage and Ken are HTML divs, the animation is based mostly on CSS (there’s a JavaScript part for making Ken animate and it’s all about adding/removing CSS classes!), the rest is JavaScript. Neat, I especially like the CSS part. Using all of those elements, the developer responsible actually achieved what many programmers want to achieve: code readability and relatively high code maintainbaility.

So if it’s so neat then why not?

First of all, if you want to do a 3D game with DOM you’re going to have some hard time. DOM is a farely good option only for 2D. Canvas gives you more possibilities (For example: 3D graphics with WebGL). One day, I’ll probably want to create 3D games. It would be good to have all this cool code I created almost ready to use, right?

Second, they say that the DOM is slow, but I think that progress have been made and every day it will be less and less slow.

While reading the code and wanting to troll about it, I recalled an idea I had before. Making a whole game based on the DOM perhaps isn’t the best of ideas, but one can still make the DOM useful. Instead of redrawing all the game elements on the canvas I will do that only with the game environment itself, while, for example, the GUI will be entirely in DOM. I will only change some values, like ammount of ammo, health points, while the frame in which this information is viewed will be drawn only once. I suppose it could make a browser game developer’s life easier.

Time will tell if I’m right.

Webbrowser game – DevDiary #1

Well, before I start with some HTML5 Canvas game loops I will need some tools, that can simplify my developer life later.

Using the knowledge found on StackOverflow I added a function to the navigator namespace, that will help me distinguish browsers. This will become quite useful in the near future.

 

My first milestone is to create a console logger for future debugging. Why create a logger if you can use console.log()?

First, I need to learn the difference between several browser developer tools and if there are differences – create one tool that will work on every browser.

Second, there may be a possibility that once the game is almost ready I will want to hide all the debugging logs. And what way to do that would be better? Deleting all the code that creates the messages (and put it all back once a gamer finds a bug?) or create a boolean flag that will hide/show the messages?

That’s my first task. I will write what my logger should do, and then I will post it’s code.

 

The first project – a browser based game

I won’t tell you what the game will be about or what genre it will represent, but I can tell you it’s technical details. I will need a codename for it, so let’s call it… Icebreaker (I suppose this name will change )

How I see it? I believe that webbrowsers may become an equivalent of a game console. Game consoles are suppose to be very convenient when it comes to game development. If you create a game and it works on one Xbox360, then it will work on every Xbox360. I believe that if you make a game that works on Chrome it will work on every computer a Chrome works on. I’m not sure how right or wrong I am, but we will find out eventually.

For the first game I decided these technologies I will want to use:

• HTML5 (probably 2D canvas)
• JavaScript
• PHP and AJAX (if there will be a backend, and I suppose there will be)
• MySQL once a database will be needed (this one may actually change)

I don’t know what other technologies will come in useful.

I also don’t know what browsers will be supported. Chrome definitely.