Category Archives: GameDev

Manga/Clip Studio and More Art

Commit 2c94b2c.

I follow a guy on twitter named Derek Laufmann. I love this guy’s work and bought his art book (SPOILER: It’s amazing). He recommended a program called Manga Studio (now named Clip Studio), which was on sale at the time for only $20. This program is AMAZING.

I consider myself pro-level with Photoshop as a designer. But I’m a bit of a noob as a digital artist. I have gotten better but still really struggle with the “feel” of Photoshop and a Wacom tablet. My digital work has always been inferior to my traditional media skill. Manga studio may have just completely changed that. It’s out-of-the-box brushes are fantastic and within an hour felt so much more like the art tools my eye and hand know. It does have tons of quirks that frustrate the crap out of me but this is a cheap program! I pay more every month for Adobe Creative Cloud than this product cost me forever and it is a really solid application.

Anyway, I’m really having fun with this. I grew up drawing a very comic-book-realism style and I finally feel like I might be able to nail that digitally. I’ve been working on some sketches that might become the menu backgrounds and have been playing with UI stuff too.

Here’s one of the first sketches I did in Manga Studio:

BC_Concept_003

 

Here’s me getting the feel for coloring with the various tools:

BC_Concept_006

Playing with what a menu might look like, characters still unfinished:

BC_Concept_009

And testing some UI component style and stuff:

BC_Concept_013

 

The character at the top of this post was one of the last things that I did. I was playing with masks and other things that will differentiate characters and personality at small sizes. Note that I also have been sketching more non-digitally as well:

mask-concept

A Brave New (HD) World

Commit 69e4f6c.

It has been about two months since the last post and there have been HUGE overhauls!

First, I worked on a variety of mockups per the last post. I started by mocking up what a character might look like with higher-resolution sprites:

Character_Concept

Then I mocked up what the level might look like in the same style:

Tile_Concept_1

Then I played with what the background walls might look like, starting with things like windows:

Tile_Concept_3

Then I took that style, created some quick-and-dirty tiles and played with a map in Tiled to see what it would really look like:

Tile_Concept_6

I didn’t like aspects of this style so I played with color palettes and changed stone styles a little bit. This is a Photoshop mockup, not actual functioning tiles:

Tile_Concept_7

I liked that and turned a lot of the foreground into real tiles. I created a Tiled level and then mocked in the background in Photoshop. This is a combination of real tiles in the foreground and mocked up sketches in the background:

Tile_Concept_8

I turned the background concepts into tiles too, and I also played with tiled light pieces. This is all real tiles:

Tile_Concept_9

Finally, I got this all into the actual game. This was a big effort because ALL of the art changed. Moving to larger tile sizes broke literally everything and also required changes to character movement and properties because levels were now further apart.

Another thing I’ve struggled with is character animation. Even being super excited about art, I have to have limitations. I can’t animate hundreds of frames of character art and ever finish this game. I also can’t have characters with no animation. So, I have been working on a procedural animation. I think this is going to be a good balance of quality/presentation and reasonable level of effort. Characters won’t run and have complex leg movements, they’ll float.

The image at the top of this post is the current product. The game is once again playable with procedurally-animated characters, higher resolution tiles, better parallax, new character art and all new tiles. This is an interesting graphic of the art journey so far:

bc-art-progression

Art Woes, Eureka Moments and Childhood Dreams

Commit ecaaf08.

This is going to be a long post. If you just want the summary: BattleCrypt is going in a new artistic direction. Hence the concept above (not actual in-game art). Tile size is doubling and the game will not be pixel art. I’m exploring some type of hand-painted style. Along the way I’ll be refining my skill as an artist until it satisfies the elusive perfectionist in my mind. If you want the details, read on…

 

