So, first off, here’s the video:

It’s recorded live from AteBitVJ with FRAPS in a single take – no external post-processing or editing involved. Unfortunately the video compression hasn’t been particularly kind here and you can see some ugly compression artifacts. Luckily, the screen shots in this post will be lossless! The audio is provided by 4mat and is called “Spun Gold”. It’s one of my favourite tracks from his 2012 album, Origins.

The base layer for this video is a pretty simple effect – audio FFT data from the track represented as an infinitely scrolling 3D landscape. By itself this effect can look quite nice, but I wanted to get some more out of it. I started out by zooming in and cropping so that it fills most of the frame:


Next I apply the first effect: a radial blur. This takes the image and blurs it away from the centre point. There’s an extra little trick here in that I blur the red, green and blue elements by slightly different amounts. This gives a quick and dirty chromatic aberration effect. All the cool kids are doing it:

Now comes a very light layer of noise. It’s pretty hard to see here but you can notice it’s effect all the way down to the subtle grain that’s visible in the final image. Noise is probably one of the most underrated effects – adding small doses of it in the right places can really help break up sharp edges and gradients and that can make computer generated images look less synthetic:

Then comes a standard bloom effect. After this is applied we pretty much have the basics of the final look done:

Bloom is followed by overlaying a vertical colour gradient. This makes the image a bit more interesting by varying the colours from the top to bottom. From here on in it’s just a case of tweaking the colours to get the final result:

(for reference, the gradient is here)

After the gradient I add some colour correction. This is the biggest contributor to the overall colour palette of the image. It works by sampling the colours of the source image and using these as an index into a pre-computed 1D look up table to get the destination colour. The look up texture was made in Photoshop where I loaded up a suitable test image and then played with the levels until I get the look that I wanted. In this case that means a soft, retro looking colour with strong blue tones at the darker end of the scale and creamy whites towards the top. Once I’d got that look I applied it to a linear black to white gradient and saved it as my 256×1 look up texture. This is a really simple, really lightweight but really powerful technique to give your images a stunning colour palette and it’s somewhat akin to colour grading in the film and cg industries. There’s a good discussion of this technique (and the more advanced 3D look up texture version) in GPU Gems 2. The result:

(the look up texture is here)

That all looks good so far, but we’ve lost a bit of definition in the process so I put that back in with some brightness and contrast adjustments:

And last, but by no means least, I add a vignette effect over the top. It’s simple and fairly subtle, but it frames the image nicely:

Finally, here’s a composite image of how all the different layers add up to give the end result:

So there you go – one simple base effect and then a bunch of small, generic adjustment layers to push and pull it into something more interesting. And with AteBitVJ this is all happening real-time at 60fps. In fact, one of the nicest parts of the whole process was that I was able to create, preview and tweak the whole effect completely live. If you’re writing your own real-time visual framework then not only would I strongly encourage you to add the ability to layer up effects like this, but you should also make everything editable in real-time. Immediate feedback when editing is definitely a very important thing and, once you’re used to it, you won’t want to give it up.

The post Layers and layers and more layers.. appeared first on evilpaul.org.

There are obviously a couple of extra things going on here, but it all boils down to using multiple layers on the canvas. Instead of just one textmode layer I’ve added an overlay and a background, giving me three layers in total:

Layer 1: Background

This is just a static image, nothing special here.

Layer 2: Textmode

This is where our action is, and this is also where a small addition is needed to the textmode library. I’ll go into detail on this later, but the addition basically allows us to have some part of the textmode layer appear transparent so that the background layer can be seen.

Layer 3: Overlay

Again, this is just a static image. Note that every second line of this image is a feint black line. I basically added a layer in Photoshop with solid black 1px high lines every other line, and then set the whole thing to about 20% opacity. When this is overlaid on top of everything else it gives a retro scanline effect. This kind of “post-processing” effect, when applied over all other layers, can really help to tie everything together.

