Wednesday, January 27, 2021

this...is....SISYPHUS! (using stellerator to embed playable atari games right in a web page straight from the files)

 I completed my third game for the Atari 2600 - SISYPHUS



More of a philosophical/existential joke than game, to be honest. You, Sisyphus, are condemned by the gods to roll a massive rock up a hill. 

Every time you fail, the rock gets a point.

(I made a mobile friendly web thing that played with the same idea before)

I used several community tools to pull this off - it's written in batari Basic (consulting Random Terrain's extensive documentation page)... I used my own PlayPal 2 and PlayfieldPal-bB for the graphics... my "IDE" was the Atari Dev Studio for Visual Studio Code, I used the Atari 2600 Label Maker for a semi-authentic looking frame (for some art I bought from shutterstock) In some ways the newest/most interesting tool was using the emulator Stellerator to put an in-browser version playable online

Christian Speckner, creator of Stellerator, actually uses my first Atari game FlapPing (née JoustPong) as an example embedded demo

Stellerator has detailed instructions, but isn't 100% clear on "how do I just make a simple webpage loading an external .bin ROM". The example demo embeds the ROM as a base64 string, but here is the javascript that includes an XMLHttpRequest to load the byte array from the .bin, my additions in bold.

        <script src="stellerator_embedded.min.js"></script>
        <script>
            {
                
                
                // Shortcut to avoid typing out the namespace
                const Stellerator = $6502.Stellerator;
                // Create the stellerator instance
                const stellerator = new $6502.Stellerator(
                    // The canvas element
                    document.getElementById('stellerator-canvas'),
                    // The URL from which the web worker will be loaded
                    'stellerator_worker.min.js'
                );
                window.addEventListener('resize', () => 
                     stellerator.isFullscreen() || stellerator.resize());
               (async function(){
                    const response = await fetch('../sisyphus.bin');
                    const image = await response.arrayBuffer();
                    const byteArray = new Uint8Array(image);
                    stellerator.run(byteArray, Stellerator.TvMode.ntsc);
               })();
                // Expose the instance for tinkering.
                window.stellerator = stellerator;
            }

                        
        </script>
The .js files are available in a zip file from the github page.
My Sisyphus embed page has minimalist HTML, the FlapPing Demo is a little more robust about resizing and with more instructions.



No comments:

Post a Comment