Stealing Game Animation Techniques to Engage Users

Modern websites are awash in animations – often, too many. They can clutter content and frustrate users. Yet, animations possess undeniable charm; they breathe life into websites, are fun to create, and can be incredibly impressive. The issue isn't necessarily quantity, but rather the relevance of animations to the website's content. Poorly integrated animations feel forced and add no value.

This article targets web developers aiming to incorporate sophisticated animations without alienating users. I'll share techniques I've used to create engaging animations while minimizing user frustration. You might think "not annoying users" is a low bar, and... you'd be right.

My approach is somewhat unconventional. As a web developer for the indie game publisher Devolver Digital (collaborating with Vieko), I'm involved in both development and design. Initially, I struggled with design. Sketches rarely translated well to Photoshop implementations, leading to countless restarts. Attempts to bypass design and jump straight into code, relying on animations to compensate, proved equally unsuccessful. My design skills were lacking.

Then, I discovered a shortcut.

When presenting website concepts, my colleagues and clients rave about my design skills (and send cookies – which I ate, sorry!). My secret?

I borrow heavily from video games.

I emulate game colors, buttons, modal boxes, core concepts, and even gameplay mechanics. I play the games (they're fun!), capture screenshots and footage, and then… I adapt elements. Most importantly, I adapt the animations.

While video games offer a rich source of inspiration, this approach can be applied across industries. For me, adapting game animations unlocked the full potential of each website.

A Goldmine of Inspiration

Devolver Digital boasts a diverse game library: calming narrative experiences alongside action-packed titles; visually simple games with hidden depths, and games like Shadow Warrior 3. Each game uniquely engages players, creating a memorable experience. We aim to replicate this engagement on our websites, leveraging web technology to forge a connection before users even touch a controller. We essentially "borrow" assets, animations, and mechanics to offer users a taste of the gameplay.

Case Studies

Let's start with Olija, a game about a harpoon-wielding hero. The game's visual fluidity and narrative depth were key aspects to highlight. The website needed to entice users, immersing them in the story and giving them a sense of control.

Websites offer an advantage: interactivity. We leverage this through mouse movements, hovers, scrollbars, and keyboard input. I favor scrollbars for their intuitive nature.

Olija's design includes a slow, movie-credits-style fade animation spanning three viewport heights. This sets the pace and tone. Subsequent sections, including dynamic screenshot-like elements (like the hero running through a forest), reinforce the story and showcase the game's style. Animating pixel art, based on sprite sheets, required animating the sprite sheet position alongside transform properties.

Ape Out, with its action-movie feel, inspired a website showcasing a completed scene, letting users imagine the preceding action. The scrollbar controls the camera's exploration. While it might appear to be a 3D WebGL canvas, it's actually cleverly positioned divs with 3D transforms.

Enter the Gungeon's website celebrates player experiences, using nostalgia to promote related games.

Unique Gameplay Elements

Loop Hero, with its simple yet engaging gameplay loop, inspired an infinitely scrolling website. The scrollbar is temporarily disabled during battles, showcasing the game's progression. The battle outcomes are dynamic, adding replayability.

Boomerang X and Shadow Warrior websites directly integrate gameplay footage, creating interactive elements. Shadow Warrior's content shakes with in-game impacts; Boomerang X's logo mirrors the in-game boomerang's movement.

Devolver Tumble Time's tumbler mechanic presented a significant challenge. Initial attempts using MatterJS failed; ultimately, ThreeJS was used to achieve the desired fluidity.

A Deeper Dive: Phantom Abyss

The Phantom Abyss website, weighing only 4MB, showcases many of these techniques. Subtle animations (shifting blocks, fading phantoms, animated waterfalls, dust particles, etc.) add depth and subtly suggest the game's hidden complexity. SVGator was used for animating SVGs (torches, hair, eyes).

Inspiration from Within

These examples highlight our approach to animation. Devolver Digital's diverse game catalog provides endless inspiration (check out Ragnorium, Heave Ho, and Gato Roboto). Vieko's work on Minit and Sludge Life also exemplifies this approach.

We primarily use Vercel, NextJS, Framer Motion, and react-three-fiber. While many other tools exist, these have simplified our workflow.

The abundance of tools and techniques can be overwhelming, leading to imitation rather than innovation. Instead of focusing on replicating others' work, we should prioritize creating animations deeply connected to the content itself, forging unique and memorable user experiences.

The above is the detailed content of Stealing Game Animation Techniques to Engage Users. For more information, please follow other related articles on the PHP Chinese website!