So how does all of this work in practice? Let’s look through the new stuff in main.js and textmode.js. I’m only going to highlight the important parts, so if you haven’t already read my first post on textmode then head on over and do that now.

The first change is to load in a couple of images:

// Background and overlay images. These are the same size as the canvas so that they don't get 
// stretched or shrunk
var background = new Image();
background.src = "background.png";
var overlay = new Image();
overlay.src = "overlay.png";

Next we draw the effect and the text box. I’ll skip over this as it’s similar to the previous examples (you can examine the code yourself) apart from one important part. In the rendering loop for the effect you’ll see that we conditionally set the background colour to ’0×00′, or black ink on black paper. This is a special colour code that I’ve designated to mean that the textmode cell is transparent. When we come to render the textmode layer to the canvas with presentToScreen() it’ll skip over all of these specially coloured cells, allowing the underlying image to show through.

Finally, we draw the three layers. Remember that the first and last layers are just images, so we use drawImage() to copy these to the canvas. The middle layer is our textmode layer, so we’ll use the old presentToScreen() method. This time, though, we’ll add an extra argument of ’0×00′. This tells the function to treat our special colour as transparent.

    // Render the background, then the textmode buffer, then put the overlay on top
    screenManager.context2d.drawImage(background, 0, 0);
    screenManager.presentToScreen(0x00);
    screenManager.context2d.drawImage(overlay, 0, 0);

The next change is in the textmode library itself. I’ve altered the presentToScreen() function to take an optional argument – a mask colour. The function now has two control paths: one with a mask colour and one without. If you don’t pass a mask colour in then it renders exactly as it did before. If you do then it’ll skip rendering of any cells that have that mask colour. The code looks like this:

TextModeScreen.prototype.presentToScreen = function(maskColour) {
    if (typeof maskColour === "undefined") {
        // Copy straight to the screen with no masking
        var readPos = 0;
        var sy = 0;
        for (y = 0; y < this.charsHigh; y++) {
            var sx = 0;
            for (x = 0; x < this.charsWide; x++) {
                var charId = this.charBuffer[readPos];
                var colourId = this.colourBuffer[readPos];
                readPos++;

                var cx = (charId & 0x0f) * 16;
                var cy = (charId >> 4) * 24;
                this.context2d.fillStyle = colourTable[colourId >> 4];
                this.context2d.fillRect(sx, sy, 16, 24);
                this.context2d.drawImage(this.colouredFonts[colourId & 15], cx, cy, 16, 24, sx, sy, 16, 24);

                sx += 16;
            }
            sy += 24;
        }
    } else {
        // Copy to the screen unless the colour is the same as the mask colour
        var readPos = 0;
        var sy = 0;
        for (y = 0; y < this.charsHigh; y++) {
            var sx = 0;
            for (x = 0; x < this.charsWide; x++) {
                var charId = this.charBuffer[readPos];
                var colourId = this.colourBuffer[readPos];
                readPos++;
                if (colourId != maskColour) {
                    var cx = (charId & 0x0f) * 16;
                    var cy = (charId >> 4) * 24;
                    this.context2d.fillStyle = colourTable[colourId >> 4];
                    this.context2d.fillRect(sx, sy, 16, 24);
                    this.context2d.drawImage(this.colouredFonts[colourId & 15], cx, cy, 16, 24, sx, sy, 16, 24);
                }
                sx += 16;
            }
            sy += 24;
        }
    }
}

You should clearly be able to see the two control paths there – one for masked rendering and one for non-masked.

So that’s that – a nice extension to my textmode library and an example of how to use it. I’ve updated the textmode library zip file to include the code for all three examples. You can grab it from here: Javascript textmode library and examples

Now, what next? Well, there are plenty of possibilities. How about a textmode puzzle game where your progress reveals an image underneath? But what should I do next? I’d love to hear your thoughts on what else I should add to this library ;)

The post A bit more textmode fun appeared first on evilpaul.org.

