Oct. 10, 2023

tl;dr: have some CSS animations to make your browser games juicy!

particles.gif

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.

Smallest Quest

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?

Asterogue game play

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?

boing.gif

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.

screenshake.gif

Have fun!

March 2, 2023

be288dc6b22d9de42a1c2d2c4c47cb10.png

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!

Nov. 26, 2021

Hello reader! I'm excited to announce the release of the Doodle Rogue tileset. It's a free hand drawn tileset containing tiles and sprites that I used in my game Smallest Quest.

scene-goblin.gif

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!

Jan. 30, 2021

I've been working on a free hand-doodled roguelike graphics tileset called Doodle Rogue. It's an alternative to the standard console and pixel roguelike graphics tilesets out there.

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 scenery sketches

Doodle Rogue item sketches

Doodle Rogue item sketches

Doodle Rogue character sketches

Doodle Rogue Characters sketches

Doodle Rogue mockup sketch

doodlerogue-mockup.png

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

bcf576cf19a7b5075d8cbfb70be1b06e.png

2277f9dc389942e29ce37969e583637a.png

3068953c09c073fefadd2203884b1bec.png

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)

slowquest.png

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

fb5d302f9953831353a3ac0bf976cc49.png

ea26c3c5a6c45d8e8747ac0fb34fb9b9.png

Timecowboy is a web comic artist.

Varguy

3b438d2dfcadecbb6c656fd7f8424287.png

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

065373d751bf6c2b5606fa5ad2b4627d.png

21e97cdfde20f4ab5266003599439ad6.png

a0248a2048cf0640a8bceb0fd3d4fb8f.png

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

Moebius

3c56504ac0aec329ffcdb1e22e7b1c6c.png

790be18ced20bf0a9713ecc2d7441965.png

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

Jan. 6, 2021

I've just released a melody generator that I've been working on for a while. It's a small web app that you can use to procedurally generate looping MIDI melodies and then use them in your own music.

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!