Faking The Vector Look

Posted by oddbob on February 13, 2008 · Lovingly Filed Under Development Log 
Print this Article | Help us keep RR online

We're raising money for SpecialEffect. Please donate if you can.


Ah, Roxette… erm… yeah, anyway. Since one of the most asked questions I get (all two of you, thanks! ;)) is how I go about creating the look of the recent games I write - I figured that instead of trying to bodge it out in forum threads and personal messages all the time, it’d likely be prudent of me to go ahead and actually blog it.

The truth is, naturally, I cheat. Big time.

With Mega Arcadian, I’ve used 2 (stupidly expensive, admittedly - but if you’re looking to get things done quickly, there’s 30 day trials of both that will function -fully- and let you test the waters) packages. Ok, so technically it’s 3 packages as Smila rendered off a number of the sprites for the Megamania portion of the game in 3ds Max… but we’re going to ignore those for now.

The enemy sprites were created in Photoshop. Fortuitously, all the sprite requirements for the Arcadia segment are incredibly simple shapes. So, you can apply this method to pretty much most of the vector games out there if you, like me, can’t be bothered building an engine to create the glows for you. Yup, I don’t use any real vectors for a very simple reason - I honestly wouldn’t know where to start. And that’s where the cheating comes in.

My method is this:

1. Open Photoshop (always helps, I find) and create a new image the size of the sprite you’ll require plus at least 10px extra.

2. Using the fill tool, colour the background with pure black.

3. Create a new layer (shift, ctrl + n)

4. Change the drawing colour to white, and select a 2px brush to draw with.

5. Draw your shape. Note: Holding shift down will draw a straight line.

6. Go to the layer menu at the top of the screen and select layer styles.

7. Tick the boxes on inner glow and outer glow - you should now have a glowing sprite.

8. Amend values to suit. Don’t go overboard with a whopping amount of glow - there’s a simple reason for this, it looks like shit.

9. If you’re not colouring the sprites in the game itself, then you’ll be wanting to change the colour in Photoshop. Luckily, this is as easy as pie. For an example, go back to layer styles. Select the outer glow option and in the colour box, change it to #ff0000. Now select the inner glow option, change the colour to #ff9600. Now select colour overlay and change the colour to #ce5656.

You’re now ready to sling them into your game. Providing you can draw the sprites in game using some additive or light blending (depending on your package of choice) then these will work absolutely fine.

Here’s one I made earlier doing just that…

Vector Sprite Thingy #1

Ok, so you don’t have Photoshop or access to Photoshop, fear ye not - let’s have a look at some other packages as well and if all else fails there’s another slightly longer way of approaching the cheaty-glows method. Yup, draw the actual glow manually. But we’ll get to that in a moment.

Paint Shop Pro owners! Why are you using this? Ok, ok - that’s a rant for another day I’m sure. So, if you’re one of those odd folk able to tolerate what Jasc and Corel have turned a once incredibly usable package into and wondering how to reproduce this effect as best you can, here goes.

1) As with the Photoshop tutorial - guess what? Yes, open the package and create a new image about 10 px above the size you need it to be. (Just in case you’re still wondering about this - it’s to give you room to fiddle with the glow without getting that horrid cut off feel to it)

2) Fill the background in ye olde thick darke blacke(tm) and create a new layer. See below for caveats on which type of layer to create…

2) I’ve found drawing the sprites as vectors to be far more usable than the brushes. Your mileage may vary depending on how comfortable you are with the package. Personally, I’m not very comfortable with it at all so this was the only real option for me. So, change your brush colour to white and draw your sprite. (Hey, that rhymes) either with the pen tool or the brush tool.

3) Duplicate the layer in case you make a spack up of things.

4) Go up to effects and select drop shadow. At this point if you’re using the pen tool it’ll ask you do you want to rasterize the image. Yuss, you do. Set the drop shadow colour to white. For a simple thin vector - I used horizontal offset: 0, vertical offset: 0, opacity: 100, blur: 8.0 with shadow on a new layer left unticked. You might need to tinker depending on the brush size.

5) Meet me at the docks etc…

Gimp owners!* You’re on your own… I tried, but even opening The Gimp makes me feel a bit queasy. I’m sure it’s a very capable package in the right hands, unfortunately it brings me out in hives.

Everyone else in the known universe who doesn’t use any of the above! The manual method - it’s not anywhere near as difficult as it sounds.

So, you have your sprite - here’s an early version of the Vector Infector player sprite in all it’s coloured glory:

Vector Infector Sprite

And here’s the hand drawn glow, courtesy of Mr Smila:

Vector Infector Glow Test Sprite

The trick here is to be very careful and not go overboard - also remember that white is where you want the glow at the brightest point and scale downwards into darkness from there. Then in game, draw this either under or over (depending - experiment for best effect) the sprite you want to glow with additive or light blending and Bob is, well - I’m not your uncle but I’ll pretend if it makes you sleep better. It’ll cost you a fiver, mind. Donations button is on the right and I’ll meet you at the docks at a time of your choosing.

Ok, so it really is that easy. The main tricks are not to go overboard on a massive glow and a bit of careful colour selection. I can’t teach the latter, but if it looks fucked up - it’s because it is. There’s lots of really nice colour sites on the internet though - so y’know, use ‘em! Honestly, coders art is no excuse here, chaps. You’re only dealing with a few lines - work it, baby, work it.

