December 13, 2021

fundamental.sh - Bringing pixel art and spritesheet animation to react-three-fiber

Hi! You're receiving this email because you signed up to the fundamental.sh mailing list. It's been a while since my last post on programmatic animation with rxjs and this time we're trying something similar-but-different: frame by frame animation.

This post focuses on mixing pixel art with 3D on the web, but these same techniques apply to particle effects and animated textures of any kind. Hope you enjoy it!

Cheers,
Ben

---

Spritesheet animation and pixel art with aseprite, threejs and react-three-fiber

View full post in browser

I like pixel art. No matter how anti-aliased and raytraced modern games become there's something about pixelly low-res art that just grabs me. Is it nostalgia? Sure, a little, but it feels inherently fun in a digital way. Discrete rectangles of colour become tiny virtual beings and worlds to explore, just add a few drops of imagination.

I've been making games since I was a kid and, while I'm far from the best, I like to think I've gotten pretty good pixel art:

My game The Thin Silence, 2018

As I continue my research into modern HTML5 / webgl game development I naturally found myself asking the most important question: "how can I make this more pixelly?" In my current project I've become especially fond of blending pixel art and low poly 3D:

My current project The Song of The Fae, 2021

I've also been posting mockups in a similar style on twitter, there's something about this level of fidelity that I'm obsessed with right now. It allows for rich level design, retro vibes and it's possible for one person to make everything.

This style is actually quite easy to pull off in Unity, Godot, Unreal etc. but over the past 12 months I've increasingly felt that I want to turn my focus away from the encumbant game engines and towards the web. In my last post I wrote about approaches to animation for generative art and game development in the fantastic react-three-fiber.

So in this post I want to keep checking off my gamedev must-haves for the web and, for that, we're going to need some pixel art.

We'll cover:

• Rendering 2D images and pixel art in a 3D context

• Exporting and playing back spritesheet animations

• Exporting and importing rich Aseprite animation data

I'm not assuming any background in graphics programming in this post, but I am assuming you know Typescript, React and the essential hooks like useState and useRef.

Ideally I'd be able to include the entire post here so you can read from your inbox, but this one uses a lot of interactive examples to explain the concepts.

To keep reading, please view the full post on fundamental.sh.

Thanks for your support!

If you have any feedback, questions or just want to chat then please feel free to reach out on Twitter.

✌️ Ben