it`s done.

the behemoth animation that cost me 2 months is done.

and I finally came up with a name for him, Tixel (like tri and pixel) and I figured i`d just call the `game` that as well, since im lazy.

so regarding this video, there`s an insane amount to talk about. so i`ll start from the beginning.

I wanted to make a demo of a theoretical game, so it would give me lots to talk about regarding working with the retro style of visuals. I`ve inserted some modern touches in places since that`s the backbone of my entire research. I`ve mentioned before in blog posts about an interesting mechanic, deconstruction. i talked about it at length in the bit.trip beat case study, and even earlier before that in a pose about a meeting i had with my guidance tutor Gregor.

and I wanted to expand on it further as it`s not an overused concept in games. (of course, since it`s inception i`ve discovered two game that have done it. neverdead and 99 bullets)

99 bullets: where to lose a bullet is to lose a life. and to lose a life is to lose a bullet. surprised I missed this one since it`s a downloadable Nintendo game.

body parts don’t count as ammo, but it does affect movement and such. i love how his head becomes like samus`s morph ball.

okay first things first, the intro screen.

peeks his head out, and the text slams in.

doesn’t really serve a purpose, it was the last animation I created just to bookend the main thing. but I think it came out really nicely. the characters face reads really well as a nice, clean visual. and it`s tottally synonymous of 16 bit games. I initially made an animation of the text circling anti clockwise around his head in a 3D space fashion (which in itself would have been a great example of using the more powerful technology to compliment the retro style) but it clipped with the face too much despite making a second mask layer face.

all three eyes are actually all different visuals, since this part was quick to create, I figured i`d lavish a little extra attention on the most iconic feature. the whites of the eyes actually have a white fade in/out motion to make them seem shiny.

the moons in the background are believe it or not, all constructed from the same image. I applied different colour overlays and lighting effects along with changing the sizes. this sequence was also the one part I actually got to include some parallax scrolling (more on that later) the sky moves slowest, moons are medium speed and hills are fastest.

the text is a style I created to mirror the look of the character. I simply redraw over a 8-bit font with some of my own touches. like asymmetrical sized squares.

title screens are fun, because mimicking the style of the 16-bit era is especially easy to do with these.  one thing I was`nt so keen on, was using placeholder music. I currently only have one original song for this project (composed by David Currie) so I needed something different for this part. a lot of title screens can be a bit too cheery and I wanted to stick to the same mood as the original song.

I ended up using Ristar – beyond space. i think it`s a song from later on in the game. everything from the first quarter of the game is way too cheery. and since Ristar was such a big inspiration I figured i`d use something from it.

Tixel automatically walks on the scene, would have him jump out of a ufo or a flashy crash but this is serviceable.

the blatantly obvious “the game has started, you are now in control” symbology

then the heads up display fades in. the blocks at the top left shows the number of how many pieces he has left to tear from himself. the hover percentage is effected by how many toes and legs he has. I wanted some flashy animations for these, such as a duplicate cube falling and fading from the main one to signify a deduction. but I had to overlay the hud using video editing software so it couldn’t be done. (I intended to make the hud in flash, but it turned out that I can’t do that with the virtual camera function.)

that`s something else worth talking about. because of the numerous movie clip animations in flash, it was easier for me to track the character, then move the environment with his movement (like how regular platformers are coded) so instead I just made the character traverse it normally, and have the camera track his movement.

this in turn presented a lot of problems however, parallax scrolling was now impossible. I would have to choreograph the backgrounds movements in time with the camera, and the camera has a LOT of key frames, not to mention ease ins and outs. that and there’s a lot of different background elements so sadly it was a no go 😦 turns out, background scrolling is easier to do in a real game engine, not a tech demo video. how odd is that.

