ZLG - Stream Layout

ZLG's Majora's Mask-themed Stream Layout

2025-11-06T00:00:00-08:00

This is a stream layout inspired by The Legend of Zelda: Majora's Mask, one of my all-time favorite games. It's a game about friendship, loss, forgiveness, and finding courage to heal.

Early in the game is a scene that punched me in the gut, and has stuck with me over the years. It depicts the Skull Kid shivering in the rain under a log in Termina Field, with the fairy duo, Tatl and Tael.

That scene touched my heart because of the idyllic nature of how we sometimes meet friends in life. Skull Kid met the fairies after causing trouble in Clock Town and being cast out. Although the Skull Kid was still was overtaken by the mask he stole, his friendship with the fairies is ultimately what brings him back from the brink of Majora's total control. Tael stuck by him despite what he had become, and Tatl joined forces with Link to save him from the mask. Despite it all, they stayed friends and went back to Hyrule together.

Planning

Accuracy was important to me in composing the scene. I played through the game until I was able to exit to Termina Field, then moved Link around until things looked close to what I wanted.

Both exits (Southern Swamp, Romani Ranch) are obscured, to not take away from other elements in the scene. The perspective is ideal because it shows the height of the posts leading southward at good perspective, and makes the hollow log appear larger. I wanted to emphasize depth while filling space on the canvas. A lower vanishing point will do that.

What started as a fun "what if" sketch has become the coolest overlay I've made thus far. I've leaned on my OBS knowledge, plugin knowledge with Elomeno_'s help, pixel art knowledge, HTML and CSS, general programming, and color design. Knowing how to make each asset in a way that can be mixed with other assets to remix them is important, too. I leaned on a tiling trick to make the backgrounds seamless so they can scroll, too.

The layout as it stands is every single idea that was both feasible and workable. At first, I only wanted an overcast sky and some rain. The idea ran wild in my head for a few weeks while I was producing the base, and eventually it hit me to have day and night. Then I needed a way to shade the entire scene for the clouds. During the tweaking of that, it hit me that I could also swap clouds, and rain, in and out! I could vastly increase the number of states that the layout could be in (increasing the visual appeal) while only messing around with a handful of layers.

Building

I decided to use GIMP as my editor, mostly because I was already familiar with it, and I wanted to gain more mastery, such as making or using custom brushes, learning texturing techniques, and so on. My tablet was already picked up by it and had a number of preset dynamics that seemed Good Enough, so work started on it.

Automation

Once I completed the initial scene for the layout, I wanted to add some dynamism to it. Rain and a night/day cycle would be ideal for this, because they can fade a source in and out.

That's when I began workshopping with Elomeno_ on motion and transitions. Between the Move plugin and Advanced Scene Switcher, we arranged something that creates the "weather script" for lack of better phrasing.

To do it, I put together a spreadsheet acting as a sort of Gantt chart to represent the 'tracks' of transitions, similar to a video editing program. That helped me visualize what the script should be like in numeric terms, since each column represented a single minute. Aligning the script requires precise delays and durations, so it took a lot of experimentation to get things lining up.

After an hour or so of thorough checking and re-checking, and watching the sequence, I'm really satisfied with what has been put together.

Result

Perfectionism is something I struggle with. I spent over a month working on this layout, partly for the vision, but also to challenge myself. It feels really weird to say I'm happy -- truly happy -- about something I've made. I can stand next to this and boldly say, "It's good." That matters to me.

Looking back, there are still things I could include or improve, but that's true of any creative process. They're simply lessons to apply in the next project.

ReaperFae's Super Metroid-themed Stream Layout

2025-08-22T00:00:00-07:00

Making stream layouts based on a game's original graphics can be difficult, depending on what you're aiming to do with them, and how you're gathering the graphics. Typically, this is done using emulators, which have ways to take screenshots, grant access to the emulated system's RAM, toggle graphical layer visibility, or show the current sprite and tile sheets.

My client wanted to make a layout based on Super Metroid, after seeing the Zelda II-based layout I made for myself. They wanted their username styled the same way as the game's title screen, too. After explaining a couple particulars and caveats to the contract, I got to work.

Planning and Preparation

Leveraging these technical features, I gathered the source data by painstakingly visiting every major area of the game that I needed to gather graphics from, and taking screenshots or exporting tiles as I went. I had looked on the Web for other sources of these tiles, but none of the collections I found were complete enough for my purposes, so I was forced to gather them myself.