So, I like textmode art. A lot. I also like realtime. A lot. Realtime textmode demos that end up rendered out to a video and shared around as a YouTube linke? Not so much. It’s 2013. We should be able to watch textmode demos in their crisp, “full high-res” glory. And that’s where this article comes in. I’ve been taking a look at getting textmode effects running in a browser. Turns out it’s surprisingly easy even if, like me, you haven’t ever done any serious browser coding. Here.. I’ll show you..

I’m going to jump straight in and show you a proof of concept example. Then I’ll break down the code and explain it a bit. So go ahead and click on the image above to take you to the first example:

The code for this breaks down into three stages: the HTML file, the main program logic and the textmode library. Let’s start off with the simplest: the HTML file.

<html>
    <head>
    	<script type="text/javascript" src="main.js"></script>
    	<script type="text/javascript" src="textmode.js"></script>
        <style type="text/css">
            canvas { border: 40px solid #000000; }
        </style>
    </head>
    <body onload="init();">
        <canvas id="mainCanvas" width="0" height="0"></canvas>
    </body>
</html>

Nothing complex there then. Just a simple page that loads in a couple of js scripts, hooks in an onload function to run our code and sets up a canvas with a bit of css to give it a border.

Now we’ll take a look at the main program logic bit by bit. This will give us an idea about how to use the textmode library.

// This is our global textmode manager
var screenManager;

// The font that we will use
var sourceFont = new Image();
sourceFont.src = "font.png";

function init() {
    // Initialise the textmode library
    screenManager = new TextModeScreen(40, 25, "mainCanvas", sourceFont);

    // Call our main loop at 25fps
    setInterval(mainLoop, 1000 / 25);
}

First we have some globals. There’s a screenManager which we set up in init() and use in mainLoop() and there’s a font. The init() function initialise textmode screen to 40 characters wide, 25 characters high, using this MS-DOS bitmap console font and we’ve told it to appear in the canvas we defined earlier. The first interesting bit of code is the mainLoop() function:

function mainLoop() {
    // Fill the screen with random characters and colours
    for (i = 0; i < screenManager.charsWide * screenManager.charsHigh; i++) {
        screenManager.charBuffer[i] = Math.random() * 255;
        screenManager.colourBuffer[i] = Math.random() * 255;
    }

    // Render the textmode screen to our canvas
    screenManager.presentToScreen();
}

The textmode screen contains two buffers: one for characters and one for colours. Each buffer is made out of bytes, giving us 256 possible characters and 256 possible colours. The colours are split further using a 16 colour palette and giving us 16 forgeround and 16 background colours per character. What we are doing in this loop is filling both of these buffers with random values and then calling presentToScreen() to copy that to our canvas. You’ve already seen the result.

Now we need to delve into the textmode library itself. This is contained in the textmode.js file. It’s not a huge library, but I’ll break it down into functions. Firstly we have the colour table.

var colourTable = ['#000000', '#0000AA', '#00AA00', '#00AAAA',
                   '#AA0000', '#AA00AA', '#AA5500', '#AAAAAA',
                   '#555555', '#5555FF', '#55FF55', '#55FFFF', 
                   '#FF5555', '#FF55FF', '#FFFF55', '#FFFFFF'];

This defines the 16 colour palette. Remember how I said we have 16 foreground and 16 background colours? This is what they look like (click to see the full thing):

There you see all 256 colours expressed as hex bytes. You’ll notice that you set the foreground using the lower nibble and the background with the upper.

Now comes the biggest piece of code, the set up function for the library:

function TextModeScreen(charsWide, charsHigh, canvasName, sourceFont) {
    var canvas = document.getElementById(canvasName);
    if (!canvas) {
        alert("Failed to find canvas");
        return;
    }
    this.context2d = canvas.getContext("2d");
    if (!this.context2d) {
        alert("Couldn't get 2d context on canvas");
        return;
    }

    // Setup canvas size and buffers
    canvas.width = charsWide * 16;
    canvas.height = charsHigh * 24;
    this.charsWide = charsWide;
    this.charsHigh = charsHigh;
    this.charBuffer = new Uint8Array(charsWide * charsHigh)
    this.colourBuffer = new Uint8Array(charsWide * charsHigh)

    // Create foreground font colours
    this.colouredFonts = new Array(16);
    for (i = 0; i < 16; i++) {
        this.colouredFonts[i] = document.createElement('canvas');
        this.colouredFonts[i].width = sourceFont.width;
        this.colouredFonts[i].height = sourceFont.height;
        var bufferContext = this.colouredFonts[i].getContext('2d');
        bufferContext.fillStyle = colourTable[i];
        bufferContext.fillRect(0, 0, sourceFont.width, sourceFont.height);
        bufferContext.globalCompositeOperation = "destination-atop";
        bufferContext.drawImage(sourceFont, 0, 0);
    }
}

We already know that you pass in the size and name of the canvas and the font. In this demo the font is hardwired to be 16 pixels wide by 24 high but that’s easy to change. The init() function first gets hold of a 2D context for the canvas. Next it calculates and sets the canvas size and create a couple of byte sized arrays for the character and colour buffers that we talked about earlier. Finally we make 16 copies of the font, each in a different colour. The source font is white on a transparent background so we can easily create tinted version of it using “destination-atop” image blending. The reason for creating these copies will become clear when we look at the next function, presentToScreen():

TextModeScreen.prototype.presentToScreen = function() {
    var readPos = 0;
    var sy = 0;
    for (y = 0; y < this.charsHigh; y++) {
        var sx = 0;
        for (x = 0; x < this.charsWide; x++) {
            var charId = this.charBuffer[readPos];
            var colourId = this.colourBuffer[readPos];
            readPos++;

            var cx = (charId & 0x0f) * 16;
            var cy = (charId >> 4) * 24;
            this.context2d.fillStyle = colourTable[colourId >> 4];
            this.context2d.fillRect(sx, sy, 16, 24);
            this.context2d.drawImage(this.colouredFonts[colourId & 15], cx, cy, 16, 24, sx, sy, 16, 24);

            sx += 16;
        }
        sy += 24;
    }
}

What we do here is go through the character and colour buffers and render them to the canvas. This has to be done in two steps for every character. First we render the background colour. This is easily drawn with a fillRect() of the appropriate colour. Then we render the font on top in the foreground colour. However, we can’t tint this character to make it the colour we need. Luckily we created a different copy of the font for each of the 16 colours, so we can simple overlay the appropriate character from the correctly coloured font. Repeat for all characters in the buffer and we’re done.

That’s the main part of the library dealt with, but there are a couple of additional utility functions: print(), printBox() and processBox(). The first two are fairly obvious and quite trivial so take a look at the code yourself and see if you can follow it. The third one however:

TextModeScreen.prototype.processBox = function(x, y, w, h, func) {
    for (sy = y; sy < y + h; sy++) {
        if (sy >= 0 && sy <= this.charsHigh) {
            var readWritePos = x + sy * this.charsWide;
            for (sx = x; sx < x + w; sx++) {
                if (sx >= 0 && sx <= this.charsWide) {
                    var charId = this.charBuffer[readWritePos];
                    var colourId = this.colourBuffer[readWritePos];
                    var results = func(charId, colourId);
                    this.charBuffer[readWritePos] = results[0];
                    this.colourBuffer[readWritePos] = results[1];
                }
                readWritePos++;
            }
        }
    }
}

This is an interesting function. You pass in a box (defined by x, y, width and height) and a function. The function is then called for every character inside the box, with the character and colour as arguments. The function should return an array containing a new character and colour pair. You can use these to do neat character or palette changing effects like greyscale, shadow or upper/lower case conversion. Think of it as a simple shader for textmode. Feel free to expand upon it..

Putting this all together I’ve created a (very slightly) more complex example. You’ll find examples of print(), printBox() and processBox() (used to create a drop shadow) in here:

That last example is bundled up with the textmode library and supporting files and can be grabbed from here: Javascript textmode library

Now all you need to do is make something cool with it. And that’s what I’ll be doing too ;)

