https://zlg.space/2025-08-22T00:00:00-07:002025-08-22T00:00:00-07:002025-08-22T00:00:00-07:00ZLGtag:zlg.space,2025-08-22:/c/work/rf-sm-layout.html

<p><a href="https://zlg.space/images/rf_sm-layout.png"><img alt="A stream layout based on Super Metroid's look and feel" src="https://zlg.space/images/thumbs/rf_sm-layout_thumb.png"/></a></p>

<p><a href="https://zlg.space/images/rf_sm-layout.png"><img alt="A stream layout based on Super Metroid's look and feel" src="https://zlg.space/images/thumbs/rf_sm-layout_thumb.png"></a></p> <p>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.</p> <p>My client wanted to make a layout based on <em>Super Metroid</em>, after seeing the <em>Zelda II</em>-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.</p> <h2>Planning and Preparation</h2> <p>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.</p> <p>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. <em>"This is why there isn't a thorough tileset for this game,"</em> I thought.</p> <p><em>Super Metroid</em> 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, <em>gathering the graphics to build this was a huge task</em>. 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 <em>Super Metroid</em> contains, and the unclear arrangement of how they fit together.</p> <p>This was also only the <em>second</em> 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.</p> <h2>Building</h2> <p>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.</p> <p>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 <em>and</em> felt true to the feel of <em>Super Metroid</em>.</p> <p>It was the <em>Metroid</em> 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!</p> <h2>Automation</h2> <p>I made this layout after the <em>Zelda II</em>-inspired layout, so I leaned on some new animation skills in Javascript and <code>&lt;canvas&gt;</code> 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.</p> <p>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.</p> <h2>Conclusion</h2> <p>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.</p> <hr> <p><em>This stream layout has animated browser sources, which are not displayed in the thumbnail. To see it in action, <a href="https://twitch.tv/reaperfae">visit my client's stream</a> during a Super Metroid run!</em></p> <p><em>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.</em></p>