Another Early Morning » Uncategorized

Creating a Paper-like Look in Photoshop

Alex Schearer — Sat, 24 Jul 2010 08:06:55 +0000

This is a follow up to my post creating great game artwork from paper. Today I thought I would shed some more light on the subject of Petunk’s artwork focusing on how I achieved the results using Photoshop. As a quick recap, for Petunk I created the artwork by hand using construction paper and scissors. Once ready I scanned the artwork into my computer and loaded things into Photoshop. With the artwork on my computer it’s time to explore how to prepare it for use in a game.

In my mind there are several objectives I’d like to achieve through Photoshop:

Design and layout assets scanned in earlier
Create text which is easy to update and maintain
And, re-use scanned in assets as much as possible

Since creating artwork is relatively time consuming I want Photoshop to help me avoid doing so whenever possible. If we can address each point above I think we will have reduced our workload quite a bit.

Design, layout, and testing interactions

Scanning in certain assets separately makes it easier to manage and re-use them digitally.

Using layers makes it easy to design and manage the game’s layout, and if you are smart about how you scan in your artwork you should be able to move pieces around independently as needed. For the times where you can’t scan things in separately I have found using the wand tool with tolerance set to 100 allowed me to quickly and accurately separate different parts of my composition on separate layers.

For instance, in Petunk I scanned the red border and green background together. Using the wand tool I was able to separate the two. Next, I scanned in the five stages of the curtain. Finally, I inserted the red curtain between the border and background layers to achieve the desired effect.

One thing to be careful about when scanning pieces in separately is that doing so will lose the subtle shadows and creases which appear when you layer things naturally. In my opinion, it is often necessary to scan things in together as those subtitles are what make the art style work.

Re-using Assets

Of course sometimes you have to scan items in separately. For example, in Petunk all of the actual physical objects in the game needed to be scanned in separately and placed on the stage at runtime. For these cases I’ve found that it’s possible to apply a small drop shadow. Compare the following balls against the green background:

When scanned in separately it's important to add a subtle drop shadow.

While the drop shadow is not quite the same as you’d see if the ball and background had been scanned in together it’s acceptably close. I’ve found setting the drop shadow distance to 2 or 3, the strength to 3-5, and the alpha to 25% works best.

Creating Paper-like Text

Create text which appears to come from paper using several effects.

Text is a tricky problem. Cutting text out of paper requires a steady hand and some artistic ability if you plan to draw your own font. Worse, text often changes and cutting and recutting out new text would be a big time sink. Fortunately, I don’t feel like it’s necessary to go through that trouble. In my experience it’s possible to simulate a cut-from-paper look by combining several effects for text.

To start create some text using a font of your choice then:

Using the marquee tool select an area of construction paper you’ve previously scanned in
Save that selection as a pattern (through Edit > Save as Pattern)
Through blending options apply a pattern overlay to the text
Add a stroke, typically the color should be a little darker than the pattern overlay
Add a slight drop shadow as described above
Optionally add a slight inner glow

This may sound like a lot but in practice you can usually do it once and then duplicate layers for future text. I’m quite happy with the results with one exception. Unfortunately, it’s not possible to maintain the text’s look in Flash without converting it to a bitmap. This means anytime I want to change text in the game I need to update the assets in Photoshop. While not as bad as creating new text from scratch this is still an unwanted burden.

Wrapping it All Up

Alright we’ve covered a lot of ground but I think we’ve managed to address all of the goals above. I’ve found that using these techniques allows me to create my artwork once and mix and match the results until I’m satisfied. Now, I’m able to quickly create new things and bring them into the game for testing and hopefully you can too!

Petunk Week 3: Putting it all together

Alex Schearer — Mon, 19 Jul 2010 16:30:11 +0000

Time for another weekly update. Since last week I’ve been hard at work integrating the artwork I created with my game engine. The results I’m ready to show you include the basic game — title screen, level select, etc — along with an improved level editor. I’ve now started to use the editor to generate as many levels as I can and identify any new ideas I might like to add. Check out more details and an updated prototype below.

Getting Things Into the Game

I tried a couple different techniques to get my content into the game. Since I’m using the Flex framework I wasn’t planning on using Flash’s Sprite and MovieClip classes. However, as I started to write code to manage spritesheets and play animations I felt I was re-inventing the wheel. So instead, I attempted to import a SWF following the process outlined by Grant Skinner: Using Flash Symbols in Flex. This wasn’t a great solution because any code completion or type specific information was lost during import. Finally I tried exporting SWC files from Flash CS and including them in my build process. I’m quite happy with this setup because it:

Allows me to design layout and animations in Flash CS
Is as easy to export a SWC as a SWF
Provides code complete and type specific information in my editor
Doesn’t require me to litter my code with Embed tags

I’d recommend this setup to anyone working with Flex who isn’t using a framework like Flixel to handle content. In my opinion, Flash CS is one of Flash’s greatest strengths. Being able to design and layout my games using the visual editor while coding in another environment is best. It also means I could easily have an artist work on the visual side of the game as I worked on the code.

Play This Thing

Petunk Prototype — Click to play

Hopefully you can see how this has evolved from my original prototype. I’d really appreciate your feedback on this. Specifically:

How fun is it?
How easy to pick up is it?
How clear are the rules?
What would you improve?
What would you remove?

Please let me know in the comments or by email.

Closing Thoughts

With another week behind us July is quickly coming to a close. I think the game is in a pretty finished state and it’s time for me to concentrate on sound & music, services, and of course content. All in all I am very happy with how Petunk is shaping up. Check back soon for more updates.

Create Great Looking Game Artwork Using Paper

Alex Schearer — Sat, 17 Jul 2010 02:00:41 +0000

Today I’d like to share a little bit of the process behind the artwork for Petunk. I believe the style is attractive and distinct, and the best part is I was able to do it without strong technical artistic ability, investing lots of time, or spending much money. If like me you’re not as strong an artist as you are a programmer read on to learn how to use construction paper to achieve a cool look for your game.

Different scenes from the development of Petunk's art

The Equipment

The first thing you’ll need is the actual paper and tools to create your artwork. I was able to purchase everything I needed for under $30, though I already had a scanner lying around. I would suggest going to your local art or crafts store and purchasing:

40 sheets of assorted colored construction paper ($3.59)
An x-acto-knife or equivalent ($5.93)
Double sided removable tape ($3.59)
A glue stick ($.89)
A normal pair of scissors ($2.79)
Two or three pairs of “funny” scissors with different types of cuts ($2.24 each)
One ruler ($2.45)
A scanner

You can purchase this stuff pretty much anywhere. The special scissors are fantastic as they really help compensate for technical ability. I was surprised how hard something as simple as cutting a straight line is! Also, don’t worry about what colors come with the colored paper. I didn’t get the colors I originally wanted but that ended up making the game better.

The Physical Process

Start the process by grabbing a few pieces of paper and making something completely random just to get the creative juices flowing. Next, piece together an early prototype trying out different colors and shapes. Don’t worry about re-using assets at this point; Just explore what works until you’ve found something you think is strong.

Once you’ve settled on a general style and possibly tested it out with a physical prototype the next thing to do is construct a set of re-usable assets. In a nutshell, each “atom” is created separately, i.e. you might glue two green cut outs for a bush or an orange and red cut out for a wall. In some cases you may not want to glue assets together, for example the game’s background and border. In those cases I suggest binding the two assets together with tape in a way that allows you to move them as needed while still keeping things relatively in place between scenes. Finally, arrange the atoms on the stage using double sided tape to hold them in place. When you’re satisfied put the entire scene into the scanner and import it into Photoshop.

With the basic process down you can start to explore different properties of the medium. For example, you might fold red paper over and over to create a curtain, or roll a blue paper into a tight loop and then unfurl it to create water. Layering elements also creates different affects as you push the paper closer to the screen.

The Bottom Line

As you can see it’s simple to create compelling artwork for your game using physical materials. Once you’ve created a stage and re-usable assets you can quickly and easily mix and match elements until you’ve found something that works. At that point it’s easy to scan the scene and integrate the results in your game. An additional benefit from this process is that all of your artwork will be at a very high resolution meaning that you could easily use it for a full-screen version of the game, a downloadable, or as copy to help promote your game.

I haven’t covered the digital process I used to manipulate the artwork and accelerate the process. Look for a follow up post sometime soon which takes a look at how to use Photoshop to work with elements scanned individually, create compelling text, and speed up the entire workflow.

Staying Motivated in Game Development

Alex Schearer — Tue, 13 Jul 2010 20:50:11 +0000

Scissors, construction paper, rulers, and more all go into making a new screen for Petunk.

