Stealing Game Animation Techniques to Engage Users

Celý článek

Today’s websites are overflowing with animations—often too many. They get in the way of the content and slow down our busy users. But at the same time: they’re wonderful. They bring websites to life, are fun to implement and can be incredibly impressive to show off. I think they’re great. Sorry impatient users.

The way I see it, the problem isn’t necessarily that websites have too many animations, but that the animations don’t vibe with the content they’re promoting. They’re out of place with their subject matter. They feel contrived and provide no additional value.

This is an article for web developers who want to get fancy-shmancy with the finest animations around, but don’t want to do it at the cost of annoying users. I’ll show you some of the ways I’ve personally used website animations while trying to annoy very few users. You might be thinking that “not annoying users” is a very low bar that I’ve set and well, uh.. hmm.. yes. Good point.

This is a topic I’ve somewhat stumbled my way into. I work as a web developer for an indie video game publisher called Devolver Digital. I, along with Vieko, make websites for these video games. While I’m primarily a dev, a good chunk of my job is to conceptualize and create designs. I once thought that design didn’t seem that hard, the truth is, as most of you probably know, it’s not that straightforward. It’s really, really hard.

When I first started making video game websites, I would sketch it out in a notebook. This would be fine, but then when I tried to implement the design in Photoshop, it just wouldn’t come together. I would restart from scratch and try again. It still wouldn’t work. Then I would try to skip the whole design step and jump into the code, hoping that the animations would bring it all together. The animations were cool, but it still wasn’t good enough. My design skills were lacking.

But then I figured out a way to fake it.

Now, when I show website concepts to my colleagues and clients for feedback, they tell me that I’m the best designer in the whole world and they send me cookies. They don’t know that I’m hiding a terrible secret.

I don’t know if I should reveal this secret. Web designers around the world are going to hate me. My colleagues will ask for their cookies back. OK—I ate the cookies. I’ll let you in on the secret. The secret is that…

I copy everything from video games.

I copy the colors, the buttons, the modal boxes, and even the core concepts and gameplay mechanics. I play the games (they’re fun), take screenshots, capture footage, and then I steal it all. Most important of all, I steal the animations.

While video games make for a perfect medium from which to burgle, I believe that people like you can also steal from your corresponding industry. While stealing from games helped me cheat as a designer, it was stealing the animations that really unlocked the full potential of each website.

It’s free real estate

We, at Devolver Digital, have a massive variety of games. Some are calming, narrative experiences, while others have very intriguing gameplay elements. Some have very simple visuals that hide deep secrets, and others are Shadow Warrior 3.

Each one of these games has a unique way of wiggling themselves into a player’s brain and setting up a cozy little living space. With each website, we attempt to replicate this brain connection and harness it. Modern web tech is at a place now where we can make websites that effectively engage our users into making this brain connection before they’ve even grabbed a gamepad.

So basically, we heist assets/animations/mechanics/everything from the game to give the user a glimpse at what it would be like to play it.

For example

I want to start with one of my favorite projects. It’s the website for a game called Olija. It’s about a harpoon-wielding hero exploring hostile lands to find his way home. The game has two core aspects. The first is its visual fluidity. The pixel size in its pixel art is fairly large, so it can be difficult to convey this game’s beauty without seeing it in motion. The second core aspect is its story. It feels like the game is based on a pre-existing book or TV series.

The goal for the website was to take these two core aspects, and entice the user to engage with them; to make them feel like a part of the story and to make them feel in control of the action.

I’m going to jump away from Olija for a second here. I should have mentioned this earlier. Websites have an aspect that gives them an advantage over most other media: they’re interactive (obviously). This is great because we can use this interactivity to get the user to engage with the site at a deeper level. This is key. We have a few tools we can use to make their experience more vibrant and memorable. These tools are things like mouse movement, mouse hovers, pointer down/up states, the scrollbar, and the keyboard. My favorite is the scrollbar. You’ll see it used often in my projects. I feel it’s the most intuitive to use and I like that it requires little thought or active energy from the user.

Back to Olija. One of the first things the user sees upon scrolling down is a movie-credits-like fade animation. It’s slow. It takes three viewport heights (300vh) to scroll through it all but it’s a critical part. It sets up the pacing and immediately shows the tone of the game. It’s a very simple animation but it was vital. The rest of the page felt much more natural once this section was extended and slowed down.

After the story sections, the user gets to dynamic screenshot-like sections. There’s one section in particular in which the hero runs across a lively forest backdrop. Showing a lighter moment like this one reinforces the epic-ness of the story and shows off the game’s unique style.

One of the trickier parts for Olija, is that pixel-art is based on sprite sheets. We can’t just animate an element’s transform properties to move it around the screen. We have to also animate its current position in the sprite sheet. Here’s a Pen that shows how we did it.

We took a similar approach with Ape Out. The game feels like an action movie. As the game’s title accurately describes, the player is an ape trying to escape from various scenarios. The idea for the accompanying website was to show a scene that had already been played out, letting the user imagine all the action that leads up to the final epic moment. Again, they control the pace of the camera that explores this scene with the scroll bar.

At first glance it might look like a 3D WebGL canvas, but it’s actually a lot of divs placed with a 3D transform where the corresponding perspective origin is updated based on the scroll position. Not sure if it’s any better or easier than using ThreeJS but it’s.. uhh.. doable. Here’s a barebones version of it in CodePen.

