How to embed an Amstrad CPC 464 / CPC 6128 emulator in your website

For a long time, I've wanted to be able to embed an Amstrad CPC 464 emulator in my website, so that people can more easily play my Amstrad games.

Thanks to Andre Weissflog, that is now possible! He has created the tiny8bit emulator, which emulates the Amstrad CPC 6128 as well as the Commodore 64, Vic 20, and ZX Spectrum.

(If you're just looking for an emulator to download, see these instructions).

Try the online Amstrad CPC emulator

Now, if you'd like to step this way, you can try the Amstrad emulator I've embedded in my site here:

• Play The Further Adventures of Fred
• Play Anaglyph Aliens (an Amtix CPC type-in)
• Play BAS Invaders (an Amstrad Addict type-in)
• Play Alien Intervention (an Amstrad Action type-in)
• Play Gribbet (an Amstrad Action type-in)
• Play Wallbuster (an Amstrad Computer User type-in)
• Watch Fishtank (an Amstrad Computer User type-in)
• Play Misfit (from my book The Basic Idea)
• Play Paclone (an Amstrad Computer User type-in)
• Play Chords Tutor (an Amstrad Computer User type-in)
• Play 3D Mapper (an Amstrad Computer User type-in)
• Use the User Defined Graphics generator
• Reset the machine and program something yourself

You can download my Amstrad CPC games and utilities disc to use these programs in your favourite emulator.

How to embed the Amstrad CPC emulator

If you want to embed an emulator in your site, follow these steps. I've used the Amstrad emulator but similar steps will apply for other platforms too.

1. Download the tiny8bit code at github. You can do it in your browser: you don't need to install any special software to download from github.

2. For the Amstrad CPC platform, you need to copy the following files to your website. I recommend putting them in their own folder to keep everything tidy.
   • cpc.html
   • cpc.js
   • cpc.wasm

3. The cpc.html file is the one that displays the emulator. You can create a link to it that includes the name of a .sna file to load. The advantage of .sna files is that they load instantly. In contrast, .dsk images emulate the disc drive, which is slower. Here's an example that loads a game called fred.sna in a subfolder called games, and also enables the joystick:
   cpc.html?file=games/fred.sna&joystick=true

4. If you want to use a .dsk file, you can load it in the same way, but you can also append a BASIC instruction that is automatically typed in when the emulator loads. This instruction can be used to run the appropriate file from the disc. For example, to load the disc sean.dsk in the folder games, and run the program "menu.bas" on it, you would use the following link. The %22 code is for " and the %0A is to press Enter at the end of the line.
   cpc.html?file=games/sean.dsk&input=run%22menu%0A

   With the .dsk format you can have many different programs in one file. The .dsk file for my games was already created, so it was a no-brainer to use that one file rather than creating lots of separate .sna files. I would hope that the .dsk file would be cached if someone loads additional programs from it from different web pages, but I haven't been able to validate this.

5. So far, you can add the Amstrad emulator code to your website. If you want to put the emulator inside an iframe so it integrates with the rest of your site more smoothly, there is one more complication. The emulator in the iframe doesn't have the keyboard focus, so you can see demos but you can't interact with the emulator. To fix that, I added this snippet of code after the <script type="text/javascript"> line in cpc.html:
   window.addEventListener('load', function () {
window.focus();
document.body.addEventListener('click',function(e) {
window.focus();
},false);
});


   That code makes the emulator the active window when the window loads and when it is clicked. It was created by Quinten Clause as documented here. Thank you, Quinten!

6. The emulator only worked when I uploaded it to the web and viewed it in a browser: it didn't work when I opened the web page from my computer's local storage. To test your emulator, make sure you upload the files to a web server.

7. You're all set! Remember to remind your users to click the emulator to activate the keyboard in it.

Thanks to Andre, Quinten, and to Amstrad who have allowed the Amstrad CPC ROMs to be used in emulators.

Where next?

• Sean's Amstrad CPC homepage, including Amstrad type-ins and my Amstrad BASIC programming tutorial.
• Download my disc of Amstrad games and utilities
• Read my books to learn to program in Python or Scratch