Author: higgiag99

Game Design – Game Assets

I hear the question asked often, is it cheating to use prebuilt assets in your game? The short answer is “No, that’s what they are there for.” The long answer is a bit more nuanced.

1. The advantages of prebuilt assets.

Making games is a lot of work, and for a solo dev or a small team the use of assets for things like save systems, menus, resolution controls, and so on can literally  be the difference between success and failure. Art assets can be used to prototype and quickly flesh out gameplay mechanics, build compelling maps from common objects like plants and other terrain elements, and fine tune player controls. At  their most useful, prebuilt assets provide a fast template for you to use in the process of fleshing out your ideas in to a functioning game. High quality assets are available from the in engine stores for commercial game engines like Unity, Unreal, and Gamemaker.

Game development is very time consuming, and if given the choice between doing a poor quality job that compromises the playability of your project and purchasing prebuilt assets to fill in the gaps of your skill, the obvious choice is to purchase the assets. The desired result is to create the best finished product possible. If the assets help you accomplish this goal then use them happily.

 

2. The disadvantages of prebuilt assets.

It’s complicated!

Almost none of the issue involving the use of assets are intrinsic to the assets themselves nor the folks that build the assets. They entirely have to do with the expectations, laziness, and greed of the people that try to use them as a shortcut to success.

Let me get this out of the way quickly, if you are attempting to use assets as a shortcut to success, you will be disappointed very quickly. It’s simple not possible to create a high quality, compelling experience by stitching together a series of unaltered assets into some horrible Frankenstein of  a game. First of all, your game will run like crap. None of the code is optimized to work together, and the longer the daisy chain of assets grown, the worse the overall performance of your game will be. Second, you will have a noticeable visual incongruity between the different asset type that will distract the player from enjoying the overall experience. Third but not least, consumers have become wise to this practice to the point where they have given the it a  colloquial name, “Asset Flipping.”

What about complete game asset packs, you might be wondering? They are designed ready to go with optimized code, and visually compatible models or sprites.

Again, it’s complicated!

This issue also boils down to how you plan to use these assets. If the plan is to purchase one of these asset pack and throw it up on your storefront of choice unaltered for an easy pay day, I hate to be the bearer of bad news. This has been done innumerable times, to the point that your project might be removed from the store for being of extremely low quality. Steam and the other platform holders are in the right in my opinion for introducing this rule. In 2017-2018 this practice became a literal plague on the indie game scene. So pervasive was this issue, that it has forever tainted the use of asset packs in indie games. Again, consumers got burned too many times, and they became wise to this practice. Not only is customer fatigue an issue, but the platform holders are under no obligation to host your awful homunculus of a game just because you have a valid commercial license for all of your assets.

3. What to do about these issues.

This one is straight forward.

Don’t attempt to use unaltered assets as your final game. They are meant to be the foundation on which you build your original idea, not the idea itself. Nothing can destroy the reputation of your game and you as a developer like trying to pass off assets as your own original work. It’s boring for the player, and a nuisance to the platform holders. There is no shortcut to success through asset use. You still need to put in the hard work to integrate and optimize whatever you put in to your projects.

Understanding Prepress – Delta E

Unless you are well versed in how the physical qualities of the printing process effects the hue of CMYK color builds, you probably have no idea what Delta E is, if you have heard the term at all.

It’s actually a very simple concept that just needs a little exploration to understand. Essentially Delta E is a description of the amount of difference between the color target and the hue of CMYK build meant to replicate the color target. It’s measured on a scale of 0 to 100 in which zero is an exact match to the target and 100 is complete visual distortion of the color. In order to understand the implications of how this scale effects the color match, you need to understand the way the visual spectrum of light color gamut is laid out.

In the above example you can see a representation of the visible color spectrum along with the colors able to be reproduced by photographs, RGB displays, CMYK printing, and a color target within the gamut with the acceptable Delta E, where a circle describes the range of acceptable color variation within the Delta E, and the radius of the circle describing the numeric value of Delta E. Delta E is essentially a circular area described by the length of it’s radius. The idea is that a color farther away from the center of this area is also farther hue-wise away from the color target, with Delta E acting as a measurable numeric description of the difference. 

