ruffle/web/packages/demo

ruffle-demo

ruffle-demo is an example of how to include Ruffle in your website. It also serves as a nice local test to run Ruffle in the web locally, for developers.

Using ruffle-demo

Hosted demo

To view this demo online right now, check out the hosted demo.

It's exactly the same code as this directory, updated nightly.

Run your own demo

After building ruffle-web, you can run npm run demo in the web folder to launch the demo.

It will start a local web server and print the address in the console. Navigate to that website (usually http://localhost:4173) in your browser.

Configuring the demo

The demo provides the ability to have a list of sample SWFs to choose from. This can be helpful if you have a list of useful SWFs to test through, and we use it ourselves to showcase Ruffle on various games or animations.

To use this, add a new file swfs.json in this directory. The contents should look like this:

{
  "swfs": [
    {
      "location": "logo-anim.swf",
      "title": "Ruffle Logo",
      "author": "Ruffle contributors",
      "authorLink": "https://ruffle.rs",
      "config": {
        "autoplay": "on",
        "backgroundColor": "#31497D",
        "letterbox": "off",
        "unmuteOverlay": "hidden"
      }
    },
    {
      "location": "swfs/bitey1.swf",
      "title": "Bitey of Brackenwood",
      "author": "Adam Phillips",
      "authorLink": "https://bitey.com",
      "type": "Animation"
    },
    {
      "location": "swfs/saturday_morning_watchmen.swf",
      "title": "Saturday Morning Watchmen",
      "author": "Harry Partridge",
      "authorLink": "https://twitter.com/HappyHarryToons",
      "type": "Animation"
    },
    {
      "location": "swfs/synj1.swf",
      "title": "Synj vs. Horrid Part 1",
      "author": "Dan Paladin",
      "authorLink": "https://www.thebehemoth.com",
      "type": "Animation"
    },
    {
      "location": "swfs/synj2.swf",
      "title": "Synj vs. Horrid Part 2",
      "author": "Dan Paladin",
      "authorLink": "https://www.thebehemoth.com",
      "type": "Animation"
    },

    {
      "location": "swfs/alien_hominid.swf",
      "title": "Alien Hominid",
      "author": "Tom Fulp and Dan Paladin",
      "authorLink": "https://www.newgrounds.com",
      "type": "Game"
    },
    {
      "location": "swfs/flyguy.swf",
      "title": "FlyGuy",
      "author": "Trevor van Meter",
      "authorLink": "https://www.heytvm.com",
      "type": "Game"
    },
    {
      "location": "swfs/marvin_spectrum.swf",
      "title": "Marvin Spectrum",
      "author": "Bryan Singh",
      "authorLink": "https://www.hotbryan.com",
      "type": "Game"
    },
    {
      "location": "swfs/wasted_sky.swf",
      "title": "Wasted Sky",
      "author": "Tom Fulp",
      "authorLink": "https://www.newgrounds.com",
      "type": "Game"
    }
  ]
}

Building, testing or contributing

Please see the ruffle-web README.