Category Archives: Art

Jetboard Joust Devlog #52 – Go Logo!!

Been really ill over Christmas with a very heavy cold/flu and it hasn’t got any better this year as it appears to have developed into sinusitis. Now at least I know why I can barely walk up the stairs without feeling like my head’s going to split open.

So it’s been tough trying to work this week – but I’ve managed to get some done! It was quite a relief not to have to dive right into coding but to start with a fairly significant art task instead – the design of the game logo.

I had an idea of the type of thing I wanted but, as with all art projects, I started by gathering reference material and trying to whittle down ‘stuff I like’ into ‘stuff I like but might have a vague hope of achieving with my limited skills in a reasonable amount of time’.

I eventually settled on four key reference logos…

1. National Petrol
The ‘National’ brand is long-since defunct but I have fond memories of it from my childhood as National petrol stations were the only place in the UK that you could buy Smurfs! I really the the dynamism and simplicity of the main pictogram which has an almost Soviet constructivist feel.

2. Go Jetters – CBeebies
I’d never heard of this TV show (my kids are too old) but I was looking after my niece and nephew over the holiday and they had an activity book from the series. The ‘jet’ reference is obviously relevant and again I like the simplicity. The oblique effect on the type is subtle but adds a lot of dynamics.

3. Trans Am – Ultimate Play The Game
OK so this one’s kind of horrible but cool at the same time. As a kid the ‘Ultimate’ games were like the holy grail of Spectrum gaming. I originally looked at the ‘Jet Pac’ logo for obvious reasons but thought it too heavy and overworked. There’s more of a sense of motion to the ‘Trans Am’ logo and I like the ‘silver dream machine’ feel to it – even if that 70s airbrushed effect is something I’d normally avoid like the plague. It works in context.

4. Asteroids – Atari
I’m a massive fan of the Atari arcade service manual art but the trouble with it as reference is that it’s very intricate and would take more time and skill than I have at my disposal to pull off effectively. The nice thing about the ‘Asteroids’ logo is that it uses a very straightforward typeface in a pretty straightforward manner yet still works extremely well.

I decided to start working in Illustrator rather than Photoshop and to restrict myself to pure black and white. Restrictions are good – and I knew that if I had something that looked good in a single colour it would be easy to add colour later whereas trying to retrofit a colour logo into black and white can be a nightmare. It’s a similar approach to the one I’m taking with the actual game art.

Once I had my reference in place I began experimenting with different typefaces*. Initially I thought I needed something that looked a bit ‘sci-fi’ but, despite finding some nice fonts, everything I tried looked either incorrectly proportioned or too gimmicky. The only typeface that seemed to hit the spot was Helvetica Neue Black Oblique which is very similar to the font used in the Asteroids logo. I rotated the letters anti-clockwise so that the uprights sat directly vertical, spaced the letters very tightly (so much so that some of them joined together) and finally felt like I had something I could work with. I also sheared the logo slightly so that it sat at an exact 25% gradient in order to make it easier to convert to pixel art.

Next step was to add something to make the logo seem more unique and give it more of a feeling of motion. I started by add some ‘wings’ to the tops of the ‘J’ characters based on the ‘winged helmet’ of the National logo. This worked right away! I tried some more curvaceous and illustrative alternatives as well but these all seemed too flouncy so the hard-edged brutalist approach won out ( a good job really as it would be a whole lot easier to realise as low-res pixel art). I also added similar ‘wings’ to the right side of the logo which seemed to balance better.

I then tried to increase the motion effect by adding Dyno-Rod style arrow-type shapes at the top-left of letters where there was a lot of negative space. As well as making the lettering seem more dynamic this also had the benefit of filling in the negative space, thus making the letters seems as if they were spaced more evenly.

Lastly I felt the logo needed something to kind of tie it all together a bit more so I experimented with various ‘underline’ effects and illustrative elements, eventually settling for a simple ‘double underline’ consistent with the National-style ‘wings’ on the letters. It doesn’t look like it but the little angled section on the right of the underline took a long time to get right!

Once this was in place I noticed that the ‘wings’ gave the type an almost 3D effect – I liked this (for some reason it reminded me a bit of the 20th Century Fox logo) so I tweaked the angles and lengths to exaggerate the effect.

At this point I was pretty happy with the vector version so I moved on to converting it to low-res pixel art. I began working at a resolution of 256 pixels wide as this seemed to scale nicely for the title screen.

The most time-consuming stage of creating the pixel art version was tidying up the original, rasterized, black and white version so that it looked as good as possible. I realigned all the angled lines so that any that run parallel ‘step up’ at the same time and also changed the angle at the end of the ‘wings’ so that this ran at 45 degrees which looked a lot tidier and didn’t really seem to affect the overall feel.

After this it was a matter of playing around with outlines, drop-shadows and highlights in Photoshop until I found something I liked then tidying it up manually. The final stage was to add some ‘shine’ to the letters (a bit like the ‘Trans Am’ logo) and a final bit of texture by manually dithering the edges of the ‘shine’ and adding some rivets.

I’m pretty pleased with the end result – it looks clear, dynamic, and has a kind of accidental retro/art-deco sci-fi quality that I like. Reminds me of ‘Flash Gordon’ or some of the work by French comic artist Moebius, neither of which are reference points to be ashamed of. The pixel art version could still do with more texture (possibly) but it was hard to do this with the limited palette I’d set myself, and these things can always be better so maybe I’ll revisit at some stage – for now though it’s time to get it integrated into the game!

* Whilst doing this I came across this really useful tool – it’s like Shazam for fonts and actually works (did for me anyway)!

Dev Time: 2 days
Total Dev Time: approx 93.5 days

previous | next

mockup_3x
Gathering Reference Material

mockup_3x
Unsuccessfully Experimenting With Typefaces

mockup_3x
The Final Flat Vector Version

mockup_3x
The Final Pixel Art Version (Click To See 2:1)


Two Day’s Work In Ten Seconds

Jetboard Joust Devlog #46 –You Can’t Take It With You

Yeah, I know, been a bit quiet round here. Had a bit of time off!

Been working on some more ‘polish’, implementing stuff I’d been putting off for a while and getting various aspects of the gameplay to work together. Here’s what’s been on my ‘to do’ list these past few days…

Add More Cash
I only had one denomination of coinage which clearly wasn’t going to be enough to cover all the cash rewards in the game, not without spawning a ludicrous amount of pickups anyway, so I’ve designed and added a few more. Now there’s five different types of coin 1, 5, 10, 50 and 100. I may have to add a 500 later on.

Bloodstains
One of my favourite mechanics in the ‘Souls’ games is the way that, when you die, you lose all your ‘souls’ (the game’s currency) and can only retrieve them by returning to the place you last died and touching your bloodstain. It can be incredibly annoying losing all the ‘cash’ you’ve earned but it really makes dying something to be avoided (unlike in many modern games where dying is practically meaningless) and adds an extra tension to the next life too. I’ve implemented a similar mechanic whereby you lose all your cash on death and have to return to your abandoned jetsuit in order to retrieve it.

Weapon Unlocks
I’ve now properly implemented the feature whereby picking up an enemy’s jetboard unlocks the weapon they were carrying for your own use. A weapon crate will automatically spawn when this happens giving the user a chance to pick up the weapon they have just unlocked.

Upgrade Equipment
I’ve properly implemented this as part of the gameplay cycle so you are given a chance to upgrade equipment at the end of each level. This took longer than it should! Also added the jetsuit itself as an upgradeable item.

Redo Jetboard Particle FX
I was never that happy with the vertical thrust effect on the jetboard so I’ve redone this giving it a more ‘anti-gravity’ quality. I’ve also tweaked and re-aligned the particle fx for the horizontal thrust.

That’s it. I am getting there, slowly. The next task is to revisit the ‘difficulty’ algorithms for level creation to make them take account of different weapon and enemy levels.

Dev Time: 4.5 days
Total Dev Time: approx 71.5 days

previous


New Denominations Of Coinage

mockup_3x
The Infamous ‘Bloodstain’ Mechanic


Capturing An Enemy’s Weapon


Picking Up An Unlocked Weapon

Jetboard Joust Devlog #45 – Upgrades Are Available

Ah, UI work! Truly the most enjoyable part of building a game. I love building user-interfaces, it’s so much more fun that all that irritating ‘gameplay’ stuff. How I wish I could churn out menus and buttons and fiddle with bitmap fonts all day!

Not.

