Hey folks
Been a busy week or so getting ready for this
steam games festival, which is going on right now, until the 22nd June. So if you want to check out the new demo, then
please check it out and let us know what you think! We were also fortunate enough to have our brand new trailer featured in the Escapist big indie showcase stream.
At the end of the trailer we reveal our big new JACK MOVE. These are like Overdrive or Limit Breaks in Final Fantasy, a super powerful move. There will be one for each element. We've actually improved on this even further since the trailer was made, and I hope you agree, it's looking pretty fancy now with improved cloud sprites and some fancy backlighting. I though it would be fun (and hopefully interesting) to break down the effect and process we took to create it.
The idea behind the move is that while Noa and the enemies are already battling in cyberspace, Noa pulls out her cyberspace deck, coding an incantation that opens up a door in the very fabric of cyberspace, becoming one with it for a brief moment and allowing her to unleash this powerful attack. It's a bit meta but I think it works quite nicely and gives the whole thing a lot of room to breath.
Joe worked on an initial storyboard gif, that I took and tried to emulate as close as possible.
He had the idea of Noa getting sucked further in to cyberspace and knocked out a quick animation that he then itterated on until he came to the wider glyph/incantation which represents the type of element the attack is for, in this case it is an Electroware attack, so it's blue and has lightning motifs.
The whole move it timed to the music.. which I appreciate doesn't really work in gif form. This is so that the reveal, input minigame and actual move all flow seamlessly and allows the player to see as much of the animation and move as possible without being distracted by the minigame.
After some initial thought it was decided we should focus the input in the middle so that the players eye isn't too distracted
We knew that we wanted to zoom in on Noa at this point to really focus the action, so that also mean bumping up pixel size of all the ui elements used so that the pixel density matched the world and stayed consistent. Normally I hate this kind of thing, where the pixels are not multiplied by whole numbers, it can look horrible if it happens all the time. I think in this case it's ok as it's is a quick zoom in to double the scale, and then a quick zoom out again. The camera isn't still long enough for you to notice any warped pixels.
Here's a really early version of most of the major parts working together (ignore the screenshake on input.. was just testing it out and it didn't quite work)
There's some nice bits going on here. We fade out the background in order to place the move in it's own space, allowing the clouds to come in and not look weird. We also mask out the ground/grid texture and fade it back in around the lightning strikes, which gives them a much better sense of place and dimensionality, though at this point the highlights aren't scaling properly.
We really wanted the part when Noa slams cable of her deck in to the socket of the glyph to be really impactful. Joe's ideas was to have a big ripple to show this.
My initial experiments with this were not great, due to some miscommunication I thought that he wanted the ripple to eminate out after she disappears, which just looks a bit odd. The ripple effect itself is also much more of a pond ripple, not quite what he had in mind.
The ripple is a post-processed shader effect, so after some international tinkering between us (mostly Joe!) on shadertoy, Joe was able to create exactly what he envisioned.
Now we're getting somewhere, a nice single big ripple! I tweaked it further to work at the correct pixel density when zoomed in. Here's the code for that:
https://gist.github.com/empika/68d6adb5d3c0c6ead1c9803e279d322dWe really wanted the move and minigame timing to be really succinct, with the whole thing taking not much longer than it takes for Noa to summon the glyph and slam her deck in to the socket. So I went back over the timing and tightened everything up so there is very little waiting time.
The last thing to do was the clouds. There are 4 layers, two coming in from each side which took a lot of tweaking to get their speed, timing and easing down. The major challenge was to get the highlights and backlights looking nice. An intial exploration showed that the majority of work could be done using a ton of masking.
It looked a bit weird though due to the speed of the clouds, the highlights staying static and there being no real blending on the highlights. After some tweaking of the cloud speed and easing, we looked in to the blending. Some more shader work later we ended up with a relatively decent sprite "overlay" blend for the front highlights. The backlights ended up as just straight textures, the time they are visible is a lot shorter than the inital experiment which combined with the cloud speed and alpha blending on the sides, gets rid of the weird crawling effect.
Here's the amplify shader editor node graph for that, as it's surprisingly hard to find reference for the various blends alogrithms online:
Pro tip... as masks only cut out hard edges, you can use an inner sprite with an alpha channel blend to fade stuff out. The solide white texture is our mask, inside of which we place the texture with an alpha channel (on the left) that lets stuff through. This example texture was used for the lightning strikes on the ground
Here's a still of the final effect so you can see the highlights more clearly.
That's about it I think! I think it's turned out super good and I'm really happy with it, though I think we still have some more tweaking to do with timings and the position of the lightning and things! Here's the final effect again:
I think I'll cover the input system in another post as this one is already getting quite long
Come join the discord if you'd like to see more work in progress gifs and images and chat about the game! We're doign a developer Q&A on saturday at 12pm CST if you'd like to join us
http://www.soromantic.co.uk/discordAnd grab the new demo from steam right now!
https://store.steampowered.com/app/1099640/Jack_Move/Thanks!
Community
