RetroArch as a web component. Online Demo
npm install @nicolasroehm/ngx-retroarch
import '@nicolasroehm/ngx-retroarch';
<script src="https://unpkg.com/@nicolasroehm/ngx-retroarch@latest/elements.js"></script>
<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 |
- Download code and install dependencies
git clone https://github.com/NicolasRoehm/ngx-retroarch
cd ./ngx-retroarch
npm install
- Add your rom(s) in the
src/assets/roms
directory
- Edit the
rom
andcore
attributes insrc/assets/demo.html
- Build and serve the project
npm run demo
- Navigate to http://127.0.0.1:4300/.
-
Edit the
rom
andcore
attributes insrc/app/app.component.html
-
Build the library in watch mode
npm run watch:all
- Once the library is watched, start the dev server in a new terminal
npm run start
- Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
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. |
npm run build:all
The build artifacts will be stored in the dist/elements
directory.
❗There is no ROM included❗
- 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