Frog Junction

I was brought onto a life simulation game demo titled “Frog Junction” for the visual development and rough UI, and was completed in just over 2 weeks at the end of September 2020. I was to create the following assets:

Logo
Backgrounds
Title Screen, Character Selection Screen, and Main Environment Screen
Pop-Up Login Menu and Pop-Up Trade Window
Integrated Inventory Menu with Hat and World Prop Icons
3 Character Designs with Simple Walk Cycles in all Cardinal Directions
3 House Designs
3 World Props (Ultimately created 4)
4 Hats, each with its own walk cycle on every character

I wanted to make this game visually stand out against other life simulators and ran with the idea of “frog” from the game’s title. I took inspiration from Studio Ghibli’s Secret World of Arrietty and fairycore aesthetic to create a pastel and jewel toned miniature world of adorable pond critters.

Initial Sketches

Sketches after the initial project breakdown, mostly focused on the direction of how the character should look and rapid fire ideas of hats and house placement. I liked the idea of having a lily pad for each house (“welcome to my pad”), but ultimately scrapped the idea after developing the environment a bit more.

Rough sketches of what a cat and dog character would look in this universe, since this was what the lineup originally included alongside the frog. Firefly, squirrel, and turtle concepts were loosely drawn out to include more pond-centric characters, and we ultimately landed on Firefly and Axolotl.

Original loose sketches of fairycore-esque houses: empty can, tree stump, mushroom, and variations of a flower pot.

More thought into the Firefly and Axolotl models, as well as early hat designs for the beanie, mage hat, crown, and thimble.

Rapid fire ideas for World Props to be used to decorate the Home Screen. We ultimately went with the leaf hammock, pizza saver lawn set, and the thimble flower pot.

Rough Title Screen sketches, mostly going through potential fonts and figuring out a playful accent for the logo.

Rough title screen sketches, mostly centered around the background illustration.

Figuring out the Pop-Up Login window on the Title Screen

Rough ideas for the Character Selection screen. Even though the third option was starred, I ultimately went with a variation of the first option.

Rough idea of the environment layout for the Home Screen, with the client’s original idea of having a hidden menu.

Hidden menu pop-up

Initial rough concepts of possible character designs, hats and their placement on each character model, home designs, the main game environment, and UI screens.

Rough Drafts

Lineup of the final character choices: Axolotl, Frog, and Firefly.

Early example of my “big hats go behind” rule

Draft of the Tin Can House

Draft of the Flower Pot House

Draft of the Mushroom House

Draft of the Home Screen background illustration. The goal here was to get the colours and textures settled on for the rest of the game.

Mockup of a cleaned up background illustration draft, getting to character placement and house placement relative to each other, as well as a new hidden menu.

Example of the revealed menu once you toggled the mushroom in the bottom right corner. The client ultimately decided to keep the menu on the screen at all times, and the hide/reveal function was removed.

Draft of the Title Screen UI and logo, originally using a closeup view of the Home Screen as the background.

This stage mostly focused on more fleshed out designs of the chosen characters, home designs, the inventory menu in the main game environment, and title screen UI. The main goal was to settle on the feeling of the world being built.

Final Game Demo Assets

Figuring out the UI for the demo was a personal challenge since this is the first project where I’ve had direct influence over a UI’s appearance and functionality. The main hurdle was making the pop-up windows fit into the fairycore and pond aesthetic without being too obstructed by decoration. The final results were well-received by the client.

Title Screen

“Login” and “New Character” have hover/clicked variations to help discern from the background elements.

Character Selection Screen

The arrow-shaped leaves let the player cycle through options for characters and houses, and also have hover/clicked options to show that interaction has taken place.

Home Screen & Integrated Menu

The client originally asked for a menu that could be hidden but later decided to keep it on the screen at all times. Inventory Icons use the same lily pad from the game’s logo.

Trade Pop-Up Window

It was undecided at time of creation how the trading system would work, so the client asked for a blank dialogue window to work with. “Trade” button also has hover/clicked options for interaction.

Title Screen Background Illustration

I wanted the title screen to embody the overgrown fairycore aesthetic of an abandoned or secret pond area, and added a broken fence to the pastel and jewel-toned environment. Wanting to push the “frog” aspect further, I made the pond with Frog model silhouette in mind.

Character Selection Background Illustration

This background is meant to be a closeup view of the pond from the Title Screen, so I implemented some of the same elements to mimic that zoomed-in feeling.

Home Screen Background Illustration

The pond from the Title Screen is now in the background. The tall grassy mound on the left is the dedicated House placement area, the bottom strip is reserved for the integrated menu, while the rest of the screen is utilized for World Props.

Game Logo

I wanted to keep the lily pad “O” as a reoccurring element throughout the UI. I also accented the “G” to mimic the frog model’s hands and feet.

Original Tin Can House

The Tin Can House originally had a pinwheel accent, however the client liked it so much that it was removed to create an animated world prop instead.

Final Tin Can House

Mushroom House

Flower Pot House

Leaf & Mushroom Hammock

With a flower pillow

Thimble Flower Pot

Pizza Saver Lawn Set

This idea is inspired by what I used to do as a kid: I would use the pizza savers we got in the boxes as tables for my toys to use.

Pinwheel

Isolated pinwheel originally from the Tin Can House.

Character Models & Hats

*Turnaround views for Mage Hat, Flower Crown, Beanie, and Thimble.*

During the sketch phase of the hats and characters, I had already planned to have the hats to be easily interchangeable between characters. This was to keep the walk cycle creation for each hat and character combination as simple and as fast as possible. The Frog, Firefly, and Axolotl share the same 2 “bean” body system, where the base body and head components are the same size and shape for each model.

There is the same measurement of “free” space on the tops of the heads of each model so that the hats fit the same way on each character. I also implemented a “big hats go behind” rule, so that the distinct features of the character models aren’t obstructed, and again, fit the same way on each character.

The walk cycles are 4-frame animations, with a slight bounce during the leg switch to give the illusion of more realistic movement. Tails and midsections also move with the “twist” of the body while walking to make the movement more believable.

Examples of how the hats should look on each of the character models’ walk cycles. It was requested that an isolated walk cycle of each hat and character combination should be made .