← @shaktool Twitter archive

John Nesky

@shaktool

I made a reference chart for ways to design environment art for solid boundaries of 2D video games! For indoor scenes, we don't draw the front wall so you can see the avatar, but what should other walls look like? There's no one right answer, but the choice impacts the art style!

1/17/2022, 11:07:04 AM

Favs: 29549

Retweets: 5613

John Nesky

@shaktool

Here's what I perceive to be the different types of 2D solid walls based on how they answer the above question, all in one big image with a bunch of examples from video games to show you what each option means in practice. Next, let's look at them one by one.

1/17/2022, 11:07:05 AM

Favs: 4919

Retweets: 1085

John Nesky

@shaktool

"Modular Blocks"

When the tiles that make up the solid structures aren't always visually connected to adjacent tiles.

Abstract, "videogamey", easy to draw & arrange, hard to explain. Good for Metroid's secret destructible blocks.

1/17/2022, 11:07:07 AM

Favs: 477

Retweets: 31

John Nesky

@shaktool

Flat Façade

A basic material lit from the front. Looks like an ant farm. Tilemap editors can automatically select edge tiles.

1/17/2022, 11:07:08 AM

Favs: 315

Retweets: 17

John Nesky

@shaktool

Jutting Floor

When there is a separate visible floor material that visually extends or drapes over the structure underneath it.

Same as Flat Façade but commonly used to distinguish walls vs floors. Implies a ledge or balcony.

1/17/2022, 11:07:09 AM

Favs: 291

Retweets: 16

John Nesky

@shaktool

Surface Layer

When there's a distinct boundary surface material and one or more deeper materials.

Despite facing the camera, the "surface" suggests how the avatar might see it. Maybe there are secrets beneath!

1/17/2022, 11:07:10 AM

Favs: 273

Retweets: 17

John Nesky

@shaktool

Deep Shadows

When the material gets darker and darker as it gets further from the boundary surface, losing definition and becoming a flat shade.

A compromise for depicting the surface without depicting the solid interior. Good for dark caves.

1/17/2022, 11:07:11 AM

Favs: 297

Retweets: 16

John Nesky

@shaktool

Silhouette

When the area beyond the solid boundary is a completely flat shade.

No visible light hits solid interiors. Easy to draw. Good for small, enclosed spaces. Built-in contrast. Not much character.

1/17/2022, 11:07:12 AM

Favs: 275

Retweets: 15

John Nesky

@shaktool

Perspective

When the solid boundary surfaces are depicted from a 3D camera's point of view.

Natural for 3D graphics. Great for screen-sized rooms, bad for narrow twisty passages. Hard to judge collision.

1/17/2022, 11:07:13 AM

Favs: 268

Retweets: 13

John Nesky

@shaktool

Fake Perspective

When solid boundary surfaces are drawn as if they were 3D, but without a consistent point of view such that all such surfaces are visible.

Can show the surface from the avatar's perspective regardless of where the camera is. Looks weird.

1/17/2022, 11:07:14 AM

Favs: 270

Retweets: 13

John Nesky

@shaktool

Wide Open Space

When all solid structures are drawn as seen from the outside, possibly including perspective.

If there's no wall between the camera and the avatar, you might as well draw stuff how a camera would actually see it!

1/17/2022, 11:07:15 AM

Favs: 276

Retweets: 13

John Nesky

@shaktool

Thin Walls

When solid structures have little depth, leaving empty space beyond them.

Artificial structures use materials efficiently. Try not to distract the player with outside places they can't visit!

1/17/2022, 11:07:16 AM

Favs: 259

Retweets: 14

John Nesky

@shaktool

Another way to deal with the front wall, not addressed above, is to "cut out" or "fade out" the front wall when the player finds a secret path behind it, at which point the area behind the wall must be drawn in one of the above styles. (Or just make sure the occluders are small.)

1/17/2022, 11:07:17 AM

Favs: 306

Retweets: 20

John Nesky

@shaktool

Also not addressed above is the concept of "one-way" platforms that the avatar can stand on top of as well as in front of, but I guess these would fall under the "wide open space" category in the sense that you can just draw them the way the camera would see them from the front.

1/17/2022, 11:07:17 AM

Favs: 171

Retweets: 7

John Nesky

@shaktool

When designing your art, pay attention to shadows and contrast between solid walls and backgrounds to make scenes more readable, and don't let the details get too "busy"! Parallax can help too, but doesn't screenshot well.