here he is demonstrating his hover jump.  I was inspired by mario`s tanooki tail float, I even used the same sound effect for a bit. but it got irritating fast.

here’s the first enemy encounter. sort of skinny alien, crab, claw, pincer hybrid. went through a lot of iteration to get the shape right. wanted it to be insect like yet humanoid. I choose to do black outlines on the character visuals because it makes animation a lot easier compared to using wider palettes. that’s another advantage with the low fi style, when the characters only have 2 shades making recolours is quick and easy. you`ll notice colour variations throughout the video.

now he`s spotted Tixel, he approaches clamps at the ready. these are designed to be little to medium threat enemies. they are fast and can hurt, but they are easily outsmarted. I forgot to put in the video, a sequence of Tixel jumping over one, and it walking straight into an electric pit. a pity, because there’s a few repeats of simply “throw block at it” sequences.

while the characters tearing a piece off, a crosshair fades into view. now there’s a few ways this could have been incorporated with modern tech. if this was a handheld, mobile title. the accelerometer could be used to aim the crosshair, leaving the touchscreen free for controls. or even a mouse, or wiimote pointing.

to throw I imagine just pressing a button/the screen would suffice. I made a blocky deconstruction animation for the clawguys death. I wanted to harken to the blocky aesthetic as a visual indicator of death. that and the clawguys have an angular shape as is.

he`s defeated and now moving on. suppose nows as good a time as any to talk about the sky. I chose red because it introduced a very nice contrast between Tixel and the foreground elements (it clashes with one of the clawguys but lets not focus on that) the stars are simply 3 different icons, resized and recolored in various ways. I feel a little cheap and nasty using this technique to populate a level with visuals, but i`m only one person.

that cube in the bottom left lies on the closest background element (except from the floors and cave walls) which is the light green hills, I placed lots of cubes on these hills to break up the monotony and even put some electric pulse like effects on them. (similar to the ones seen in the foreground) just to take the edge of the flat shading and to liven things up a bit. the lighting effects are very high frame and a larger resolution. since these have a lot of alpha space, they didn’t take up too much memory. if something like the environments had been high res, the game would not have run as smoothly.

this mushroom was just a generic bouncy platform to break up the monotony. I actually got some pretty hi res effects under it, it`s a shame you can’t see much of them during the video. or the shroom`s three frame bounce animation. and of course, this is Tixels first death by electrocution. I wanted a different take on the typical bottomless pits, I made some really fancy electric animation for the spikes, i`ll put them in one of the spritesheets at the end.

now this is here is Tixel teleported back on safe ground and flashing red to show he`s taken damage. I wish I could have gone back and changed this however, it contrasts with the background and more importantly it doesn’t play much with the aesthetic. my other idea was to have him rasterize to show he`s been hurt. like have his visual fidelity decrease for split second so he just looks like 3 green (different shaded) large pixels. it`s a visual trick i`ll be sure to employ in bit.cops.

this is him actually making the jump across and bouncing to clear the gap. the sound used for it was actually a distorted water sound effect.

him making a safe landing. and the moons now in the background. again, had it there to decorate the sky. I wish I had put more moons in the background during the main game to further emphasize the `alien` vibe. maybe three of them all clumped together and exotic colours. alas technical restrictions limited it to just two. there`s some cool hi res glow effects behind the scenes on them however. you can spy it in the ending sequence.

about to defeat the second enemy. this would have been a good part to do the whole rodeo trick and jump over the clawguy so he runs into the pit. the tower of blocks can also be spied now. there’s about 3 different blocks I drew, and I just changed the angle and layering to give the look of those blocky towers. I only did about three sets of electric pulses for them aswell. the pulses are high-definition and all move at variable frame rates so they don’t look in sync. that was one thing I always worried about working with movie clips, that the animations would all work on the same rate and everything would sync too nicely and the illusion of the world would be shattered. i wanted everything to look organic to an extent. even the eyes on the title screen move independently.

not much to say here. clawguy defeated, moving on. I`ll give one of the backgrounds a mention. the darker green one with the lime lines. there`s about 3 of those, and I just overlayed them to *try* to give the look of a flowing hills. where the blocks are settled is where two hills are connecting so that fit in quite nicely. looking back, i`d liked to stick some smaller grey cubes on them to give the impression of distance.

