Global Game Jam 2020: How to Make a Game in 48 Hours

The Global Game Jam is the world’s largest international game creation event, where creatives of all stripes are given a theme around which they must try to build a game over a single weekend. This year, three intrepid AXS members stepped up to the challenge: Developers Matthew Ostil and David Tran, and Head of Art and Design Joyce Hui.
From the get-go, Matt and Joyce decided to join forces to come up with a full-fledged working prototype of a game, while David wanted to use this as an opportunity to learn Unity’s HDRP (High Definition Render Pipeline) and VFX graph. Everyone’s main goal? To have fun! As David puts it: “It’s not every day you get to build something in 48 hours and share it with people halfway across the world in different time zones, who are simultaneously working on their own projects.”

There were things to be done even before the jam started. “We started a brainstorming document and filled it with inspiration from existing ideas we’d be interested in,” says Matt. “Our goal was to decide on an art style and main game mechanic that wouldn’t be difficult to create.” Joyce, who has previous game jam experience, kept a notebook of sketches and ideas. David, an experienced jammer with several hackathons under his belt, took time to watch tutorials on the topics he was interested in learning.

Then, the fateful day finally dawned. Team AXS arrived at George Brown College where the event was taking place, and there they were given their theme for this year’s game jam: “Repair”.

The dream team, still fresh as daisies on Day 1
Time was of the essence, so ideation began right away. “Our first idea was a sad robot finding pieces to repair itself,” says Matt, “But we eventually decided to go the light-hearted route with a silly dog trying to return to its owner.” In the game, you play as a cute dog who gets separated from its owner when a bridge collapses between them. To find the wood planks needed to repair the bridge, you must explore an area and solve puzzles.

“We needed to prioritize based on what we thought would contribute to the player’s experience the most,” adds Joyce, “So content and function were always top of mind.”

What’s an ideation session without a giant whiteboard?

While Matt worked on game mechanics, Joyce started doing character designs for a loveable furry main character. David, on the other hand, came up with the idea of cleaning up a beach set in Miami – or repairing the Earth in an environmentally-friendly way. He spent the first evening modelling buildings and palm trees along a sandy beach, and focusing his efforts on creating water shaders that will eventually be used in both his project and Matt & Joyce’s game.

Initial character sketches for Derpy Dog

Animation frames for Derpy Dog, who was eventually renamed Luna after Matt’s dog in real life
Luna’s first steps

Joyce and David hard at work, ft. Baby Yoda

As Day 1 wrapped up, everyone went home and tried to get some shut-eye for the long day of jamming ahead. By the second morning, the pressure was officially on. Drawing upon their experience working in a team at AXS, Joyce continued working on concepts while Matt began prototyping the character.
David had his work cut out for him as well– he needed to finish modelling the garbage littering the beach. “I was basically modeling and creating shaders non-stop to get all the assets in,” he recounts. The sheer amount of work to do generated eating habits reminiscent of old university days. “Funnily, the biggest challenge was finding food without wasting too much time going out to pick it up,” David says. “We wanted to maximize our efficiency, but food and hydration were also very important!”
Our starving heros scavenging for food at the local Loblaws
Snacks were a critical part of the creative process

The clock ticked on, and Saturday night rolled around. Despite all their organization and planning, Matt and Joyce unwittingly fell victim to scope creep at their own hands. Their final game contained 5 unique puzzles to solve, and each one had to be built from scratch. “I realised that if we were going to complete the game, I would need to pull an all-nighter,” says Matt. So that’s exactly what he did– he hunkered down and coded throughout the night. “This was the toughest part of the game jam for sure, but surprisingly very productive.”

He did sneak a nap in after Joyce showed up the next morning

David had managed to stay on-track throughout and had finished all his assets by the second day, leaving him a healthy amount of buffer room to refine and submit his project. However, Matt and Joyce did not have the same luxury. The 5pm submission deadline was fast approaching. It became apparent that some things had to go in order for the game to be finished on time. “We had so many amazing ideas that we wanted to implement,” laments Joyce. “By Sunday noon, our naive optimism had run out, and it was time to prioritize and slash the unnecessary things.”

