Monthly Archives: November 2017

Jetboard Joust Devlog #66 – Out With A Bang!

Well, all the major coding on the conventional weapons is now done so there’s just a few bits and bobs before I move on to the more ‘futuristic’ weapon set.

Firstly, I had to design upgrade UI icons for the weapons I’ve added over the past few weeks. These are 32×32 icons so require more detail than the in-game sprites. I was pretty much a #pixelart noob before starting this game and don’t find this type of drawing easy, one of the reasons I went with a limited colour palette (other than liking the ‘gameboy meets spectrum’ aesthetic) was that it would considerably narrow down my options when it came to the art and thus make the drawing considerably less intimidating. I think that was a good move.

You can see the final icons here – I’m not sure, in retrospect, that a square format was the best format to choose for these as many weapons are much more ‘landscape’ in shape – particularly things like R.P.G.s, making them tough to fit in that space without them looking too spindly and weak.

The other major thing to do was add audio for the new weapons. As with the rest on the in-game FX, I designed all the sounds using the DSI Tempest. I stick mainly to the analog oscillators but also use the digital oscs for noise and (sometimes) a pure sine wave. I really love the Tempest for this type of sound design work, the eight-slot mod matrix makes it incredibly flexible, yet it’s really intuitive to use for a synth that’s so deep. Yeah, there’s a couple of things I really wish it had from a sound design perspective (individual level control over each analog osc and pre/post filter as a modulation target) but overall it’s a beast with just the right balance of flexibility and limitations.

I also used my cheapo Boss RV-100 ‘retro’ digital reverb unit and a couple of plug-ins for (sometimes fairly hardcore) compression and limiting.

Lastly, because I liked the chunky Gatling Gun bullets so much (see previous post) I’ve increased the size of the grenade and R.P.G. rocket. Also added a bit of spin to the grenade when it’s fired.

Getting the conventional weapon set done feels like a bit of a milestone so I’m pleased that’s done! next step – plasma rifle!!

Dev Time: 2 days
Total Dev Time: approx 128.5 days

previous

mockup_3x
Upgrade Icons For The Conventional Weapon Set

mockup_3x
Tweaking Sounds On The DSI Tempest

mockup_3x
Bigger Grenades With Added Spin!
Advertisements

Jetboard Joust Devlog #65 – Bullet Hell

For the last ‘conventional’ weapon in the set I’ve decided to create an old-fashioned Gatling gun.

‘What’s that?’ I hear you cry – ‘There’s already a Gatling gun in the alpha!’

You’d be right of course, but it’s bothered me for a while that the Gatling gun in the alpha doesn’t really react much like a ‘proper’ Gatling gun. It’s far too ‘polite’ and doesn’t have the all-important ‘wind up’ effect where the speed of fire starts slow but increases to ridiculously fast as you keep the trigger held. I remember particularly enjoying the Gatling gun in the underrated ‘Bulletstorm‘.

I’m still keeping the ‘old’ Gatling gun but this will be renamed ‘Uzi 9mm’ which seems more fitting for the way it operates.

Actually coding the ‘new’ Gatling gun was pretty straightforward. As usual I spent most of the time tweaking explosions and the particle effects for the muzzle flash and the bullet trail. For the muzzle flash I’m using a new geometric shader type called ‘burst’ based on offset circles. I was particularly pleased with the bullet explosions and will probably re-use this effect elsewhere in the game (maybe on a much larger scale for some real ‘oomph).

The gun gradually gets faster and more inaccurate as you hold down the trigger. It also recoils pretty badly. I’ve opted for super-big bullets which I think kind-of work (I think they’re funny anyway) even if they’re ridiculously big.

The bullets are the first time I’ve used sprite rotation in the game. I was a bit worried this would look out of keeping with the visual style (as the rotation is done at ‘full’ res rather than the game’s pixel resolution) but it seems to work fine.

So I’m pretty much done with the ‘conventional’ weapons now – just have to add sound FX for this one, the flamethrower, R.P.G. and grenade launcher.

Dev Time: 1.5 days
Total Dev Time: approx 126.5 days