I talked about this a little bit in an earlier post, I think that it’s easy to lose motivation especially for longer projects. I recently had a chance to think a little bit more about motivation and I thought I’d share the results. For me the start of a project is always the most fun — you’re exploring a new idea, you’re coding new code, things are taking shape really quickly. But at some point you hit a phase where progress slows down — the features are implemented and now you have to fix bugs, there’s only hard things left that you put off doing, etc — and at this point it’s easy to get distracted by a shiny new idea. Personally, I feel taking a game from the rough “prototype” phase to being a full, polished game is a ton of work, but in my opinion it’s also something that separates “serious” developers from less serious ones.

So with all that said here’s how I try to tackle the problem:

1. Maintain checklists

Checking things off makes it feel like I’m making progress which keeps me focused. It’s also a good way to gauge the progress I’m making on the project as a whole.

2. Sharing my progress when appropriate

Getting positive feedback can inspire me to keep going.

3. Adding artwork to the game

I usually wait a while to add any artwork but I find once I do I’m much more excited about the project

4. Write publicly about what I’m doing and my timeline

Putting my reputation on the line increases the stakes and can help me overcome spots where I might otherwise lose focus.

5. Avoid working on other ideas and other distractions

This seems obvious but during a particularly boring part of development it can be dangerous to switch to a new project or buy a new game to play. Of course great ideas or games come along when you’re in the middle of a project so you have to exercise some self-discipline.

6. Set a concrete deadline

Work seems to fill whatever time you assign for it without necessarily having more to show for the extra time. Having a concrete deadline gives me something to shoot for and helps organize my decisions.

7. Avoid scope creep

A lot of my ideas are ambitious — they might involve complicated AI or networking, etc — I’d like to pursue some these ideas in the future but the fact is I often find them to be a barrier to getting things done. With a tough idea I can quickly get mired down in the details of a large, intractable problem. Sticking to smaller ideas keeps me productive

There are probably other good tricks but that’s it for now. With Petunk I’ve tried to attack the problem of motivation by working in a really compressed schedule (I have to balance work and making the game in my free time). I’m finding this really helps me because:

I know when I will complete the game, so when I lose focus it reminds me I can’t afford the distraction
Since time is scarce I can’t waste it on crazy ideas or useless features, the schedule forces me to ask “Would the game be OK without it?” and when the answer is yes then the feature is usually cut

In the past I’ve found that working for contests has helped address many of the issues above, too. For instance, with Adlib I had a set deadline and a topic to work with. This let me focus on actually making a game instead of worrying about technology, etc. One final link with checking out is this post by Positech Games on the subject: Staying motivated while programming games. How do you stay motivated?

Petunk Week 2: Creating a distinctive look

Alex Schearer — Mon, 12 Jul 2010 09:36:37 +0000

Let me share a secret with you. I’m not a great artist. I lack the technical skill needed to create compelling characters or impressive vistas. It’s something that I’d like to improve, but I figure it would require an investment in time and energy similar to what I already put into engineering. Unfortunately, if that’s the case I don’t think I have the time. So, when I sat down to think about the art style for Petunk I had to limit my options. Nevertheless, I think I’ve come up with something really cool and I’d like to share it with you.

As I do for most of my problems my first step in this process was to grab a sharpie and a piece of paper and write down as many themes as I could think up. I try not to rule out any idea at this stage no matter how stupid it sounds as I’m just trying to produce a large list of things to pick from later. With some possible themes in hand I then tried to evaluate them based roughly on personal appeal, estimated cost, and novelty. For instance, I think a theme based around a child’s toybox would have been compelling but it would have required hiring an artist which is outside the scope of this project.

Keeping in mind my artistic abilities I ended up focusing on a couple ideas. The first was to use crayons and paper. Crayons would have been nice, but the style has already been done by Crayon Physics Deluxe. Instead I decided to use collage / cut outs as the medium for Petunk. Check out a couple screens:

As you can see I’ve cut up construction paper into different patterns and shapes and combined them to make some cool looking stuff. Because I’m using real materials the results have some nice textures which I wouldn’t have been able to produce on my own in Photoshop. I’m also able to do things like fold or bend the paper to achieve other types of texture and shadows. Lastly, since the medium is less precise I can get away with more abstract renderings. For instance, a crow can be a circle with some wings attached. It might be easiest to see in motion. Check out this state transition prototype I made:

A “playthrough” prototype exploring different transitions in Petunk

Click here to view the embedded video.

Hopefully you’ll like this art style as much as I do. Not only does it compensate for my technical weakness as an artist but I think it’s novel and looks great! I’m looking forward to sharing more updates with you soon so check back or subscribe.

Petunk Week 1: Finding a game idea

Alex Schearer — Sat, 10 Jul 2010 04:15:12 +0000