Luna exploring her world!
Colour was added late on the last day
Matt and Joyce ended up working until the last possible moment. With 10 minutes left to go before the submission deadline, the game was being exported for the first time– and neither of them had actually played through the whole thing yet. In the end, they managed to pull through by the skin of their teeth, with 2 minutes to spare.
T-10 til the time of reckoning

As the game jam wrapped up, the trio was able to demo their games on the spot, quickly drawing large crowds filled with impressed onlookers:

All their hard work paid off: the games were a big hit!

In the end, the game jam proved to be a valuable and fun experience. Despite the stress and exhaustion, the AXS trio succeeded in accomplishing what they set out to do: to make a game and have fun doing it. “I’m really proud of what Matt and I achieved,” says Joyce. “My biggest learn is that we can actually make a game in 48 hours!”

David agrees. “I learnt a lot about shaders and got to create something amazing to share with friends and family. Next time, I think I will bring more snacks.”

You can download and play the games yourself here:
The dream team, exhausted but happy

How It’s Made: AXS Studio Interactive Holiday Card

Happy 2020! AXS Studio wrapped up the last decade by creating an interactive Holiday Card to celebrate the season. Now that the holidays are over, we’re taking a look back at how the interactive holiday card was brought to life—from ideation to production to adding interactivity.
While the term “holiday card” conjures up specific imagery of snowflakes and pine trees and jolly men in red, it turned out to be a broad topic with lots of space for creativity. More than just a generic holiday greeting, we wanted our card to represent AXS Studio in a way that was non-denominational, fun, and interactive.

Ideation

All finished projects begin as an idea! Our Medical Communications Designer Chelsea Canlas led the team in an ideation session where as many ideas as possible were captured on post-its. The tricky part, of course, was to narrow down the ideas. “With multiple projects happening and the holidays looming, our main constraint was time,” explains Chelsea. “As a team, we ranked each idea using an originality-feasibility matrix. We chose three ideas that were happy compromises, then put it to a studio-wide vote.”
Once the team settled on the artist desk idea, we regrouped to come up with a list of items that would be found on the desk. “We wanted to share what it is we do as AXS Studio, but also who we are: we use an arsenal of tools to create science visualizations, we’re Canadian, and we love bubble tea!”
The initial doodle of the artist desk idea with a list of potential items. Happy holidays etc etc.
Our initial idea began as an offshoot of the Meet the Artist meme. Building on that, we drew stylistic inspiration from professional 3D artists such as Peter Tarka and Nuria Madrid. Lastly, all we had to do was simply walk around the studio looking at people’s desks, and finding tchotchkes representative of our AXS artists (such as the kiwi toy and an abundance of succulents)!
© Peter Tarka and © Nuria Madrid
Sufficiently inspired and equipped, Chelsea then set out to create the rough draft. “I sketched out ideas and mocked up a very simple 3D scene using basic polygons and an orthographic camera in Autodesk Maya,” says Chelsea. “Several iterations of the sketch were made, mostly regarding the realistic interpretation of the desk – messy or neat? I’ll leave that interpretation to you.”
Rough sketch of the holiday card, with of all our wishlist items incorporated
3d mockup. Good thing we had a skull model kickin’ around

Production

Once the sketch was complete, it was passed on to 3D Medical Artist Lucas Lin for modeling and rendering, with Head of Animation Julian Kirk-Elleker lending his creative direction. The desk was covered with objects, so there was a lot of asset modeling to be done. The most challenging part, according to Lucas, was creating the garland. “I didn’t want the garland to look too realistic and detailed, so I used zBrush to sculpt a pine twig, and MASH to distribute it along the curve in Maya,” he explains.
Completed models in Maya- can you spot the kiwi?
Initial lighting setup in Maya
We intended for the look of the card to be organic yet modern, whimsical yet realistic. To that effect, Lucas and Julian experimented with a mixture of simple matte and metallic materials, building contrast with detailed textures such as the garland and the storyboard. The result is a delightfully festive render that is detailed without feeling overly crowded.
Beauty render
A combination of soft idealized lighting and realistic image-based lighting was created using Redshift. “The fairy lights were an interesting compositing and rendering challenge,” Lucas adds. “I separated the lights into two different volumetric passes that interacted with the glass of the lights differently. These were composited together to make sure the lights were not too prominent or hazy.”
Final holiday card in all its merry glory
The final holiday card was a pretty accurate depiction of an AXS Studio artist’s desk. In fact, it was so accurate that we decided to recreate the 3D image in real life for comparison:
One bubble tea was harmed in the making of this post
Julian also created a lovely toboggan to go on the back of the holiday card:
to·bog·gan /təˈbäɡən/: a long narrow sled used for the sport of coasting downhill over snow or ice

Interactivity

Once the print illustration was complete, it was time to bring it to life through interactivity. Our Developer David Tran used HTML, CSS/Sass, and Javascript to build the interactive card. However, there were a couple of road bumps along the way.
The first was cross-platform compatibility. “When designing a web version, all digital platforms have to be considered, which means considering several aspect ratios (eg. 4:3 for an iPad vs. 16:9 for a screen desktop),” Chelsea explains. “To work around this, David and I came up with a UI design that can accommodate all platforms.”
Interactive card wireframe
The second issue was incorporating animation. Since the card had to be both desktop and mobile-friendly, complicated videos and animations were not viable. Animated GIFs were out of the running since they were large in file size, limited to 256 colours, and clunky to control – and we didn’t want to eat up data on mobile devices or risk laggy animations. Thankfully, David and Chelsea were able to come up with a suitable solution: simple animations with less than 5 frames and easy transitions.
“We ended up masking different frames of the 3D objects and fading between them,” says David. “GreenSock is an important library used for animating CSS properties in Javascript, and we used this for most of the animations, including the staggered disappearing cookies and rising steam for the mug. This worked well for supporting lower-end devices while giving the card its charming interactivity.”
Much testing was done across different platforms to make sure that everything worked as it should
Other challenges included making sure each 3D object’s animation wouldn’t interfere with the lighting or placement of other objects. “The fairy lights were on a background layer and strategically diverted around the clickable, animating objects, while the rising steam was subtly placed in the foreground to create an illusion of depth,” says David. “The trailer video was handled by placing it in a div that was then transformed using CSS to fit inside the monitor screen; this gave the desk life as the video appeared to be playing directly inside the virtual monitor.”
Overall, internal projects such as this one give the AXS team a lot of creative freedom to explore new ideas, workflows, and styles. It’s a great opportunity for learning through fun and flexible iterations. Our final card is a snapshot of the day-to-day desk of an AXS artist, and a little thank you to those of you who have been following and supporting us on our creative journey. If you haven’t checked out the interactive card yet, you can find it here!

How It’s Made: Human Microbiome Scientific Illustration Cover for Nature

June 27th is World Microbiome Day, in celebration of all of the microscopic organisms that live in and around us. A recently published issue of Nature showcases the Integrative Human Microbiome Project, which delves into the link between humans, their health, and how their microbiomes affect them.

The Human Microbiome Project spanned over 10 years and resulted in a foundational reference dataset for genomic diversity in human microbes, laying the groundwork for many studies to come. AXS Studio was tasked with encapsulating this diversity in an eye-catching editorial cover befitting the Nature journal.

Nature Journal Cover

Nature Volume 569, cover art ©2019 AXS Studio

Look Development

 

Bacteria and other microorganisms often get a bad rap, and are painted as agents of disease and infection. In reality, our microorganisms are mostly commensal, and do not cause us any harm.

 