In a perfect world all printed products would be able to reproduce their target colors with complete accuracy. In practical use no printing press is perfect regardless of preparation or skill of the press operator, thus the importance of the measure of Delta E. It give the printer a way to measure the amount of hue deviation in their color builds between the target and the final product without relying on the eyes of the press operator or QC department. There is also usually a negotiated amount of Deviation, usually under a Delta E of 4 or 5 for photographic printing, that the end user will accept. Anything outside of spec is thrown away as waste or shown to the buyer and accepted manually.  A Delta E above 2 is generally visible with the naked eye if viewed under proper lighting, so 4-5 is actually a fairly large amount of deviation. 

Hopefully this quick blog on Delta E helps you understand the concept and why it is important to the printing process. 

Design Quickie – Spot Colors

So you have probably have heard the term “Spot Color” but you have no idea what it means. Here is a quick definition and use example.

1. Spot Colors Defined

A spot color is any color that is printed using a single press station and a custom or pantone defined ink. That’s it. A good example would be the red on a coke can. This is printed as a single channel color instead of a CMYK build.

2. Why is this important?

A Spot color can solve a multitude of problems in a printed job, most of them mechanical in nature and occur during the actual printing process. Individual labels are not printed one at a time. They are printed on a large sheet of substrate, usually wound up on a giant continuous spool, and then die cut in to individual labels or packages. The tone of the color on a CMYK build is largely determined by the pressure applied to the printing plate or cylinder by the impression roller. This roller put even pressure across the entire printed service, called a web if unrolled from a spool. IF that pressure is off on one side of the web, the color will print at different tones on each side of the web.

This issue is completely avoided by substituting a CMYK build with a single spot color. There is no tonal mix in a spot color to over or under impress, it is just a solid shot of one color. A spot color can have tones or gradient in it, but the lack of a need to mix with other colors makes it easier to correct for on the press.

The end goal of a print run is to have a set of identical individual packages / labels when the run is completed. When CMYK builds are used to recreate large flat areas of color, the overall color values can differ over the few hours of time it takes to complete a print run. The single color nature of spot color can help to minimize this issue. Tonal differences will still happen with a single spot color, but a CMYK build is created by printing four stations all of which can drift out of spec during a print run. This multiplies both the complexity and chance for error by four when compared to a spot color.

3. How does this affect my design?

Designing with a spot color is not only a best practice when designs have a large area of flat color, but they can make a color much less costly and difficult to print. A single color set up on a single press cylinder is much cheaper to manufacture and simpler to print. This reduces waste which is one of the most costly element of the printing process. It also aids in the creation of brand lines, making them easily identifiable, yet visibly part of the family of brands. I won’t repeat my self here so check out my article on designing with flavor colors. The solution is to use spot colors whenever possible in your designs. They are cheaper and easier to reproduce than CMYK builds.

 

Understanding Prepress – Flavor Colors

So you need to design a line of products instead of just an individual one-off design. Consider reserving one color in your design to use as the “Flavor” color. 

1: Flavor color definition.

“Ok” you hypothetically say in your head “but what is a flavor color?”

Well I’m glad you hypothetically asked.

A flavor color is an element of  a printed design that is swapped out within a product line to help visually differentiate between similar products at a glance. The goal of any product line is to promote brand familiarity and get buyers to form brand loyalties that extend to different products in the same product line. An easy example would be liking Ragu Chunky Style, and making a direct decision to then  purchase Ragu Meat Flavor based on you positive association with Chunky Style. 

2: Flavor color use cases.

To aid in this process, your job as a designer is to create similar but individualized designs for all of the products under the same brand. As easy way to do this is to use a spot color as a flavor color. Below is an example. For a Definition of spot color see my article on designing with spot colors.

Also a set of 3D renderings of what this design might look once printed and packaged.

In the world of print design, jobs are classified by their ink make up. A very common type of job is CMYK + two spot colors. One of these colors is dark enough to hold the UPC and any other regulatory text and can be re-used between all of the different products in the same brand. The other spot color is the flavor color and changes the background color , part of the logo, and some descriptive text. Below is another example.

 

Another set of 3D renderings of what this design might look once printed and packaged.

Following this template will allow you to create a unique design for the brand that has similarities across the range of products. The consumer will also be able to tell at a glance what iteration of the brand they are selecting, and to what family of products it belongs.

Design Quickie – RGB vs. CMYK

You have created a raster or vector graphics file and you have to decide the color space for your design to inhabit, but you have no idea whether to use RGB or CMYK color space. This quick guide should help you decide.

1. What is your design intention, and what process is this design for?

