Category Archives: Uncategorized

Graphic Design Tips for Game Apps

This post is part of a 3 week series giving current and aspiring game devs the tools, resources, and advice they need to get started building for Windows. Check out the overview of the series to find what you need. For additional resources to build your app check out Appbuilder.

 

Polish is a big factor in making a mobile game that stands out. You can have a really nice game, but people aren’t playing it or don’t think that it is finished because it doesn’t “look” finished.

In this post, I’m talking to developers that are interested in doing a commercial game (or a free game that makes a little money with the general public) rather than those who are creating their game for purely artistic reasons. So if you are the sort of person that doesn’t want your vision compromised, ignore everything anyone says and go with your gut about how to do the art in your game. Also, this is going to be pretty basic. If you are a programmer that’s coded a basic game app, and you are looking for some considerations about icon and color selection, read on.

You’ve probably heard the term “programmer art” before, which is the sort of art made by someone who is better at coding than asset creation. I’m a little unusual in that I come from an art background and started doing coding later in life. This doesn’t mean that I’m a top-tier impeccably trained artist, just that I got a lot of art theory education that a lot of people who start out in code don’t often get. Most of this article is going to focus on color choices with a little information about icon design. There’s a lot more to graphic design than this, but I realized when I started writing that I don’t want to cram too much into one article. If there’s interest, I’ll talk about composition and other factors in a future post.

So let’s talk color. First of all: the most important rule. If you are using color, and only color, to represent something important in your game, add an alternative method. A significant portion of the population (mostly, but not always, men) is colorblind and can’t distinguish between, in the most common cases, red and green, or, sometimes blue and yellow. So if a big part of your game design requires that people distinguish between different colors to play, consider adding some other way to distinguish between the items.

bejeweled1

Bejeweled (and lots of other Match Three games that are like it) uses different shapes of the gems to match as well as matching for the colors. Other PopCap games like Peggle have a “colorblind mode” that can be toggled to make some colors easier to distinguish. This is really important if you want your game to be accessible. So rule number one is, don’t just rely on color to communicate. Or, to put it a better way, don’t just rely on Hue.

Colors have lots of properties. In Photoshop, we can look at three main properties at once: Hue, Brightness, and Saturation. There are other color sliders, but we’ll stick with checking these. It’s really hard to define these with other terms but I’ll try. The Hue of a color is “what color is it?” It’s the property of light wavelength that distinguishes red from blue and so-on. (Hue is what colorblind people have a problem seeing, because of the cones in their eyes.)

hsbdemo

Saturation and Brightness are easy to confuse. In this case, Saturation means how much of the hue is present in that color. A better way to understand it is that a color that isn’t very Saturated is gray. Brightness, meanwhile, relates to the color’s value, or how light or dark is the color? Is it closer to black or white?

Most phone games have bright colors. This helps the game to stand out and look cheerful, which is important. But not all bright colors are treated the same. It’s actually important to have a variety of Saturation and Brightness in your color selection so that the user’s eye is drawn to the most important things. Contrast is an important principle to make sure people understand the visual hierarchy of your game.

Let’s keep looking at Bejeweled. (This is Bejeweled Blitz, to be specific.) You’d probably say that this game uses really bright colors, and you’d be right; it also uses very saturated colors. Here I’ve picked out a few colors in the palette to show what I mean. You can see that the background colors are more muted, and have a low saturation; the blue I selected is really nearly gray. The jewels are the most important part of the game, so they have the highest brightness and saturation. The button is important, but not as important as the gems. It’s not quite as saturated as the gem that has the most similar (pink) hue, but it’s moreso than the background.

bejeweled2

Click the picture to enlarge it and see the numerical values. Notice that I also pulled two different colors from the blue gem to show how even one object has a variety of colors, and how both saturation and brightness play a part in making the object stand out.

If all the parts of the game are saturated as much as the gems are, the background fights for the eye’s attention. Here’s a really dirty mockup showing what that would look like.

bejeweled3

So you don’t want to go overboard with saturation and use it selectively. But you want to be sure to use some colors and not go overboard with low saturation, either.  Here’s another game I’ve played a lot of, Tiny Death Star. It would be really tempting to make the entire interior of the Death Star mostly black and gray – it’s the Death Star! But gray is really boring to the eye. So notice that the Death Star interior is mostly blue. Even on the far right, where it looks like it’s gray, it’s actually a “cool gray” which is a gray with a little blue in it (saturation isn’t zero). The zero-saturation gray is reserved for the interface here (see the bottom) while the actual play area has some color to it and is a little more inviting.

