The Sound Guy…

It would normally be a little early for me to be involved in a game’s development. The sound and music doesn’t get tackled until there’s a brief put together: some storyline, visuals, characters, possibly even some playable elements. This is different though, we’re getting our heads together as a team. We’re all chipping in ideas for ‘Grumkin’ to craft into a staggeringly brilliant playable story…lucky him. So I am in on how things are developing and can build ideas as the rest of the elements grow. For now things are vague, so I’m feeling pretty vague too. I get the feeling that atmospheric sound beds are more the ticket than big chest-swelling themes, so I’m doing some research in that area. I had a listen to two game soundtracks today: Harry Gregson-Williams’ ‘Metal Gear Solid 4′ (nope, full of big themes and cinematic orchestras), and Mark Morgan’s ‘Fallout’. Well, now this is a bit more like it! There may not be much in the way of grand themes, but talk about atmosphere! It’s full of fabulous layers – quite a few very reminiscent of a certain Korg synth I have in my collection – and evocative sounds. Drawing influences from other soundtracks is always a great start for me. It isn’t about copying or writing a pastiche; it’s about striking a spark. For example, when I’m listening to a song my mind fills in a rhyming couplet before the singer gets to their next line. It is much the same when I listen to music: timbres, phrases and next steps spring to mind like so many threads. If I then take up some these strands, something completely new emerges. So I think I’m going to blow the cobwebs off the Wavestation and start fiddling with some settings on the fabulous Absynth. This is also the perfect opportunity to take the wrappers off the sound design sampler I built earlier in the year. It’s going to be a lot of fun mashing up home recordings of my fan oven and my wife’s bottle of hair mousse…did I type that last bit out loud?

So, there may be nothing specific to go on for now, but in the meantime I’ve got my toys to play with and the inspiration of some great composers. *Enter here the sound of someone licking their lips*!

Hello world! We (will?) bring you games!

In every man’s life (I’ve never been a woman, therefore can’t speak for them) comes a moment when he wants to become a games designer. And if that moment came to you somewhere around mid- to late nineties, and you were in a possession of a programmable computational device (in fashionable beige), then you’re in luck. Chances are, you grew up to become John Carmack, Ken Levine or some other Molyneux or whatever. Lucky bastards, the lot of them.

Now. It might have happened however, that you only got your first computer long after your friends’ dogs had their own and you didn’t really think that a game design could be a thing people really do, like a job, like, you know… Not until comparatively recently, when you’ve made your career and life choices, and your car needs a new set of tyres and you think which school you’re going to send your kids to, and what’s for dinner tomorrow? Basically, that chilling moment, when you realise, it’s far too far too late. Oh god, was that a care home ad I just watched?

Anyroads. If that’s when THE MOMENT comes to you, at first you’d be excused to think that you’ve been well fornicated in the exhaust pipe, hit the bottle and spend the rest of your days (numbered in single digits) sobbing.

Or you can think: well, I’ve got a job anyway, the mortgage will be paid one day, and I sure can find an hour or two a week to put some ideas together. Might as well give it a try…

Which is absolutely not the way I see it. It’s not about giving it a try. I aim at greatness. I know I have it in me. I just don’t know how to get there. Shit, I don’t even know where to start :-/

So this is where we’re at right now. Four blokes, different sets of skills each, different age, different experience, two different countries. Should be fun. We have ideas though and a shade of conviction that our skills put together could actually compliment each other on a path to a real product. So that’s where we’re going. And since I’m the only one here without any REAL skills, I became the writer. So be it. It’s not that complicated in the age of spell-checkers. But since I appear to be the most floating member of this crew, it seems that I might find myself in greatest need of honing, organising and disciplining. Therefore I intent on making my contribution to this blog a part of a solution to this problem. After all, promising to yourself when no one’s listening is easy. If you fail to deliver, who’s to know, right? So let’s up the ante, go public with the promises and progress reports. Let’s put it out there, for everyone to see. Who knows? Maybe that’s exactly what some drunken, sobbing wannabe games designer out there needs to see to turn his nigh on ruined life round?

Just don’t you dare to make a better game than ours, for decency’s sake. Also, I will find you and I will stab you to oblivion with a 3.5” floppy.

So that’s the introduction done. The first work-in-progress post coming soon!

grumkin

Canvas size – first problem in learning HTML5 Canvas

Well, it’s suppose to be easy, but every time I try to learn about the canvas element I learn that something is not right. And the whole point is – I’m reading perhaps the third book about canvas and it seems they just don’t write about this problem, like it’s suppose to be obvious.

So here’s how it was. I created a canvas element:

<canvas id=”GameCanvas” class=”game-canvas”></canvas>

And have given it a style:

.game-canvas {

    width: 800px;

    height: 500px;

}

And managed to draw something!

var ctx = $(‘#GameCanvas’)[0].getContext(‘2d’);

ctx.lineWidth = 5;

ctx.strokeStyle = “rgb(255,0,0)”;

ctx.strokeRect(100,50,200,300);

ctx.fillStyle = “rgb(0,0,255)”;

ctx.fillRect(100,50,200,300);

And I get a blue rectangle within a red rectangle border. Success! Or, not really. Because it’s cut. The canvas is kind of small. So I make it large with CSS. Only it scales the cut rectangle…

01 - example

It appears that there are two widths and heights for canvas. The display width and height (and that’s something I have been modifying) and the canvas’ drawing width and height. With the last two by default in only enlarged the canvas.

Thanks to Google I found the solution:

// I use jQuery to get the browser window width and height.

var screenWidth = $(window).width();

var screenHeight = $(window).height();

var ctx = $(‘#GameCanvas’)[0].getContext(‘2d’);

// I make the canvas’ width and height equal to the browser window

ctx.canvas.width = screenWidth;

ctx.canvas.height = screenHeight;

// I enlarge the canvas display width and height

$(ctx.canvas).css(‘width’, screenWidth);

$(ctx.canvas).css(‘height’, screenHeight);

And so it works.

At first I didn’t want to use jQuery because I wanted to keep it all as simple as it gets. But once I needed to get to window’s width and height I decided to skip idealism and head for effects :-) So I believe I’ll be aided by jQuery from now.

And now, the learning can continue…

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.