The most important deciding factor in what color space to use is the process that you final design will be used for. Some processes are limited by only being able to accommodate designs of only one particular color space. For example web design uses only RGB files and print design uses only CMYK files. Depending on color space, the final product’s color can be drastically different from what you design. Inks simply can’t replicate the range of colors created by the LCDs in you computer monitor, smart phone, or television screen. In the example below the CMYK image has less contrast and a smaller range of colors.

The best practices of designing for a specific process includes using the correct color space. That includes linked images, text links from pdfs, and all other elements of your final design. This can be done by accessing the file menu in vector based programs or the edit menu in raster based programs.

2. Why does this matter?

So your design is finished, and your customer has approved your pdf or other submittals. That means whatever you have made is good regardless of color space, right?

Technically Yes, but there is a huge caveat. If you provide the file in wrong color space you will look at best lazy or inexperienced, and at worst incompetent. Chances are your customer is going to take that design to either a printer/prepress house for print use, or a digital design studio for web site use. They will be able to fix whatever you have fouled up, it’s literally part of their jobs. This will cost time and that time will be charged to your client, causing them to incur an unexpected cost that may or may not fit in to their budget. Most design houses charge upwards of $100 an hour for access to their services. Not only have you provided them with a product they can’t use without alteration, but they have to sift through the files and find all the areas they need to fix for their process.

It would be like ordering a pizza and having the delivery guy show up with a ball of raw dough, sauce, and a pile of toppings. You could finish dressing the pizza and cook it in your own oven, but it defeats the purpose of having it professionally prepared. 

3. Solutions

You have really one of three choices. The first is to to the work yourself to make sure all of the elements of your design are created in the proper color space. If you are able this is the best option as it saves the customer money and smooths out the process. Customers like it when the creation process is effortless for them. That’s one of the reasons they are willing to pay you in the first place. Happy customers make positive referrals and leave positive reviews. This is ultimately what you want if you plan to design professionally.

The second option is of course to not care and ignore the color space as part of your design. If you are dealing with a family friend or a close acquaintance this option is probably fine. If you are advertising yourself as a competent commercial designer for freelance work, this is probably going to lead to some fairly uncomfortable conversations with your customer about expectations and follow through. People in the business of design are going to know how base level these issues are, and rightly or not assume you are not a competent designer. That’s generally not a desirable outcome.

The third option is to be honest about the shortcomings of your design. Generally customers are most interested in the processing advancing smoothly regardless of what hurdles they need to jump in order to get to an acceptable final product. If they are told in advance that the design may need additional work once they give it to whomever they decide to use for the final production, there are no surprises. If this is the path you want to follow the best practice is to not use terms like “production ready”, “print ready”, “web ready” etc. to describe your artwork. Design is visual, and as long as the design meets their visual requirements, most customers will consider your work to be complete and acceptable.

Design Quickie – Expressive Line Weight

The precision of modern drawing programs makes them a quick and easy solution creating fast and iterative drawings. Some might argue this comes at the price of the human element that allows drawings to be expressive. I think there is some merit to this opinion. Being able to see the hand of the artist in their work is one of the main things which differentiates fine arts from photography. I also think that line of logic is dismissive to the large array of digital tools in modern drawing programs you can use to customize the look of your drawings. One of the most important is the ability to alter the way line weight tapers along the stokes of vector drawn objects in Adobe Illustrator.

Take a look at the two tiger drawing above. The top one  looks scribbled and off-putting. The bottom illustration, however looks expressive and organic. Literally the only difference between the two drawings is using multiple line weights and the tapering options for the stoked black elements. These changes were all made in the “Stroke” menu in Adobe Illustrator. The other advantage is the vector and vertex count of the drawing are kept low, which can help keep your files to a usable size even in the most complicated of designs. Below are the raw vectors for the project to demonstrate how few you need with this technique.

Just go to the “Stroke” menu and select show options if not already done as shown below.

Once in the extended menu look at the bottom to select the shape profile for the stroke elements.

You can the go in to your drawing and adjust the tapering and weight of all of your vector elements. This can be the difference between a flat and lifeless illustration and an expressive and flowing design.  Below are some additional example of how varied line weight brings a drawing to life.

Puzzle Design: Design Philosophy

In order to effectively design puzzles for digital purposes a number of steps must be followed for the user to be successful at solving the problem.

1: Make sure all element s are visually informative and can be used by the use to track and evaluate the success at the puzzle.

In a current project I am working on, one of the components is a node based puzzle arranged in a matrix of connections. Each part visually is designed to convey information in context to the solution. The parts are the puzzle nodes, the blue conduits connecting them, and a separate progress bar on the side or top of the puzzle.

 

 