another pink clawguy coming in for the kill. but he is of course too stupid to notice the electric pit separating him and his prey. you can probably see quite visibly in this image, the smaller tree on the closest hills. I only made one of these to adorn across that layer. but flipped it and made custom shadows for every one.

and down he goes. out of all the sound effects, electricity was by far the easiest to get hold of. I`m not much of a sound guy, I can’t compose music at all (hence why I got outside assistance for the main theme) so for sound effects I really just, got whatever I could find online and extracted what fit.

now this I thought was an interesting encounter. an environmental/enemy puzzle. the top path is better, as anybody`s videogame instincts can tell you. but it can’t be crossed because a spitter enemy is infinitely firing projectiles too quickly for you to jump across. the idea is to quickly lob a block through the shots, hit the block in the tree. and cause it to slingshot. of course, im my version this is obviously a simple set piece. but for a theoretical full game, this could be an ambitious physics based puzzle, which would have been impossible to generate on the original 16-bit hardware.

now using a bit of timing and skill, the projectile makes it`s way through the gap. the block is an outlandish green for interactivity`s sake, if it had been a lighter hue players may mistake it for a non interactive piece of environment.

the effect when a block collides, it`s a high res effect. I used soft lighting sparingly and not for main animations on the playing field (foreground effects are okay since the player cant get there) because it could distract otherwise. the impact of a projectile hitting it`s target was worthy of a HD effect I figured. lends a sense of impact.

once the tree box has been hit, it shuffles side to side a little and then pauses still for a second. just using the old principles of animation for some anticipation.

here’s the `advanced physics` at play. sarcasm/

obviously later levels could pose more complex hazards where objects may need to be hit at certain angles to get the desired effect like roll down hills or be hit towards certain directions.