The backgrounds for Mega Arcadian (and the player ship) are, rather obviously by their appearance - in 3d. I’ve blogged before now how I’m a complete and total 3d retard and this hasn’t changed a bit. After much muffing around with different packages trying to get a feel for things, I ended up discovering that Cinema4d was about the closest I could get to something a dimwit like me could use. And so, as you may have already worked out - the backgrounds were created in Cinema4d. Now, Mr Smila could probably knock these things out in about 30 seconds whilst flipping a coin with one hand but for someone like myself who has a distinct lack of perspective in more ways than one it’s a bit more of a chore than it should be. I’m sure, fair readers - that you’re not as mup as me and will be able to create something that knocks seven kinds of shite out of what I could do.

Mega Arcadian Background Demonstration

See! Fear my modelling skills, Pixar - fear them!

It’s rather obvious at this point to anyone but the completely totally blind and/or stupid members of our readership that this is nothing more than a bunch of simple shapes all bodged on top of a plain. And y’know, that’s about the best I can muster - but I don’t really care because it still looks the part and that’s what’s important. Of course, just placing a few primitives about the place doesn’t look all that hot. That’s why we cheat!

Yup, the joys of post render effects. Once you’ve whacked your primitives in place, create a material - give it a nice colour and add a glow to the material (it’s easy, there’s a tickbox) then drag the material onto the primitives and we’re halfway there. To get the full on “I’ve been watching The Black Hole title sequence far too much” effect we need to do a bit of tinkering with the rendering settings. And yes, we’re back into the realms of “tick this here box”.

Go to render settings and choose effects. In effects, make sure object glow is ticked and choose Cel Renderer from the post effects menu. In order to get the effect like in the picture above, make sure Color, Illumination, Outline and Edges are selected. Change the edge colour to something subtle and effective and once again, I’ll catch you down the docks for a fiver and a quicky.

And that’s all there is too it. It’s art that anyone can do, and whilst some folks might bemoan a vector styled overload - those who moan ask yourselves this question… would you prefer something like this or have to endure the garish colour splurges of coders art in all it’s purple and green vomit session glory?

*The software package, not just any old gimp. What you keep locked up in your wardrobes or dungeons is none of my business.

Tags:

Speak your brains

10 Responses to “Faking The Vector Look”

  1. Richard Phipps on February 13th, 2008 8:33 pm

    I used something similar for the glowy sprites in Neon Wars. Although I made a little program to create them from simple drawings.. :)

  2. oddbob on February 13th, 2008 9:03 pm

    What is this “writing a program” you speak of? :D

    Neon Wars did look lovely, matey - so it obviously worked.

  3. Richard Phipps on February 13th, 2008 9:28 pm

    I’m sure you know some varient of Basic if you wanted to write a similar program. :)

    The only thing is well.. the glowy thing is getting a bit old now. We need a new Retro look! ;)

  4. oddbob on February 13th, 2008 9:35 pm

    Mystic Bob predicts Papyrus Graphics being the next big thing…

  5. Sokurah on February 13th, 2008 11:02 pm

    >would you prefer something like this or have to endure the garish colour splurges of coders art in all it’s purple and green vomit session glory?

    Oh, I don’t know….but if the latter is a Musti game then I think I WOULD prefer something like this. ;)

    No, seriously - flashy and glowy wins over garish any day!

    While I have your attention: NO EXCUSES. If cheating gets the job done, then it’s fine > “normal” persons don’t need to know what’s under the hood - if it works, then it’s mondo cool (your games seem to be class A examples of that). To have a problem with something just because it’s pre-rendered is idiotic - the important bit is how it plays (and how it looks) - not HOW it’s done. Oh, and one last thing - every time you’ve posted screenshots from MA I’ve thought “damn, I love those backdrops”. The give me a kinda “The 13th floor” vibe. Me likey likey. :)

  6. DanO on February 17th, 2008 2:32 pm

    I’ve got to admit that this is pretty similar to what I’d done for RetroRoids. I used The Gimp*, so I’m not sure if the inner and outer blend glow thingy will work or not. Instead I used the blur filter. Basically I made the image larger than needed, selected the unblurry image and copied to the clipboard. Then select everything and blur. Paste the original back in, select everything again and blur another four times before finally pasting back the original image again.

    More importantly - HOT HOLY DAMN! Mega Arcadian is looking good!

    * currently locked under the stairs

  7. Wiebo on February 22nd, 2008 12:25 pm

    I didn’t use cheating but a blitz max module for Grid Assault and Thrust Xtreme, but cheating = good, imo! Everything that gives you an edge (glowing or not =] ) is acceptable. I used real vector objects for Grid Assault, but looking back I would go for sprites now. Would’ve made my life so much easier. Still, it made the game after that much easier to develop.

  8. Richard Phipps on February 24th, 2008 1:17 am

    Do you think it would be cheaper (in terms of performance) to use sprites instead of vector objects though?

    Still, it is was a glow texture rather than an unfilled line then I suppose it would be more work per shape than normal..

  9. Richard Phipps on March 1st, 2008 12:54 am

    You seem a bit quiet lately Bob. Everything ok my friend?

  10. Wiebo de Wit on March 1st, 2008 10:37 pm

    Well, if you don’t use any scaling in your game you can come away with using images. The trouble with images is that when you scale them, the lines and glow thickness gets scaled too. I hate it when I see that. I would trade in performance for that :)

Hello Reader! Perhaps you'd like to comment on this piece?.
As well as allowing you to type out your innermost and deepest thoughts about this piece, we've magiced up (well, installed a plugin) a fantastical ajax malarkey that lets you edit your post up to 15 minutes after you've posted it. Superb eh?