Disclaimer: You should consider this as sample code to be built upon. It’s meant to be clear rather than optimal. You should use requestAnimationFrame() instead setInterval(). It won’t work in all browsers as it stands. Also, I’m no Javascript expert.

The post Textmode in your browser with HTML and Javascript appeared first on evilpaul.org.

The scripting language I chose to use is Python, but it was a close call between Python and Lua. I’ve embedded Lua a lot in the past, mostly in various commercial games like Crackdown, and have always liked it. I find that it’s very easy to embed and is pretty safe and simple for non-technical people (like game artists and designers) to pick up. Python is a newer discovery for me and I’ve only been using it in anger for a few months. I’ve been using it a lot in my day job, so it’s advantageous for me to take a more in-depth interest in it, but I’m also aware that a lot of artists are getting into it through scripting in packages like Maya, Max and C4D.

So here’s a quick video of the latest version of AteBitVJ. It not only shows off the immediacy of the UI (the whole video is shot in one take) but also the Python scripting – the main visual effect you see is Python scripted.

And here’s the script itself:

from atebitvj import *

colBackground = color(0)
colCircleStroke = color(255,255,0)
colCircelFill = color(255)
colLinesLow = color(255,0,0)
colLinesHi = color(255,255,0)

def setup():
	addParamFloat("offset", 0, 0, 1)
	addParamFloat("length", 1, 0, 1)
	ellipseMode(CENTER)