I was mid-way through the project, when I noticed that the tilesheet also needed its palette selected correctly, or things wouldn't display correctly. Some tiles were animated via palette changes, as well, necessitating more screenshots and exports. "This is why there isn't a thorough tileset for this game," I thought.

Super Metroid is a technical marvel for the Super Nintendo. It employs a minimum of 4 layers of graphics, and supports things like gradients, alpha transparency, palette rotation and swapping, screen-wide palette changing, parallax scrolling, screen-wide wavy effects, the works. All this to say, gathering the graphics to build this was a huge task. I'm not sure I would have taken the job if I wasn't interested in building one for myself, due mostly to the sheer number of tiles that Super Metroid contains, and the unclear arrangement of how they fit together.

This was also only the second project I had put together using a new tool I was learning: Cosmigo's ProMotion NG. While a capable editor, it has some quirks and edge cases that made building this particular layout less ideal than a "normal" image editor, due in no small part to the limit in palette size.

Building

It took lots of experimentation to learn the "convention" of how the tiles went together in their world. The general goal was to create a microcosm of impactful or cool areas of the game (according to my client's taste) and make a new logo for their username, in the same style of the game's title screen.

When it came to the logo, I was excited to flex my pixel art muscles instead of moving a bunch of tiles around that I couldn't change. It was fun to learn how Nintendo designed their art, and to follow in their style to create a logo that represented my client and felt true to the feel of Super Metroid.

It was the Metroid series that made me appreciate the combination of red, yellow, and purple. So, building a look-alike logo leaning heavily into those colors was a good practice session. It's truly difficult to convey perspective and depth at that resolution, and it came out looking good!

Automation

I made this layout after the Zelda II-inspired layout, so I leaned on some new animation skills in Javascript and <canvas> to put together a few garnishes with the rest of our budget: the Baby Metroid inside the capsule, and Samus going up and down an elevator. They added a little dynamism to the layout that I'd like to build on some day, if we revisit it.

Much respect to the original Deer Force team (Intelligent Systems, today) who built the game. Over 30 years later, it is still a beautiful game to look at and study.

Conclusion

My client was very pleased with the result, as well as their community. It was a project that pushed my technical and artistic skills, which I always appreciate.

This stream layout has animated browser sources, which are not displayed in the thumbnail. To see it in action, visit my client's stream during a Super Metroid run!

DISCLAIMER: The original game tiles belong to Nintendo Co., Ltd. I was paid to make an original logo for my client in the style of Super Metroid's title screen. The only ownership expressed here is over the layout design itself and the original logo, made by me.

ZLG's Zelda II-themed Stream Layout

2025-08-09T00:00:00-07:00

When I received ProMotionNG as a gift, the first thing I wanted to explore was its color bit-depth and tiling capabilities. I was trying to come up with something new to do for my stream, and the first thing that came to mind was a new layout. I wanted to use a game that you don't see represented often in stream layouts, but was a good showcase of the game's flavor and what I personally like about it as a game.

I settled on Zelda II: The Adventure of Link. It's a "black sheep" within its own series, but it is still a good game and concept under the layers of jank and general lack of budget put into the game. I have always wanted Nintendo to come back to this game and give it a proper re-imagining, while remaining more-or-less faithful to the original. They'd done this before with Metroid: Zero Mission and Samus Returns, oddly both from the same franchise. Why shouldn't Zelda II get a modern Metroidvania re-imagining? But I digress.

To some extent, this layout was an experiment, of sorts. I went into this project wanting the answer to a few questions:

Is ProMotionNG something I can lean on for professional work?
Can I leverage my prior Javascript and PICO-8 knowledge to animate in a browser source?
Can I produce layouts that are fun and legible?

Planning

Before I began any brainstorming, I wanted to break down what a stream layout really is and what it typically consists of. This is a broad question to ask, because everyone's stream is a little different. Some people do anonymous follow acknowledgement, others want to shower the follower in attention and welcome them. Some streamers want to show chat on screen, some don't. You get the idea. But, to build a layout, you need to account for these differences in preferences, and make things in a composable or movable way.

I started with a sort of template or blueprint for myself, aligned to a 16x16 grid. The core elements my layout takes into account are:

Logo
Stream Title
Video Capture (i.e. "the content")
Webcam/VTuber
Reactiv Fugi or other VC participant overlay
Stream Goals
Accolades (last subscriber, follower, bit contributor)
Chat Box

From the beginning, I knew I wanted a sort of "town" along the top, the curtained area in the top right, and some representation of every dungeon's tileset, on the way down to Thunderbird. I also wanted contrast in the layout instead of all blue sky, red caves, or darkness.

In the bottom right is where miscellaneous widgets and other things go, so I used that area as level design experimentation, and settled on an underwater ruin -- something that wasn't actually in Zelda II.

Building

ProMotionNG has support for tilesheets, which you can use to build scenes in the editor, much like you would in an actual video game. It takes some finagling with modes, but it's doable.

It was hard for me to keep track of layers when I was building. One idea would lead me down the road to another layer, and I'd come back to another task and screw it up. I was still gaining familiarity with the tool, though, so that's to be expected.

Along the bottom, I gave myself space for the accolades; essentially just acknowledging the last people who contributed to the channel in some way. Some people really like to see their username in these fields, because it gives them a sense of contribution and belonging. I like to promote this, so I wanted each accolade to have its own theme and NPC association. I set up browser sources with both StreamElements and Firebot for the usernames, so some tweaking of fonts and coordinates was necessary.

The lavafall was sort of a cop-out, because there wasn't much room to do something impactful. It wasn't going to lead anywhere, and it's in the space that would be covered when a 16:9 source is visible. So, I made a drop-off with the tiles the game had, and set up a sort of platform that maybe people would be flung into. I mean, there's a giant hole near the King's Tomb, so it's not unlikely for there to be holes all over the place! Hah!

Along the left side, I wanted to have one floor per dungeon style, and culminate in a room containing the Thunderbird and the last piece of the Triforce. On each floor, I wanted the dungeon's primary item, and a notable enemy from that dungeon that would be easy enough to program its animation in Javascript.

Animating

Animating tiny pixel art on a giant 1080p canvas can be done with some crazy, giant GIF or other format, but realistically you should be taking the tiny graphics and doing things with them to animate. Why? It's easier to change if you mess something up, generally, and it can make parts of your workflow repeatable on other assets. Reusability is a virtue in asset production!

In an OBS environment, that means either hooking graphics up to plugins, or a browser source. I wanted something easy to use and share, for example if I made stream layouts for other people in the future. That calls for a browser source. Plugins are nice, but they can change between versions, their compatibility with OBS versions can change over time, and sometimes their developers lose interest in maintaining it or are pushed away from development because of some sort of drama. This makes a self-contained browser source a longer lasting artifact to use -- at least for animations -- and I can reasonably guide someone on extracting it somewhere and adding it to their OBS scene.

Coding

For starters, I do not like Javascript. It's the jankiest language I've ever used, and that's saying something because I also know PHP. Dealing with differences between Firefox and CEF was also a pain in the ass. That said, the <canvas> API isn't the worst thing I've seen. I chose that because the built-in animations API is for the curve-based presets that are also used by CSS. I had odd results when I tried to "just use the Animations API" like current advice indicates. When you're doing pixel-level manipulations or trying to re-create movement from a video game, you need to build the animation like a video game.

So, that's what I did. There's a function you can hook into that's tied to the refresh rate of the canvas element. That's effectively a frame, so I used that as my primary loop event, and built each animated entity as a simple object containing a few fields like x, y, current_frame, and so on. This is close to game development with PICO-8, since Javascript objects and Lua tables are similar. From there, all animation would simply occur in each object's update() method, and track state internally. No more image editing from here, it was all "update this sprite at this time" or "wait this many frames, and do this" in varying forms.

Flying or floating objects were harder to implement, partly due to unfamiliarity with sin() and cos() on an intuitive level. Some day I'll be able to abstract it in my head, but for now it was a lot of tweaking before I got something that resembled the original behavior. The Thunderbird in particular took a lot of iteration before I felt it was more than a static oval path.

Result

I'm largely happy with the result! It was a great learning experience, too. There's a lot of animation on the screen, the colors are bright, it's just solid for classic 4:3 gaming. It's not suited for every game, however, so I paired it with a transluscent Color Source so I can darken the scene for darker content. It retains the same look while giving it a "lights off" feel.

The answer to all three of my questions was "Yes," for what it's worth. :)

DISCLAIMER: The original game tiles belong to Nintendo Co., Ltd. The only ownership expressed here is over the layout design itself and the code used to animate sprites.