My favourite game engine is the browser. You get so many batteries included when you use the browser as your runtime. Sprites, animation, sound, mouse, keyboard, touch, gamepad, fonts, text handling, localization, concurrency, networking, 2d, 3d, and a weird XML based scene-graph called "The DOM". The list goes on.

I'm not even talking about canvas based games. These days when I build games like Rogule, Asterogue, and Smallest Quest, I sometimes use <canvas> but I always use the DOM.

One cool thing I've discovered about using the DOM as your 2d game's scene graph is you can offload a lot of CPU intensive effects to a high performance declarative graphics language called CSS. This frees you up to write far less code, and do the more interesting stuff with game logic in your procedural code.

It was Juice It or Lose It that inspired me to put more juice into my games. The talk makes the case that "game feel" is a major part of what makes games fun. Game feel is a mixture of animation and sound in response to interactivity and in-game events. It's the difference between a flat game and one that pops.

When I started building Asterogue (a solo-developed space based sci-fi roguelike) I got to wondering - is CSS good enough for video games? I was using web tech to build the game already. Could I do all of the visual effects using only CSS animations?

I put together this collection of juicy CSS game-feel animations as a test and I've been building on them ever since. Feel free to use them in your own browser games!

https://chr15m.github.io/juice-it/

Before I made Asterogue I would have used JavaScript to manually script sprite animations. Manually coding animations takes a lot of time and effort. It's also not very performant. That means the game ends up less juicy than it should be. Why not speed the process up using the domain specific animation language built right into browser?

It turns out CSS is absolutely good enough for a large class of browser based 2d games.

In the end I was able to build and ship a juicy graphical roguelike in about 1.5 months. I used Electron and Cordova to build the Asterogue binaries for desktop and mobile. I used plain old CSS animations for game feel. I saved on code using pure JavaScript with just one library (rot.js). Asterogue is only 2k lines of code which helped a lot with debugging and development speed. Browser based debugging tools are also absolutely fantastic during game development.

I would highly recommend this path to anybody making 2d games. The browser is a killer game engine.

Have fun!

Hello! Just in time for 7DRL, Roguelike Browser Boilerplate is now open source.

The boilerplate is a JavaScript based game template that takes care of all the annoying stuff like splash screen, start screen, credits screen, instructions screen, settings screen, menus, pixel styled UI, win/lose condition screens, sound effects, animations, etc. so you can get on with making the actual game.

It's ROT.js based and includes example implementations for monster, inventory, level gen, etc. It works on mobile and desktop.

The license is MIT so you can do what you want basically, including using it in a commercial game.

Enjoy!

I thought it would be fun to set the graphics free and see what other people do with them. Let me know if you make something using Doodle Rogue!

I'm relatively new to drawing. It's taken a couple of years of drawing badly to get to the point where I am comfortable enough for a tileset. This post is to show you some betas of the tileset I'm working on, and also the art that has inspired this work.

Doodle Rogue work-in-progress sketches

Here are the tileset beta sketches.

Doodle Rogue scenery sketches

Doodle Rogue item sketches

Doodle Rogue character sketches

Doodle Rogue mockup sketch

There is a ton of work still to do on these. I need to redraw them as vectors and clean them up, and finsh drawing the remainder of the tiles.

Research & references

I used Pinterest to explore different reference styles for the tileset. Here are some of the artists I am using for inspiration and referencing. There are actually a lot more references than this but these are some anchor points that have stood out.

You can find my game-draw reference pinterest feed here if you care to follow along.

Dom 2d

Dom2d has been a big inspiration for my drawing in general. I love the balance he strikes between quick-draw simplicity whilst still looking good.

Slowquest (Bodie H)

I love the gritty detail in Bodie's drawings of items and dungeons. Studying his work has taught me a lot about texturing with lines.

Timecowboy

Timecowboy is a web comic artist.

Varguy

Varguy has the rare skill of the ligne claire artists, combining seemingly simple shapes and lines into images that really come to life.