deathstar2

Programmer art tends to be very representational as far as color selection: the sky is blue, the grass is green, and so-on. But consider mixing it up. If you look at artworks done by the pros they often change the colors of things depending on what the lighting situation in the world is. So don’t be afraid to get creative and add a little splash of color where there was none before, and consider the saturation and brightness of colors as well as the hue. You might like the results.

This post is getting long already but before I wrap I also want to talk about icon creation. This is most important for anyone who is trying to put their app into a store like the Windows Store or the App Store. There’s already been a lot of good articles about this topic, so I don’t want to rehash too much. Check out this article about the iOS store or this, loads of information about Windows store tiles and badges. Notice that the icons are specific to platform, so you want to consider the unique needs of your platform when porting a game.

I want to touch on the most important thing, which is to be sure that your icon or tile is strong and readable even at very small sizes. An icon that’s too busy and doesn’t give enough information at a glance is likely to be passed over by the eye. Standing out can be hard as it is, so don’t sell your chances short by trying to cram too much information onto a single icon. It might be tempting to try to put a lot of information on a livetile when you’re in Metro, but keeping it simple and structured seems to look the best. Color selection matters here too – you don’t want things to look too busy, or bland.

Thanks for reading and let me know if more posts like this are of interest. You can always contact me in comments or Twitter. Or, I’m going to have some Open Office Hours on Skype tomorrow where I’d be happy to answer questions. Just sign up for details.

GDC Over! Events Upcoming

I’m back from GDC! I’m writing a bit about the games and talks I saw on Tap-Repeatedly.com, so join me there for some of the stuff I saw, including most of the narrative summit and some new games that I got to try. More updates throughout the week.

My next workshop appearance will be on March 26 in Philadelphia and it’s one I am excited about. I’m partnered with Geek Girl Dinners to deliver a workshop on creating interactive fiction games. Now that I have a few such games under my belt I want to talk about how people can create their own games in Twine and Inform 7 and export them to share with friends and family. No coding experience will be required at all to learn, but please bring your own laptop and RSVP at the event site!

Following that, I plan on attending the Bitcamp Hackathon at U Maryland where I’ll be serving as advice and support. I’ll also be at Philly Tech Week… that is until I fly out to Boston to cover as press again for PAX East! Let me know if I will see you at any of these events!

build-header

I have gotten a few questions as to whether or not I will be at Build on April 2. Sadly, no, as you can see my schedule is already packed! Microsoft made me aware of the best ways to telecommute to the event though so I can still find out the news. This is all information that my employers hope I pass on to interested readers too:

Starting March 26th, Microsoft is hosting a jumpstart series called “Building Blocks.” This will be hosted on Virtual Academy and cover HTML5, XAML, CSS, C#, mobile services, working with data, and other topics, with live video streaming and Q&A.

On April 2nd – 3rd,  Build keynotes and select sessions will be streamed live online. Keynotes will begin at 8:30 am (PST) and end at approximately 11:30 am (PST). If you want to make a personalized schedule, Channel 9 has an Events app you can try (no matter what platform you use). Build sessions will also be posted on Channel 9 within 24 hours to watch at any time. I’ll try to point out my favorites later.

More info is at the Official Microsoft Blog or you can follow Build on Twitter at @BLDWIN. If you are going to be at Build, enjoy it! I just got back from San Francisco and it’s pretty beautiful right now!

So that’s April so far… in May, I’m goin’ to Disney World. (Yeah, seriously!)

Porting My GameMaker App to Windows 8

This post is part of a 3 week series giving current and aspiring game devs the tools, resources, and advice they need to get started building for Windows. Check out the overview of the series to find what you need. For additional resources to build your app check out Appbuilder.

 

Now that I have a Windows 8 machine and tablet, I thought I would take full advantage of the Windows 8 features and port a game directly to Win 8. I already had a game – Faires Vs. Scaries – made in GameMaker a few years ago in a jam environment. This is my documentation of that process for anyone who might be interested in doing the same with a GameMaker game of their own.

fairygameprogress1

FVS is a pretty simple game from a graphical standpoint. It uses all native GameMaker graphics done in GameMaker’s graphic editor. That means it has kind of a primitive, retro vibe, but that’s the kind of thing that works well in the limits of a game jam environment. That also means however that it had to be sized up a little bit to work in Windows 8. For now, I set the game to always run in FullScreen. There’s also some useful code you can put on a Step event if you want to resize your games for devices.  The minimum resolution for Windows 8 apps is 1024 x 768 if you want to target Windows 8 from the beginning. I used these solutions to get it running temporarily, but I am going to go back in and size graphics up a bit larger now that I’ve seen the initial results.

Windows 8 requires touch controls, but this wasn’t a problem for FVS. The mouse controls that are already in the game can be used, and the entire game plays very easily on a touch only setup. So far so good!

fairygameprogress3

One change I discovered I did have to make was that I was using an obsolete method to draw the information in the game HUD. I modified the HUD by using all code to draw it, keeping things fairly simple. This new, quick HUD code always displays in the top left corner of the game. It shows the life bar of the castle and the amount of mana available to create towers (called “score” in the GameMaker code).

After doing some quick tests with the new HUD, I wanted to be sure I was working with the features that Windows 8 provides. So I also added some code to display the app bar. Here’s a basic example of active bar code.

fairygameprogress6

Windows 8 has a variety of icons that will automatically appear if you choose the right name in your code. The complete list of icons you can choose from is available in the Windows Library. Also, for a good tutorial showing how to add some additional Windows 8 features, check out this blog by fellow MS guru Daniel Egan.

Time to export the game. This is the part that you might find tricky if it’s your first time. I opted to do a Windows 8.1 JavaScript export. Windows 8 native is also an option in GameMaker Pro.

You have to be sure the Windows 8 SDK is properly selected in your settings before exporting. To install the Windows 8 SDK, go to MSDN. You will also want to run Visual Studio to make sure you have the necessary components to compile. I’m running Visual Studio 2013. (You can also try Visual Studio Express.) I noticed that with Visual Studio 2013, JavaScript export will fail unless you set up GameMaker to recognize that you are using JS version 2.0. GameMaker might default to 1.0, so this graphic will show you the settings that will work for Visual Studio 2013:

fairygameprogress5

See the button that says “acquire developer license”? All I had to do was hit that. After that GameMaker automatically got a license for the game so that it would work.

And then I can hit compile and see the game running on Windows 8!

fairygameprogress4

Some more porting tutorials that might help you if you want to try are on the YoYo Games Wiki, and include how to port your game and the unique platform features for Windows 8. I hope this has been useful for anyone who wants to try exporting a completed game in the latest version of GameMaker.

This blog is part of the Game Development for Windows 8 series”

Upcoming Updates to the Unity Engine

I’m sending a quick dispatch from a crowded hall in GDC to talk about the upcoming developments in the Unity engine. I don’t always write about specific tech previews like this, but I felt it would be interesting for the developers in the audience!

In the spring, Unity plans to ship Unity 4.5, with some new 2D physics options and performance improvements, followed by 4.6 which will contain an updated Unity GUI. The major developments are coming with Unity 5, the major updated release.

Unity 5 will have a 64bit editor, which was a crowdpleaser for developers whose games were running out of memory. There will be a physx upgrade, navmesh improvements, and better scripting performance. Unity 5 is integrating Speedtree. It will also have an all new audio system with a new importer and mixer. There is a new pipeline in the works for asset bundling, making using asset bundles easier for developers.

Unity Cloud, which is available for Unity 4 devs now with a plug-in, and will be standard with 5, contains an integrated ads API for developer cross-promotion. The beta for Cloud is at http://cloud.unity3d.com.

unitywebdemo

Web deployment improvements are in the works. Partnering with Mozilla, Unity is adding a web GL exporter, which is shipping as a preview mode. In the Web GL preview, a fully 3D game targeted for mobile ran smoothly on the web. The Unity engine was all converted to JavaScript in this mode to run directly in the browser.

New graphics features include lighting and shader improvements. The new Ubershader is the standard shader for Unity 5. It uses a “shader generator” to create a variety of optimized shaders and eliminates the need to write specialized shaders for different material types.

