JavaScript Simple Demo Framework

I’ve been thinking about “gamejams” lately, and how to change things slightly to make a “demojam” – a one or two day event where a bunch of people get together and make demos. One of the big problems I noticed when I ran gamejams in the past was that people often have no real idea of what they can actually achieve in such a short space of time. We would have people who worked at gamedev studios come along and spend the first half of the jam writing an engine before the realisation hit them that they were never going to get a game done. So.. no.. don’t do that. You need to hit the floor running. And if you want to work in a team then you can’t expect the other members to sit there twiddling their thumbs while you write the perfect render pipeline or asset system. You have to arrive at the jam with something that you can start creating content in from the moment you come up with your first idea.

Creating a demo engine that is suitable for a demojam is actually pretty simple if you make a few assumptions and cut a few corners. These days you can go a long way with some full screen shaders, post processing effects and maybe a few image overlays. That doesn’t even sound like an engine, more like a framework. So what if you could get such a demo framework? What would be the most accessible platform for it? How about somewhere with lots of readily available, high quality dev tools and libraries that can run pretty much anywhere? Well, now that WebGL has matured and anyone who’s programmed anything can pick up and learn JavaScript as they go along – how about making it web based? Enter Simple Demo Framework.

So What Is SDF?

SDF is a simple demo framework (dur!) that should allow anyone who has (or can pick up) JavaScript and GLSL skills to create a demoscene style demo. That demo can then be easily put up on a website and shared with anyone.

SDF is built on a few assumptions:

  • Full screen shaders go a long way. Just look at ShaderToy, or any modern 1k or 4k demo. It’s all just shaders.. though.. ah.. I remember when this was all polygons mate. As such, SDF has support for full screen shaders and post processing effects right out of the box. 2D sprites are also supported – again, you can go a long way with 2D sprites. I’ll add some sort of 3D support at some stage.. but it’s not a priority.
  • No-one wants to spend their time writing the low-level stuff. SDF is a lightweight framework that covers the boring/awkward tasks: resource loading, audio playing, simple sequencing. The aim is that someone who is new to WebGL/JavaScript doesn’t need to spend time doing the hard bits – they can just get on and write effects.
  • WebGL/JavaScript are a simple set of technologies. They really are. If you’ve used any 3D API and programmed in any C like language then you’ll understand the concepts. Of course, WebGL is abstracted away behind a few simple API calls. Even if GLSL is new to you, there are plenty of tools and tutorials that’ll have you creating things in next to no time.

And SDF cuts a few corners too:

  • Simple sequencing. There is no keyframing in SDF, you can set a layers start and end point but that’s it. If you want some movement/animation then you’ll have to code it – either in a custom layer or in a shader. Shader’s get “time” as an input and that’s often all you need. You can also group layers together so that you can block out sections of your demo and then easily move them around later on.
  • You’ll need a webserver. Because SDF does resource loading through HTTP you’ll need to be running a web server – you can’t just double-click on the index.html file and expect it to work. Some platforms come with a local web server built in. I’m running Windows and I use the excellent and simple to install WAMP.

Of course, some people will come with their own frameworks and engines, be they written specifically for creating demos or re-purposed game engines – even commercial tools like Unity are starting to become accepted in the demoscene community. Well that’s fine. You don’t need SDF. Good for you :)

Downloading SDF

SDF is a work in progress. It’s already at the stage where, if you know how it works, you could actually write and release a demo. There are plenty more tasks to complete before it could even start to be considered finished.. but, right now, you can download SDF from BitBucket. Or you can see the sense-meltingly bad work-in-progress demo here. Yes, it clearly is a work-in-progress and is not meant to look great – it’s meant to prove that the concept works.

Next Steps

Here are some of the things that I think are important to do next:

  • Document how to use SDF.
  • Write an example demo.
  • Add a couple more standard post processing effects (bloom, saturation, contrast, etc.)
  • Add some support for rendering 3D geometry.

I will write another post once SDF is in a state where people could actually start using it, but for now I’d love to hear any feedback on the idea.

PS: If you’d like to help me organise a demojam event.. get in touch!

This entry was posted in Computers, Demoscene, Development. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *