Sakurai on Creating Games: Effects (11 Topics)

Masahiro Sakurai, the creator of the Kirby and Super Smash Bros. series, shares a wealth of game-development know-how on his YouTube channel “Masahiro Sakurai on Creating Games”. This article summarizes and restructures the content of that channel by topic.

That said, a summary is only an entry point. So much of the value — Sakurai’s own words, his real-world examples, his pacing, and the footage itself — can only be gotten from the videos. So please don’t stop at reading the article; I strongly encourage you to also watch the original videos embedded under each topic.

This category covers how to make visual effects — explosions, screen shake, and the like — that create a game’s feel. Here we bring together the key points of both videos in the “Effects” category (11 individual topics), structured in 2 parts following the 2 source videos. Each part opens with its explanatory video, so please watch along.

Part 1: The additive-color trap, staging explosions, screen shake, hit marks (#01–#06)

Effects are visual effects — like the sparks that appear when you hit an opponent. They look unremarkable, but whether or not effects exist makes a world of difference to a game’s feel. The knack of making them is discussed.

https://www.youtube.com/watch?v=4D-Lw7lFuD0

1. Don’t make it hazy

Effects are often drawn with additive color. You draw an effect like an explosion or flash and overlay it on the background additively, so the effect’s color adds to the background’s and approaches white. Unlike semi-transparency, the more you overlay, the more it looks the part.

But you mustn’t over-rely on additive-color effects. There’s a merit that even simple art looks the part, but that’s all. The whole thing goes hazy, and loses feel and contrast. Worse, it only stands out where the screen is dark. A game that stays dark the whole time just to show this off feels thin, too.

The recommendation is combining it with crisp effects. Add a firmly-drawn effect with polygons or solid art, and use that as a base. Smash Ultimate aims for a crisp anime style across effects in general. Since effects tend to get bright, deliberately mixing in dark ones makes them visible even on bright screens and adds contrast. There are many cases where it’s good to think about setting things off with their opposite, like adding straight lines to curves.

2. Make the character stand out

For the sake of impact, the character can get buried in the effect and become hard to see. Fairly common. In a 2D game it’s easy: raise the character’s display priority above the effect. No issue with the look either.

But in 3D space, especially non-overhead works, you inevitably get buried in effects. You can force the character to display in front even in 3D, but in most cases it causes depth-order contradictions and a poor impression. It’s a headache in Smash too, but they devise what they can within the possible range.

For example, when Cloud’s “Power Dunk” hits the ground, it’s drawn so the fighter is clearly visible even buried in the effect. In Terry’s up special, the central blue mountain has different heights on its back and front faces, so it doesn’t block the character — an idea usable in 3D games too. A Final Smash’s aura would normally bury everything, but they keep it from doing so. Other ways to make a character stand out include the concept of outlining.

3. Flash, explosion, lingering smoke

When you want to express an explosion, you tend to just have smoke waft up hazily and be done. Sakurai cites the 5-pattern pixel-art explosion of the 1984 shooter Star Force (Tecmo): a flash, then flame rising, becoming smoke and vanishing. A remarkably well-made explosion pattern for the era, and surprisingly few are thought through this much, he says.

Smash’s explosions have various patterns, but the thinking has a broad outline.

First a flash lights up instantly, telling you something fierce happened. But a purely white flash disappears against a white background, so mixing in something black is a key caution. Next, blast smoke bursts grandly from the center, and here the explosion’s quality is decided. Then black smoke takes the baton from the flame and heightens its dominance, and finally it settles. You want an explosion gone fast, but too short lacks feel, so let it fulfill its role. Reportedly, weaving in a flash midway changes the feel quite a lot. They also split ground and air explosions, and change expression for long-lasting explosions like the Smart Bomb.

4. Let’s look at it in slow motion

Effects flood you with all sorts of information in an instant, so they’re hard to catch with the eye. This installment, as a special edition, observes Smash Ultimate’s effects in slow motion, with no background.

Whatever you make, observing well is the shortcut. Slowing it down shows the motion well too, so it’s recommended in that sense as well. In fact, effects are usually sent quite quickly so they don’t catch the eye much, but try cutting them and it’s bland beyond compare. Being able to do the same action doesn’t make it the same game. On the premise of livening up the game, you’d want to fire out effects liberally.

5. Screen shake

Screen shake is perfect for expressing a big shock. Sakurai has favored it since Kirby’s Adventure. But it can make the screen hard to see, so beware overdoing it. There are roughly two methods.

One is to move the camera. The camera shakes in 3D space, but the distant view may not move much, so you need to think about how to move the focus point (the point the camera is looking at). The other is to move the rendered image. The whole screen, UI and all, shakes, but you must account for the possibility of black blanks appearing at the screen edges by however much it shook.

Smash’s screen shake is packed with ingenuity. You can set patterns like large/medium/small and continuous, and large/medium/small don’t simply scale but change the vibration pattern itself — vertical only, plus horizontal, an earthquake-like continuous shake, and so on. The shake’s size varies by zoom, tuned not to come out too big on stages with a narrow angle of view. The shake is made to be strong at first, then gradually settle, not spiraling but with a pleasant degree of randomness. In the old days, he sometimes jiggled the mouse around and based the motion on that. A game with no screen shake is quite bland. Since it greatly increases feel, it’s important to put care here.

6. Hit marks

The effect when you deal an attack to an opponent is called a hit mark. Sakurai’s works often go on the flashy side, basically comic-like expression. It can get weird with realistic types, so the balance is taken per work. The guard mark is a kind of hit mark too. Sakurai lists seven required conditions.

① Flashiness is to increase the joy. ② Contrast — thin fibers or being unclear via additive color are lacking. ③ Hit position — if the conversion of where attack box and hurtbox overlap is poor, it appears in a weird spot. Smash zooms out, so attack ranges are larger, which creates difficulty. ④ Combining elements — not just placing one piece of art but adding shockwaves, sparks, etc. — though too cluttered is a problem. ⑤ Not hiding the character too much is hard; lowering display priority can leave only the terrain, which doesn’t work well. ⑥ Duration — short for consecutive hits, longer otherwise. ⑦ Brightness variance — place dark colors too, so it’s visible whether the background is bright or dark.

Since most hit marks keep moving during hit-stop, you should make good use of the lengthened staging time. As a bonus, in Smash Ultimate, when the one hit operates during hit-stop, an effect showing the launch direction appears. It shows the rule that the one hit can nudge the vector a little — a highly unique display effect.

Part 2: Billboards, sword trails, scale, particle limits (#07–#11)

Where the first half was about “presentation” like explosions and screen shake, the second half centers on the techniques and constraints that support effects, like billboards and particles. How to get feel within limited processing load is discussed.

https://www.youtube.com/watch?v=tnwib5xUptc

7. Billboards

A billboard is a polygon (usually a flat quad) that faces the camera head-on. In Super Mario 64, the iron ball that rolls down the slope is composed of a single-image billboard with no animation. King Bob-omb, too, has eyes and crown as models but a black body that’s a billboard.

Why is this in the Effects edition? Because effects are mostly displayed as billboards. Freeze an explosion and move the camera and you can see its flat composition well. Flat quads are comparatively cheap to draw and perfect for expressing things with no substance, like explosions. Smash’s food items are traditionally billboards too, so moving the camera makes them look a bit odd.

Y-axis billboards (set to face the camera only in the Y-axis direction) are possible too, but mistakenly setting them on an effect can yield a thin sliver of art. In today’s fine games the presence of billboards is hardly felt, which makes them harder to grasp, so Sakurai wanted to summarize this here just in case.

8. Sword trails

The trail left when you swing a sword is called a sword trail. There may be no widely-used name, but we’ll call it that here. It was used heavily in 2D too, but 2D and 3D differ quite a bit. In Smash, beyond swords, punches and kicks also get something trail-like as an extension of blur.

There are roughly two methods. One is to generate polygons along the sword’s path, which is mainstream. Place the sword’s position at the tip and semi-transparent polygons at a lagging position, fading out — a common expression. When speed is high, just drawing the path is hard, and since it can be nearly invisible on the side-view screen, the motion itself is often fixed (a flat horizontal slash doesn’t work well). The other is to place a flat polygon, used for a high-speed sword swung in 1 frame, shown for just an instant.

Even when swinging the same way, trails vary. Lucina is standard blue; Marth, with his tip-strong trait, emphasizes the edge; Pyra has a fiery trail for a burning feel; Travis, with a beam blade, heightens its light-emitting quality — they’re made distinctly per character. Make a trail and you’ll see its difficulty. 3D especially takes effort including motion tuning, but without it the feel is completely different, so the effect when done well is big too.

9. Effects at the right sense of scale

This applies to characters and stages too, but you’d want to get the sense of scale right. In the Effects edition, especially with flames, a common one is a flame the same size as or bigger than the character looking like a candle or torch. A very common, snaggy point.

This means insufficient granularity in how it’s drawn. In supervision, Sakurai showed the granularity he wanted for a case where the flame from Pyra’s sword had become “like a candle.” Ingenuity like increasing the loop count of drawing flame as flame. Done properly it can eat texture capacity, but since effects keep moving, they don’t need to be very fine. Rough and fast is the point. This time it became all about flames, but of course it’s not limited to flames; giving the right sense of scale relative to the world’s size is the maxim of one who draws effects.

10. Flashing

Flashing is making the whole screen or a character flash. Things that light the screen can increase feel over a large area, and things that light a character can strongly express a state change. In the old days it was blinding, including blank displays, but lately regulations are strict so it tends to be gentle.

To light a character, additive color or unique lighting is common now. Additive color alternately and rapidly shows the normal color and a color with white added, making it flash. But there’s a problem: when colors get evened out, contrast drops — the same amount of color is added to dark and bright places, averaging it out. Flashing white can, conversely, become hard to notice on a bright screen.

So since long ago, flashing mixes bright and dark things. On a bright background the dark parts stand out and become visible. Smash Ultimate puts a shadow at the hit point, giving the flashing light and dark. In implementation, zooming out strengthens the degree of reflection — large areas flashing up close is no good. Smash’s white flashing represents invincibility frames; the yellow when thrown represents grab-immune time. Rim-light-style lighting is also a common expression for state change. It’s hard to handle since the look changes with an LCD TV’s response speed, but you’d want to master it to increase feel.

11. Particle limits

Effects that fly out in large numbers, like stars, are called particles. Including the billboards mentioned earlier, particles must be emitted with as little processing load and in as large numbers as possible, expressed with various ingenuity. Sakurai’s works have had particle-like expression since the original Kirby’s Dream Land; as machine power grows the constraints ease, but never reach zero.

There are mainly five tricks. ① Shorten the lifespan — more residue is nicer, but since you emit them one after another, you can’t keep them slow. The short life is covered with speed. ② Several on one strip — Steel Diver’s water is just several water drops drawn on a few strips. ③ Stagger the timing to limit the actual displayed count, and ④ stagger positions to avoid overlap (overlapping particles are a waste). ⑤ Make them a bit larger to use each billboard well. You can only aim for the maximum effect within what each game can allow.

Incidentally, the effect when you defeat an enemy in the original Kirby had no movement program or movement data — stars were placed by hand frame by frame, displayed consecutively by coordinate data alone. Explosions are composed of placement patterns only too. It eats data volume but runs light. Inhaling mixes black-and-white dots so it holds up against any background color. Old hardware had a culture of trimming, so you naturally learn thrift.

Summary

We’ve now gone through both videos and 11 topics of the “Effects” category. Finally, let’s recap the key points of each part (= each source summary video) by individual topic.

Part 1: The additive-color trap, staging explosions, screen shake, hit marks (#01–#06)

Part 2: Billboards, sword trails, scale, particle limits (#07–#11)

There’s a lot here, but I hope you’ll revisit it starting from whichever part caught your interest. Please also check out the related categories.