Building a decent user-interface is often a fiddly and mind-numbing task, yet it’s an absolutely essential part of the overall gameplay experience so cannot be skimped on. Fortunately the only menu-driven part of Jetboard Joust is the ‘weapon upgrade’ stage so I don’t have too much to worry about, but I need to get it right nevertheless.

Seeing as I have just finished the first alternative weapon I decided to bite the bullet (no pun intended) and just get on with the weapon upgrade screens. As expected it was a fairly fiddly and time-consuming task.

So, first step – design the UI. This part wasn’t so bad, I knew what info I had to get across so just went for a layout that was as clear and straightforward as possible whilst retaining a degree of visual interest. I wanted to keep consistent with the game HUD as well so in that sense a large part of the ‘look and feel’ was already defined. It took a few hours to get something I was happy with.

Only problem was it became apparent that I needed a second, larger bitmap font in order to bring some variation to the design. I went for one in the style of the numbers in the HUD which seemed to work well but, as with all bitmap fonts, it took a lot of fiddling around to get it working correctly.

I also thought I needed larger icons for the upgradeable items so had to design an icon for the pistol and shotgun. At the moment I’ve set this at 32*32 though am wondering whether I might need to accommodate different sizes.

Next step – build the design in code. I decided to do all the drawing in code so that it would be easy to expand the text boxes etc if I needed to rejig the design. Again, a pretty tedious and time-consuming process. It paid off though as there were a couple of instances where I needed to change things in the layout (due to underestimating the space I’d need for text) and this was simply a matter of changing the value of a couple of variables rather than redrawing everything in photoshop. The UI is drawn in three separate layers, the background ‘connectors’, the boxes and lastly the text and icons.

I then needed to get the text read ‘live’ from actual data. As it may not just be weapons that are upgraded I defined an IUpgradeable interface that specifies
the functionality an object must implement to be ‘upgradeable’. Maximum and minimum values are set for the various stats and upgrade costs and the values for each ‘level’ calculated on the fly. Spent quite a while on this and implementing it in the two weapons I’ve design so far.

This all worked fine but I couldn’t help feeling that the UI just felt rather ‘dull’. I needed something to give it a bit more life so decided to try and implement a kind of ‘radio static’ type effect along the lines of the interference effect you get on the scanner when the player takes damage. The scanner interference shader was the obvious place to start and by using this, and an awful lot of tweaking, I was able to get an effect I was happy with. I didn’t end up changing the shader code at all, just messing with various parameters. Only the layer with the text and icons is drawn using this shader.

Last task – make it work! I’ve tried to make the process as clear as possible for the user and give visual feedback where necessary – I’ll also add auditory feedback at a later stage. You can see I’ve ‘greyed out’ the upgrade cost and button if the user doesn’t have enough cash and show a confirmation message if the user does purchase an upgrade. the process is fairly simple so hopefully I shouldn’t need much more than that but I’d be interested in any feedback…

Dev Time: 5 days (told you this was time-consuming)
Total Dev Time: approx 67 days

previous | next

mockup_3x
First Mockup Of The UI

mockup_3x
The New Bitmap Font

mockup_3x
New Weapon Icons

mockup_3x
The Final Working UI With ‘Interference’ Shader

Jetboard Joust Devlog #43 – You Bastard!

The next enemy is the last from Defender I need to (loosely) implement. The Defender version is called the ‘baiter’, a small UFO that appears if you take too long to complete a level and gives you all kinds of grief. My version is similarly evil so I’m calling it simply ‘The Bastard’ – because it’s a bit of a bastard.

I thought I’d keep a ‘flying saucer’ aspect to the character design so we have a little alien dude piloting a UFO. It didn’t take me too long to get the basic design sorted but the animation was a bit of a pain. The little spinning antennae at the bottom of the UFO needed to animate at a different rate to the rotation of the UFO itself which meant I needed to split the enemy into two different sprites. Then I thought the pilot looked a bit static and I should try and animate him simply so it looked like he was flipping various controls to steer the craft – this looked rubbish on a loop so I split this out into yet another separate sprite and chose the animation frame randomly rather running on a sequence. It also animates a lot slower than the craft itself. Final touch was to add some particles for an ‘anti-gravity’ type effect.

