NicolasRoehm / ngx-retroarch

RetroArch web component : online retro-gaming emulator

NgxRetroarch

RetroArch as a web component. Online Demo - Game collections

Installation

NPM

npm install @nicolasroehm/ngx-retroarch

import '@nicolasroehm/ngx-retroarch';

CDN

<script src="https://unpkg.com/@nicolasroehm/ngx-retroarch@latest/elements.js"></script>

Usage

<ngx-retroarch
  core="snes9x"
  rom="Goof_Troop.zip"
  rom-path="https://www.example.com/games/snes9x/"
  asset-path="https://unpkg.com/@nicolasroehm/ngx-retroarch@latest/">
</ngx-retroarch>

The following attributes can be set on ngx-retroarch:

• rom - The rom file name with its extension. For example: Goof_Troop.zip.
• rom-path - The path to the rom (default is ./). You have to define the path to the rom without the rom file. For example: https://www.example.com/assets/snes/
• asset-path - The path to the RetroArch core and assets (default is ./). Cores and assets are included into the NPM package so you don't have to update the path unless you want to import them by yourself.
• core - Choose one the following:

Core	Console
mgba	GBA
dolphin	GC/Wii
citra	Nintendo 3DS
desmume	Nintendo DS
mupen64plus_next	Nintendo 64
parallel_n64	Nintendo 64
snes9x	SNES
nestopia	NES
ppsspp	PSP
beetle_psx	PS1
genesis_plus_gx	Genesis

Source code

1. Download code and install dependencies

git clone https://github.com/NicolasRoehm/ngx-retroarch
cd ./ngx-retroarch
npm install

2. Add your rom(s) in the src/assets/roms directory

Demo

3. Edit the rom and core attributes in src/assets/demo.html
4. Build and serve the project

npm run demo

5. Navigate to http://127.0.0.1:4300/.

Development

3. Edit the rom and core attributes in src/app/app.component.html

4. Build the library in watch mode

npm run watch:all

5. Once the library is watched, start the dev server in a new terminal

npm run start

6. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Architecture

File	Purpose
emulator.component.ts emulator.component.html	This contains the main logic of the package.
app.component.html	This contains the development code which uses the package as an Angular component.
demo.html	This contains the final code which uses the package as a web component (once built). This file is cp to dist/elements/index.html during the build process.

Build

npm run build:all

The build artifacts will be stored in the dist/elements directory.

❗There is no ROM included❗

Roadmap

• Check if there is the same "wasmTable.get(108)()" function in all unminified cores / Export _cmd_reload_config
• Save & download saved screenshot
• Auto detect core
• Add cores + check if there is the same "queueAudio" function in all unminified cores
• Speed / Slow
• Show FPS
• About project
• Update usage chapter (readme)
• Disable retroarch on dev mode
• Readable core
• Qwerty

Thanks

• Angular Elements : Create a Component Library for Angular and the Web
• Angular library and live reload
• BinBashBanana/webretro
• Deobfuscated version of NeptunJS/NeptuneJS/NJS