Mike Yamada

I found Mike Yamada's work when reading The Noisy Garage to my kids. I love his animal characters.

Moebius

That's everything for today. I hope you've enjoyed these images.

The fractalesque algorithm it uses to generate melodies is one I came up with when I was writing a lot of algorave music a decade ago. The MIDI melodies are rendered to sound using the wasm port of Timidity by Feross.

Enjoy!

For the past 10 weeks I've been working on my own roguelike. It's a sci fi game with tile graphics set in the interior caverns of an asteroid. I've had heaps of fun building this and I hope you'll have as much fun playing it.

Here's the announcement on Twitter if you care to help me out with a retweet. Thanks so much!

Enjoy!

I'm also recording a series to screencasts which show you how to customise the template to make your own game. It's a walk-through of the whole process, basically a graphical javascript roguelike tutorial which you can follow along with.

Enjoy!

It's built on top of ClojureScript, Blender, and Three.js and it runs in the browser.

One feature I'm particularly happy with is the live-reloading of Blender assets into the game. You hit "save" in Blender and the updates appear in the running game a second later - no need to re-compile or re-load the game.

The way this works is with a background script which watches the assets.blend file. It re-builds the assets.glb whenever it is modified, and writes the hash of the file into assets.cljs. Figwheel pushes changes to the compiled cljs files whenever they change, and there is another bit of code which tells three.js to re-load assets.glb if the hash has changed.

Infinitelives

Infinitelives is the vehicle me and my buddy Crispin use to make games and tooling, mostly for gamejams. The gamejam format is great because it is time-boxed, which means we can periodically do this self-indulgent thing we enjoy without taking too much family or work time.

Gamejams are typically only 48 hours long and so we have learned some good techniques for shipping working code under extreme constraints. A hardcore economy of time, resources, and scope is required.

ClojureScript & Figwheel are perfect for this with their hot-loading of modified code. I built the tight Blender re-load integration for the same reason. Hand drawn graphics consume a lot of time during jams and this should help us really level up on the content side of things.

If you'd like to find out when we release games and new tools you can sign up to our release notifications on the infinitelives home page or follow us on Twitter.

If you liked this you might also like my Roguelike game web template which you can get on itch.io. Thanks for supporting my work!

A couple of weekends ago my friend Crispin and I made this game as part of Global Game Jam, an event in which participants build a game in 48 hours.

It was a lot of fun and I got to spend most of the time drawing and doing graphics and music, which was a nice break from writing software.

Play it online!

I had an idea for a video game a while back. It's a multiplayer mission game with rogue-like elements, set in various procedurally generated airports through which you can transit.

Airport ambience by wichiogarcia on freesound.org

Everybody's missions are all mixed up together, so you might have a mission to deliver a package and somebody else's mission is to stop you. You might be trying to transit throuh several airports and other people are trying to catch you. You might be trying to find an item that somebody else has hidden. You might be chaperone to a VIP and the VIP is another player. Missions would last an average of 5 minutes each and feature a count-down timer as in the game Counterstrike.

The visual style would be vector based similar to those isometric maps you sometimes see in airports.

I don't play many video games but I very much enjoyed the pace and aesthetic of the game Rymdkapsel by Martin Jonasson.

I found it was an easy game to put down and pick up again for short bursts of play.

Probably my favourite video game is Another World by Eric Chahi which features a vector style and is similarly easy to play in small increments.

After 14 years of playing music together on Gameboy Advance and Commodore 64 my buddy Fenris and I finally recorded an album while he was visiting during Xmas.

You can listen to the album for free or purchase a download for however much you like.

All of the software we use to play music is Free and Open Source:

• Looper Advance
• aSid
• Raspberry Pi FX unit
• c64 paddle MIDI controller

I hope you enjoy the music.

In November I was in New York for PdCon 2016 and to visit my brother, thanks in large part to my friend Joe Deken and his not-for-profit, New Blankets.

