Kongregate Developers

Juicy Beast: All the Tools We Use to Make Games

This week, we're hosting a guest blog post from Juicy Beast!

We receive a lot of emails about the tools we use to make our games, so we thought it’d be easier to just list them all here for you curious folks out there.

Photoshop

We mostly use Photoshop for UI work and everything “branding” and “marketing”. It’s obviously a standard, so no news here. One trick we use a lot is “Generate > Image Assets”, which automatically exports all your layers to PNGs if they’re named correctly. You can also customize the size, quality and file type of the exported image. It’s magic.

Illustrator

We use Illustrator every time we need to come up with a new logo, either for one of our games or to refresh the Juicy Beast one (for the 100th time). We occasionally stray from Illustrator for a more hand-drawn look, like with the Knightmare Tower logo and Toto Temple Deluxe logo, but even then, we start in Illustrator to sketch things up quickly, as it tends to handle type more easily than Photoshop and Flash.

Premiere & After Effects

We use Premiere Pro and After Effects for all of our video trailers. One thing that’s really useful is the “Dynamic Link” between the two softwares. It lets you embed an After Effects composition in your Premiere timeline without the need to render it first. You can edit the sequence in AE, save, and bam, it’s up to date in Premiere. More magic.

Flash

Yes, you read right, we still use Flash (now called Animate). Even though we don’t use it to make our games anymore (thanks to Unity), we still use it for art and animation. We really enjoy its benefits, like scalable vector art and being able to animate in the same software without the need to export first. It also let us switch between frame by frame animation and tween based animation on the go, which is always nice. Apart from the occasional crashes, we still love Flash <3

GAF Converter

We used to use our own Flash to Unity exporter, but we’ve been using GAF a lot lately. It renders all our art and animations to sprites and data, and then reads it back inside Unity. Basically, it lets us animate everything we want in Flash, like we’re used to, and magically pushes everything to Unity! We use it for both character animations and UI animation, like the opponents and the piñata from Burrito Bison: Launcha Libre. You can read more about the process here!

Unity

No surprise here, we use Unity like a lot of other devs and probably for the same reasons. The ability to port to multiple platforms without rewriting the code is a huge plus for our small team.

2DToolkit

2DToolkit is a plugin available on the Unity Asset Store that we use primarily to manage all our sprites and frame by frame animations from Flash. It’s a very powerful tool if you’re doing 2D games that are not based on skeletal animations. If that’s the case, you should look into Spine.

Our own Juicy Framework

We Alex has been updating and maintaining and upgrading our own framework for years. It’s made our lives a lot easier by letting us do complex things really quickly. It has a complete event system with built-in game state management, built-in optimized pooling system, easy UI building and management, and a lot of other useful things we won’t list here. Also, as you can see in the image above, we’re using Visual Studio (bundled with Unity on PC).

Audio Toolkit

Audio Toolkit is a Unity plugin that lets us trigger sounds with a single line of code. It has a bunch of nice features like sound randomization and pitch variations, plus it has great memory management.

DoTween

DoTween is an animation engine for Unity that we use (a lot) to make things move by code. It’s super lightweight, optimized and easy to use. In fact, it’s so easy to use that sometimes it’s easier to tween a value than to change it normally!

I2 Localization

I2 Localization is another Unity plugin we use to manage translations in our games. All our text fields are linked to a cell in a Google Spreadsheet, and all we need to do is fill it out to see the results in the game! Did we say we like magic?

Google Sheets / Excel

Can’t beat a good ol’ spreadsheet when it’s time to handle numbers and formulas for balancing stuff out. Another neat tool we sometimes use to figure out a formula from a sequence of number (because they feel good balance-wise) is WolframAlpha. You can enter a sequence of numbers and it will generate a formula to calculate the following numbers in that sequence. Super useful!

Align + Distribute

Align+Distribute is a tiny little plugin for Unity that helps a LOT when it’s time to meticulously place all those UI elements by hand. Until Unity can offer a solid built-in solution for this, Align+Distribute will keep saving the day!

Other tools

That’s pretty much everything we use to actually make our games or the stuff that goes in them. We also use a bunch of side tools to make it easier to collaborate, plan, discuss and research. Here’s a quick list, if you’re curious:

There’s also a bunch of sites we visit often for inspiration and research:

That’s it! If you use different tools or know any cool sites, please share in the comments below; we’d love to check them out!

Banish Your Case of the Mondays with Office Space: Idle Profits!

We re-teamed with Ultrabit, the creators of Kong favorites Raid Brigade and Pocket Politics, and FOXNext Games to bring Mike Judge’s 1999 cult film to the small screen in Office Space: Idle Profits, available for free today on iOS and Android. Now office workers around the world can tap tap tap their way to an early retirement and really stick it to The Man... LUMBERGH.

“I uh, I don't like my job, and, uh, I don't think I'm gonna go anymore.”

You’ll start the game as a lowly Initech worker trying to make ends meet when you learn of your impending layoff. You decide to strike first and team up with Peter, Samir, and Michael Bolton to devise a virus that steals pennies from different departments within the company. As you upload the virus to each department, you’ll unlock new floors to infect, and start saving for your early retirement.

“Looks like you’ve been missing a lot of work lately.”
“I wouldn't say I’ve been *missing* it, Bob!”

As you continue your quest for revenge, you’ll collect and upgrade all your favorite characters from the film including the Bobs and Milton. Strategically assign them to each department and take advantage of their unique skills. Once you’ve made all the money you can imagine, exchange your cash for travelers checks, pack up your red swingline stapler, and burn down the building to cover your crime. Then start all over again, but with more and faster rewards.

“I just stare at my desk, but it looks like I'm working. I do that for probably another hour after lunch, too. I'd say in a given week I probably only do about fifteen minutes of real, actual, work.”

“Everyone, at least once, has felt underappreciated at their job,” said Cooper Bachman, General Manager at Ultrabit. “When we started working on Office Space, everyone on the development team knew we were onto something special. Even 18 years later, the film’s themes are still relatable to all ages. And when we paired the film’s story and hilarious cast of characters with idle mechanics, it fit incredibly well.”

Get ready to “Jump to Conclusions” today in Office Space: Idle Profits free on iPhone, iPad, & Android!

Looking for more idle games? Check out two of our most popular idle games on mobile, Adventure Capitalist and Pocket Politics, or read our in-depth series on the The Math Behind Idle Games.

Mobile Art Testing Guide

Should I Do a Marketing Art Test?

Early marketing testing allows you to gain insights into how well your game's creative performs during player acquisition. There are two main reasons to run an art test:

  • The game’s art is not entirely decided and the team is looking for art direction.
  • To determine how marketable an established style is.
It’s important to note that if you aren’t willing to change anything, it’s not worth running a test!

What do I want to learn?

Narrow down your art test to 1 goal. You can run multiple tests if you wish to learn multiple things, but never try to cram a bunch of items into one test or you are likely to invalidate your results. There are several different things you can test; I’ve focused on the main four below.

What theme works best for my art style?

When testing a theme, try to keep everything else in the picture as close as possible. Notice how each image below has 4 characters in a similar grouping. It’s also worth noting that your Click Through Rates (CTR) can be greatly influenced by current pop culture. For example, the release of a new Marvel movie might make people more inclined to click on superhero art. Unfortunately, what’s popular one month might not be so interesting next month.

Which art style works best for my theme?

There are many different styles of art: 3D, pixel, low poly and cartoon, to name a few. The game's art style tells the users a lot about the game. When someone sees Dora the Explorer for the first time, no one needs to tell them it’s a kids' show; they can tell by the art that the show is intended for children. It’s important to think about your audience when considering which art styles to test. Here are a few resources specifically on Art Style if you want to learn more: Creating an Art Style and The Aesthetics of Game Art and Game Design.

Which color palette resonates best with my game?

You can test a color palette, but most of the time it is determined based on the emotions your game is trying to evoke and the intended audience for your game.These guides are pretty interesting if you are trying to figure out your color palette: Color in Video Games: How to Choose a Palette and Picking a Color Palette for Your Game's Artwork.

How marketable is my game art?

This is probably one of the biggest questions we get when it comes to game art. As a general rule, the more casual the game looks the cheaper it is to acquire users for. That said, even within the 3 main categories (casual, mid core & hard core) there is still a huge range! CPI testing is much better than CTR testing to determine marketability.

How will I measure my test?

Is the game built yet? Yes: If there is already a game (even a very basic one) you can get Cost Per Installs (CPI), along with Click Through Rate (CTR) & Conversion Rate (CVR). No: If there is no game you can only get CTR.

CTR Test: CTR lets you gauge general interest in your game.

CPI Test: CPI gives you a deeper read into how marketable a game is. You can gauge general interest (CTR) as well as how likely people are to actually install (CVR) and most importantly, how much it will cost you to acquire users (CPI).

CTR Testing

  1. Pick 1 thing you want to test (theme, style, palette, etc.).
  2. Create 2-4 creatives that are very different, but focus only on the element you want to test.
    • Add 1 creative from another game that you know the CTR for to use as a baseline (see more about baselines below).
    • Resource: Facebook Ad Guide
  3. Create ads in Facebook using your creatives. Give them the same copy and send them to the same app (make sure to use an app that doesn’t bias one over another).
  4. Allow all the ads to get around the same number of impressions and enough to be statistically significant.

The most important part of the test is the range of confidence for your results! The smaller the difference is between art assets, the more users you will need to resolve the test with confidence.

For example: If you run two pieces of art that have CTRs of 1.82% vs. 2.18%, you need over 96,200 impressions to know for sure which is better. Whereas, if their CTRs are 1.70% vs. 2.30%, you only need about 35,000 impressions. Use this simple Statistical Significance Calculator or something similar to find your range.

CPI Testing

  1. Pick 1 thing you want to test.
  2. Create 2-4 creatives that are very different, but focus only on the element you want to test.
    • If possible, run another game at the same time in the same geo as a baseline. CPIs can change a lot month over month; having a comparison point is always helpful.
  3. Create ads in Facebook using your creatives. Give them the same copy and send them to your app.
  4. Allow all the ads to get around the same number of clicks, enough to be statistically significant (see above).
    • It’s important to note that for statistical significance for CPI, your goal is the number of clicks, whereas for CTR it’s the number of impressions.

Why Facebook?

One word: targeting! You can target both age and gender to be sure your art is appealing to your target audience. If you run a test without targeting and get great CTRs on some super-kiddy-looking art, but the game is meant to be for males 18-35, then your test results aren’t very helpful. That said, if your game is intended to be for everyone, then you can test it on any network.

How do I know if the results are good or bad?

Unfortunately, there is no “magic” number we can give you as a comp. The market is constantly changing. That’s why we recommend using a baseline. Your baseline is an image you have used for another game that you can test alongside your new art to help provide perspective on your results.

We finished the test, what now?

  1. Make sure your results don’t overlap for statistical significance; if they are too close you may need more data or new creatives with more divergent art.
  2. Are the results as good or better than your baseline? If not, you may want to make more changes and re-run the test.
    • Note: CTR changes based on art and CVR changes based on your app store page.

Author

Heather Gainer

Heather is a Marketing Analyst at Kongregate, where she manages performance marketing and promotions across numerous mobile and web games. She loves playing board games, D&D and MTG with her husband and friends. Her favorite holiday is Halloween.

April 13th, 2017 13:28 1 Comments

Color in Video Games: How to Choose a Palette

Color is one of the most powerful tools you have when you’re designing a game. Colors can be engaging, helping to direct your players to whatever you think is most important. It can also be used to give subtle clues about the characters and their world. When used properly, color sets the tone of a game, tells you where you are, and where you need to go.

But knowing where to start when creating a color palette can be difficult, so let’s break it down and go through this step by step.

A brief overview of color theory

Whether you intend it or not, the colors you choose have meaning and that meaning changes with context. The study of colors and how they are perceived goes back a very long time. Much of modern color theory comes from historical context and deep cultural significance. Being aware of this allows you to use colors to your advantage or to subvert your player’s biases entirely in new and creative ways.

  • Red: Strong emotions like love, lust, anger, as well as warmth.
  • Orange: Joy and enthusiasm as well as frustration or freshness.
  • Yellow: Happiness or cowardice.
  • Green: Nature, envy, sickness, or greed.
  • Blue: Calm, cold and corporate, or masculine.
  • Purple: Royal nobility, quality, and luxury.
  • Black: Mystery, evil, or grief.
  • White: Sincerity, good, cleanliness, holy, purity, or mourning.

Choosing a color scheme

Your game’s color scheme is a great way to set the tone and ambiance of the world your players will interact with. Which color scheme is right for your game really depends on what kind of experience you’re making and the story you’re trying to tell.

Warm Tones:

Left: “Firewatch,” Right: “Team Fortress 2”

The colors you think of when you imagine the fall and a sunset. Warm palettes can be associated both with warmth and comfort as well as aggression, so depending on how you use them they can signal that it’s safe or that it’s time to go to war.

Cool Tones:

Left: “Mirror’s Edge,” Right: “Portal”

Turns out the future is blue, or at least something bright and cold. Cool color palettes are often used in science fiction games to depict an uncaring and sanitized future. When paired with bright touches of warm color this aesthetic can be very effective.

Western / Dystopian:

Left: “Red Dead Redemption,” Right: “Metro 2033 Redux”

The end of the world (both geographic and metaphorical) is brown, gray, and lifeless. However, because of the more muted color palette, bright colors really stand out and can be a great way of highlighting important information for your players.

You’ll notice in the Metro 2033 Redux screenshot that, despite how small it is, your eye immediately goes to the character’s wrist. The blue light denotes your stealth status and the numbers are your ammo count. These are two very important pieces of information that are integral to your survival, and they stand out in stark contrast to the duller world that surrounds them.

Noir / Cyberpunk:

Left: “Batman: Arkham City,” Right: “Far Cry: Blood Dragon”

Noir (and the visually related cyberpunk) is all about the high contrast of deep shadows and bright highlights. It’s specifically about the texture and color of light, about using it to highlight important information for your players in a dark and dangerous world.

For example, in Far Cry: Blood Dragon the world is mostly cool tones of blue and purple in deep shadow. Important locations and dangerous creatures often have bright neon lighting both to draw you in and warn you of their presence.

Monochrome / Limited:

Left: “Dolly,” Right: “Inside”

Color use as minimalism, both of these aesthetic styles focus on a very restricted use of color for dramatic effect. When paired with another color theme it can be extra striking and engaging.

Roll your own and break some rules:

Something to keep in mind is that these are just generalities and that some of the most interesting color palettes come from breaking these conventions. Just like your game probably doesn’t conform to only one genre, you should mix and match color palettes to get the right feeling.

Some ways you can use color

When choosing your color palette, consider what purpose you want the colors to fulfill. Thinking in this way can help you decide how high contrast you want your colors to be, what mood you want to evoke with them, and what you’re trying to convey to your players. All of this is part of the decision-making process.

Wayfinding

Left: “Bioshock,” Right: “Super Hot!”

The most common use of color in video games is for wayfinding. Using colors with a high amount of visual contrast draws attention to certain directions or items. However, you can always take it further.

You could take your cue from Super Hot! and only place the most important objects in a high-contrast color, leaving everything else utterly desaturated. This puts key objects in sharp focus, drawing the player’s attention more strongly than a lower-contrast color palette.

