GBA emulator on your React project - easy and powerful to use!
Just three steps to set it up
1 - Apply GbaProvider
import { GbaProvider } from 'react-gbajs'
const App = () => (
<GbaProvider>
...
</GbaProvider>
)
2 - Get play function from GbaContext and call it with the game ROM
import { useContext } from 'react'
import { GbaContext } from 'react-gbajs'
const ButtonStartEmulator = () => {
const {
play,
} = useContext(GbaContext)
const startEmulator = () => {
const gameRom = getGameRom()
play({ newRomBuffer: gameRom })
}
return (
<button onClick={() => startEmulator()}>
Start Emulator
</button>
)
}
3 - And render the emulator using the default export
import ReactGbaJs from 'react-gbajs'
const Emulator = () => (
<ReactGbaJs />
)
Done!
Check a full example in /sample.
How it works
This package is a React wrapper for GBA.js.
GBA.js is vendored, with new features over the original version:
- save and restore state
- freeze address with a given value
Who is using
 klo-gba.js, level editor for Klonoa: Empire of Dreams |
Add your project here |
Features
GbaContext
GbaContext exports the following properties:
play({ newRomBuffer, restoreState }): boolean
Use this function to start or restart the emulator.
Pass at newRomBuffer the game's ROM to load it:
play({ newRomBuffer: myGameRom })
You can also fill the property restoreState to restore to a previous state saved using saveState. If both are present, the emulator will be reset loading the ROM, and then restored to the given state:
play({ newRomBuffer: myGameRom, restoreState: someState })
If you pass only restoreState, the previous ROM will be re-loaded and will start on the given state. If there is no ROM previously loaded, it won't work.
play({ restoreState: someState })
saveState()
Return the serializable state of the emulator.
addFreezeAddress({ address: number, size: 8 | 16 | 32, value: number })
Freeze an address with the given value.
removeFreezeAddress(address: number)
Remove the freeze value on the given address.
frozenAddresses()
Return the list of the addresses frozen in the following format:
{
[address in number]: { size: 8 | 16 | 32, value: number }
}
<ReactGbaJs />
<ReactGbaJs /> has the following props:
volume={number} (optional)
Should be a number between 0 (default, muted) or 1 (max volume).
onFpsReported={((fps: number) => void)} (optional)
Callback called every time that an FPS is reported.
scale={number} (optional)
Set the emulator scale. Default value is 1, which has width 240px and height 160px.
onLogReceived={(level: 'error' | 'warn' | 'stub' | 'info', message: string) => void} (optional)
Callback called every time that a log is received within the levels set as true by the prop watchLogLevels.
watchLogLevels={{ error?: boolean, warn?: boolean, stub?: boolean, info?: boolean }} (optional)
Set when the callback onLogReceived should be called. By default the value is { error: true }.
Contribution
1 - Clone this repository
> git clone [email protected]:macabeus/react-gbajs.git
> cd react-gbajs
2 - Build and watch the project
> npm run start
3 - In another terminal window, go to the /sample project, then build and watch it
> cd sample
> npm run start
Finished! Now you can develop the package and test it in real-time
Thanks
@endrift for GBA.js.
@felix.rodent for the logo.
6 Jun 29, 2022
2 Jun 13, 2022
4 Jun 15, 2022
33 Nov 27, 2022
2.8k Jan 1, 2023
9 Nov 5, 2022
2 Jan 18, 2022
16 Aug 29, 2022
132 Dec 4, 2022
2 Jun 4, 2022
5 Dec 28, 2022
19 Oct 15, 2022
39 Dec 5, 2022
3.9k Jan 6, 2023
3 Jun 6, 2022
3 Jun 6, 2022
54 Sep 21, 2022
11 Dec 5, 2022
3.7k Jan 2, 2023