Unity 5 will have real-time GI and lighting improvements. Enlighten pre-computes occlusion and term, and makes it possible to have total dynamic lighting on a mobile device. Unity showcased a demo of a futuristic space-base, using emissive surfaces only to provide all the interior lighting, reacting believably with reflective surfaces.

There are some big improvements coming to Mecanim, the integrated animation engine. The new state machine setups allow for scripting state behaviors so, for example, an idle animation can be randomized. A blend tree allows for facial animations, or can be another way to mix animations.

Unity hasn’t revealed a specific release date for these updates, but they are planned for later this year with the 4.5 updates happening in spring. Hope this information is interesting news for Unity devs! The official page with visuals and examples is at http://unity3d.com/5 .

The Lego Movie

I normally write about video games here. This is about the Lego Movie.

The Lego Movie is a fascinating piece of entertainment. It’s a double-meta-commentary; it is a not merely a thing which is about itself, but a thing which is about the nature of it being about itself, and I readily admit that I am a complete sucker for such works.

Spoilers:

The Lego Movie is a film about how, given the full freedom of his imagination, a child raised on modern entertainment products will develop for himself a narrative which exalts the ideal of non-conformity while in and of itself completely conforming to formula. That while children have been raised to understand the concept that blind conformity is bad, they are still going to conform to the reality tunnel laid out for them. That, to whit, given infinite possibility space the narrative that a young man raised by our pop culture will tend to create for himself is one that conforms to the prescribed monomyth in almost every way, because that is the ur-narrative, a narrative which contains both the symbolic birth and resurrection and the literal atonement with the father, as created by a marketing company to put in the mouth of a child to create, in circles and in circles forever.

A bet my husband refused to even take: whether or not there existed a kit to create an exact duplicate of WyldStyle’s motorcycle, featured in the film specifically as something she creates extemporaneously using her power of free-wheeling genius and without instructions, now whittled down to a specific set of Legos you may buy with specific pieces and instructions. Of course this exists, and of course you too can create with painstaking accuracy the exact situation as shown in the film. If you do this, please, Krazy Glue all the pieces together, and offer it up on an altar as the final gift for the Irony Gods.

“Why can’t you just enjoy this film which is a film for children” – because I’m supposed to question it; it itself told me to, please look at this lyric:

Everything is awesome
When you’re living your dream

Which is to say the pre-described dream that we have personally assigned to you, you cog in this orderly dream-machine; whether other dreams may exist have yet to be determined

Everything is cool when you’re part of a team

and in that team you have a specific role to play, whether or not you accept or reject the job chip: Hooray, I’m a delivery boy!

Let’s talk about Women as Temptress in The Lego Movie – this doesn’t happen – except, it does happen; WyldStyle is non-conforming and marches to the beat of her own drummer and changes her hair and name all the time but it is only in releasing her self-definition by returning to her boring old conforming original name does she find self-actualization (and also get the man “who deserves her”) (and become possibly her true self who she was all along deep inside). What she is tempting our hero to do is be someone different; what he convinces her to do is be slightly more the same, and in that she becomes the hero she was always destined to be, which is to say she becomes second-banana to the actual hero, like any good female lead should.

Let me be clear I am not criticizing the Lego Movie for adhering to a formula while being about not adhering to formula. I am in fact, in awe of the way it manages to do that. WyldStyle is clearly second banana but she is still cool, and she’s still cool in a way she largely chose for herself; she dresses like a Goth and dates Batman, and it’s unlikely anyone will ask her to stop doing the first thing. But she is a type of cool we understand – as she must be, as we must – because a film for children made with Legos only has so much time to attempt to describe its message to us.

It is a funny, clever movie. It is quintessentially a product of its time – the production design, the sense of humor. There are pop-cultural references, but I don’t think they will make the film dated, largely because they consisted of gently mocking characters that have already been around for decades by which I mean especially Batman. The difference between Michelangelo and Michaelangelo was properly noted in this film. The 1980s Space Lego Guy was included in the cast exactly for olds like me; of course I had the 1980s Space Lego Guy, and all the playsets that went along with him, except in my play some of the Space Guys were actually women because of course they ought to be because women go into space too. (It actually wouldn’t have hurt anything at all for Lego Guy to have been a woman in this version as well, and then she and the unicorn kitty could talk to each other, about the computer, but here I am only nitpicking about the personal play I indulged in as a child.)