The conference was fantastic. Many fascinating performances, a chance to catch up in person with people from the Pure Data community, and the opportunity to present and perform some of my own work. A highlight for me was hearing Miller Puckette, creator of Pure Data, talk about his approach and philosophy.

On top of that I got to catch up with some awesome people outside of the conference, especially my brother. We went hiking together one day - a rare opportunity to hang out together in nature.

Tonight my friend Fenris and I will play some music in a park here in Perth, Western Australia, on Gameboy and Commodore 64 powered by batteries and broadcast over FM radio to local speakers hanging from the trees. We'll start playing at 9:30pm and after us our friends Atomsmasha and Kataplexia will also play some music on Gameboys.

Might see you there!

There is a gap in the web app paradigm as users don't always realise they can install a web app they use by going to "Add to homescreen".

An interesting way to fill that gap would be to build an "app store" for web apps. That is, a native app that curates and carries out the "add to homescreen" process for the user for a wide variety of quality web applications. So basically like Firefox OS but without the OS - just the installer, and for the native browser of each platform.

Ideas are cheap and execution is everything - you don't need my permission to take this idea and run with it if you're convinced.

Drawing practice in the style of Ben Hatke.

Scout and I finished Zita the Spacegirl recently which was a wonderful adventure.

Couple of weeks ago I was fortunate enough to visit Delhi and spend a week with my colleagues Umang, Gaurav and Tom. We had an excellent and productive week and in between development discussion Umang was kind enough to drive us to many fascinating and beautiful places - not least of all to enjoy a wonderful meal at his sister's house.

We worked out of Awfis co-working, which I recommend.

I feel lucky to have seen Delhi this way.

Tap or click to interact with them.

More here.

Source code here.

I am trying to teach myself sci-fi style vector painting and this a piece that I think meets the post-on-blog standard.

I tried to copy the basic palette/mood/style of this image.

• Web based.
• Easy to deploy.
• Self-hosted & FLOSS.
• Allows multiple people to update a list.
• Simple text based format for easy editing.
• Mobile friendly - "Add to Home Screen" webapp.
• Satisfies the single use-case of collaborative TODO editing.

Of course I built one with ClojureScript.

We've been using this "in production" for 3 months and so far it fills our need without issue.

• Authentication can be accomplished with a .htaccess file or similar.
• The text-file format is designed so that you can edit lists with a text-editor directly if you want to.
• If you want to support multiple users you can set up two instances in two different folders and symlink the textfile of the list you want to share between them. Each folder can have its own authentication.
• You can also do other textfile things like make a symlink into a Syncthing folder which enables you to modify your TODO lists on your laptop or server as well as through the web app.

The realtime updating is accomplished via long-polling. Primarily I used this instead of websockets because when it comes to browsers, older tech is more robust to different operating environments than newer tech.

I resorted to using PHP for a very lightweight server backend because it has the property that basically anybody with web hosting is able to upload a PHP script and I think it's good to give software as egalitarian a deployment surface as possible. Luckily it is only 150 lines of not-too-painful PHP.

Click here to get the source and download/install it.

Couple of weekends ago Jessee and Chris came over and we made this free-standing tree-house-like platform thing for Scout and Orson out of some wooden palettes I'd collected during the preceding week.

When I say "we made" of course I mean they made it and wisely only let me touch one or two power tools during the course of construction.

I am playing algorithmic rave music at Rhetoric in Western Australia.

• February 5th, 2016
• Game city { Raine Square / Perth Train Station }
• Doors open 6pm
• $10 Entry
• Free arcade games
• With: chr15m, cbat, marko maric, atomsmasha, kataplexia, amnesia, polite society & free arcade games.

"An astronaut stranded on an alien planet, with only a few minutes left to live."

Orchids to Dusk had a powerful effect on me.

I dreamed about the game the night after playing it.

The creative power of code is the microwave background radiation of my subconscious and this game made me notice it again in a visceral way.