I could base the motion heavily on the motion for the ‘mother‘ which is one of the reasons this enemy was fairly quick to implement. Every 10 frames the ‘bastard’ samples the player’s location and moves towards it. It’s much faster than the ‘mother‘ and the sampling rate is more frequent which makes it a lot more dangerous! To add a slightly more erratic feel I skip the sampling of the player’s location every three iterations or so.

This straightforward AI worked pretty well but I wasn’t happy with the way the enemy sometimes hovered over the player. I improved this by making the enemy ‘retreat’ when it collided with the player or fired a bullet. It alternates the retreat by flying to the top right, top left or directly above the player. This attack/retreat motion, whilst still pretty ‘dumb’, looked considerably more ‘intelligent’ than simply ramming the player the whole time.

The ‘bastard’ is pretty dangerous – maybe too dangerous. Now I’ve got a few different enemy types in place I think I’m going to have to start working on different weapons and the weapon upgrade system so I can see how these enemies play out against a more powerful opponent. The ‘pistol’ I’ve implemented so far is to be the most underpowered weapon in the game after all.

Dev Time: 1 day
Total Dev Time: approx 59.5 days

previous | next


The Main Character Design – Actually Three Separate Sprites!

mockup_3x
First Draft Of Enemy Motion – A Bit Clumsy

mockup_3x
Adding Attack/Retreat Behaviour. Much Nicer!

Jetboard Joust Devlog #42 – Evil Mothers

Another new enemy in the bag – this one’s called the ‘mother’! At least that’s what I’m referring to it as now anyway.

As with the previous enemy it’s heavily inspired by one of the enemies from the original Defender, in this case the ‘pod’. The main ‘selling point’ of the pod is that when it’s destroyed it releases a bunch of smaller, faster enemies called ‘swarmers’ that use kamikaze tactics to attack the player.

The ‘mother’ works in pretty much the same way. As I’m going for a more ‘character’ based approach to most of my enemies I thought it would be nice to have the original enemy split in to smaller ‘mini me’ versions of itself when destroyed – a kind of mother/child thing.

For the design of the enemy I went for a kind of insectoid ‘space invader’ type approach. It’s consistent with the design of the ‘mutant’ enemy and also I knew I could get this to work at a very small size for the ‘children’. Strangely the hardest thing to get right here was the eyes which I wanted to look like a cross between real eyes and some kind of electronic ‘scanner’ – as though the eyes are on an LED screen or something with a lot of interference.

I’ve made the ‘mother’ probably a bit more dangerous in its original incarnation than the Defender ‘pod’. The AI tracks the player in ‘bursts’ similar to the ‘bomber’ enemy but not restricted to either purely horizontal or vertical movement. It uses a similar simple technique to avoid getting stuck in between buildings as well, ie when it collides with a building it will move upwards until above the level of the building. It also fires slow-moving bullets.

The ‘children’ were basically an extension of the ‘mother’ class with different motion parameters so, thankfully, it didn’t take long to get these up and running at all. I added particle effects to both, a kind of anti-gravity field or something. Note how these get disturbed when the enemy collides with a building or takes damage!

I spent quite a while tweaking the motion parameters of both mother and children, both to get them to feel right in relation to each other and also to get the children to feel like they were moving in a ‘swarm’ without working too obviously in unison. The actual ‘birth’ sequence to a while to get right as well, it needs to be slow enough to see what’s going on yet fast enough to feel like the children are being propelled out as speed. I also added some particles to the birth sequence to give is some more ‘pazazz’. Needs audio too..

Dev Time: 2 days
Total Dev Time: approx 58.5 days

previous | next

mockup_3x
Original Enemy Design – Mother & Children

mockup_3x
Adding Motion And Particles To The Mother

mockup_3x
The ‘Birth’ Sequence

Jetboard Joust Devlog #41 – Bombs Away

Really glad to be working on some new enemy types after wading through what seemed like an endless sludge of audio design and bugfixes! Feels like I’m finally making proper progress again.

I’m calling this enemy the ‘bomber’ – very much inspired by its namesake in Defender of course. I started by designing an enemy that was visually similar to the Defender bomber, a kind of robotic cube thing, but just couldn’t get anywhere with this. It seemed too devoid of personality compared to the other enemies in the game. I then tried designing a more humanoid robot with a jetpack but couldn’t get this to work within the restricted colour palette and resolution either. A fairly frustrating start.

