Try to headshot your opponent while avoiding their attempts to headshot you. The more shots you miss, the bigger your head gets. If your head gets -too- big, it will explode! Play with a friend or against the AI.

Post tutorial Report RSS Game Maker and Vector Art

I give a brief explanation of the basics of working with vector art in GM, specifically the difficulties I encountered adding it to an existing project.

Posted by on - Basic Client Side Coding

This is a very basic rundown of myself getting vector art working properly in GM without having ever used it before.

Let There Be Vector

I had Headshot! coming along nicely, if slowly, over the Christmas and New Years break. But I was getting less and less satisfied with the purely pixel art graphics of the game, especially as my programmer art player heads swelled to a large size. So I decided to switch over to using vector art. I've literally never dabbled in vector art for GM before, so it was a little confusing to begin with. Here's my list of problems and the fixes I used to get it working.

No Vector For You!

After deciding on vector art, the very first thing I needed was a program to create vector art. So I did what basically everyone does when starting up with vector art. I downloaded Inkscape and started messing around. A day or so later (figuring out how Inkscape worked and then creating the actual image) and huzzah! I had my first vector art...Time to import it into GM. What's this? GM only accepts .swf files as vector art and Inkscape has no .swf option for savings images. Quite annoying, if I do say so myself. I spent a little bit of time scrounging around to see if I could figure out a way to get .swf from Inkscape (including trying out some file converters) but nothing that I could find worked. So back to where I was before I even started out.

I had to bite the bullet and buy a monthly subscription to Adobe Illustrator. I imported my file from Inkscape into Adobe Illustrator and...Bam! It looked all messed up and Illustrator threw up a few errors, so I had to spend another day editing and fixing up how Illustrator converted the file but finally, I had a piece of vector art exported as .swf that GM would accept (btw, if anyone has any tips on getting usable .swf files from Inkscape or another free/cheap vector art program, I'm all ears).

When Vector Ain't Vector

I imported my deliciously smooth vector art image (one of the optional heads the player can choose) into GM and booted up the game. Well that's...weird. My vector art was looking like someone had taken a sawtooth blade to the edges and it was all tiny and missing details and stuff. So I jumped into the manual. Turns out that GM doesn't automatically play nice with vector images, you need to use some code to get everything looking hunky dory. So I opened up my global controller object and put in what I thought would fix the problems into the Create Event:

draw_enable_swf_aa(1);

This line is used to tell GM to use anti-aliasing for your vector image. It's a boolean switch. With the anti-aliasing in place, I booted up the game and checked it out but it still looked kinda funky (and was still the wrong size, etc). Hmmm, now I understand what that other line I was looking at means:

draw_set_swf_aa_level(1);

This sets the anti-aliasing AMOUNT from either 0 to 1. So 0.5 would be 50% strength anti-aliasing, 0 would be none, etc. This is used to basically set the graphics quality for vector, you could add an in-game option to change this and that'd give people with slower computers an option to get a performance increase at the cost of graphical quality (think of those old Flash games which would have a quality setting).

Now, Headshot! is definitely not an graphics intensive game, so I just set it to 1 (if it turns out to have some slowdown on some machines, I'll just add in an option to change it). So, as of this moment in time, when my game booted up, my global controller would run this in the Create Event:

draw_enable_swf_aa(1);
draw_set_swf_aa_level(1);

And voila, my vector art was beautiful and smooth, but it was still weirdly missing details and was far too small. This seemed like a simple fix to me, because I knew that I was already playing with the scaling of the players Head as part of the Headshot! gameplay, so all I'd need to do is mess around with the image_xscale and image_yscale properties and adjust the scaling amounts.

This 'worked' to some extent, but when I'd compare the in-game image to the image in Illustrator, it was still clearly missing things and the curved lines had a funny point to point quality to them. They were smooth along the edges, but they still looked like they were straight line segments connecting to form a rough curve. So onto the final fix.

Serenity Now

So the final fix was very simple, but I thought it was worth mentioning. The way that the vector art was being processed in the image editing software was different to the way GM processed it. As far as I can understand it, without knowing how things work under the hood, is that the quality of the .swf file when imported into GM is dependent on the size of the image being imported. So with Illustrator (or any other vector software), you can have your image the size of a pinhead and it will still look completely beautiful when blown up, but GM seems to lose details if the image is small.

Initially I was importing my vector art in at the smallest size I wanted the heads to be, which is quite small and some of the more intricate details wouldn't be properly visible at that size (because of the size of pixels on the screen, etc). I assumed that they were still 'there' in the maths behind the vector art and so they should turn out fine when I scaled up the image, but this is not what was happening. So the very simple fix to this was to import the image at the MAX scale I wanted it to be and then size it down in GM. I also assume that an in-between sized image would work alright, as long as it wasn't -too- small, but since Headshot! is quite light on the processor, I didn't need to worry about specific levels of optimisation...The full sizes were just fine.

I imported my vector art player head at the max scale I would need, I edited the code to make it so that it scaled the image down to the appropriate size it should be when the game begins, ran the game and finally the image was perfect. The players head began at the right scale, got larger as you fired (one of the mechanics of the game) and as the heads scaled, the details remained consistent and good. I was finally happy.

So that's my little tale of getting vector art to work in a game that was built for pixel art initially. Thanks for reading and I hope that anyone who has never used vector art within Game Maker found this useful as a break down of the very basics you need to worry about.

Post a comment

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