def draw():
	background(colBackground)
	translate(screenWidth()/2, screenHeight()/2)

	# draw the central ball
	ellipseScale = 0
	for i in range(64, 128):
		ellipseScale = max(ellipseScale, getFFT(i))
	strokeScale = 1-(elapsedBeats() % 1)
	strokeWeight(strokeScale * 20)
	stroke(lerpColor(colLinesLow, colLinesHi, strokeScale))
	fill(colCircelFill)
	ellipseSize = ellipseScale * 300
	ellipse(0, 0, ellipseSize, ellipseSize)

	# draw the lines coming out to show the energy at different frequencies
	strokeWeight(5)
	rotate(-HALF_PI)
	rotationStep = TWO_PI / 128
	offset = 250 + getParamFloat("offset") * 50
	lengthScale = getParamFloat("length") * 200;
	for i in range(128):
		band = i / 2 if i < 64 else 64 - i / 2
		audioScale = getFFT(band * 256 / 64)
		stroke(lerpColor(colLinesLow, colLinesHi, audioScale))
		line(offset, 0, offset + lengthScale * audioScale, 0)
		rotate(rotationStep)

If you’ve seen Processing before then this should pretty much make sense, even if you’re completely new to Python. There are a couple of AteBitVJ functions that deserve some further explanation though:

addParamFloat("name", 0, 0, 1)
getParamFloat("name")

You can add named parameters (with initial and min/max values) to the module which are then exposed to the same UI and automation facilities as everything else. Of course, they’re also saved along with the rest of project. Not shown here are the other parameter types that are available, like colour.

elapsedTime()
elapsedBeats()
elapsedBeatsInBar()
elapsedBars()
beatsPerBar()

Read various times values, allowing you to sync your script to the audio.

getFFT(band)

Read the current value of the audio FFT. This lets you sync your script to the audio volume.. to some extent.

So that’s it for now. The scripting only allows you to produce 2D content at the moment, but 3D will be added over the next couple of weeks – I’m still adding new functionality to this app on an almost daily basis.

The post VJing with Python? appeared first on evilpaul.org.

First off, a Dreamcast dev kit. This one doesn’t work – I think the graphics cards is fried. Still a lovely looking unit though.

A large, red Gravis Ultrasound. This was a mighty soundcard back in the 90s. It had on-board sampe RAM and got a lot of love from the demoscene as a result.

Three different types of storage: a 3.5″ disc, a 5.25″ inch disc and a monster 15.1″ disc cartridge. The RL01K-DC holds a whopping 5.2MB and was used in the venerable PDP-11.

