Wednesday, August 21, 2013

Some Media Attention

We still have to make a much bigger splash with Cool Clash before we can feel relief. We made an unusually labor-intensive app, so we need to get some serious attention for the game.

- We had a very cool article on Touch Arcade.
- Over at Touch Tap Play we received a 9/10 with Cool Clash.
- Pocket Gamer on the other hand was quite tough. The reviewer found the swipes too slow and performing the special can happen by accident (true, it has happened to me many times - we'll have to change it soon!).

Wednesday, August 14, 2013

Cool Clash is now available on the App Store!

It took 4 years to get here and we have a lot riding on this release - it wasn't planned to take even half as long as it did - but we can say for sure: Cool Clash is not an average mobile game!

Some nice reviews have popped up, more to come I'm sure:

Sunday, June 30, 2013

Backgrounds and Effects


I added the snow maybe a year later.

The pirate's cave and the vampire stage

For reference I collected many images from old Disney films and Warner Brothers cartoons (digital images, mostly from the internet - but I used to purchase art books - which are a lot less practical to have as a digital artist, I even started scanning my books).
  Having to keep elements separate so they can be used in parallax movements is a bit of a drag - having to deal with a number of layers in Photoshop and having to be careful to only paint on the correct layer - that slows down the flow. 

It's fun when you receive the newest build from your colleague and can check out the art as it appears in the game. As an artist, I'm very critical of my work and will hunt for flaws or things to improve. It's hard to stop.

Effects and Special Events

Another aspect that was new for me was drawing and painting effects. How do you draw a HitFx? Should you use motion lines or motion blur? What's a good BlockFx? When a character launches a special attack - what should the effects be? How does the background change?

I would look at scenes from various Anime frame by frame and analyse them. I had never even considered how they managed to make the glows so sweet back in the '80s. They didn't have cool software and hardware to do nice blurs when compositing on a computer. I guess they used optical effects (shutter-speed and multiple exposures).
  Anyway, we have a lot of advantages today - looking stuff up on the internet in seconds, throwing a gradient behind something or changing digital paintings on a new layer, preserving the old one, etc..
A pretty good look - glowing stripes rushing by. I didn't keep them though...
I was quite happy when I eventually arrived at this. Yes, very '80s.
Their fashion was terrible, but glowing grids and space - that's good!

Various things

The character selection menue (British spelling of menue, just because)
Originally I had planned on creating an ending for each character (for the championship mode). For various reasons I eventually decided against it.
I painted an island so you could move from station to station, but I wanted more freedom with the stages and fitting them all on one island... not ideal.

Here you can see an example of my designer-mind demanding improvement. I had the version on the left, functioning in the game - but then I purchased After Effects and went serious on this effect. I redesigned and re-painted the letters and added the Light Sweep effect, Light Burst and Light Rays in After Effects, exported as sprites and eventually got the timing to look good in the game. Don't think it's something I did in a day or two. Oh no. The design of the letters, the painting, the gradients, the animating and adding the effects, re-learning After Effects, figuring out the exporting of frames (unmatted, duh) and then getting everything to work in the tool Martin had programmed - we're talking a process of constant fixes here and there over a period of several weeks until it was cool.

Take a look at it in motion:

  This endeavor was worth it, however, as I can say I'm truly proud of how it turned out!

2D Animation in Photoshop

If you're interested in creating some 2D animation yourself, you might find my process of interest. Before I landed back in Photoshop, I did research looking for 2D animation software:

Retas Pro - supposedly used to make such high quality anime as Cowboy Bebop

Toon Boom - also looks promising 

TV Paint - not cheap either 

Now, spending good money to get great tools can be a good investment and I wouldn't shy away from something just because it costs more than what you make in a day's work or two.
  For my purposes though, I was able to use Photoshop's tools (Windows > Animation). Photoshop is not cheap either, but I sure got my money's worth, since I use it so much.

I would draw the linework with a size 6 brush in a 1280x1280 image, then use the magic wand to select the outside space, then invert and fill, then paint on an indented layer. This way, I don't have to worry about painting outside the line.


© 2013  Foxy Robot. All rights reserved. iPhone, iPad, & iPod touch are trademarks of Apple Inc.

Early Beginnings

Cool Clash, a fighting game for the iPhone - man, it has been in the making for a long time and as I write this, I'm confident we'll submit it to Apple this month. This blog will shed some light on the process of making it.

While at a wedding on the East Coast, I met an old friend who showed me his iPhone and I recall the child-like fascination I had with the device - a touch screen, the App Store, swiping... he told me about a gun simulator app he had produced and he had many tens (maybe even hundreds) of thousands of downloads of this free app.

A month or so later, in the summer of 2009, I contacted a former colleague, Martin, whom I had met while working as a concept artist at a game company. Would he be interested in making an iPhone game?

Very quickly we settled on a fighting game. I had played more hours of Soulcalibur than any other game during my college years and probably since - and a fighting game seemed like a thing we could do, in - say - half a year.

Yes, half a year. Little did we know...
Two characters punching and kicking, some parallax backgrounds - it should be simple enough.
For the first few months I thought - let's make robots, I'd build and animate them in Maya, top of the line 3D software I had been putting off learning for far too long - I had been freelancing as a 3ds Max guy in L.A. a few years back. I had left L.A. in part, because I was missing out on many gigs only knowing Max, not Maya.
  The main reason was, however, that I wanted to do concept art - much more direct creative input.
I like this football-robot design. Unless you use realtime 3D with zoomable
Camera, however, this fella's proportions wouldn't give you much to look at,
on a horizontally oriented iPhone screen. 

I don't recall exactly what caused me to change my mind, but it might have been the very fateful discovery of Street Fighter 3rd Strike sprites on the internet. I was VERY impressed by those sprites - how smooth the animation was, how many individual frames of animation - 3 shades of darkness/lightness painted into each frame... this was a 2D-sprite-art-skill at the top level, refined over 10+ years - no way I could match that.

So I did some sketching and quickly came up with characters so simple, I thought it would be faster than detailed 3D characters converted to 2D sprites. Spheres and cubes - that was going to be my design principle, my chosen design limitation.

The discovered beauty of Street Fighter 3rd Strike encouraged me to abandon the 3D-route and go all 2D. Those excellent Street Fighter sprites had sparked my ambitions as an artist and I wanted to at least achieve respectable sprites. Super simple line-drawings with flat backgrounds - that wasn't going to cut it...

User Interface - many, many changes

Maybe the one aspect that took the longest to develop was the user interface. Early on we knew we wanted swipes for heavy attacks, but what would be a nice way of doing it?
  Here you can get an idea of the amount of work that went in to it. Keep in mind, that most of these also had to be programmed by Martin to work in a test version - so this took much longer than just the time it took me to put it together from a graphics point of view.
Here one of the earliest user interface designs for the game. We started out considering the possibility of virtual buttons - something we soon abandoned for the main combo-system in favor of sliders.
"A" and "B" were now buttons you drag up and down. Also notice the
fancy dpad - arrows would pop out when pressed...
JumpButton now an arc...
JumpButton a nice large button - for dynamic jumps
I think the idea here was to slide the little dot into the big areas
Single slider. I like the look, but this also only lasted a few months at most...
triangular design...
The two separate sliders for "A" and B" would have been fine and had we known how long it would take to keep changing things - I would not have told Martin of my single-button-slider idea. But why should you have to let go of the slider - wouldn't it be more fun to keep pushing it around, like a joystick?

After about three years (yes, crazy) we landed at the final design...
This is where the journey led us - final UI elements
Eventually I suggested to get rid of the virtual slider all-together. You swipe anywhere for heavy attacks (combos) and tap the screen for quick attacks. The top right UI element serves as a reminder. You have four directions to swipe in:
- HeavyHighAttack
- HeavyLowAttack
- Throw
- Block

 Dynamic Jump-System

Another thing you can notice: the Jump button. It was now a wide button and it would take into account where you press it! So about 2 years in to the project, the game's jumping now had dynamic jumping, meaning the characters were not bound to one forward/backward angle, but had many degrees in-between.
Dynamic Jumping - allowing more freedom

Character development

Early character designs. I like the chimney sweeper quite a bit.
Maybe the earliest Photoshop character animation I did.
Sticking too closely to the self-imposed design principle, that all characters had to be spheres or cubes...
Eventually I no longer was happy with the look of the female fox...
I'm very glad I changed the look, even though it meant having to redo all her animations up to that point.
Franz, the vampire. This is his final "idle" animation
An early animation, I didn't keep it in the game.


© 2013  Foxy Robot. All rights reserved. iPhone, iPad, & iPod touch are trademarks of Apple Inc.