Squids with guns! Pink Robots! Devils from the 4th dimension! Shopping Trolleys and Lasers. When 4 worlds collide, only SYNSO (he's a squid, not an octopus!) can save the day. Psychedelic arena shooter action with visual and aural overload. Just the way sir likes it. Critically acclaimed and star of the Eurogamer Expo 2009 Indie Games Arcade, Squid Harder is an arena shooter like no other.

Post news Report RSS SYNSO: Creating The Look

A step by step look at how the artwork of SYNSO:Squid Harder was created

Posted by on

You know something? I hate writing games. Really, I do. The problem is, it's a compulsion. There's these things in my head and I don't really want them hanging around in there too long for fear of them driving me absolutely crazy.

Why do I hate writing them? Because they take so long to do well. I'm not a coder as such, I'm a bit rubbish in that department. All the talk of loops and things make my head spin. Yet, I like doodling. So it's natural enough for me to spend time on doodling. Ah, but I don't actually have much time these days.

I'm in my 30's now, I'm a full time carer and a parent. I've got words to put down to the internet every day or so as well as making the odd game here or there. So, I need to make sure that everything I do can be done as fast as possible. Given I'm a twitchy lunatic over these things, I want it to look as good as I possibly can. And I need to find a way to do that pretty fast.

The SYNSO look, rather obviously takes its lead from both the rather in vogue "let's make things glow" trend and my deep ingrained love of chunky pixels that made up the games industry in its formative years. It's also very fast and very easy to do. Admittedly, in setting myself up with all the stuff I wanted to make sure I could do this stuff fast it wasn't a cheap do, but I'm sure there's enough free alternatives out there for these things that anyone can do the SYNSO look without much pocket burn.

Tools Used

In creating the art for SYNSO:Squid Harder, I used the following tools:

Cosmigo Pro Motion
Adobe Photoshop
Braid Art Labs Groboto

Chances are the first two will be pretty well known. Pro Motion is the professional pixellers weapon of choice. Reminiscent of the old Amiga package DPaint, it's pretty much perfect for a speedy workflow. Photoshop is the big outlay here, but given how much time it's saved me over the years, it's well spent - I've never been able to get on with The Gimp but I'm always impressed by those who do.

Groboto though? Well, that's a relatively unknown thing sadly. And it's a shame because it's absolutely lovely. Groboto is a procedural 3d generation thingy. When it came to wanting to add backgrounds to the game and wanting to do it fast, it was the perfect choice. More on that later though.

The Pixels: Pro Motion

Given that when I first started on SYNSO: Squid Harder, it was as an entry into Indiecade. I'd left it rather late all told to begin work on the game and so things had to be done really fast. Sort of 3 weeks fast. So I went back and looked at some of the stuff I loved as a kid and the easiest and most sensible route I could find was to hark back to those lovely chunks of wonder that the Atari 2600 used to provide. Easy beans, folks, easy beans.

Here's one I made earlier that didn't get used in the game:

Creating a SYNSO style sprite in Pro Motion


Ok, so it's a shopping trolley. Creating the sprite took all of about 30 seconds.

Simply select a 4x4 pixel brush. Select the grid tool, right click and choose "Get From Brush" and it'll snap your pixels into place perfectly. Select a colour and draw. Yup, it's really that simple. Ain't technology wonderful?

You might notice the hefty gap around the actual sprite, well, that's there for a reason. None of the glow effects in SYNSO are done on the fly as I'm not a fan of the blur it a bit option. I like a bit more individual control over it so using the power of technologies, it gets flung over to Photoshop afterwards to add the glow.

Edit, copy the frame, and onto Photoshop...

Adding The Glow: Photoshop

I've already put down to the internet an extended version of what I'm going to be writing here. Sadly, due to a server hack in January I've since lost all the images but you can read the original article here. It covers doing this in Photoshop, Paint Shop Pro and in The Gimp.

Because all the sprites are a single colour. In order to add the glow, all I do is select the colour range, drag the colour picker over the sprite and go. Once the colour is selected, copy and paste the sprite to a new layer.

Adding the glow in Photoshop

Using the power of Photoshop's Outer Glow feature, a small tinkering with the colours and values to get something that looks respectable and et voila, we have a glowing sprite. In order to make the glow actually work in game, I just use additive blending whilst drawing. That's really all there is to it.

And that's really it for creating the sprites. It's a quick, simple and effective way to generate the art quickly and best of all, it looks rather pretty indeed.

The Background Art: Groboto

I'll admit, I picked up Groboto ages ago mainly to chill out with. It's absolutely fantastic for just sitting there morphing shapes around and it's incredibly difficult to create something that doesn't look half decent. The renderer is fantastic, it's fast (although it does require a hefty bit of grunt under the hood to do anything at a reasonable speed) and incredibly, incredibly easy to use.

When it came to needing to knock out some background art fast, it seemed like the most obvious option given I wanted something abstract, cubey and easy. It's also far cheaper than most 3d packages on the market so a total no brainer.

Groboto uses a system of bots and primitives. A bot is a series of primitives that you can twist and shape and evolve with a bunch of sliders. Honestly, it doesn't get much easier does it?

So, to create the background art for SYNSO, I start off with a nice blank canvas in Groboto. Select a bot and add it to the frame. As I wanted everything to be cubic in nature, adjust the primitives in the autobot to display as cubes, move some sliders around and go. In about 2 minutes you can go from having an entirely blank canvas to having this:

SYNSO: Background Art


And my, it looks purdy indeed. Slip it over into Photoshop for a bit of touching up (it's far too bright to be used as a background image for one thing) and to get it looking lovely and that's it, backgroundicus doneicus.

That's all folks...

And that's it folks, that's how I did all the art for SYNSO:Squid Harder. Naturally, once I've got the game out the door I'll be doing what I did with SYNSO 1 and gathering all the media together a few weeks post release and letting folks use it for their own projects.

In the meantime, I hope you enjoyed this insight into how the artwork was put together. Thanks for reading.

Post comment Comments
Metafiz
Metafiz - - 504 comments

Great article, thanks for detailing the creation.

Playing the game is orgasmic for the eyes. I tried turning down the graphic intensity so I could follow the position of my ship better, but it wasn't the same. Also lol'd at the tagline "Games as art debate approaching".

Reply Good karma Bad karma+1 vote
Noremakk
Noremakk - - 189 comments

The phrase "Games as Art Debate Approaching" has a very special quality: it is ironically ironic. Brilliantly done, and extra points go to you if you actually planned it that way.

Reply Good karma Bad karma+1 vote
Guest
Guest - - 689,432 comments

This comment is currently awaiting admin approval, join now to view.

Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: