Skip navigation

Tag Archives: canvas

Here come more snakes

Yesterday we released Crajsh, a new time-waster from Mars. It was entered to the Mozilla® Game On competition.

It looks like that

A 3 player game.

The music was done by kaneel. I can’t thank him enough because he is easy-going and pleasant to work with. I heard he would be interested in more indie game collaboration.

The logo was done by Graindolium. It’s not his best work pixel-wise but he his on his own projects and I think this will turn out interesting.

This blog post is intended to focus about the game and not the technicalities. That will come later. I know it feels like we released a smaller, easier game that Wormhol was, but in reality it was quite a lot of work to optimize so that it runs smoothly in browsers. The game works in current browsers: Firefox 3.6+, Chrome 8+, Opera 10+, Safari, IE 9 beta.

Note that the development isn’t finished and feedback will be listened.

CRASH

CRASH from Digital Nightmare Games is the original inspiration. It’s an old DOS shareware I used to play with my sisters years ago. I don’t know what the original author is doing nowadays. I wanted to play it again in mid-2010 but it now requires emulation to work. Most of the good ideas come from this game and this is a way to pay respects to the authors.

I think what this game really got right was how limited the available information was to the player. You would pretty much don’t know where you are, where to go, how to reach ennemies… so you would try to make it through from restricted “tunnels” to small areas. This was pretty addictive. Fighting with AI players and trapping them was a lot of fun too, but on their own they would not survive long enough to make courageous strategies valuable. The AI wasn’t really mean enough.

So I tried to improve the AI and so far I’d say it feels like the computer is trying hard to kill you. This is fortunate because I’ve never programmed it this way. Seems like simple rules can do wonders when there is enough of them. At this moment the AI players do not survive as long as they might. Especially they don’t see the urge to shoot in a corridor setting.

A closed world

Like Vibrant and CRASH, you are enclosed in the game world with little time to breath. The map is wrapping: if you make it through a wall you will end up at the opposite point of the map.

There was a bug in the original CRASH about world boundaries. The map would wrap vertically. But if you did make it through the heavy East or West walls you would end up in the dangerous world of computer memory. The game would stop a bit after due to memory corruption. It was like discovering a forbidden area within the game.

Split-screen

Like Wormhol you can play Crajsh with 1 to 3 other players on the same computer. When the game end you get a world view of what happened.

 

world view

You lose. Here is why.

To make the game a bit more varied I included random patterns on the map and powerups. More content to come. As always your feedbacks are very valuable to me.

Advertisements

This blog is silent since a while

This is what happened :

  • I’m in stealth mode. A new game will be released January 11, 2011.
  • I interrupted the stealth mode to enter the JS1K x-mas edition with this demo. It’s pretty uninteresting because I used the exact same trick as Marijn Haverbeke, the first JS1K winner. Also it doesn’t look the same in all browsers.
  • You can now follow Games From Mars on Facebook. Unlike my twitter, I will only talk about my games there. My #1 rule is to shut up when I’ve nothing to say.
  • I think I’ve completely recovered from this year burn-out. I can now work at full speed again.
  • Vibrant has been in the “indie games” pages of Joystick, a well-known french magazine. It feels great to read something on paper about my work, even if it brought little traffic as compared to a blog post.
  • I still like lists.

Stay tuned.

Hypnoglow with <canvas>

I submitted an entry to the js1k contest. You can view it here. It’s not terribly fast so I suggest using Chrome to view it.

Prior art

What I describe in this post is neither new nor advanced. It’s just my implementation. Mathieu “p01” Henri did <canvas> hypnoglow 2 years ago, and won the 20 lines “Zoom” Javascript contest. Also here. I didn’t know about other Javascript contests before js1k.

Making-of

I wanted to introduce a recursive, large kernel blur with my entry. I stumbled upon the W3C page which says this:

To draw images onto the canvas, the drawImage method can be used.

  • drawImage(image, dx, dy)
  • drawImage(image, dx, dy, dw, dh)
  • drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Each of those three can take either an HTMLImageElement, an HTMLCanvasElement, or an HTMLVideoElement for the image argument.

So my initial entry was doing something recursive like that:

context.drawImage(canvas, 4, 4, width-8, height-8, 0, 0, width, height);

where context is the context associated with canvas. This actually looked like crap, but worked.

Then, while testing on all 4 browsers requested by the js1k rule, I found out that only Firefox 3 would support blitting a canvas to itself. It wasn’t working at all with Chrome, Opera and Safari. It wasn’t even working with Firefox 4 beta.

Yet, Inopia/Aardbei‘s entry was using recursive blur with success. Digging into the cleverly size-optimized source, I found that it was using an additional offscreen <canvas> as a temporary buffer.

The hidden rule seems to be: you  can draw any rectangular area of a canvas A into any rectangular area of a canvas B, provided A is not B. This is actually matching how graphics cards works, where in the general case you cannot render in a texture you are using. A lot of thing remains possible : mipmap pyramids, feedback effets… I guess using Canvas 2D transformations and clipping regions would lead to even more effects.

ERRATUM: p01 proved the above paragraph wrong, drawing a canvas on itself seems to work.

Starting again

Taking some inspiration from rez’s work, I made a kaleidoscope-like visual too with a large-kernel blur.

Each frame in the entry follow this algorithm:

  • The main canvas is darkened by a half-transparent black rectangle.
  • Circles are added in various colors and size, using black <canvas> shadows.
  • The main canvas is downsampled to a 8x smaller canvas
  • …which is downsampled to a 2x smaller canvas, three times in a row (much like mipmapping). This amounts to 4 offscreen canvases.
  • The two smaller canvases (32x smaller and 64x smaller) are added to the main canvas to add glow.
  • The two larger offscreen canvas (8x smaller and 16x smaller) are added to the main canvas, but 4 times and with an offset, to add feedback.

This looked like this:

For those interested, I made an archive with the source, using stats.js from Mr Doob (use it!).

When size-optimizing, I had to change colors to save bytes and went with short HTML color names (“Red” is 1-byte shorter than “#f00”). So it’s different from the final version.

sRGB

Safari, Chrome and Firefox 4 seem to take in account the sRGB color space when blitting an image.

Firefox 3 and Opera do not. Thus the entry is darker on these browsers, and doesn’t look good.