In order to combat this stereotype, a key goal for our scientific illustration was to depict the organisms of the microbiome in a non-threatening and pleasant style. To achieve this, we drew inspiration from the lush organic landscapes of underwater coral, which had complex geometric shapes similar to what we wanted to evoke. Coral reefs are also a vibrant symbiosis of life and biodiversity, another parallel to our own microbiomes.

©Kong via Flickr under CC BY-SA 2.0

We aren’t the only ones who drew a connection between reefs and the microbiome! Another major source of inspiration for us was artist Rogan Brown, who creates meticulously detailed reefs of microorganisms using layered cut-paper. With the coral reef metaphor in mind, we set forth to create the first draft of the cover. 

 

We researched over 35 cell types mentioned in three studies from this issue of Nature to ensure accuracy of scale and form for each. In order to demonstrate the true diversity of the human microbiome, several populations from different parts of the body were collected and shown in this one image. The resulting scientific illustration is a colourful snapshot of just a fraction of the diverse ecosystem within us.

 

Rough Drafts

Initial rough draft ©2019 AXS Studio
Various layout designs ©2019 AXS Studio

As with all 3D illustrations, we began with an initial greyscale rough draft, created with Autodesk Maya. The rough draft stage allows us to set the scene and experiment with different camera angles and layout designs to determine which one works best. 

 

To keep the Maya scene light, our Head of Animation Julian Kirk-Elleker used MASH networks to place two-thirds of the bacteria, and hand-placed and posed the remaining third. Once the rough draft and layout were approved, it was time to add colour! The challenge was to include a lot of visual detail without overwhelming the viewer. The different cells and microbes needed to look distinct, yet cohesive. Julian experimented with various colour palettes to try to come up with a solution:

So many colour options! ©2019 AXS Studio

In the end, we decided to go with a combination of all the different colour options by incorporating the elements we liked most from each.

Julian used several visual strategies to achieve the final look. He avoided excessive value-contrast by using mostly hue and saturation to distinguish between microbe species. He added a subtle hue gradient from blue in the top right to yellow-green in the bottom left to maintain visual coherence and gestalt. By using depth of field and contrast, he draws attention towards the middle third of the image, where the title will be.

The Final Result

The final result is a stunning scientific illustration of the human microbiome as a vibrant coral reef.

On International Women’s Day, Sonya Amin reflects on 15 years at the helm of AXS Studio

International Women’s Day is a global celebration of women and women’s rights advocacy. We interviewed our fearless and fabulous leader Sonya Amin in order to learn more about her journey as a female entrepreneur, BMC alumnus, and mother.

Today is International Women’s Day! You are the “A” in AXS and the sole female co-founder of this company. Over the past 15 years, AXS has flourished into an award-winning leader in the medical animation industry. We want to know — how did AXS start?

SA: The idea for AXS started back when Jason, Eddy and I were still in school taking animation class at Sheridan College. We carpooled together between Toronto and Oakville in Jason’s grandma’s car, which meant we were spending a lot of time together talking. And one fateful day, one of us said: We should start our own studio!

What was your role in helping AXS off the ground?

SA: The three of us have very different personalities and strengths, and we complement each other. My role in the beginning was to act as the glue and facilitator. I focused on logistics, Eddy directed the creative vision, and Jason led the charge in drumming up business.

There were a lot of late nights, take out, and caffeine. So much caffeine. The tea kettle was constantly on. But because our skills complemented each others’, things ended up working out very well.

Double burden” is a term used to describe the addition of a domestic workload on top of a career. What are some of the challenges you’ve faced balancing work and family?

SA: I read a quote recently that said: “We expect women to parent like they don’t work, and work like they don’t parent.” Growing up, I wasn’t the girl who dreamed of her wedding day or having children, so it’s funny how things work out. 

I’m lucky that my partner-in-life is a “modern” dad in that he is hands-on and involved. And at AXS, many of us have families and understand the struggle. I’m doing an okay job, but I haven’t figured it out completely. I’m taking care of clients at work, and my family at home. Taking care of myself too — that’s the next step.

Did you have any female role models you looked up to growing up?

SA: FosseyGoodall and Galdikas, any kickass lady scientists who lived in the jungle. Also the character Ripley in Aliens (which I watched when I was 9 and was my favourite movie growing up), who isn’t a lady scientist, but is definitely kickass.

Any advice for your past self?

SA: Set up AXS in Hawaii. Where it’s warm.

AXS July Challenge

At AXS Studio, we’re big proponents of “learning by doing”. It’s a principle we strive to bring into the design of all our medical interactive media. So when it comes to our own professional development why would we do anything different?

Last year, we created the AXS Challenge Day – an opportunity for our production team to learn new skills and have creative control over a project. The challenge is less about creating polished finished products and more about having a safe space to step outside your comfort zone and take risks.

Our most recent challenge paired up our animators and developers to build Summer-inspired interactive experiences, with the end goal of developing skills and tools for navigating the often quirky Maya-Unity production pipeline and workflow.

When striving for visually stunning interactive experiences, it’s often hard to draw a line where the role of the programmer ends and the role of the artist begins. I would argue our best technical art arises from blurring this line or removing it entirely. It takes collaboration and conversation; bringing together people with diverse skill sets and experiences. And with the recent release of art and design oriented Unity features such as Shader GraphTimeline, and Cinemachine, it’s a great time to build on those skills.

AXS Summer Challenge developers Raheel and Matt and animators
Ruth and Man-San © 2018 AXS Studio Inc.

Scope

Department Heads, Joyce Hui and Brendan Polley established a few technical constraints to help our teams establish a reasonable scope for the time allocated:

  1. Export into Unity, an animated 3D assets imported from Maya. It’s up to you how many assets you make but they must include at least one rigged animation and one blendshape
  2. Interactivity must include some control over an imported animation from Maya (eg. click to play)
  3. Include an animated visual effect created in Unity (eg. shader fx, particles)
  4. Prioritize establishing a unified look and feel

We also created a quick sketch and exemplar:

Wireframe sketch of simple Unity interactive. Sunny environment for cat
© 2018 AXS Studio Inc.

Sunny Cat (by Joyce Hui and Brendan Polley)

The teams had one day to make their own Summer experience and we were blown away by the end results.

Just Deserts (by Ruth Chang and Raheel Zubair)

just-deserts-img
Unity development clip of snake navigating with user clicks
© 2018 AXS Studio Inc.

Ruth Chang and Raheel Zubair made a game about a colour-changing worm on the hunt for fresh fruits. The hilarious expressions of the worm are a combination of rigged animations and blendshapes created in Maya while the burrowing displacement effect is driven by shaders in Unity. Everything from the motion of the character to the small texture details in the scene came together nicely to create a fun experience.

Beach SMatt (by Sam Holmes and Matt Ostil)

beach-smatt-img
Development clip of blendshape clouds being animated with pokeball in Unity
© 2018 AXS Studio Inc.

The studio is a little obsessed with Pokemon Go as is evident from Sam Holmes and Matt Ostil’s look inside a beachside Pokeball. Here, almost every part of the environment has a subtle combination of Maya and Unity-made animations to make this busy, confined space really come alive.

Sunflowers (by Stuart Jantzen, Man-San Ma and David Tran)

sunflowers-img
Clip of sunflower blooming and blinking using blendshapes in Maya
© 2018 AXS Studio Inc.

Stuart Jantzen, Man-San Ma, and David Tran built this wonderful sunflower simulation. The team came up with a creative solution for seamlessly transitioning between animations with different rigs and blends. Within Unity, each flower’s animation is then procedurally altered as they reach out for sunshine.

 

Finally, the teams met to reflect on their work, share tips and tricks, and discuss any roadblocks they hit along their journey. The challenge is over but our learning doesn’t end. Our goal was not to train our team on a technical pipeline because one perfect pipeline doesn’t exist. The diverse nature of our work requires creative problem solving, teamwork, and the ability to fail and iterate quickly.

 

I think we’re all eager for another challenge. What should we do? Any ideas for themes or skills to tackle?