Posts Tagged ‘canvas’

Intergalactic Pan-dimensional Image Editor

Posted by
Sunday, December 13th, 2015 12:05 am

Spent all day working on an html5 image drawing thing. It might have taken the entire day, but at least it works on mobile…
Phone Image Editor
There are only a few more features that need to be programmed, before we can add all of the content.

Totally In!

Posted by (twitter: @tropvache)
Thursday, December 4th, 2014 2:26 pm

Hey Everyone!

I’m excited to say that we’ll be participating in the Jam this time around! Our team consists of one person for sound effects and tracks, and the other (me) for graphics and development. Because there’s two of us, we do the Jam, but we approach it like the compo: we make everything ourselves. We built something for the last jam but didn’t finish it in time to submit. It was a bummer, but it provides a warm fire under our butts to perform this time around. Goal number 1: get something submitted!

I’ll probably try to keep a log of our accomplishments and status along the way, and post it here or on Twitter. We’d love to see if anyone else is planning on making anything with HTML5 Canvas and regular javascript.


  1. get something polished submitted
  2. create desktop friendly HTML5 Canvas game
  3. create mobile friendly version (depends on the game, I think)


  • Sound = Fruity Loops Studio
  • Graphics = Photoshop, Illustrator
  • Code = Javascript, CSS, HTML
  • Extra = Coffee, Git, Sublime Text

You Are Bacteria – finished :)

Posted by (twitter: @w84death)
Sunday, August 24th, 2014 3:38 pm

This is a zero-player game. 
It’s a connection between the player, the computer science cellular automaton ( Conway’s Game of Life ) and a world of a simple bacterias.


  • Each bacteria has it’s own “brain”.
  • The brain is a simple simulation of Conway’s Game of Life
  • Player can modify it by adding active cells. Player can add 10 cells at the beginning. Each 10 game cycles is given another cell.
  • In the brain if active cells extends 45% the bacteria will multiply – new bacteria will show.
  • If the brain has no active cells bacteria dies.
  • The “movement” of cells in brain cause movement of the bacteria. So if there is no movement the bacteria will stand still.

Have fun :)

Play here:

Our first Ludum Dare Jam

Posted by (twitter: @sithdown)
Saturday, August 24th, 2013 9:15 pm

Good news, everyone!

It turns out @Numa1988 and I (@Sithdown) have partnered in our very first LD48 Jam. He is gracing us with these marvelous, espressive characters, while I struggle to bring them to lif-err, DEATH.

try(If you wanna smile/laugh click the image to view the GIF in its full size)

Death, you say? Oh of course, let us explain. After some brainfarting we settled with one of Numa’s best ideas: You face an inminent death, so you have to act quickly to avoid that nefarious end: Interact with the objects and characters in scene to save your life. Just clicks and drags, as I wanted the game to be playable on any tablet and we don’t have time to use complex control schemes. Drag things, tap things. Yowzah! You win. Except when you lose.

We had some difficulties on our late start (secondary computer won’t start) but we kinda sorted those down (thanks Compaq ARMADA M300, you saved our day!). As for the technical part, I decided to use canvasengine (which I didn’t use before, and yeah, I know how much learning to use the framework with so little time was a bad idea BUT who cares, we are here for the fun). It’s an easy to use framework, really -really- easy, but I found its documentation unsatisfying. Time was a precious thing for us so I just resorted to ugly fixes, hardcoded behaviours, and lots of crazy things I’m not embarrassed enough to admit.

Where were we, the fun I recall? Oh, we had plenty. Some Coke and BBQ pizzas went down our throats; we listened to 8-bit music and some Megadrive classics OSTs, and oh for all the gods did you see those drawings? Hilarious. I’ve been staring at them almost as much as fiddling with the oh-so-messy-code. It’s been an hour since Numa went home and I’m supposedly cleaning the code a bit so we can continue tomorrow, but well, here I am slacking off and calling it a day. This is how the *game* looks and plays as of now:


(I keep laughing like an idiot when the poor guy goes badass, thanks for your art Numa)

We will add more characters and objects tomorrow, with some simple mechanics. Also, sounds/music. We thought of bfxr and some voiceover, but have NO IDEA on what to do with the music. Maybe no music is the best music we can achieve 😛

There were some undeveloped, ditched ideas, as a run from Marathon to Athens in 10(ten!) seconds preformed by a superhuman at several times the speed of sound. (That’s why there are a lot of ruins in there). There were more crazy ones involving japanese grammar puzzles, but… oh, I suppose we can’t do everything -for now-.

Ah yes, *we* are @Numa1988 and @Sithdown, two Spanish guys seeking for adventure. If you see us on twitter say hi!


So that’s all for now, I’ve been looking through the compo and there are quite many interesting projects! I’ll sure give them a go when finished :)

Quick Tip for HTML5 Developers

Posted by (twitter: @brianstegmann)
Saturday, August 24th, 2013 9:15 am

If you have jQuery included in your project, here’s an easy way to automatically pause your game if the user changes tabs or the web browser window loses focus:

$(window).blur(function() {

//pausing code here




Posted by
Friday, April 26th, 2013 7:58 am

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!

New Udacity course HTML5 Game Development

Posted by (twitter: @tristan_lasty)
Tuesday, February 5th, 2013 7:32 pm

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

(Or Watch the short intro video: )

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)


Frozen Fractal is in again!

Posted by (twitter: @frozenfractal)
Wednesday, December 12th, 2012 12:37 pm

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!

Frozen Fractal joining LD24, and announcing a WebGL library!

Posted by (twitter: @frozenfractal)
Wednesday, August 22nd, 2012 2:20 pm

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 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!

Fake Atmosphere

Posted by (twitter: @louroboros)
Friday, May 4th, 2012 2:41 pm

(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…).

JavaScript Tile Map Editor

Posted by
Friday, May 4th, 2012 8:05 am

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:


alone with myself – progress, almost there !!

Posted by
Sunday, December 18th, 2011 10:20 am

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 !!

First LD22 update

Posted by (twitter: @colincapurso)
Saturday, December 17th, 2011 4:38 am

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

Screenshot gallery

Alone. For Now.

Posted by (twitter: @adambair)
Friday, December 16th, 2011 11:57 pm

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!


Time to get some rest. More fun tomorrow!

What i’ll be using

Posted by (twitter: @colincapurso)
Monday, December 12th, 2011 6:18 am
  • 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’m in!

Posted by
Monday, December 12th, 2011 3:09 am

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 :)

[cache: storing page]