the spitter get launched up offscreen at a very high velocity, and the player is rewarded with the games trademark font telling you “LAUNCH”. defeating enemies or solving environmental hazards creatively is worth some sort of reward I figured. just wish i`d thrown some HD effects in as well. but the text is suitably `in your face` so it works.

and of course, the cheeky little twinkle in the sky. an homage to team rocket if you like. now, I`m a little unfamiliar with the specifics of scaling and rotation on older hardware, I thhhink the SNES could do it to some degree for one object at a time. but in this animation I use it a lot (namely because it`s developed in flash) so if need be, I could chalk that down to “using the more powerful tech to enhance the animation fidelity” there`s a lot, a lot of fades also. now i know for certain that can’t be done on older hardware because the fade against the background elements produces a huge array of colours. more than a retro palette could display.

embarking up the shortcut to admire the view. a nice and safe path onward serves as the reward for figuring out the mensa grade puzzle beforehand.

he just comes up to admire the view. I don’t have him use the shortcut since I want to show off all the level I made. the electronic pulsing on the boxes has a distance based sound effect, to give them a sense of presence. that and I wanted to fill the world with sound since it was overly quiet at times cause the character does`nt have footstep sound effects. (I tried it, but with three feet, it gets pretty irritating)

this is him falling into the cave, reminiscent of the underground section in Mario Bros. I also lowered the pitch of the music to change the atmosphere.

now I slaved over the detail in this cave for quite a while so I`m going to talk about it at length. all the individual cracks seen in the entrances, corners, walls, floors and roofs were done manually. it`s a small area with a zoomed in camera so modular assets stuck out too much. that blue glow you can see in front of Tixels face, came from every blue element in the cave. it had a `pulsing` like animation but a lot slower than say, the boxes on the hills. the multicoloured cubes in the holes, are perhaps a sort of `ore` in this alien world.  i did a lighting trick with them, where they had the usual, fuzzy brush, large radius, slow glow. and an extra layer with a rapid flickering of opacity. to give the look of a television. hopefully it`s noticble in the animation. but it gave a lot of lighting diversity to the cave. what *should* be the darkest area got turned on it`s head 🙂

and of course, the imminent threat, the spitter. it is a bit unskilled to get hit here, but I wanted to continually decrease Tixels health so I could show off all the frames i`d drawn for him. this part also shows that the spitters attacks can home in.

Tixel flashes red when he gets hurt, but so far he`s only been hurt by pits. but to show a projectile impact, there’s a few `bits` that flow out from him and vanish. I did`nt use HD effects to show player damage, because I prefered to save that valuable commodity for player encouragement.

he takes a step back and deals with the threat. I think if this was an actual game it would be quite difficult. there`s the factor of missing shots severely damaging your bit count and the ever decreasing hover ability. that and once you reach zero parts to rip off, a single hit will finish Tixel off.

the HD spark as the spitter takes a hit. one thing I`ve noticed looking back, is that I also forgot to place spitters on vertical walls. they`re all placed on ceilings. although the death animation is better suited for vertical falling so maybe that`s for the best.

it is now a broken clump on the floor. the spitter is intended as a more `gooey` being then the clawguys, that`s why his remains aren’t in a cube like fashion. I hope that`s valid reasoning.

the so-called `difficulty` of this lower path, is simply a bunch of thin platforms to jump across. I wish I had elevated the spikes in one or two of the gaps so it would give a tricky obstacle to jump over. it`s true what artists say, a piece is never `finished` it`s only ever `good enough`

Tixel closely avoiding the yellow spitters projectile. you can see the pixxelly falloff from it colliding with the floor.

it launches a second homing attack and Tixel jumps upwards and just avoids it. watching the vertical ascent here reminds me a lot of metroid. I wish I put more vertical moments in the game but my camera work in this one instance here isn’t so hot.

spitter attack smashes. Tixel continues upwards. and I`ve just noticed the blue laser on the right is out-of-place. whoops. oh well since I`ve brought it up I may as well talk about them. I did about 15 variations of them and placed and animated them all by hand to fit in the black gaps I did on the foreground. I tried to give them a `pulsing` yet `travvelling` motion like blood flowing from a heartbeat. I did a lot of `pulsing` things, but I wanted to give the planet a sense of `life` that and to liven the scene up. the game moves fairly slow so i thought i should have some additional visual stimuli aside from the gameplay.

about to get out of cave. the music reverts back to normal as soon as he gets out. beforehand when speaking about the thin pulsing lasers, there`s also two more effects plastered all over the foreground. on the left there is a small blue rectangle with a smaller bright blue dot on it. this dot simply zap`s clockwise around the panel. slowly however as not to distract. it really was just a  little filler animation. I wish I had made some of them rotate counterclockwise however. (the ones that were within range of each other) and changed the blue panel to look more like a computer chip.

on the right is a large square visual with black lines emanating from it. there’s a `pulse` in the truest sense of the word here. a blue circle emanates from the circle and fades to the outlines of the visual in a rhythmic fashion. again,wanted to give the level a sense of life and fill up the visual space.

my initial intention was to mimic the innards of a futuristic computer, but as the project went on I gave it less and less thought. so I suppose the environments could be interpretive to the player. because they do tell a story. (multiple moons and unusual colours suggest alien, flashing lights suggest futuristic but wildlife suggests primitive)

up onto regular ground once again and facing a clawguy, the boxes in the sky frame the scene quite nicely, but I wish I had placed them closer to the ground *because* this red clawguy here fades into the background.

piece pulled off and ready to attack. I should note that the crosshair is a high res visual. it`s a combination of bevels, strokes and soft brushes to try to give it a  rounded, organic look. the resolution of it clashes with the level somewhat which is good. helps it stand out.

enemy defeated. at the bottom left, the hover indicator has dropped to 90%. that`s because Tixel just threw a toe. now his hover jump wont be quite as effective.

moving downwards now. not much to say here except look at those blocks. I really hope this abstract alignment will provoke thought in players about the world.

down the hill and now another `puzzle` there`s a claw guy placed underneath a treebox.

either way, Tixel is going to lose a piece. so it makes sense to go for the more sadistic option and crush the poor guy. this is now a good opportunity to mention an effect I used for the clawguys. they have little red dots in their eyes. kind of like the red glow from a terminators eye. originally I wanted them to have a ghostly, trail effect to give a HD effect to their movement.but turns out it can only be done using actionscript 3 and I usually work in two. so I guess I finally have a reason to move up to version 3 for bit.cops.

whoops, may have made him dissolve a little early but it happens too quick to tell in video form. and of course, there’s the visually obnoxious reminder that “you did well!” killing enemies in creative ways is worth a bonus. the pixels emanating from the clawguy corpse helps show the impact of the technique.

earlier during the seesaw these treeboxes resided on the front layer and Tixel walked behind them. but for this section he jumps up on it so he can hover across this next area and cover more ground.a good technique speedrunners use.

another enemy. bit of a missed opportunity this, should have thought of a more creative kill.

and down he goes. I keep kicking myself for using all of the background blocks at the start and middle of the level. I wish I had placed some further here, and something new to break up the visual flow of the landscape.

his buddy`s noticed the commotion and rushes over to help, by falling into a pit. originally I thought of making a hi res effect for the claws pinching (clamping?) but I thought it would be a bit too busy alongside the eye trail. if only I`d known the eye trail wouldn’t have been possible, i should have made it.

and then of course, Tixel makes the same mistake. to be fair, it is a small gap. that and I shamelessly wanted to hurt him so I could show off his large library of frames.

he does make it over however, and he takes a run up to try to clear this spiked gap.

and try as he does, he doesn’t quite clear it and ends up respawning on the platform.his hover power is decreasing so there’s no point trying again. and again, I wish I had some more background elements here. the reds are fading together.

time to create a makeshift platform.

the treebox gets impaled on a spike. creating safe ground to get across.I imagine if the player doesn’t have any bits left by this point, then the box could simply fall by itself after a while. but this obviously detract from the time score at the end of the level, and there wouldn’t be a “SPIKE” bonus.

it`s a tricky jump, but it can, and does get cleared. this is probably the most visible that the electric spikes are in the whole game. I did about 4 base ones and just duplicated them so much that it ended up looking like grass. i`ll put the full view image at the bottom.

this warning sign was actually quite a late addition. because it qualifies as a hud element (it moves with the camera) I had to put it in during the video editing stage. it`s not a HD visual, but I wish I had made it now. I think the green and black is a nice colouration though. quite vivid, and obviously the same style as the protagonist.

and now for a double squash. this seemed to be the logical progression of that mechanic, squash two enemies. not much to say about the trees. each one`s unique and has a unique texture to it. partly inspired by palm trees and flower petals.

and now, the warning indicates there`s another squash opportunity ahead. skilled players who have plenty of hover left could probably jump atop the tree box and jump along to the top of the upcoming cave. (given, if I changed the placement of a few things)

but since Tixel is running low on body parts, he just jumps to hit the treebox and set the double squash in motion. the first background layer comes into view quite nicely here. it was just 5 hills I drew arranged differently, along with blocks on them. some pulsing, some not.

this cave is the last obstacle in the level.this area could potentially be crossed without throwing a single block. it would just require good timing.

and out through the cave, reveals the end goal. Tixels ufo. something else I wish I had time to go back and redesign. the HD light on the base looks nice (could use a few more frames) and the transparency on the glass dome is cool. but the rest just screams “boring”

“you completed the level! have some big text!” during this part, I animated his three eyes blinking animation. the only other state I did this was the beginning where he walks onto the level. creating the blinking set of frames for every number would have been ridiculous. I figure, just do it for the prones that get shown static for the longest. so the beginning and end.

and then the ufo takes up and leaves, leaving the moon in sight for everyone to admire it`s `glowing` animation and all the craters adorned on it.

fades to black and then the scoring animation starts.

he falls onto the scene. I wanted a close up of him so I could show off the `tearing` animations. he tears down to where his score stands. so here he tears himself down untill he has once piece of himself left.

how many clawguys have been defeated. the background is actually the sky background from the main level, but distorted and animated to rotate.

how many spitters were killed. the ufo elastically moves in and out during this part, just to liven things up. wanted to have it pinball between planets but meh.

the aforementioned bonuses

and the time. ufo once again.

only one bit. the bits left are probably the most important scoring factor, so I made an animation and sound effect to announce just how bad only having `1` bit left is.

and of course the hover percentage. of course it`s linked to bits left but it pads out the score factors a bit more.

and then the scores scrolls away and he follows, then fade to black.oh also, the song for this part is Ristar-Ice Scream

and before I summarise, i`ll stick some spritesheets and development assets here

sketches. I`ve still to make a boxart for the SNES cartridge i bought, you can see some of the ideas for it here.

some of the HD effects used. sparks from the electric spikes. box pulses, laser pulses and such.

all of Tixels frames. and some other things.

all of the clawguys frames. not a final name, given the chance i would have liked to ponder longer for a name for it.

the spitters.

a zoomed out view of the cave section

what the electric spikes look like. am I destroying the magic by showing the minus world?

and the backgrounds. looks naked doesn’t it?

okay, so to summarise what i`ve learned during the creation of this tech demo.

higher resolution lighting

as evidenced by superbrothers: S&S using high res lighting can do wonders for the sharp edges of the pixellated era. it really helped take the edge off the sharpness of the visuals and lent a sense of presence to the world instead of it feeling flat. particularly in the caves and the moons.

use of modern flourish for emphasis

using the stronger visuals as an emphasis on things. such as encouragement for landing a successful shot (the green spark) and jumping on the tricky platforms (the spores from the floating blue mushroom) ensures it doesn’t get overused and loses it`s credibility.

sparing use of powerful technology, as to not overuse it`s implementation

speaking of overusing. I made sure not to throw HD effects at every single opportunity. I did them sparingly when I thought appropriate. the main foreground is a hugely prominent visual draw, so I made sure to decorate it accordingly. the abundance of FX in the cave was to lure players to want to take the lower path (which is more difficult and longer)  simply to see the attractive visuals.

capacity limits are no longer an issue

the main character himself has a very large frame count. had this been a continued game, the number of frames and assets could have grown exponentially. and keeping in mind the small game sizes of yesteryear, such a memory heavy mechanic (dismemberment) could only be possible on more powerful hardware as all the frames couldn’t have fit on an old cartridge. and with a larger file size comes more room for background layers. there would be no limit on how dense the backgrounds could become, i had roughly 5 background elements which would be pushing it on mega drive hardware for example.

generally, better

and not just capacity, but ability. many objects zoom in and out, scroll, pan, stretch and various ways. standard animation tricks for nearly any animation software, but it would be a taxing task for retro hardware. using todays technology, we can employ these moves to retro visuals with ease. instead of redrawing lots of frames to animate a rotating object, (projectiles, backgrounds, special effects) modern technology can render these movements easily and without losing any of the sharpness of the original image.

advanced technicalities

physics heavy things like the box gimmicks (seesaw, spike, squash) are better fitted for stronger hardware despite the asset itself being a low res graphic. theoretically had this been a full product, the behaviour of these moments could have been very physics heavy, like using object angles, trajectory rates of the projectiles, impact angles and wind to affect how box`s move and interact with the environment. however this is simply a box, there are easily many other thing which could also be effected by these complicated elements, like the hover jumping manoeuvrability, seesaw physics or even the enemy artificial intelligence being adaptable to learn from their mistakes (like running into pits, or standing under threats) this last feature in particular, could involve writing memory to the save file (which of course, many cartridges were incapable of doing) to learn the player habits. it`s a feature I have envisioned but was never able to implement in the demo video.

not quite the abundance of results I had hoped for. but there`s many things i`ve learned from this i`ll factor when making the bit.cops tech video.