Eventually I thought I’d try something with wings, I was originally thinking of a cross between a robot and a WW2 bomber, kind of like the planes in 1942, but as I started drawing it morphed into this sort of robotic angel which I liked – it reminds me of Antony Gormley’s ‘Angel Of The North‘. Added some particles too of course!

I wanted to keep the AI as simple as possible so settled on a simple algorithm that moves in alternate horizontal and vertical bursts towards the player. If contact is made with a building the sprite moves upwards until it is above the level of the building, thus freeing it to move left and right.

Surprisingly this straightforward algorithm worked OK, I was afraid the enemy would get stuck in endless loops against buildings if the player remained stationary and it did – but this was easily resolved by adding some randomness to the amount of movement in each ‘burst’.

The bomber drops bombs in its stationary phase between each burst of movement. The bombs are actually more like mines in that they float in the same place rather than fall to the floor – I added a small amount of oscillation to make the floating more interesting and a ‘warning’ vibration before the bomb detonates.

And that was pretty much it – there’s a few more subtle things going on like the damage inflicted by a bomb being proportional to how far the player is away from it but I won’t bore you with too many details. Now on to the next enemy…

Dev Time: 2 days
Total Dev Time: approx 56.5 days

previous | next


Probably The Final Bomber Animation


Planting Bombs – Still Looking A Bit Static


Making The Bombs Interact With The Player

Jetboard Joust Devlog #40 – Bits and Bugs

Tidying up some loose ends that were annoying me before I can (finally!) start work on some new enemy types!

1. Fixed ‘Invisible JetBoard’ Bug
If the player destroyed an enemy whilst it was teleporting in the enemy’s jetboard would remain static and invisible in the world. Fixed this so that a teleporting enemy’s jetboard drops down properly.

2. Cropped Jetboard Bug
This one had been ‘bugging’ (groan) me for some time, it appeared that enemy jetboards were getting randomly cropped on occasion for no apparent reason. Turned out that it was a crop at all but the board wasn’t always orientating correctly when the enemy changed direction.

3. Particles Going Weird On Level Exit
You can see this issue at the end of the video here. To get the level transform effect I render the entire world to a back buffer and then apply a custom shader when rendering to screen – turns out that optimisations I made to my particle system meant I was rendering direct to screen all the time and ignoring the back buffer (oops).

4. Various ‘End Of Life’ Bugs
There were various problems to do with a player getting killed when already dead and controls still operating the jetboard when the player was dead – these were largely to do with the fact that enemies continue shooting at the player even when he’s already dead ‘just to make sure’. I like this though, it’s funny, so I kept it and fixed the bugs.

5. Disallow Enemy Abductions/Mutations When Player Dead
Not really a ‘bug’ per se but I didn’t like the fact that enemies could carry on abducting babies and mutating when the player couldn’t do anything about it – it didn’t seem ‘fair’ somehow. Now they just hover when the player is in the ‘lost life’ state which, though it doesn’t make logical sense, seem to work from a gameplay perspective.

6. Add Floating Scores
I just like these and nearly always put them in my games – something very old school arcade’ about them.

7. Improve AI In Small Gaps
Enemies were doing some pretty stupid things when the player took cover in a gap between two buildings. This was the result of an algorithm I wrote to calculate the closest building to the player which didn’t work properly, and part of the AI which tries to move away from the player if overlapping (ie avoid ‘kamikaze’ style behaviour). Now, when in a small gap, the enemy should move to the edge of the building that’s furthest from the player, turn around and start firing. It’s tricky to get this stuff right and fixing this took a while!

8. Improve Message Font
This was probably the bulk of the work. Previous in-game messages appeared on the scanner – I didn’t like this for two reasons; it got in the way of the action on the scanner and it necessitated the use of a very small font which made the messages unclear. Double fail. I have moved messages to the main game area which seems to work OK, designed a custom bitmap font for them based on the font I’m using for the HUD (but smaller), and also added ‘impact shader’ effects. Still a bit worried about them getting in the way of the action but actually it seems to work OK (I tried placing them over the ‘ground’ at the bottom of the screen as well but this didn’t seem to work so well).

Dev Time: 2.5 days
Total Dev Time: approx 54.5 days

previous

