Company
Design Lead
Designer
Motion/Video
Production
Additional Art
Forged in the Barrens represented Hearthstone’s 20th major card set. This project was created for a livestream that broadcast concurrently across both Twitch and YouTube on March 12, 2021, just ahead of the set’s release.
Live Broadcast
The talent for the live broadcast (which can be viewed adjacently) was as followed:
- Liv Breeden, Lead Game Designer
- RegisKillbin, Hearthstone Content Creator
- Chris Sierra, Community Manager
Let's Break it Down...
Process is important. Below is a breakdown of how I approach what I considered in 2021 “the standard” package for livestream content. In retrospect, if I had to do it over again today, other than adding animated transitions between shots, and potentially a live chat “featured question” option, I would still approach the project very similarly.
Pre-Show
While the video may appear to be a bit strange to the lay person, the strategy was to have the channel go live 30 minutes prior to the actual announced time. This would inform subscribed users that might not have seen the social posts that the channel was live, allowing them to tune-in and see that content is coming, which ensured for the maximum viewing concurrency at the actual live marker, and beyond.
Additionally, it had the added benefit of allowing for behind the scenes to work out any additional technical kinks that may arise prior to switching to live camera talent. In terms of content, everything prior to the 15-minute marker was just meant to hold engagement for those that decided to stay on the channel through light 2.5D animation and slow unveiling of a “story.”
This strategy was profoundly successful, creating both a more stable stream experience, as well as seeing a roughly 20% jump in viewing numbers with longer watch times over previous strategies.
Storyboarding
- The storyboard, design/layout, and blocking were all created by me.
- We again partnered with the Liquid Advertising Agency on this project due to the time table involved in implementation. As always, they were hugely instrumental in achieving the final look seen in the live product below.
Live Product
- 00:00 – ESRB
- 00:07 – Countdown fade-in
- 10:20 – Orc revealed; Quillboars galore!
- 14:40 – Smash cuts, thematic hints
- 15:50 – Official countdown begins (stylized frame and map of the Barrens)
- 18:00 – Gettin’ lost
- 22:00 Guff Runetotem (✨MAGIC ✨)
- 25:00 Caravan arrives in view
- 30:00 Logo slam
Lower-Thirds
Prior to the pandemic, all livestreams at Blizzard were conducted on-site in one of the various studios setup for filming. This was the third, and arguably most successful card reveal stream attempted during lockdown. As a result, the standard lower thirds (which could be observed in many earlier livestreams) needed to adapt to multiple camera outputs, while still maintaining a high visual quality and overall presentation.
Static
This was the initial pass at the overlay. Since this was the third time displaying multiple cameras, the iteration and adjustment in this phase was very small.
Animation Test
After approval of the static image from the Design Lead, Art Director and various stakeholders, I moved on to animation.
Overall, this is a pretty simple 3D parallax, with light movement scattered about for additional visual interest (clouds and chimney smoke at the top, larger undefined sparks and smoke at the bottom to draw the eyes to the lower thirds entrance), but keeping it subtle to ensure the focus remains on the on-camera talent throughout.
Live Product
It shimmers. It shines. It works!
Main Game Overlay
Talking heads are all well and good, but for a game to drive interest and excitement, it requires getting hands on with the product itself. For these needs, the main game overlay was created.
Fairly simple in layout and execution, it’s setup to allow for three camera ports, but the Community Team opted to let Chris step back, allow Liv and Regis to drive this part of the show and ensure the pre-purchase bundle was in the forefront throughout the show.
Static
I created the camera overlay based on rough elements from the Hearthstone game files, updated with thematic elements associated with the featured expansion.These were then adjusted in Photoshop roughly, based on zone blocking, and then a near complete paint over was done to achieve compositional and stylistic harmony.
Finished static pre-purchase and logo content in the middle-left were mocked-up and sent out for approvals before animation passes began.
Animation Test
Since less is often more, I really wanted the star of this portion of the livestream to be the game itself, and thus (as mentioned above) only the logo and pre-purchase elements were animated.
Once given the okay from all involved parties, I went in-game, staging assets individually with the Unity client, and then captured running in a sandbox environment. These assets were then taken into After Effects where I could adjust and loop as necessary, and then integrated into overlay seen here.
Live Product
Simple, yet effective.
Outro
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Live Product
As a callback to the transition from the 30-minute mark of the pre-show with a thematic framing lightly animated over top to create an established end-cap to the overall presentation and ensure the audience has an avenue of feedback.
Although in hindsight, I would have included the social identifier here to make it clear that Twitter/X was the intended destination, I’m still mostly happy with the simple execution.
Technical Difficulties
While you hope the time never comes to need it, luck always favors the prepared. for these projects, I felt it best to keep it simple, focusing on a low-bandwidth, easy static overlay that could quickly be swapped-to in the event of an unforeseen circumstance.