I have been really struggling with BattleCrypt motivation and art direction. Our artist got super busy (he has a family and also is finishing up two other games) and hasn’t been able to contribute to the project for almost two months. Recent posts showing new progress with his work were actually based on stuff he committed in early February. I think it’s safe to assume that his responsibilities will make it difficult to be the primary artist on the project, although he is still excited to contribute where he can. That puts the onus back on me to lead the creative direction of the project.

If you follow the progress, you’ve probably noticed a theme of dissatisfaction with my artistic direction on the project. In general, working on art has been a roller coaster experience. What I want is both simple and complex. When I see BattleCrypt art, I want it to look like a game I’d want to buy and play on Steam. But when I create tiles, UI and characters…they just aren’t the quality I’m looking for.

Sean’s work was definitely up to that level but I am not skilled enough at his style to continue that and he can’t be our main art lead. So, if I lead the creative direction I have to find a style that both satisfies my driving need for the look, but also balances that with something I actually have the capability to produce.

Multiple times I have felt like I was making good progress only to realize that I could nail the style in one area (tiles) but not another (character design or UI).

Finally, I had a Eureka moment.

I suck at art. This is why that’s interesting.

 

When I was a little kid (somewhere between 7 and 9) I experienced the wonder of the Nintendo Entertainment System at a friend’s house. My family either couldn’t afford one or it was not a priority but I was immediately obsessed with the magic. I had experienced Atari and cabinet games before but nothing like the amazing magic of Mario eating mushrooms and kicking shells. I’d spend hours drawing levels and inventing video games on paper. I’d cut the characters out separately and act out how the games would play.

I was good at drawing and my family and friends often complimented my skill at art. I continued to draw a lot but we also got a family computer and I was obsessed with how it worked. I wanted to make my art come alive with the magic thing called “code” that was inside of the computer. I learned how to hack files to change how programs worked. By eighth grade, I was writing Basic, doing lots of things in DOS and trying to make sense of C++. I was going to be a computer programmer and make amazing games.

Two things happened. First, my eighth-grade teacher unintentionally crushed a big part of my dreams. I created a Basic program to solve the Pythagorean theorem for extra credit (yes, I was that kid) and was ecstatic. When I talked to her about my plans to be a computer programmer she cautioned me about the level of math required by the engineering fields. While I excelled at logic (and motivation), I was miserable at math. I struggled to grasp simple concepts and I think she felt sorry for me. The way she looked at me, I knew she thought I couldn’t do it. Second, I was further crushed by the difficulty of C++ and lack of mentors. Nobody I knew programmed computers and I struggled to get the multi-disk installation of Borland C++ to even install, let alone compile something (the Internet didn’t really exist, youngsters).

Through high-school I focused on art but continued to hack and modify games and explore programming concepts. I decided to major in graphic design because it mixed my two favorite things: art and technology. In college, I loved all of the technical aspects of design. I dove into Flash programming to create interactive websites (gag!). My workflows were faster and more efficient than most peers because I mastered the technology and graduated tied for best portfolio. But I was the weakest at drawing, painting and all other traditional art media.

The irony is, I never worked as a graphic designer. I ended up doing whatever it took to pay off those student loans and excelled at various careers by applying technology in ways that nobody else was. I moved from programming to make my job more efficient to directly programming as a career. I became a technical lead, then an architect. I lead technology aspects of multi-million dollar projects. And then started my own software company.

And now, here I am the lead artist on my own pet project. Finally possessing the means to do what 9 year old me wanted so badly – to make my art come alive in the interactive medium of video games. But when I created BattleCrypt art, it wasn’t amazing. It wasn’t even good. I got frustrated, depressed, angry and defeated in an unproductive cycle.

Until I realized that I utterly suck at art. This realization should have depressed me. My wife and friends were quick to argue when I announced this fact, thinking it self-pity or frustration (both plentiful in this project). But they were wrong.

I DO suck at art but it’s so empowering!

Because I have the raw skill, I can be good. I was once. I just didn’t practice. I wasn’t willing to take time and to fail at things because I was “already great” at it!

 