mockup_3x
Enemies Now Act More Sensibly In Small Gaps

mockup_3x
Added Floating Scores When Enemies Are Destroyed

mockup_3x
Designing A Custom Bitmap Font For In-Game Messages

mockup_3x
Adding Impact Effects To In-Game Messages

Jetboard Joust Devlog #38 – 2D Or Not 2D?

It’s funny how this stuff works. You design sprite A and are perfectly happy with it, then you add sprite B which you feel is even better and sprite A now seems rather lacklustre in comparison. So you go back and tweak sprite A – which is great, only sprite B now seems to have lost its sheen a bit and needs a bit more work. And on and on it goes…

Looking back on this Devlog I’ve been through this process a few times and this week I’ve been bitten by the bug yet again. Even though I know this is a 2D game I was feeling that the buildings that make up the terrain just felt a little too 2D (22D?) and needed something to give them a bit more depth.

I remembered how @PVBroadz had been through similar a process when we were working on Attack Of Giant Jumping Man (he blogged about it here) and I felt a similar solution would work for Jetboard Joust.

So I started redrawing the buildings – keeping the same ‘space aztec’ feel but this time imagining that they were viewed from a kind of flattened ‘side on’ perspective, a bit like Zelda’s ‘top down’ 2D only from the side. As I’m restricting myself to an 8 colour monochrome palette it was tough to get the shading right (really I think the side section should be darker but then I run out of dark tones) but I think the result looks pretty good.

Trouble is, these versions, whilst they certainly looked more solid, seemed too heavy and ‘brick like’ in-game. I attempted to counter this by designing a bunch of more ‘open’ tiles and making sure there was at least one ‘open’ tile between each ‘solid’ tile. The more ‘open’ tiles were a lot harder to get right and I spent a long time fiddling about with the way the shadows worked.

The ‘open’ tiles seemed to work but I didn’t think the arched tiles I had designed (even though I was pleased with them individually) fitted in with the overall, more geometric look of the game. Consequently I decided to bin these (always difficult when you’ve spent some time on something) and create a bunch more based on more geometric forms instead. I also added a subtle one-pixel indent between the ‘solid’ tiles which also seemed to break up the regularity a bit.

I’m pleased with the end result now and think the buildings look much better than they did. There is still room for improvement (isn’t there always) and I think with a bit of effort I could get some really interesting Escher-style connections going on – for now it’s time to park it though!

Dev Time: 1.5 days
Total Dev Time: approx 45.5 days

previous | next

mockup_3x
First Attempt – Solid, But Too ‘Brick-Like’


More Open But The Arches Don’t Work


I Think This Is It – For Now!


Scrolling Through…

Jetboard Joust Devlog #37 – Shake, Rattle & Roll!

I’d been thinking for a while that I needed a slightly more visceral feel to the collisions in Jetboard Joust, particularly when the main character crashes into the terrain but also when he’s taking damage from enemies.

So I’ve spent the last couple of days working on this by applying three different effects, the amount of each effect applied depends on the strength of impact (ie the speed the player is travelling or amount of damage taken) and is tweened back to zero over a short period of time, roughly 0.25 seconds. The three effects are as follows…

1. Scanner Distortion
It didn’t make sense to me that the scanner display should remain pristine when you’re taking a pummeling. Though the scanner is part of the HUD I imagine it as being embedded in the player’s helmet or something so it should appear to suffer as the player does whilst still maintaining enough legibility to make the game playable. I’ve achieved this by applying a ‘pixelator’ type shader that is based on my ‘teleport’ shader with a few changes. As well as changing the amount of pixelation based on the strength of impact I also add a small amount of brightness and noise which gives the impression of old-school CRT interference.

2. Camera Shake
This effect has become so much a staple of indie games that it’s almost a cliché by now but, what the hell – it looks good! Applying the effect was a bit more complex than I thought as it needs the appearance of randomness without being genuinely random (because a genuinely random shake can appear to stick at times). My final approach was to take a {1,0} vector, rotate pseudo-randomly, and then multiply the camera offset by the strength of impact on the x and y axis. For the pseudo-random rotation I always rotate by at least 90deg from the last ‘shake’ and then add another random amount between 0 and 180deg, this gives the appearance of randomness but always ensures there’s a ‘whole lot of shaking going on’. I also keep track of the ‘static’ camera position so that the ‘shaken’ position is always offset from the ‘static’ position and you don’t get a ‘brownian motion’ type effect with the camera movement which would upset the standard camera taking of the player.

