• Content count

  • Joined

  • Last visited

Community Reputation

838 Good

About playerhayter

  • Rank
  1. The Art of Feeding Time: Animation

    While some movement was best handled programmatically, Feeding Time's extensive animal cast and layered environments still left plenty of room for hand-crafted animation. The animals in particular required experimentation to find an approach that could retain the hand-painted texturing of the illustrations while also harkening to hand-drawn animation. An early pass involved creating actual sketched frames, then slicing the illustration into layers and carefully warping those into place to match each sketch. Once we decided to limit all the animals to just a single angle, we dispensed with the sketch phase and settled on creating the posed illustrations directly. When the finalized dog image was ready, a full set of animations was created to test our planned lineup of animations. The initial approach was to include Sleep, Happy, Idle, Sad, and Eat animations. Sleep would play at the start of the stage, then transition into Happy upon arrival of the delivery, then settle into Idle until the player attempted to eat food, resulting in Sad for incorrect choices and Eat for correct ones. Ultimately, we decided to cut Sleep because its low visibility during the level intro didn't warrant the additional assets. We also discovered that having the animals rush onto the screen in the beginning of the level and dart away at the end helped to better delineate the gameplay phase. There were also plans to play either Happy or Sad at end of each level for the animal that ate the most and the least food. The reactions to this, however, was almost overwhelmingly negative! Players hated the idea of always making one of the animals sad regardless of how many points they scored, so we quickly scrapped the idea. The Happy and Sad animations were still retained to add a satisfying punch to a successful combo and to inform the player when an incorrect match was attempted. As we discovered, a sad puppy asking to be thrown a bone (instead of, say, a kitty's fish) proved to be a great deterrent for screen mashing and worked quite well as a passive tutorial. While posing the frames one by one was effectively employed for the Dog, Cat, Mouse, and Rabbit, a more sophisticated and easily iterated upon approach was developed for the rest of the cast: With both methods, hidden portions of the animal's faces such as teeth and tongues were painted beneath separated layers. In the improved method, however, these layers could be much more freely posed and keyframed with a variety of puppet and warp tools at our disposal to make modifications to posing or frame rate much simpler. The poses themselves are often fairly extreme, but this was done to ensure that the motion was legible on small screens and at a fast pace in-game: For Feeding Time's intro animation and environments, everything was illustrated in advance on its own layer, making animation prep a smoother process than separating the flattened animals had been. The texture atlas comprising the numerous animal frames grew to quite a large size -- this is just a small chunk! Because the background elements wouldn't require the hand-drawn motion of the animals, our proprietary tool "SLAM" was used to give artists the ability to create movement that would otherwise have to be input programmatically. With SLAM, much like Adobe Flash, artists can nest many layers of images and timelines, all of which loop within one master timeline. SLAM's simple interface focuses on maximizing canvas visibility and allows animators to fine-tune image placement by numerical values if desired: One advantage over Flash (and the initial reason SLAM was developed) is its capability to output final animation data in a succinct and clean format which maximizes our capability to port assets to other platforms. Besides environments, SLAM also proved useful for large scale effects, which would otherwise bloat the game's filesize if rendered as image sequences: Naturally, SLAM stands for Slick Animation, which is what we set out to create with a compact number of image assets. Hopefully 'slick' is what you'll think when you see it in person, now that you have some insight into how we set things into motion! Article Update Log 16 July 2014: Initial release
  2. The Art of Feeding Time: Branding

    Although a game's branding rarely has much to do with its gameplay, it's still a very important forward-facing aspect to consider. Initial concepts for a Feeding Time logo. For Feeding Time's logo, we decided to create numerous designs and get some feedback before committing to a single concept. Our early mockups featured both a clock and various types of food. Despite seeming like a perfect fit, the analog clock caused quite a bit of confusion in-game. We wanted a numerical timer to clearly indicate a level's duration, but this was criticized when placed on an analog clock background. Since the concept already prompted some misunderstandings -- and a digital watch was too high-tech for the game's rustic ambiance -- we decided to avoid it for the logo. The food concepts were more readable than the clock, but Feeding Time was meant to be a game where any type of animal could make an appearance. Consequently we decided to avoid single food-types to prevent the logo from being associated with just one animal. Even more logo concepts. They're important! A few more variations included a placemat and a dinner bell, but we didn't feel like these really captured the look of the game. We were trying to be clever, but the end results weren't quite there. We felt that the designs came across as somewhat sterile, resembling the perfect vector logos of large conglomerates that looked bland compared to the in-game visuals. Our final logo. Ultimately we decided to go with big, bubbly letters on top of a simple aperitif salad. It was bright and colourful, and fit right in with the restaurant-themed UI we were pursuing at the time. We even used the cloche-unveiling motif in the trailer! One final extra touch was a bite mark on the top-right letter. We liked the idea in the early carrot-logo concept, and felt that it added an extra bit of playfulness. Initial sketches for the app icon. The app-icon was a bit easier to nail down as we decided not to avoid specific foods and animals due to the small amount of space. We still tried out a few different sketches, but the dog-and-bone was easily the winner. It matched the in-game art, represented the core of the gameplay, and was fairly readable at all resolutions. To help us gauge the clarity of the icon, we used the App Icon Template. This package contains a large Photoshop file with a Smart Object embedded in various portholes and device screenshots. The Smart Object can be replaced with any logo to quickly get a feel for how it appears in different resolutions and how it is framed within the AppStore. This was particularly helpful with the bordering as iOS 7 increased the corner radius making the icons appear rounder. Final icon iterations for Feeding Time. Despite a lot of vibrant aesthetics, we still felt that Feeding Time was missing a face; a central identifying character. Our first shot at a "mascot" was a grandmother that sent the player to various parts of the world in order to feed its hungry animals. A grandmother fretting over everyone having enough to eat is a fairly identifiable concept, and it nicely fit in with the stall-delivery motif. Our initial clerk was actually a babushka with some not-so-kindly variations. However, there was one problem: the introductory animation showed the grandmother tossing various types of food into her basket and random animals periodically snatching 'em away. We thought this sequence did a good job of previewing the gameplay in a fairly cute and innocuous fashion, but the feedback was quite negative. People were very displeased that all the nasty animals were stealing from the poor old woman! People were quite appalled by the rapscallion animals when the clerk was played by a kindly grandma. It was a big letdown as we really liked the animation, but much to our surprise we were told it'd still work OK with a slightly younger male clerk. A quick mockup later, and everyone was pleased with the now seemingly playful shenanigans of the animals! Having substituted the kindly babushka for a jolly uncle archetype, we also shrunk down the in-game menus and inserted the character above them to add an extra dash of personality. The clerk as he appears over two pause menus, a bonus game in which the player gets a low score, and a bonus game in which the player gets a high score. The clerk made a substantial impact keeping the player company on their journey, so we decided to illustrate a few more expressions. We also made these reflect the player's performance helping to link it with in-game events such as bonus-goal completion and minigames scores. The official Feeding Time website complete with our logo, title-screen stall and background, a happy clerk, and a bunch of dressed up animals. Finally, we used the clerk and various game assets for the Feeding Time website and other Incubator Games outlets. We made sure to support 3rd generation iPads with a resolution of 2048x1536, which came in handy for creating various backgrounds, banners, and icons used on our Twitter, Facebook, YouTube, tumblr, SlideDB, etc. Although branding all these sites wasn't a must, it helped to unify our key message: Feeding Time is now available! Article Update Log 30 July 2014: Initial release
  3. The Art of Feeding Time: Interface

  4. The Art of Feeding Time: Branding

  5. The Art of Feeding Time: Characters

  6. The Art of Feeding Time: Animation

  7. The Art of Feeding Time: Interface

    The evolution of the Feeding Time interface. Feeding Time's interface was one of many components of the game that went through continuous iteration along its development. The overall theme revolved around traveling the world and delivering food to hungry animals, but the style it was presented in changed several times over. Through this article we will be taking a look at how the UI evolved from a bunch of scribbles to a fully fleshed out interface that complemented our in-game art. Two of the original motifs we used for Feeding Time's UI: Among the first interface ideas we had were a passport and some luggage that went together with the traveling theme of the game. While these motifs were eventually scrapped we did take away some lessons from them. For example, the passport brought along with it a very negative bureaucratic association; its drab colours clearly something to avoid in an otherwise joyful game. In contrast to the cold rigidity of the passport, the briefcase motif was a lot more fun and we took some of the colouring and texturing from it for future use. The object itself however brought with it certain challenges. Opening up a briefcase-menu might be fun at first, but by the twenty-seventh time it loses its charm and becomes a time-consuming chore. Its overall shape also limited us on the dimensions of the menus and made pop-ups much trickier to implement. Another minor strike against the briefcase was that we didn't want to limit ourselves only to locales that it made sense to bring luggage to, i.e., if we wanted to create an underwater level, bringing a suitcase might seem a bit odd. The scrapbook and restaurant menu motifs also brought elements that we refined and used in the final design: Our next mockups involved a scrapbook theme that brought with it a very arts and crafts feel, which suited the overall tone of the game, and a restaurant menu that helped to define how we framed and organized our information. These were also the first iterations that began to prominently use patterns, and their texturing was a closer match for the graininess of the foods and animals. The scrapbook used too much real-estate due to its irregular components, though, and the restaurant menu proved a bit too formal. The final style began coming together with the clipboard motif: Another idea we tried out revolved around a delivery person with a little clipboard that kept track of all the areas the player visited with their food-packages. We used what we learned from the previous revisions to inject a little fun in the form of patterned borders and colourful textured icons and buttons. Looking back on this iteration we can still see parts of it that survived into the final cut, however this screen still lacked a bit of personality. A more lightweight menu with our friend the store clerk mixed in: To add more character to the UI we decided to include the clerk himself as something of a mascot, peering over the menus and offering encouragement. This required a lot of cuts to the amount of space the menus used, but the end result was well worth it. Final art for the summary screen: With the clerk firmly in place, we combined the rough colouring of the briefcase, the symmetrical framing of the restaurant menu, the patterns and borders of the scrapbook, and the checking-in motif of the clipboard. These made for a more abstract, papercraft-like design, but one that fit the overall game while facilitating the appearance of the clerk and exposing the game's colourful backgrounds. Final art for one of the profile menus: All of these changes led us to the final style above. We made some small tweaks along the way and polished the graphics and the user flow as best as we could. With Feeding Time now out on the AppStore, we hope that all of our efforts have paid off and you check out the finished product! Article Update Log 9 July 2014: Initial release
  8. The Art of Feeding Time: Backgrounds

    With the look of Feeding Time's animals nailed down, it was time to move on to the backgrounds. For our initial backdrop, we went with a living room as it nicely tied together all the typical household pets. It also let us use a carpet to cleanly delineate the numerous gameboard components. Our original sketch followed the perspective-bending approach of Zelda: A Link to the Past: While our first mockup tried to match the four angles at which the animals faced the gameboard, direction ceased to be a concern when we decided to present each animal from just a single side. This allowed us a bit more freedom, but the lack of a clear and consistent perspective also bred confusion. Were the animals stacked on top of each other, or being viewed from above? The background lost a certain sense of being a real place, but Abel suggested we roll with it. To prove his point, he showed us how well Hanna Barbera's skewed and uneven backgrounds worked in various old cartoons. Top-left and bottom-left: Hanna Barbera's skewed and uneven backgrounds. Right: Feeding Time's indoors background inspired by the style: We agreed, and were quite pleased with George's first crack at the style. However, in the end we abandoned the indoor environment itself. The reason was a desire to keep the areas consistent, and constraining them to interiors was too limiting and had some negative associations with confinement. Instead, we went with a suburban backyard for the "pet zone" and kept the other biomes to the great outdoors. The initial rough draft of the tundra zone and its finished version: We also wanted to organically duplicate the carpet's natural grid for all the areas, but this proved very difficult. The backyard was a natural fit for a checkered pattern akin to the turf of various sports fields, but the safari and tundra zones were trickier. We experimented with rows and columns of cracks in dry bedrock and an arrangement of sticks and twigs, but neither proved ideal. The extra decorations muddied the gameboard and took up too much space. The issue of clarity proved substantial even when working with a grid that only had slight variations in surface pattern and lighting. Since easy recognition of the foods and animals was a crucial part of the game, we decided to keep the gameboard as uniform grids and only change their colour scheme to match each biome. The grid of the original Safari zone consisted of grassy tufts that got progressively larger towards the bottom of the screen. Along with a light gradient, the design helped to create depth but was eventually removed to make the gameboard easier to parse: In hindsight this was probably an issue we spent too much time debating by looking at the background illustrations themselves. As it turned out, the gameboard pieces covered too much of the grid to fret over its design, and the uniform shape actually fit the overall art style. The football and various other background animations add a subtle sense of life and don't overly distract the player: To add some life and personality to the biomes we introduced various interactive Easter Eggs and tied them to in-game achievements. For example, the backyard zone was filled with elements that could be activated with a tap: sprinklers let out bursts of water, the house door could be knocked on and its lights individually turned on and off, a football could be launched over the fence, etc. While these were fun ideas, they had nothing to do with the core gameplay and actually detracted from it. The player had to sporadically stop to click on random parts of the screen instead of focusing on matching the animals with their corresponding foods. Eventually we simply removed the interactive component and activated them based on a timer. It helped to make the areas feel alive, but the player didn't miss out on any gameplay by ignoring them. The finished tableaus of Feeding Time's main three zones: One final aesthetic change we made towards the end of development was to turn all the clouds into food shapes. Since each area was outdoors and included parallax-scrolling clouds, it suddenly hit us that we could "standardize" their shapes and velocities while adding a bit of whimsy to the game. This also helped out with the level transitions and other aspects of UI, but more on that next time! Article Update Log 2 July 2014: Initial release
  9. The Art of Feeding Time: Characters

    When Feeding Time (out now!) began to move past its prototyping phase, we decided we didn't want to make just another puzzle game with abstract shapes and symbols; jewels and candies are all fine, but they lack a certain sense of life and personality. Since we also weren't making a match-3 title but rather a game about pairing things up, combining animals with their iconic snacks seemed like a perfect fit. It took a little while to get to this point: At the beginning of Feeding Time's development, Abel Oroz -- an artist we had worked with previously -- was busy joining Tequila Works to work on future projects like Rime. However, he was still gracious enough to provide some advice and work with us through the early conceptual phase. To emphasize the game's pairing mechanic we sketched out some samples of animals being merged with their archetypal foods, but those came off a bit too surreal. We also realized that showing the whole body of an animal didn't neatly fit into the grid of the gameboard. We could still do it, but it shrunk the real estate available to the animals' faces and required more complex animations for movement. In the end we chose to simply focus on the animal heads, which also fixed scaling issues by displaying both the animals and the foods at the exact same size. Some early animal sketches here. I still have a soft spot for the absurd mouse with the Swiss cheese holes: With that much figured out, it was time to seek out an illustrator. A fun and colourful look was a must for Feeding Time, but we also wanted the visuals to stand apart from all the cutesy titles that used a bland, glossy art style. George Bletsis contacted us during our search, and his incredibly varied illustrations and subtle texturing proved to be a great fit. After putting together a bunch more concepts, we had to address one important issue: should we have multiple facing directions for each animal? It proved increasingly difficult to showcase the animal's face while pointing both up and down: On the surface it seemed like a good idea to display each animal so its direction would clearly indicate the direction from which it could start eating. Unfortunately there were multiple issues with this approach. Not only would it triple all our art/animation costs for every animal (we'd need to do a version that points up, down, and left -- the right side would be a flipped version of the left side), but there'd be some visual oddities for the up/down directions, and we'd lose a consistent silhouette for each animal. Simply keeping a single direction and flipping it 90 degrees to facilitate facing directions wasn't an option either as it looked cheap and awkward. I don't think anyone ever noticed that all the units in Clash of Heroes pointed down. In the very least, there didn't seem to be any complaints about the approach: Back when we were at Capy working on Heroes of Might & Magic: Clash of Heroes, we encountered a similar problem. The player's units were located at the bottom of the screen facing up, but this left something to be desired as it only displayed their backs. Eventually it was decided that both the player's and the enemy's units would all face down (unless attacking) to create more interesting visuals. We tried a similar approach in Feeding Time by making each animal point "head-on" at the screen in a neutral pose. It worked but looked a bit too symmetric and boring. In the end we decided to give each animal a singular but unique pose that best displayed its personality. Here's various early takes on the animal heads. From left to right: animals rotated by 90 degrees, animals pointing straight at the viewer, and animals in non-standardized poses: Once we established the format for each animal, we sketched out a lot more concepts and made sure to give each animal a distinct silhouette in order to make them easier to recognize. Since we were now confined to only a single animal pose, we tried to mold each one into a shape similar to that of the animal's corresponding food. We had already taken some liberties with the colouring, but when this extra step made sense, it further helped to make the pairings easier to spot. Below are concepts for animals in the safari and tundra stages. Note that the shapes of the foods closely resemble those of the animals for ease of recognition: And this is how it all turned out! Next up: backgrounds! Article Update Log 25 June 2014: Initial release