1/17/2022, 11:07:18 AM

Favs: 155

Retweets: 6

John Nesky

@shaktool

So what do you think? Did I miss any other approaches? Do you know of any other good examples or tutorials?

1/17/2022, 11:07:20 AM

Favs: 87

Retweets: 3

John Nesky

@shaktool

Fun fact: I gathered 750 MB of reference screenshots over a week or two to prepare for this thread, from which I further curated the illustrative examples you see above.

1/17/2022, 10:23:07 PM

Favs: 102

Retweets: 2

John Nesky

@shaktool

Thanks for appreciating my specific brand of nerdhood everyone! I feel vindicated for procrastinating on other projects to spend my free time classifying how 2D artists choose to convey the absence of the fourth wall.

    1/17/2022, 11:05:57 PM

    Favs: 132

    Retweets: 3

    John Nesky

    @shaktool

    Tying up some loose ends:

    Several people have pointed out that I'm conflating perspective projections and orthographic projections. I hope you'll forgive me!

    Also, I didn't explicitly say this at first, but as you may have seen, these styles are not mutually exclusive. Go wild!

    1/18/2022, 5:12:02 PM

    Favs: 41

    Retweets: 0

    John Nesky

    @shaktool

    @Eierprut I also want to point out the superfluous details in Super Metroid. Honestly the art style isn't as "nice" as Fusion and Zero Mission, but I like how these decorative tiles suggest possible hidden paths could be lying beneath any surface! Which details are red herrings or secrets?

    2/8/2022, 12:47:49 AM

    Favs: 15

    Retweets: 2

    John Nesky

    @shaktool

    @Eierprut A bunch of folks retweeted this with "Tag yourself, I'm Deep Shadows." Well, I think I'm mostly team Flat Façade, but I feel like I did it a disservice by calling it flat. It's allowed to be interesting looking!

    I think these examples from "Wario Land: Shake It!" are fantastic!

    2/12/2022, 10:35:43 PM

    Favs: 12

    Retweets: 0

    John Nesky

    @shaktool

    I guess I'm showcasing good environment art now! Here's Rayman Legends, it has mostly 2D env art but it uses fake perspective and foreground/background parallax to imply a 3D space, including both wide open spaces and interior spaces.

    https://youtu.be/AMKFoBZiFHA

    2/13/2022, 7:35:15 PM

    Favs: 12

    Retweets: 2

    John Nesky

    @shaktool

    Ori and the Will of the Wisps looks pretty great! The interior environments use deep shadows, but with lighting effects that react to the glowing player avatar.

    2/13/2022, 8:41:48 PM

    Favs: 17

    Retweets: 1

    John Nesky

    @shaktool

    Kirby 64 (and Klonoa!) are side-scrollers with wide open spaces. The downward-tilted camera avoids bumping into the ground. The game draws shadows under airborne objects to indicate their height. Also note how Kirby can follow curved or circular paths!

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

    2/21/2022, 11:19:10 PM

    Favs: 14

    Retweets: 1

    John Nesky

    @shaktool

    Playdead's Inside is a very different side-scroller with wide open spaces, although dark foreground objects sometimes create silhouettes occluding the avatar. The camera transitions from room to room by quickly moving through walls without interruption.

    https://youtu.be/NP4AuKdb_dA

    2/25/2022, 10:49:58 PM

    Favs: 7

    Retweets: 1

    John Nesky

    @shaktool

    Playdead's Limbo uses the silhouette style... but I wanna highlight Insanely Twisted Shadow Planet instead! I haven't been kind to silhouettes in this thread but this game does a great job creating interesting shapes out of them!

    https://youtu.be/OY2zGNbjjvY

    2/26/2022, 11:01:17 AM

    Favs: 10

    Retweets: 0

    John Nesky

    @shaktool

    A Link to the Past obviously uses fake perspective for interior walls, but building exteriors and most objects use a simple orthographic projection. Trees and ledges form outdoor boundaries. The pyramid scene has a horizon despite the camera angle!

    https://youtu.be/Z6hjG6MCcZ8

    2/26/2022, 12:24:39 PM

    Favs: 11

    Retweets: 0

    John Nesky

    @shaktool

    Flashback's orthographic projection is, unusually, angled sideways! This visually preserves precise vertical distances while adding depth to the world. Door frames and platform railings are rendered in front of the avatar.

    https://youtu.be/C5cu5h_150Y

    2/26/2022, 2:09:08 PM

    Favs: 8

    Retweets: 1