Each of these elements is informative to the solving of the puzzle when assembles as seen below.

In the above example, each node has a number of “lights” on it’s surface which corresponds to the number of active conduits the player needs to connect to reach the solution. The problem of the puzzle needed to be solved for is the fact that the number of active needed conduits may or may not be the same as the number of connected conduits. For example, the node at the center of the cross shaped section on the right side has four connected conduits, but only two need to be active to complete the node. The node lights are activated by toggling the conduits between blue to signify inactive and red to signify an active conduit. Once that node is fully lit, it will be added to the progress bar at the top of the puzzle until all the progress lights are lit up, like in the puzzle below.

2: Design multiple ways for the player to evaluate their progress.

In the above example there are multiple ways for the player to assess their progress towards solving the puzzle. Each node has its own set of red lights which are updated in real time as the player activates and deactivates the connected conduits.

Also, each individual conduit changes from blue to red as the player toggles them between active and inactive.

There is also a progress bar at the top of the puzzle with lights that correspond in real time to the number of nodes with all of their conduits activated. Once all of the lights are lit on the progress bar, the puzzle is solved.

3: Create a clear starting point with a methodology for logically progressing towards the solution.

The Node and conduit style puzzles in this blog post’s examples has no bias for whether the player begins on the right or left side. In order for the player to have a starting point to begin solving the puzzle certain nodes are designed with all available and activated nodes to be the same. In other words, all of the connected conduits must be turned on for the node to be completed. Locating these nodes on the puzzle not only gives the player a starting point for solving the puzzle, it also leads to a clear methodology of logically including and excluding connected conduits to get the correct number of lights lit on the individual nodes. the example below shows the method for finding both a starting point and beginning the logical progression of the puzzle,

At the top of the above example, you can see a two light node with one light lit next to a three light node with only one light lit. In order to complete the right-most node with the two light, the conduit between that node and the three light node must also be toggle to an “Activated” state. By process of elimination, the puzzle can be completed from this point forward.

4: Make sure the problem is solvable OR…. for Gods sake check you work.

Have you ever released a completely broken game update on Steam for a game you have charged people money for? Well  I have and it’s one of the most unpleasant experiences around. Take a couple of days, put away your planning notes, and go back to the puzzle you have designed completely cold and attempt to solve it in the manner you intend the player to use. If it’s a bad experience for you, it will be an objectively awful to impossible task for your player. You will probably do this a few times if it is a new type of puzzle, but it ends up being worth the time you spend. Remember, the point is to both entertain and challenge, and an entertaining challenge seems fair and accessible.

Design Quickie – 5 Reasons to Design with Spot Colors

Here are my top 5 reasons to design with spot colors.

1: Consistency of color across the design: Using the same swatch throughout the design process assures that all element are colored correctly.

2: Easy buildout of adjacent designs:  The use of a spot color in a series or family of designs can easily be used as the “Flavor Color” in a family of products reducing the complexity of the printing.

3: Small Text Knockouts:  Using a spot color instead of a four color process build allows you to knockout small text to the paper color in designs that would other wise fill in and be unreadable.

4: Can be used as a Technical Ink:  If dark enough, the ink can be used for technical purposes like Bar Codes, Lot numbers, Nutrition Facts, and other legal text. Your printer will love you for giving them this as an option.

5: Closer Adherence to Design Intent:  If you create a package design for a major customer out of nothing but four color process builds (something that ends up on a store shelf), the first thing they will do is give it to a guy like me to simplify it and make it more easily reproduceable.  It will be considered amateurish (because it is), and you now have a credibility problem.

Design Quickie – The Case for Global Swatches

Pssst…. Hey you…. Do you use the global swatch option in your illustration program?

Do you even know where it is or what it does? If the answer is no, let me introduce you to one of the most powerful settings in Adobe’s product line, Global Swatches.

Let’s say you are finished a design for a client and they suddenly pivot the to a new product design that effects the  color and flavor without nuking the entire concept back to step one. with just the adjustment of a few sliders and some minor text editing, you  can make a disaster in to a miracle. See the case below. The change of concept from a Yellow Sun to a Blue Neuron Star can be fixed in just a few minutes.

 

Global colors also allow for quick iteration of ideas across a product line, letting you recolor and adjust different flavors quickly. Spot Colors are always global.

Another great thing about Global Swatches is they work inside of other structures in Adobe product like gradients. This can also be a bit of an issue if not known before a design is built. Best process is to keep colors in gradients separate from the general illustration colors in your design.