So. The picture at the top of this post? New BattleCrypt direction. This game will not be pixel art, it’ll be higher-definition, hand-painted art. I will do “artsy” things that I thought were a waste of time before. Concept art. Mockups. Exploring color palettes and design styles. It’s time to fail at some things. It’s time to commit to practice, and not expect bread without grinding the wheat. And it’s time to enjoy what kid-me set in motion. That’s how I got here, I’m going to have fun.

 

New Tile Work

Commit 2c8e080.

Sean, our artist (as long as he has time) has been working on some new tile concepts (pictured above with bloom applied on left). We’re really inspired by the new direction and we’re excited to see that develop into full levels.

We haven’t been idle on the dev side either. Now that enough tiles are available to create a basic level, we’ve applied our post-processing effects from the last post to the new art. Here’s what it looks like with and without bloom:

bloom-demo

We also have done some fun things with how spells charge and how spells can start to affect the level itself. In this example, the player shoots a fire spell past a burning object. Note that the flames burn higher and the flame is disturbed by the passing spell OR a mage of the same element type:

flare-effect

But a spell (or mage) of the opposite type quenches the fire for a period of time:

fire-quench

We want to do a lot more of this type of thing: the mages and their spells should affect level elements so levels feel more immersive and real. It also offers fun design opportunities as being close to compatible or opposing elements may have some impact on a mage’s powers.

Side note: awhile ago we implemented screenshake when fully charged spells explode. I forgot to mention this, I don’t remember when it was exactly, and the effect is a little broken right now anyway. Ideally this effect would also trigger dust and stone raining from weak places in the ceiling etc. But it has a ways to go. You can see this in the fire mage gif when the large spell explodes.

Post Processing Effects

Commit 800e085

While we have a new artist working on concept and new tile work, we have continued working on development. As the artist works on tiles, we want to work hard on supporting technology that will give the levels unique ambiance and depth.

First of all, levels in BattleCrypt are created with a program called Tiled. Tiled is excellent at creating layered, tile-based levels. But it’s not really a full-fledged level editor. So you have to establish conventions around how to create elements in Tiled that turn into real game entities when the level is loaded. Things like particle effects, player spawners, liquid areas, collision and more. FlatRedBall has plugins to load .tmx (Tiled format) files and a few basic conventions, then I have a stack of additional ones built on top of that. I have been working on making those more friendly and less-buggy to ease the artist workflow.

Second, I’ve been really interested in learning a little about post processing and how shaders work. I doubt realtime lighting can exist in BattleCrypt due to time and skill constraints! That being said, I would like to explore options for faking certain aspects of lighting, water effects and bloom.

The first problem to solve was setting up render targets and rendering the scene to a temporary texture instead of the screen buffer. I started with abstracting shader loading and render targets into some interfaces so it was easy to stack one-or-multiple effects. Then, I wrote a desaturation shader because it was one of the simplest things to figure out.

first-effect
Shader loading and a basic desat shader applied.

Next was starting to work towards Bloom filter. Bloom is actually several effects: a huge contrast increase (called an extract), a Gaussian blur, and then an additive blend back with the main scene. What this does is makes the brights brighter and gives them a blurred glow that simulates the gleam of lighting. The Gaussian blur was a bit challenging, me not being the mathematically-skilled type. The blur itself is actually two passes, one for horizontal blur and one for vertical. Once I sorted that out and debugged all the little quirks, the extract and add were fairly simple. Here’s what each pass looks like (click for larger):

bloom-blur
A gaussian blur effect applied to the scene.
bloom-extract
An extract effect, basically just a strong contrast increase.
bloom-extract-blur
Blur and extract both applied, this is ready to additive blend with the main screen buffer.
bloom-comparison
Before/After the final product. Notice that the bloom has lightened the entire scene. This is a pretty liberal application of bloom and probably not what the final product would look like.