As a last example for story-driven experiences, I want to mention the Enter the Gungeon website. It’s a mix of the Olija and Ape Out ideas, but instead of trying to capture the game’s narrative, it attempts to celebrate the time players have spent with it. The goal was to slow down and let the user reminisce, then use this nostalgia to promote the Exit the Gungeon and House of the Gundead games.

Unique selling point

Sometimes games have a unique hook or gameplay element and the website is the perfect place to showcase it. A great example is Loop Hero. It’s a very simple game on the surface. The hero automatically travels along a looping path and fights the monsters they encounter.

The player controls the hero’s equipment and whether they abandon the path to return to the village. This made infinite looping a clear concept for the website. When the user reaches the bottom of the page they are seamlessly transported back to the top and the page resets. The scene in the viewport is exactly the same so the user is none-the-wiser.

There are a few other concepts on this site that are directly taken from the game. Once the user scrolls to the battle trigger area, the scrollbar is disabled (sorry, I know it’s bad) and they are forced to watch the battle play out. The hero and monsters each have health points, attack speed, and attack power values with random variance. This means that the battle outcomes are not hard-coded. Each time the user loops through the page, the background map is updated with new tiles to show how the game progresses and evolves.

One of my favorite features of the Loop Hero website is the fade effect between the top section and the looped road section below it. The game developer at Four Quarters sent me the shader code (written with help from @kartonnnyi) and the Perlin Noise image used for this effect. I can’t say I fully understand how it all works, but I was able to put it together with gl-react.

People with a deep understanding of how to write shaders have my deepest respect. I don’t think I’ll ever fully be able to wrap my head around them. The stuff at Shadertoy blows my mind.

Boomerang X and Shadow Warrior are similar websites that use gameplay footage as a direct way to show off the game. They both engage the user with elements connected with the background video. The Shadow Warrior website content shakes when there’s an impact in the video and blood slowly gathers on the menu/logos. The Boomerang X logo zips back and forth along with the game footage’s boomerang. The logo is further connected with the user by having it react to the user’s mouse position.

Alright, now let me tell you about Devolver Tumble Time. I think most web developers, upon being given the opportunity to make a website for this game, would feel an urge to replicate the tumbler mechanic. From first-hand experience, I can say that it’s not as simple as it looks. I knew that it was critical to get the tumbler to run as fluidly as possible, otherwise it would reflect poorly on the game and turn people away.

I started out with MatterJS. It seemed like the obvious choice. The tumbler is two-dimensional, so pick the most popular 2D engine right? Well, it turns out the tumbler isn’t 2D and I don’t think centrifugal force is a thing in MatterJS. I, like another soul before me, attempted to hack it in. I tried to implement their attempt unsuccessfully.

To get the tumbler to work, I needed two directions for the gravity. The items should fall down the y-axis, but they also need to be able to “stick” to a spinning disc through gravity/friction on the z-axis. I spent a weekend refactoring the tumbler code in ThreeJS and achieved the desired fluidity.

Down into the abyss

I want to end this article with a somewhat deep-dive into the Phantom Abyss website. It encompasses a lot of the techniques used in recent projects and it only weighs 4MB.

The website might seem fairly barebones, but the longer the user looks at the page, the more there is to see. The shifting blocks and fading phantoms should be obvious, and then the user might see that the waterfalls are animated, along with some dust particles, the torches, the woman’s hair and whip, and then lastly the phantom’s eyes above the logo, a sparkle on some of the relics, and the fires and birds in the far background.

Now, I’m definitely not expecting many users to notice all these minor details, but they bring depth to the page. They engage the user into subconsciously understanding that the game holds secrets and depth.

This is the first project on which I used SVGator, a really neat tool for animating SVGs. I used this for the torches, the woman’s hair/whip, and the phantom’s blinking eyes.

The torches were not easy. My first attempt looked like creepy wild tentacles reaching out to grab whatever they could find. My second attempt was better but not quite there. My third attempt still wasn’t good enough, but adding blur and some sparks brought it to the point where it is today. If you look very closely the torches still look a bit like tentacles. In my next project I saw that the key-art featured a lot of tentacles. I knew what I had to do.

Start inside

These are just a few of the examples of animation tricks we’ve used on websites. Devolver Digital has a never-ending catalog of games and from that site you can check out other websites we’ve made. Ragnorium, Heave Ho, and Gato Roboto are some of our sites that stole a lot from their games. Also, full credit to Vieko as he was the original game animation burglar with his sites for Minit and Sludge Life.

Our sites are mostly all hosted on Vercel ❤ with NextJS 👌. We also rely heavily on Framer Motion 🤩 and often react-three-fiber 🎆. There are dozens of alternative tools that are also great but we love these ones and they’ve made our lives much easier.

Today, we developers have access to an immense set of tools and techniques with new ones being announced all the time. It’s very easy to get caught up in what other talented devs are doing and we then try to replicate their effects. This isn’t necessarily a bad approach, but it can lead to being closed-off and repetitious. This causes us to then create animations that users have already seen dozens of times.

Instead of looking at other devs and their work for inspirational animations and transitions, we should look at the content and subject matter we’re showcasing. Invent completely new animations. We should take a step back and really contemplate how we can engage the users to connect with our websites and deepen their experiences.

The post Stealing Game Animation Techniques to Engage Users appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.