Inspirational.

Instructions: grow the white square's heart by clicking and dragging to the other squares.

Link to the game here.

Source code here.

Play/review/rate it here.

A "zero asset game" is a game that does not use any external art assets.

Game art is instead generated procedurally or by using artifacts of the rendering environment.

The following is a screenshot of a tiny game engine I built a little while ago in ClojureScript.

The renderer runs on Facebook's React library so it is just a couple of lines of code.

I've spread it over several lines here for readability:

; DOM "scene grapher"
[:div {:id "game-board"}
  (doall
    (map
      (fn [[id e]]
        [:div {:class (str "sprite c" (:color e))
           :key id
           :style (compute-position-style e)
           :on-click (fn [ev] (sfx/play :blip))}
        (:symbol e)])
      (:entities @game-state)))]

The sprites are utf8 characters which are instantiated like this:

(make-entity {:symbol "◍"
              :color 0
              :pos [-20 300]
              :angle 0
              :behaviour behaviour-rock})

The function behaviour-rock here gets called once per frame and returns the new immutable entity-state for the next frame.

When you click on something the blip sound is generated procedurally in the browser using jsfxr.

This is a video game I made for Scout to help her practice using a gamepad.

Play it! You'll need at least one gamepad and Firefox or Chrome.

• It's hard to find nice games that fit the search "two player gamepad-enabled couch-co-op suitable for four year olds".

• Game design for a four year old is quite nuanced. To make a fun game without all of the normal risk reward mechanics basically comes down to "make rude noises".

• It's 360 lines of ClojureScript, rendered in the browser DOM with React. It took me a handful of evenings over a period of one month to develop.

• I don't play many games, but the gamepad is probably my favourite human-computer interface.

Source code: https://github.com/chr15m/fubbles/

Update

Fubbles is the first game I have made using the new infinitelives ClojureScript library for game development that my friend Crispin and I have been building.

Prediction: within 3 years the stylus will be the killer feature of Android tablets.

Since then I've felt a little embarrassed remembering that post. Grand claims, ha ha!

With the recent announcement of Apple's "Pencil" I feel somewhat vindicated. I got the details wrong but I think broadly speaking that hand-drawing, sketches, doodles, will feature strongly in the future of human-to-human communication. Maybe even more strongly than typed messages for some people.

• I'm thinking about the 16% of people worldwide who can't read or write, but who are rapidly adopting hand held technologies where they can draw.

• I'm thinking about the tens of thousands of years of human beings using sticks as a technology for making marks upon a surface.

• I'm thinking about the popularity of emoji, the universality of pictographs, the cross-cultural and language-independent nature of the medium of drawn communication.

• I'm thinking about my kids and how the second thing they learn after talking is drawing.

Maybe one future is a world in which many of our planet's population do a significant fraction of our communication through the medium of doodles.

I feel grateful because this year when my daughter said to me "I want to be a mummy, not an astronaut," I was able to tell her about Anna Fisher, who in 1984 became the first astronaut-mother in space, and to show her the stories and images online of the several astronaut-mothers who have followed her into space.

Anna Lee Fisher by Bren Luke.

I feel grateful this year to Jess Frazelle from Docker, who wrote an honest blog post that reminded me of my privilege; reminded me how lucky I am to participate in tech and open source communities without friction and harassment; reminded me of a hidden strength and fortitude exhibited by amazing people all around us that I can aspire to; and reminded me that there is always more work to be done to make the world a better place for all humans.

I feel grateful that I am not alone in thinking and wanting that our culture can change for the better. I'm grateful that the internet can amplify the voices of people like Jess, and counteract the Friendship Paradox every time somebody speaks up.

I am grateful for the writing of bloggers like Pamela Fox and Liza Shulyayeva and Nicole Reid who demonstrate the technical, evidence based counter-factual to every trolling Hacker News comment.