3. Impact Shader
This was the effect that took the longest to get right. In my head I wanted an effect applied to the terrain that was kind of a cross between ‘double vision’ and the ‘vibration lines’ you might see on static illustrations to give the impression of movement. I also wanted the effect to look a bit glitchy.

First step was, whilst the effect was in progress, render the entire terrain to an offscreen image rather than rendering directly to screen. The shader could then be applied to the entire terrain rather than each individual component of it which would be both inefficient and cause visual issues.

I then started by applying a shader that simply rendered the whole terrain in a flat colour with some scaling distortion applied, the scaling varying according to strength of impact. I found I had to apply this shader three times in order to get the ‘double vision’ effect on the top, left and right of each building.

I then tried applying some raster lines to the effect and found this looked best if I applied horizontal raster lines when the shader was distorting vertically and vice versa. This gave a ‘vibration line’ effect around the buildings.

Next I tried randomizing the amount of scaling every x pixels – so there would be more distortion at certain, regular, points. This gave a ‘spiky’ effect to the shader that I thought looked pretty cool.

Lastly I varied the amount of scaling distortion on each axis based on the direction of the player’s travel and also added a certain amount of pixelation, again dependent on the direction of travel. I’m pretty pleased with the effect now though it has taken a hell of a lot of tweaking to get this far. No doubt I won’t be able to resist tweaking it some more either!

Dev Time: 1.5 days
Total Dev Time: approx 44 days

previous | next

mockup_3x
One Of The First Impact Shader Attempts


Something A Little More Subtle


Adding Raster Lines For A ‘Shake’ Effect


Adding Scaling Spikes


Final (No Chance!) Impact Shader, Scanner Distortion & Camera Shake

Jetboard Joust Devlog #35 – Abductions & Mutations

Now we have our alien babies it’s time to make something horrible happen to them – seems cruel but this is a videogame right?

First step was to get the enemies to abduct them. This was rather harder than I thought as it required some reasonably complex changes to the AI in order to get the ‘chasing baby’ code to play nice with the ‘chase player’ code. Picking up ‘cargo’ in Jetboard Joust is more complex than in Defender as the terrain in Jetboard Joust can be interacted with whereas in Defender it’s just for show.

I didn’t really run into any issues I hadn’t come up against already when writing the ‘chase player’ code though so thankfully I could pretty much reuse the techniques I’d come up with there and blogged about earlier.

One thing I have implemented in order to get things to look vaguely ‘realistic’ is an ‘aggro range’ parameter for the enemies. This is the range within which enemies will actively chase the player – outside of the aggro range enemies will idle or attempt to abduct babies(!) When the aggro range is activated it becomes larger so the player must run a certain distance away from the enemy in order for it to go back to ignoring them.

If an enemy is in the process of abducting a baby the aggro range is shorter, however if the player shoots the enemy or strays too close it will still go on the offensive.

Another issue with the abductions was having the baby ‘jump’ to the middle of the board when picked up. In order to make this look decent I had to implement some code to check whether the enemy had passed ‘through’ the baby at the last update. This raised another issue though in that if a baby ended up positioned right next to a building it was impossible for the enemy to pass ‘through’ it – this was a pretty rare occurrence but impossible to avoid so I’ve implemented a necessary hack for these situations where a ‘pass through’ is not necessary. The baby jumps slightly but it’s better than it being impossible to pick up.

Next step – design a mutant! This was fun and I’m pleased with the results, I didn’t take me too long either. For inspiration I had in mind Space Invaders (of course), Cthulhu, and the aliens from District 9. The mutant animates slightly differently to other board-riding enemies but it wasn’t too tough to get this working OK – I’d already set the relevant methods up so they were easy to override.

Fortunately the actual transformation happens offscreen so this part of the sequence was very easy! Part of me thinks I should do some kind of onscreen transformation – or will that look a bit odd?

Dev Time: 1 day
Total Dev Time: approx 37.5 days

previous | next

mockup_3x
Stay Away From My Babies!!

mockup_3x
Babies Aren’t So Cute When They Grow Up

mockup_3x
Mutation!!