There is no possible way that I (a Transformers fan, with so many toys and T-shirts and posters) can say anything damning about product placement as a method by which to develop a creative universe and story. I have no quarrel with The Lego Movie at all on this matter. Licensed toys can create “pure” play – as they did in my childhood exactly the way in this movie described, by mixing them all up and creating the play version of crossover fan-fiction. I am glad the film is able to recognize how imagination can fill in the gaps. What is interesting is the form not of the described world that has been set out but how we eventually structure even that imagination.

If you have children, see The Lego Movie with your children, but then talk to your children about The Lego Movie, if you at all find that possible. I know I probably wouldn’t, but I don’t have children, so I am in no place to actually give this advice. I can barely say anything coherent to a supposed audience of mostly adults, but, here goes anyway:

What The Lego Movie says and what it is are two different things; we know how to listen to what it says and we internalize that message to be different and be special, and yet we do not know how to actually do what it says and – what is beautiful and inevitable about it is – neither does it. The best it can offer is that we should mix and match things a little bit more, but if we get lost along the way, here are the exact instructions on how to mix and match the things we want to get pleasing results. And these instructions are important; without these instructions the end results will end up all wibbly-wobbly, cats and unicorns making babies and repressing their feelings, and we don’t want that but we don’t know what else we want that isn’t just another version of a hero story or another version of utopia.

Samus is —

It seems like, just based on blog stats, one of the most popular things I’ve ever written is this essay on Samus Aran and her apparent height in the various video games she stars in. It’s probably one of the first serious critical games pieces I’ve ever written and I’m glad people are still reading and linking to it, though it’s obviously got some age on it, being written in 2010.
 
Anyway, you can therefore imagine why I was pleased as punch, pun intended, to see this the other day, and not for the obvious reason:

Important bit is at around one minute in. I don’t mind that my lady gets an uppercut to the face. That’s just the realities of Smash. Samus is tall again! Or at least, Nintendo is making the joke that a starring female character is taller than a starring male character, and that’s some kind of progress.

(IndieCade East writeups in progress. Was a great show!)

IndieCade East Upcoming

In case you hadn’t heard, I’ll be at IndieCade East! I plan to be at the event starting tomorrow — just hoping the snow has officially stopped so I can have a safe time traveling.

While there, on Saturday and Sunday we’ll be guerrilla-promoting the Fear of Twine interactive exhibition. Basically, there is a web site, there it is, and it will be live by then featuring some interactive stories by some great writers. Hope you check it out!

Also a belated thanks to Critical Distance for featuring my recent post. If you aren’t reading This Week in Video Game Blogging you’re missing out on great critical content. I am sad about the removal of Flappy Bird from the app stores. Flappy Bird, you flew too high too fast and then became a metaphor for yourself.

What’s a Technical Evangelist?

Since I announced my transition to Microsoft, I’ve gotten two specific questions a lot from people.

The number one question was if I was relocating, which, I am not. Though I do hope to get around a lot this year, I am settled back into the Reading, PA area.

The number two question I seem to get is “what is a technical evangelist, anyway?” My favorite comment so far about this was “it sounds like a Shadowrun class.”

Actually, my new job isn’t too different from my last job, although it’s a bit more specific. When I was working on GameSprout, I was a good person to connect with for advice or support if you were someone interested in making games. Now that I’m working with Microsoft, I’m the person to connect with if you’re interested in making games (or other applications) with Microsoft. Even more specifically, I’m working with Windows 8, Windows Phone, and Azure, and, more specifically than that, within my particular Philly/Baltimore region. My passion is still and always about educating people to make development more accessible and getting people the resources they need to make cool stuff.

Soooo, if you’ve got a tech group or a hackathon in the Philly area, or if you’re a school that’s looking for someone to come do a classroom session or two about app/game development, I want to hear from you! Tweet at me at @second_truth as always, email, or snag me at one of the events I will be attending. Up next is IndieCade East!

Moral Choices Results

My survey on Moral Choices in gaming turned out very interesting and I wanted the results to be shared as widely as I could. I submitted a writeup of the results to the Journal of Games Criticism, and after peer review it was accepted! Please go check it out and read all the other interesting articles too!

http://gamescriticism.org/