As I do every year, this year I feel deeply grateful and so very lucky that my parents bought our Apple IIe when I was eight years old and that my mother taught me to code.

I feel grateful to have worked, and to continue to work beside amazing people who every day prove that smart, capable, technical people don't fit a stereotype.

The stereotype disagrees with reality, and so it is wrong.

Scout and I picked up a Lego table for $25 last year. One of our favourite pastimes lately has been making Lego things together.

She SSH'es into her father's machine from her Raspberri Pi. Presumably like any good hacker she used social engineering to obtain his password. She then uses the ps or top command to find the process ID of the "Sublime Text" editor he is using - the number she reads out. She then uses the OSX say command on the command line on his computer to make it speak to him:

$ say "Dad watch out"

Given his reaction it appears he doesn't consider the possibility that anybody has remote access to his machine and he also doesn't seem to know about the OSX say command, hypothesizing incorrectly that the kids have set up a timed MP3 file. Finally, she uses the kill command on his machine to kill the "Sublime Text" process, closing down the windows he is working on.

Ha ha ha, adorable!

I knew I would not have enough time to make a complete video game during last weekend's Ludum Dare so I took the opportunity to do some 3d modeling in between bouts of commercial software development and four-year-old wrangling.

I had a lot of fun working on these! Blender has come along amazingly since I last used it for art ten years ago.

My buddy Fenris and I are playing at Square Sounds Festival in Melbourne next week, Saturday the 21st of March, 2015 at The Evelyn Hotel.

I hacked together quite a bit of new software for this gig and I am tremendously excited about it. I think we are even going to practice our songs first this time. See you there!

Here is the game we built together, using graphics from Kenney.nl:

(click to play)

You can find the source code on GitHub.

A couple of weeks ago I installed Leiningen, the Clojure package/dependency manager, and the VIM plugins, and started practicing.

Literally every night for two weeks now I have been dreaming in parentheses. Writing code has never felt so comfortable. I think I may officially be a LISP convert.

Recently I ressurrected LooperAdvance, a bit of 10 year old code for making music with a Gameboy Advance. I am hacking in synchronisation so that I can sync up the loops with Pure Data running on a Raspberry Pi.

The Gameboy Advance has a pretty robust little 4-bit GPIO rated at 3.3v that could be neat for controlling some projects now that you can get them quite cheaply second hand. There are also wireless adapters available that will instantly give you 4 bits of output by remote control.

Almost certainly exhibits tripedal gait during locomotion.

Deviator, the show I worked on with PVI Collective and friends, is playing in Sydney, Australia starting tomorrow night. Get in there, tickets sell fast!

Deviator, the smartphone based ARG-like artwork by pvi collective that I worked on is showing at PICA in Perth, Western Australia next week after it's successful tour of Glasgow last year.

Apparently tickets are selling fast so get in there quick!

Especially useful if you are developing with PhoneGap/Cordova on iPad and iPhone, or Android. Those webkit transforms saved my bacon on a recent iPad project. Here is the basic CSS you want to put on an element you want to optimise:

-webkit-transition: -webkit-transform 0ms;
-webkit-backface-visibility: hidden;

Try replacing $(this).hide(); with a transform that moves the element off screen like this (might need overflow: hidden on your body tag):

$(this).css("-webkit-transform", "translateX(1500px)");

Then when you want to show the element again do this instead:

$(this).css("-webkit-transform", "translateX(0px)");

I also had great success replacing jQuery UI drag-and-drop code with something hand-rolled:

$(this).css("-webkit-transform", "translateX(" + relativeX + "px) translateY(" + relativeY + "px)");

Hope this helps you!

The good folks at Let's Make Games have been supporting the Western Australian indie and commercial game making scene for a while now with generous amounts of their own time poured into reports, moral support, game jams, and numerous events each year, so I makerbotted up these little arcade cabinet award thingies for each of them and gave them out at their recent end-of-year party, which was also great, as always! Thanks again LMGPPL!