Some more storage: a collection of Atari ST software. Some great Bitmap Brothers games here, along with the almost-never-out-of-my-drive OCP Art Studio. Many a non-released game was designed in this..

And now onto ZX Spectrum software. I’ve already shifted a load of this stuff, I think this is the last lot. Greats in here include the expertly coded but slightly dull Cobra, an early word processor called Tasword Two, David Jones’ brilliant Finders Keepers and an epic old EA RPG called The Bards Tale. You can also see HiSoft’s Devpac, which is probaby where I really started my journey into programming. Oh, and there’s a Cheetah SpecDrum in there too, which started me on the road to hacking around with digital audio.

Here’s what those Spectrum games ran on: Spectrums. You can see a standard 48k, a +2 and a +3 here. In the corner is a divIDE with a 2GB flash card, allowing thousands of games to be loaded in mere seconds rather than the minutes you’d have to wait for with tapes. If you’d seen one of those back in the 80s you’d have thought it was voodoo.

And this is what modern kids think of 30 year old computers. Luc is pushing play money into the tape drive of the +2. He coudn’t provide a satisfactory explanation as to why.

Here we have a vintage 2000-era PC. This one I built myself from parts. You’ll notice it isn’t a standard, off-the-shelf PC because the manufacturers bag is a picture of Bagpuss. Bagpuss lasted me quite a few years, finally ending his life as an experimental OpenBSD server.

The inside of the old furry catpuss.

A classic 3COM 3C509 ethernet card. A 3D Blaster Geforce, the first ever consumer level graphics card with hardware transform and lighting – a real game changer this one. Also an Adaptec SCSI card and a Sound Blaster 16.

The other interesting parts of Bagpuss are the Pentium 3, the (probably tiny amounts of) RAM and a pair of (probably also very tiny) Quantam Fireball HDs.

Finally we reach the audio bits – a tuner, a wah peddle, a distorsion stomp box and a lovely little “legendary” Pignose buskers amplifier. The Strat wasn’t in with the rest of junk, before you ask.

Some wicked picks-in-a-business-card from Denki, where I used to work. No doubt these were Colin’s idea, the little guitar fan that he is.

Bow down before the gorgeous sounds of the Lexicon MPX550.

And, finally, what no self respecting musician should be without: a bag full of random cables.

All of this stuff is destined to go. Probably via eBay but possibly via the tip. If you’re interested in anything here then give me a shout. Quick!

The post Just cleaning up the garage.. appeared first on evilpaul.org.

The demo is written in C++ and GLSL using OpenFrameworks 007 as a base. That’s a bit of a departure from my usual DirectX + custom engine approach, but I needed to familiarise myself with OF for my job and this seemed like a good way to go about doing that. So this is actually my first ever (and possibly only ever) OF release.

The wonderful soundtrack for this demo was created by Brendan Ratliff, aka Syphus, aka Echolevel. This isn’t the first time we’ve worked together – back in 2008 we made the matter-of-factly named Ribbons, Tunnels & Techno, a demo that I’ve always had a bit of a soft spot for.

Shortly I’ll be packaging up the code for a full source release and I’ll blog a bit more about the creation of the demo at the same time. Until then you can download the windows executable from the Ate Bit site and, if you’re feeling generous, you could always leave a nice comment on Pouet.

The post Shall we play a game? appeared first on evilpaul.org.

The whole project aims to be highly customisable and highly controllable. The interface is a little like a cross between Photoshop, After Effects and Resolume. Visuals are created by blending multiple layers of modules (video input, particle effects, images, 3D scenes, etc) on top of each other, and those layers can have multiple effects (bloom, noise, threshold, glitch, etc) applied to them. You can drive any of the visual parameters directly using the UI, or from audio input, LFOs, OSC or MIDI. I’ve been using my trusty Korg Nano most of the time, but I also had some fun hooking up a Wii controller via GlovePie. Recently I’ve been eyeing up the Launchpad that’s sat on the shelf in the office..

