Welcome to the second installment of my code experiments! This time we're gonna look into the weird effect used in the background of messages in Ecco the Dolphin for the Sega Genesis (or MegaDrive, if you're asking someone outside the Americas). I got the idea from Twitter user @Foone who helpfully reverse engineered the game ROM (with Twitter user @Reaper_man02) to figure out how it works and wrote an implementation in Python. Then I went ahead and adapted it in p5.js.
Turns out it's pretty simple: there's a table in ROM, it's basically how much each line should be shifted in the x axis. Then for each frame we shift the values around so it looks like it's scrolling.
This function basically computes a table of offsets for the current frame by adding the line number with the frame number, mod 256. Then a bit of initialization code:
And now this is where it gets interesting. For each line we call the image function which crops a 320x1 portion of the image with the appropriate x offset we calculated earlier. Note that the original image is 384x224.
We can also completely forego the generate_for_offsets function and make it simpler:
Now that huge array is a bit unwieldy, maybe you can compress it? Sure thing.
From there, there's a lot of tricks to compress your code so it goes a bit faster. With that much code, we went from something that looks complex into something simple, which is pretty cool. Well, that's all for today, hope you learned a bit with that :)
All content owned by their respective owners: game, data and assets by Novotrade International, code by Foone and adapted by myself licenced under GPL3.
You've successfully subscribed to toasters rocks
Great! Next, complete checkout for full access to toasters rocks
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.