Or you could use the dramatic lighting cues of a noir aesthetic (such as in Bioshock) to create an oppressive atmosphere that pulls your players forward into the light. People naturally head towards the light, and if you mix a dark and foreboding palette with a bright and warm one for key objects and directions, players will naturally want to move towards them.

Whatever direction you take it, remember that it doesn’t have to be a simple highlight. It can inform the story and the world you’re creating for your player.

Telling a user when it’s safe (and when it’s not)

“Splinter Cell: Conviction” using color to visually differentiate between combat and stealth.

It’s important for your players to know when they’re safe in a game and when danger is imminent. As a game designer you have a lot of tools at your disposal, and color can often be a subtle (or not-so-subtle) clue that a player’s circumstances have changed.

In shooters it’s common for the screen to go red, or black and white, when the player receives a lot of damage and is in danger of dying. The Splinter Cell franchise turns that paradigm on its head and desaturates the color around the player while they’re safely in the shadows, only showing them in color if they are discovered or otherwise break stealth.

Story and character development

“Nier: Automata” using color to imply deeper meaning as to the true nature of its world.

While not as common in video games as it is in other mediums, color is a great story development tool. A recent game that plays with this concept is Nier: Automata. It uses color, and the lack of it, to show the dichotomy between what the character believes to be true and what they experience. At the home base it feels mundane and lifeless but when you’re exploring Earth it appears to be vibrant and full of life.

Tools and tricks for creating your own palettes

Sometimes you can just jump right into Photoshop and start throwing colors on a canvas to see what sticks. That’s perfectly fine and can give you a solid, holistic palette. If that works for you, just make sure to layer up the colors and run through the layer blend modes. It’s a great way to find complementary colors that are high contrast but don’t feel out of place.

If you prefer a more directed approach here are some useful tools:

Adobe Color (formerly Kuler) and Coolors:

Both of these tools allow you to generate your own color palettes as well as providing you with a library full of user-created color palettes for inspiration.

They also offer the ability to generate a color palette from an image. A technique I often use is to take a photo from the internet (usually a landscape or street photography) and run it through one of these tools to get a starting point. From there I tweak the resulting palette to better fit the tone I’m looking for.

Paletton:

Another great tool for creating more complicated color palettes. If you’re stuck, take its random palette generator for a run.

Accessible Color Matrix:

Based on the WCAG 2.0 initiative, ACM is a great way to make sure your color palettes are fully accessible to people with visual impairments. This makes it a great second step once you’ve created a color palette for your game.

Looking for inspiration beyond gaming

Both film and photography have been playing with color for over a century now, and they have a lot to offer in how to use color. Here are a couple of great YouTube videos diving into those topics to help get you inspired:

Color in Photography:

Color in Film:

Author

Doug Stewart

Doug is part of Kongregate's design team as a front-end developer. His first job title was “The Admiral of The Internet” and it is believed the quality of his work is directly proportional to how insane his beard gets.

PC and Mobile: Going Cross-Platform Post-Launch

These are slides from Mel Montano’s talks about PC and mobile cross-platform game launches at Casual Connect Berlin and White Night Prague 2017. She uses her experience in publishing and cross-platform games via Humble Bundle to provide real-world actionable items to help in pursuing a secondary (or tertiary or more) launch on a very different platform.

PC and Mobile: Going Cross Platform Post Launch from Kongregate

Going cross-platform increases your potential audience, pleases your current userbase, and can grow your lifetime revenue. The leap from mobile to PC and vice-versa is fraught with complications, including perceived game value, freemium/premium, and the specifics of UX/UI changes. This talk gives actionable insights for your cross-platform PC and mobile plans.

Author

Mel Montano

Mel Montano is the Business Development Manager at Kongregate, finding the best and brightest PC & mobile games for publishing partnerships. She previously spent 4 years as a Business Developer at Humble Bundle, and prior to the games industry, worked on making the world a better place as an Environmental Scientist.

March 30th, 2017 17:07 1 Comments