Right now the project is unfinished but in a pretty good state – the vidoes are captures of the app being played live. I’m actively looking for either a musician or an event to partner with so that I can take this to the next level – using it to create live visuals. If you’d like to get involved, give me a shout! I’m based around London UK if that help ;)

The post AteBitVJ appeared first on evilpaul.org.

(click on the picture to run the sketch)

Be sure to play around with the F and M keys to get a look at what the sketch has to offer.

I’ve put a couple of my older sketches up there too. So why don’t you head on over to browse my portfolio and view, comment, favourite and remix the sketches.. or whatever it is you crazy kids do on that site :)

When I’ve got some time spare I’ll add a post here about the sketch, and maybe show some of my GPU work too.

The post OpenProcessing.org and Ray Marching appeared first on evilpaul.org.

With most of my time now taken up by housedad duties, I’m finding it hard to get enough time to get things done on the project. Occasionally I get an uninterrupted hour or two and get lots done, but usually it’s half an hour here or there and once I’ve got settled in the time is half gone. I get the distinct impression that, were I working on this fulltime, I could have got to this stage in the project in a single week.

(click on the picture to run the demo)

So what’s new in this version? First up is the level editor. You can use this to create your own levels, which you can then play. All of the levels in the game are built using this editor, so it’s a complete toolset. I’m currently in two minds as to whether I should include the editor in the final version of the game or not. On the one hand, it’s great to allow end users to create and share their own levels. On the other, it requires a fair amount of work to make it solid enough and straight forward enough for them to get to grips with. There’s also the whole back end code, which isn’t something that I have much experience with. My current plan is to keep the editor at a level where I will use it to create my own levels but not to worry about it too much. The thinking here is that I can continue to use it to edit and tweak my levels, and then if I do decide to include it in the final release it shouldn’t be too much work to polish it up.

As well as the level editor, I’ve also recently improved the placeholder assets a bit. Every sprite, every level and every piece of audio is still placeholder – it’s just that they’re a bit better now. I strongly believe that prototypes can almost always work with just simple placeholders. I’d even say that adding anything other than really basic assets at an early stage actually detracts from the game mechanics that you are trying to prove. But I do think there comes a time when improving these assets can help to improve the feel of the game. I think of this as staged delivery: You start with simple gameplay and very simple assets, just as in the first build of BHS. But once you improve the gameplay, you also need to improve the tools (ie: the editor) the game wrapper (eg: level select and game ceremonies) and the assets. If you don’t then you end up with a game that is unbalanced and inconsistent and, as much as we like to believe otherwise, I think we find it difficult to look at such a game objectively. I think that people also have a tendency to work on the areas of hobby projects that they like most, leaving the other areas far behind. This is all fine until you get to the end of the project and remember that you’ve still got to write all that stuff anyway, but now there’s not going to be any respite. And maybe that’s why so many promising looking hobby projects never get finished?

Apart from the level editor then, the two areas in the game that have recently been added are the sound effects (all created by Dr Petter’s excellent audio tool, SFXR) and the scrolling background. Both are fairly simple, it took only an hour or so to complete both, but both massively improve the atmosphere of the game. I’ve also made an effort to put some decent levels together. There are only six in there at the moment, but they follow a simple learning curve that shows you the basics of the game. Again, I think this has made a big difference to the feel of the game without needing much, if any, new code.

Next up I would like to start tweaking the gameplay. I’ve reduced the time of a level down to 20 seconds from the 30 seconds of the last build. Remember that in the original PC prototype it was 60 seconds. 20 feels much better, but I’m still not convinced that it shouldn’t be a little longer. I’m also going to play around with some new enemy weapon types – probably some homing weapons and laser beams. I’d also like to start working on the graphics and the audio, and that’s where I need to start getting the other team members involved ;)

The post Make your own Bullet Hell appeared first on evilpaul.org.

Twitter username: evilpaul_atebit

The post Tweet! appeared first on evilpaul.org.