previous | next

mockup_3x
The Original Gatling Gun – Now Re-christened Uzi 9mm

mockup_3x
New Geometric Shader – ‘Burst’
mockup_3x
Repeat Fire Takes A While To Get Going

mockup_3x
Does Jetboard Joust Now Qualify As A ‘Bullet Hell’ Game?

mockup_3x
Some Gratuitous Gatling Action

Jetboard Joust Devlog #64 – Rocket Science

Another day, another piece of overpowered weaponry. And on it goes…

This week’s project has been to add an R.P.G. And of course in this context that stands for ‘Rocket-Propelled Grenade’ rather than ‘Role Playing Game’.

In theory the R.P.G. is a very straightforward weapon to code. Shoot a projectile in a straight line that explodes when it hits something – job done. There’s nothing particularly complex about the mechanics of it at all.

What took the time in practice was tweaking the visuals. Because the R.P.G is a powerful weapon it needs to have a certain ‘wow’ factor attached, consequently I spent considerably more time animating the rocket’s travel and detonation than I have for any other projectile in the game.

When in flight the rocket has a spin animation and two particle generators, one that leaves a ‘thrust trail’ and one that generates a ‘flare’ at the rocket’s exhaust. For the explosions I made use of my new geometric shaders described in this post.

Another difference to other weapons is that the rocket is displayed ‘loaded’ into the launcher before it is fired. This means I have to cope with the scenario where the user is out of ammo (no rocket displayed) and also create an animation for when the next rocket loads. None of this was particularly complicated but it necessitated some changes in the way I deal with weapon attachments for the jetboard.

One area where the mechanics of the R.P.G. needed a bit of specialised treatment was in the distribution of damage when the rocket explodes. I had been working on a similar principle to the bombs and grenades in that damage would be applied equally around the rocket depending on how far away the enemy/player is. The problem with this was that, as the rocket detonates with a very powerful explosion, it was simply too easy to commit suicide by firing into a building or opponent at close range. To rectify this I created a kind of ‘safety zone’ behind the rocket. Characters positioned directly behind the rocket take significantly less damage, characters behind but above or below the rocket are still offered some protection but less so depending on how far away they are. You still have to be careful firing R.P.G.s when you’re low on health though!

Dev Time: 2 days
Total Dev Time: approx 125 days

previous

mockup_3x
Early Stages – Muzzle Flash And Recoil To Give The R.P.G. More ‘Heft’

mockup_3x
The R.P.G. Flight In Slow Motion

mockup_3x
Working On The Explosions

mockup_3x
Be Careful Using High Explosives When Your Health Is Low

Jetboard Joust Devlog #63 – Geometric Pixel Shader Tutorial

Been spending the last couple of days working on some geometric pixel shaders that I can use for various in game lighting effects to further juice up my explosions etc.

These may well be of use to others so I thought I’d get them into a serviceable state and do a mini-tutorial on their usage. OK, maybe ‘tutorial’ is too grand a word but I’ve commented the code thoroughly at least! Links to the HLSL source files for these shaders are included at the bottom of this article (scroll down).

I’m assuming the reader has a basic knowledge of HLSL – if not then there’s an excellent introductory tutorial here.

The shaders provided both draw a user-defined number of concentric shapes. The stroke width and spacing between the shapes can be set via user-defined parameters, as can the amount the spacing and stroke width increases at each iteration.

A parameter ‘multiply_increments’ allows the user to set whether the spacing/stroke width increment as applied linearly (by addition) or exponentially (by multiplication).

The supplied texture is used to draw the shapes (I often use a 2×2 white square), a user-defined tint can be applied to this.

All sizes, widths etc are calculated as a proportion of the texture size so usually between 0.0f and 1.0f though you can go larger than 1.0f if you wish some of your outer shape to be drawn outside of the texture (and therefore cropped).

Setting the shader parameters from your .net code would look something like the code below. Adjust these parameters over time to get the kind of trippy effects you see in some of the example GIFs. Maybe you could smooth these parameter changes using LERPing?