The first week of July has come and gone so I thought I would write about the progress I’ve made since I announced Petunk one week ago. Perhaps the right place to start is how I came up with the idea for Petunk. It turns out that this wasn’t the game I thought I would make. Initially I wanted to make a Nok Hockey game. If any of you played nok hockey as a child you know it’s a simple but fun game. A lot of the tension comes from trying to scramble to get the puck when it’s in the middle. Unfortunately, I didn’t think I could add networked multiplayer to the game in time, so I started off by brainstorming a number of ideas related to knocking things around. Check out the different thumbnail mock ups below:

Personally, I think there are a lot of fun ideas to choose from, but because of the time constraints on this project I ended up ruling out most of them because they required networking or an intelligent computer to play against. Once I selected the idea I wanted to work on I started coding up a proof of concept. In addition to proving out the gameplay, the prototype gave me some confidence that I could accomplish what I wanted technically.

Petunk Prototype: Click on a ball to fire it at the target. Press Space to reset.

With an idea and prototype in hand I’ve started writing the actual game. Things are in a pretty good shape on a technical level, so I’m starting to think about the art direction for the game. Check back soon for more updates or subscribe to receive them automatically.

Hello, Petunk

Alex Schearer — Wed, 07 Jul 2010 17:00:15 +0000

Yesterday I announced my intention to produce one game each month during the summer. I thought I’d follow that up with some details on my first project. Since I’m still trying to find my pace I thought I’d start with a simpler idea, and what could be simpler than borrowing from a game with 375,000 licensed players? As I’m sure you’ve already guessed my first game is inspired by the ancient Gaulish game of pétanque.

I’m going to call the game “Petunk” which roughly translates to “a sound which is sorta like the word “pétanque”". Hopefully the rough sound of the word will evoke the game as well as highlight the fact that this is a physics based simulation. The gameplay is going to be something like the original pétanque except that there will be explosions, moving obstacles, and other doodads getting in your way. I’d also like to add some additional options so the player has choices beyond where to aim at the target.

Anyway, I’m looking forward to sharing more about Petunk with you. Check back soon, or better yet subscribe for updates!

Back from the dead

Alex Schearer — Tue, 06 Jul 2010 07:32:01 +0000

Long time no speak! Hopefully you guys have been doing well and making some cool stuff since GDC. I haven’t had a chance to really sit down and write more about game development — something I’d like to rectify. To kick things off, I’m revamping my website. It should still be familiar but I think it will put more focus on the content and hopefully provide a strong foundation for the future. Let me know what you think. I’d also like to share my plans to create a few games this summer. More on that below.

Since GDC I’ve been pretty busy. Still, I’ve found time to work on different experiements (for instance, ReadyMade). It’s always fun to work on random projects — you never hit the hard bug fixing phase, you can pick whatever technology you want, like Java, and you get to tackle engaging problems. The downside, though, is you don’t have anything concrete to show for your efforts.

Recently, I had an opportunity to reflect on game development and what I want to get out of it. I decided that I want to focus my energy. At least for a little while less shallow experimenting and more intentional game development. And because I find motivation can be a problem as a project carries on I’ve set a goal of completing one game a month over the course of the summer.

With such an aggressive schedule I will have no choice but to eliminate complicated, costly game ideas, and with only a month there won’t be much time to get bogged down in bugs or other chores. Finally, now that I’ve told all of you about my plans I really have no choice but to follow through! So, I’ll be posting some more soon about July’s game. If this sounds like a fun challenge why don’t you join me? What typs of game would you make if you could only spend a month on it?

Heading to San Francisco

Alex Schearer — Sat, 06 Mar 2010 23:36:34 +0000

It’s March and that means it’s time for GDC in San Francisco! I’ll be heading to town this weekend and staying through the week. Right now I’m planning on attending the Online & Social Gaming Summit and Indie Gaming Summit — if you’re attending either of those let’s meet up for lunch! In addition to the summits, I’ll be wandering around the booths and hitting up whatever events look interesting. Anyway, if you’re in the area and would like to get together let me know!

Starting a New Blog

Alex Schearer — Fri, 04 Dec 2009 19:00:50 +0000

I decided to start a new blog to complement this one. Here I’ve tried to keep things focused on game development and discussion. Believe it or not I am actually interested in some other topics though, so I thought it would be nice to have a place to write about various developments in technology, feature games that look neat, and generally be off topic. It’s also a great chance to try some new technology. Occasionally I will cross post between the two sites if it makes sense. So head on over to Crazier Things Have Happened and let me know what you think!