I’ll be attempting to use LibCanvas this time around.  Unfortunately, the documentation and some examples are still only available in Russian – but the engine looks too slick not to try.  Hopefully I’ll have something working by Sunday night!

A new Udacity course has just begun, which may be of interest to (future) HTML5 game programmers.

https://www.udacity.com/course/cs255

(Or Watch the short intro video:  https://www.youtube.com/watch?feature=player_embedded&v=F3JeV756B7w )

The course has only just begun so there is not much content yet, just Unit 0 and Unit 1.

Free to sign up and participate.

There are other courses too, ranging from beginners to advanced (python mostly, and even non-computery courses like physics, statistics, algebra)

It will be hard to top the success of I Am A Ninja (LD22, 50th place) and Cytosine (LD24, 31st place), but I’m going to try my best.

Like my last two games, this one will also be HTML5. I’m not yet sure whether it’ll be canvas2d or WebGL, but I’m leaning towards the simplicity of canvas2d.

My previous two entries were written in raw JavaScript, but this time I’ll be using CoffeeScript instead. It’s just a more pleasant language to work with, and less verbose so quicker to type.

For preparation, I’ve written a tiny Ruby webserver using Sinatra, which uses a Rakefile to automatically compile my assets:

• CoffeeScript is compiled into JavaScript.
• SCSS is compiled into CSS, using Compass for its CSS3 mixins (which automatically add vendor prefixes like -webkit- and -moz-).
• Inkscape SVG files are exported to PNG files.

This makes for the quickest development cycle: just save the file, and refresh the page.

I have three rough game concepts. Here’s to hoping one of them can be bent to fit the theme.

Good luck everyone!

My previous <shamelessplug>entry</shamelessplug>, for LD22, being a resounding success, I’m now back for more! I used to be known as ThomasTC, but now I’m Frozen Fractal on here, frozenfractal on IRC, @frozenfractal on Twitter, and frozenfractal.com on the web at large.

Like last time, I’ll be using HTML5 and canvas. Unlike last time, rather than plain 2D canvas, I’ll be using WebGL! It’ll be all fancy-like, with shaders and stuff. Maybe even 3D.

This post is also a kind of base code declaration. “Kind of”, because I’m spending my free time this week writing my “base code” up into a nice open-source WebGL library!

It’s called Gladder (GL-adder, or G-ladder, or just more glad, take your pick). Gladder is…

• … opaque. It does not expose WebGL, but rather aims to wrap it in a straightforward way.
• … thin. Many Gladder classes are direct equivalents of WebGL constructs.
• … light. It has no dependencies, other than WebGL itself.
• … flexible. It tries to make as few assumptions about your application as possible.
• … unobtrusive. It does not change default behaviour of anything.
• … cross-browser. It abstracts away browser differences.

The only similar library I could find was Glow, but I found its documentation lacking (read: nonexistent), the website yellow, and the code messy. I’d rather write my own bugs than inherit someone else’s; that way, I have at least a sporting chance at fixing them.

Another drawback of Glow, as with many other OpenGL wrapper libraries, is that it still forces you to deal with OpenGL and its state changes. Gladder aims to abstract all hidden state away and let you deal just with objects and draw calls. Here is an example; there’s still one gla.enable() call, but no code to bind shaders, programs, buffers, uniforms, attributes… all of that is handled behind the scenes. The advantage of not exposing OpenGL at all is that the library has full knowledge of the GL state, so it can skip expensive state changes whenever possible.

Since I don’t yet know what type of game I’ll be making, I’m forced to keep Gladder generic. To do that, I’m working top-down from code samples. First, I come up with something I’d like to be able to do, like render a spinning cube. Then I’ll write the code that I would like to result in a spinning cube being rendered, but it won’t work because I haven’t implemented those parts of the library yet. Finally I write the library code that does the actual work behind the scenes. I might iterate a few times, cleaning up the example code even further. I hope this approach will result in a straightforward, easy to use API.

You can get Gladder on GitHub. Several important things are still missing (e.g. modifying buffer data, loading textures from images), but I’m going to push hard to make it usable before LD24 starts.

Note that the interface is still in flux while I improve things and make them easier to use. If you would like to use Gladder for the compo or jam, let me know and I’ll focus a bit more on adding JSDoc comments and more examples. During the compo you’ll be on your own though, because I’ll be busy making a game!

(This is a cross-post from my post-compo devlog.)

I’ve been playing around with different ways to fake the atmosphere of a planet in a 2D canvas context.

That’s interactive, by the way, so mess around with it (Chrome/Chromium is recommended!). Clicking on/around the planet changes the “angle” of light. You can get some pretty nifty looking results. I made this to determine what were reasonable parameter-ranges to use to generate plausible-looking planets.

The way I get the sort of “volumetric” look for the atmosphere is really simple: I just stack many semi-opaque layers of the same gradient-filled-circle over the planet, each one having a radius slightly bigger than the previous.

I actually threw this together using with a JSFiddle which you can view/hack here.

Of course, I still need to figure out how to combine this with a surface/cloud texture (procedurally generated or otherwise…).

One of the things that took me a lot of time during LD23 was level design. This is partly because I didn’t have a tile map editor that I was familiar with and it seemed like working with the CSV data was good enough.

I decided I wanted to have a more visual editor for future LDs (yes, I’m definitely doing this again!) so I made one. Of course, it’s in JavaScript since that’s what my game was made with and I’m trying to improve my JavaScript programming.

Please, give it a try and let me know what you think in the comments below. I’m currently hosting it via Dropbox, but I may provide a more permanent home if needed. Also, if there is interest, I’d be glad to put up a bitbucket repo with complete source.

It has been tested thoroughly in Chrome, and minimally in Firefox and IE9. I recommend using Chrome for now.

Here’s a simple screenshot to give you a feel for it:

this is getting close to the end !!, add the main screen, story screen changed the game over, killed some minor bugs of the viewport, now missing the soundtrack, sound effects and build the final map.

go go go !!

It’s been many hours since Ludum Dare #22 started. To be honest, I was really hoping for teleportation.

So, just a recap, i’m doing a browser game using javascript/canvas. I want to do something darker than i’m used to.

This is where i’m at at the moment http://www.stickymill.com/alone/alone_v0.01.html

Screenshot gallery http://imgur.com/a/6jLGr

And so it begins. Normally I use Ruby/Gosu but decided to try something new… Goal for evening #1 (LD started at 9pm for me) was to get a base app created and deployed using Sinatra, JavaScript/CoffeeScript, HTML5/Canvas, SASS, and HAML. Success!

code: http://github.com/adambair/afn
game: http://afn.heroku.com
log: http://afn.heroku.com/log

Time to get some rest. More fun tomorrow!

• Language: Javascript / HTML5 Canvas
• Art: Adobe Illustrator / Adobe Photoshop
• Audio: If there is audio, i’ll be using sfxr and any modifications to that with Audacity
• Base Code / Libraries:
  Asset Manager from the Google I/O presentation for pre-loading images.
  My base template
• Screenshots: I’ll set up to take periodic screenshots, a word of warning though, I can’t guarantee it will be completely SFW

I just realised I hadn’t actually committed to LD22 yet, consider that rectified.

This will be my second LD48, I did a platform game last time, it turned out ok, but I spent far too long fussing over the graphics and nowhere near long enough getting content in. Hopefully with that lesson in mind this weekend I can come away with something much more complete.

As usual I will be using HTML5 Canvas / Javascript (all my own libraries / classes) and Photoshop for graphics.

I am super excited this time, i’ve made sure the entire weekend is cleared of any commitments, the cupboards are stocked with programming fuel, and everything on my computer is organised and ready to go, it’s the most organised i’ve been in years

So I chose to make a game with HTML5 / Javascript using the JawsJS html5 gamelib.

I used the <canvas>-tag since I wanted to make a freeform level with pixelperfect collisions, basically I made the whole thing in graphics gale, could as well have done it in paintbrush.

The new HTML5 <canvas> tag makes it easy to get the data in raw format, basically an array with RGBA values. From there on it’s to check collisions.. 1 pixel at the feet is a decent start.

The most annoying thing is probably the audio-formats that’s supported for the new <audio>-tag.

Safari doesn’t play OGGs for some lame reason, and Firefox doesn’t do MP3s. So all audio has to be provided in 2 formats.. also you wan’t detection at asset-loading time etc. I could have lived without that cruft.

Otherwise Javascript has become amazingly fast, I think V8 is faster then ruby and python. All browsers come with good debugging possibilites.

Javascript doesn’t have the traditional classes and inheritence, but rather prototypical inheritence.. which can be confusing at first.

What I love is the dynamic nature of objects in Javascript.. basically all objects are big key-value storages (hashes).

So you can whenever you want just set a new flag/property on whatever object.

/* Player.dead has never been defined or used at this point */

if(player.dead) { … do sometting …} // won’t throw any error.. played.dead will just return undefined

player.dead = true

if(player.dead) { … do something .. } // played.dead is now true and code will be executed

The biggest upside with javascript is ofcourse ppl not having to download anything. No virus-scan etc etc. Just instant gaming. And the big players are making the javascript engines faster on a daily basis.

Play my Javascript game here:

http://www.ludumdare.com/compo/ludum-dare-21/?action=preview&uid=108

Here’s a teaser-shot from the game, you start in the “west prison” and have to find your way out of a huge castle.