A Buffet of Thoughts

I know I’m probably unknown to most of you so I wanted to do an intro post but with the two week rotation of iDevBlogADay I feel like it would be a bit unfulfilling. So what I’ve decided to do is well… both. The first half of this entry is going to be about me and Angry Fish Studios. The second half is going to be about using Illustrator’s Recolor Artwork feature. Let’s dive right in.

Angry Fish & Me

Who am I?

Well, my name is Alex and along with my long time friend Joe I started Angry Fish Studios. Our goal is quite simply to make games we want to play. We both work other full-time jobs so development can take a backseat sometimes. It’s pretty easy for it to grind to a halt when life gets busy especially if you’re like me and like to have a nice big chunk of time to really get into stuff. We try to maximize our time when we do devote time to it there are a few ways you can help doing that. Make lists of concrete tasks, by keeping a list of very specific tasks it makes it easier to focus on what you need to do and knock stuff out. When we were nearing the first release of Tripolar we had a one column list on a whiteboard. By the time we crossed out 90% of that column we had a second, and by the time we crossed out 90% of that one we had a third. It really gave a sense of progress and helped us keep focused with what needed to be done for release. It’s easy to say “I need to do the settings screen” but what does that really entail? It’s much more useful to write down specific tasks like “Add settings button to the main menu”, “Make spring/summer/fall/winter theme icons” and etc. It certainly gives you a much better approximation of how long it’s actually going to take to finish.

What do I do?

I do all the art and graphics for Angry Fish Studios, including this website. I also work primarily on the game design and do some programming. On my new solo project I’ll be doing everything! I’m a true jack of all trades in that I’m also a master of none, I do my best but I’m constantly learning and by no means should you take anything I say as gospel. Be sure to check out our 100% factual bios on the About page.

Tripolar

We released our first game Tripolar back in October of ’10, so somewhat recently. You probably haven’t heard of it and well the truth is we didn’t do too much of a push on it. You shoot gems at the board hitting a 3×3 area which clears any gems of the same color as the shooter and swaps the other gems. It’s a somewhat simple mechanic thats easy to learn but hard to master. By the time we released it we already had some pretty major plans for an update for it including: new mechanics, a new play mode, game center, achievements, a whole ton of puzzle levels, an iPad version and a free version. Part of the reason we didn’t push on it is we realized pretty quickly that we wanted to get a free version out there. There wasn’t a great way to divide the current release into a free version while really showing it off so we decided to wait for the update. That being said I’m still really happy with the first release of Tripolar. I’ve always admired things that look really polished and professional and I feel we accomplished that. For the first game I’ve ever really made it’s something I can say I’m proud of.

So lets talk about this update. I can’t give any definite timelines because, as I said, work on it is sporadic but Joe and I are working on it as often as we can. I’m really excited about it because while I think Tripolar’s first release was a solid foundation this update will really expand upon that. There’s going to be several new gem types and shooters which is going to be a blast for puzzle mode. I think puzzle mode is really one of its strengths and something we didn’t devote enough to the first time around so this time there’s going to be a plethora of new levels. Below are a few screenshots showing some of the new features from the update. For now you’ll just have to guess how they work though :)

Mitch Digger

First thing’s first, don’t get too attached to the name because it’s just a codename until I think of a real name. (Fun fact: Mitch Digger comes from the game Dokapon Kingdom, an obscure but great wii/ps2 game, check it out if you’ve never heard of it.)

Mitch digger is a side scrolling platformer,

Picture Dig-Dug.

Got it?

Ok now forget about Dig-Dug because other than the view it’s nothing like that. There’s a couple ideas I want to explore through this game, mainly the idea that not every platformer needs to be about combat. The main goal is to explore levels by drilling through the earth and finding valuables. Sure there will be enemies but Mitch isn’t a fighter, they can be dealt with in other ways like making a little ditch for them to fall into. There will be lots of things to buy and upgrade with all the money you get from the ore you find, in fact you’ll have to. As you dig further down the earth gets tougher, you use more oxygen, and it gets darker.

The other interesting aspect of the game is that inspired by our beloved @MysteryCoconut I’m planning on making the game using only UIKit and CoreAnimation. I might break down halfway through and use openGL but so far it’s looking possible. There really will only be a few animated sprites on the screen at any given time and by using good MVC practices it should be pretty doable. Below is the first “screenshot” from the game with some placeholder graphics. I’m guessing a lot of my blogging will be related to the development of this game.

Ok so now that we’re best friends lets get to the meat of this post.

Recoloring Artwork in Illustrator

When making art for iDevices of all kinds I really prefer to use Illustrator, or just vector graphics in general, due to all the different sizes you can need. In Tripolar we have four different themes: spring, summer, fall and winter. There’s many ways one could handle creating the different gems for these themes but I did it using a tool that was actually new to me and I’m really glad I did.

Here’s a picture of the original versions of the gems:

Gems

The first thing you might notice is that the colors look super saturated on your computer, I used a special color profile to simulate the iPhone’s screen because red’s tend to be a little dull on it. They are fairly simple shapes but I wanted them to have a feeling of translucency like real gems so instead of being filled with solid colors they have several gradients.

Now in my opinion, and don’t think I’m alone, Illustrator isn’t the best tool when it comes to gradients. The UI for it just doesn’t feel mature, it’s really easy click the wrong thing and you have to drag swatches onto the gradient’s color bar instead of clicking a color tag then clicking the swatch. But the real problem is that there isn’t an easy way I’ve found to have gradients work in a “pass by reference” type way, they work in a “pass by value” kind of way. When you’re trying to adjust things and get the color balance right this can be really difficult. Once I decided I wanted to do different themes I made these into the Summer theme gems but I needed to make 3 new colorings for the different gems.

Enter the Recolor Artwork window:

It’s that little guy hiding right there.

As you can see here for the original “blue” gem there’s 10 different colors in the 4 gradients that make it up. Changing this by hand would be a nightmare when you want to keep tweaking colors slightly and see how it looks. But with this tool you can see all the colors that make up the object individually and change them however you want. You can even reduce the number of individual colors to simply things by mapping multiple colors to a single new color.

That little box the arrow is pointing to brings up a window with several options for dealing with the original set of colors. You can sort by either hue or value, which I find helpful for lining up the new colors. You can also have Illustrator reduce the number of colors for you and change how it does the recoloring. If you look on the right you can see a list of the color groups I set up for each gem and yes, I refer to the gems as “Red, Green, Blue” instead of “Hexagon, Square, Octagon” and no, I offer no explanation to my madness. If you don’t know the exact colors you want to map to you can use the edit tab to play around:

Yeah… uh… that looks good… well, no it doesn’t but it gets the point across.

Here you can drag the individual colors around to remap them however you want and get a live preview on your artwork. This is going to be the most time intensive part of recoloring but it gives you so much control. Because you’re changing the key colors in the gradients they keep their size and shape and adjust to the new colors, this is the “pass by reference” type effect we were looking for.

Here you can see the recoloring from the summer gem to the fall gem completed. Looking good!

One last tip when dealing with gradients in Illustrator that’s not immediately obvious. If you want a gradient to span more than one shape without having to individually adjust the size and position you can make a compound path by going to Object->Compound Path->Make. Now when you give it a gradient it will span across all the shapes, this is great for text as well. Just remember to keep gradients subtle, this isn’t Word Art!

Please let me know if there’s any formatting problems with the blog. Still kinda new with wordpress and it can be pretty wonky at times. And don’t forget to add me on twitter! @AlexEvangelou

Comments are closed.