mockup_3x
Two Geometric Shaders Overlaid
Microsoft.Xna.Framework.Graphics.Effect shader = Game.Content.Load (“circles”);

// The tint that will be applied to the texture – set all values
// to 1.0 to leave the texture untouched
Microsoft.Xna.Framework.Vector4 tint;
tint.W = 1.0f; // alpha – 0.0f – 1.0f
tint.X = 1.0f; // red – 0.0f – 1.0f
tint.Y = 1.0f; // green – 0.0f – 1.0f
tint.Z = 1.0f; // blue – 0.0f – 1.0f
shader.Parameters [“tint”].SetValue(tint);

// The size of the first shape to be drawn
shader.Parameters [“size”].SetValue ( 1.0f );

// The stroke width of the first shape to be drawn
shader.Parameters [“strokewidth”].SetValue ( 0.1f );

// The initial spacing between shapes
shader.Parameters [“spacing”].SetValue ( 0.1f );

// The number of shapes
shader.Parameters [“repeats”].SetValue ( 3 );

// The amount by which spacing increases for each consecutive shape drawn
shader.Parameters [“spacing_increment”].SetValue ( 0.0f );

// The amount by which stroke width increases for each consecutive shape drawn
shader.Parameters [“strokewidth_increment”].SetValue ( 0.0f );

// Whether the spacing/stroke width increment as applied linearly (by addition)
// or exponentially (by multiplication).
shader.Parameters [“multiply_increments”].SetValue ( false );

// Adjust depending on how you’re doing your rendering
SpriteBatch.Begin (…);
shader.CurrentTechnique.Passes[0].Apply ();
SpriteBatch.End (…);

Probably also worth mentioning are the settings required to get the ‘endless loop’ effect you see in these GIFs. It’s pretty straightforward if the spacing and stroke width of shapes is consistent, but if not you need to tween the strokewidth and spacing so that they are the same for the second shape at the end of the loop as they were for the first shape at the start of the loop. It took me a while to get my head round this.

The code below shows some example values – don’t try and cut/paste this as it uses my own tweening classes and a wrapper class for the shader itself. It should be good enough to get an idea of how to set things up though…

// Initial stroke width relative to texture size
float width = 0.0025f;

// My wrapper class for the shader
shader = GeometryShader.CircleShader ();

// Used by my wrapper class – the size I’m drawing the texture on screen
shader.ScaleX = 506;
shader.ScaleY = 506;

// Set up initial spacing and stroke width for the shader
shader.Spacing = width;
shader.StrokeWidth = width;

// Spacing and stroke width will increase by 50% for each concentric shape drawn
shader.SpacingIncrement = 1.5f;
shader.StrokeWidthIncrement = 1.5f;
shader.MultiplyIncrements = true;

// Sets up the values to tween the size of the outer shape over a 30 frame seamless loop
// First two values are the start and end size
shader.TweenSize = new Tween (1.0f, 1.0f + shader.Spacing/shader.SpacingIncrement + shader.StrokeWidth/shader.StrokeWidthIncrement, 30, Tween.Linear);

// Sets up the values to tween the spacing over a 30 frame seamless loop
// First two values are the start and end spacing
shader.TweenSpacing = new Tween (width, width / shader.SpacingIncrement, 30, Tween.Linear);

// Sets up the values to tween the stroke width over a 30 frame seamless loop
// First two values are the start and end stroke width
shader.TweenStrokeWidth = new Tween (width, width / shader.StrokeWidthIncrement, 30, Tween.Linear);

And here are the actual HLSL source files. Note that I am pretty much a beginner at this stuff myself so I make no guarantees as to the suitability of this code for any purpose and I would welcome any contributions towards making it execute more efficiently.

I have plans to add more shape types at a later stage and combine these into one uber-shader that also also shapes to be combined in different ways. Watch this blog for updates…

circles.fx | squares.fx

If this is of use to you I’d welcome more followers on Twitter.

Dev Time: 2 days
Total Dev Time: approx 123 days

previous|next

mockup_3x
Two Circle Shaders Slightly Offset

mockup_3x
Square Shader With Additional Rotation Applied