Un emulatore GameBoy lato server multigiocatore scritto in .NET Core e Angular

Fortunatamente la CPU GameBoy, uno Sharp LR35902, è derivata dal popolare e molto ben documentato Zilog Z80, un microprocessore che è incredibilmente ancora in produzione oggi, oltre 40 anni dopo la sua introduzione.

Lo Z80 è un microprocessore a 8 bit, il che significa che ogni operazione viene eseguita nativamente su un singolo byte. Il set di istruzioni ha alcune operazioni a 16 bit, ma queste vengono eseguite semplicemente come cicli multipli di logica a 8 bit. Lo Z80 ha un bus di indirizzi a 16 bit, che rappresenta logicamente una mappa di memoria da 64K. I dati vengono trasferiti alla CPU su un bus dati largo 8 bit, ma ciò è irrilevante per la simulazione del sistema a livello di macchina a stati. Lo Z80 e l'Intel 8080 da cui deriva hanno 256 porte I/O per l'accesso a periferiche esterne ma la CPU del GameBoy non ne ha, preferendo invece l'I/O mappato in memoria

Non ha solo creato un emulatore - ce ne sono molti - ma lo esegue in modo univoco sul lato server consentendo controlli condivisi in un browser. "Tra ogni frame univoco, tutti i client connessi possono votare quale dovrebbe essere il prossimo input di controllo. Il server sceglierà quello con il maggior numero di voti... il più delle volte." GameBoy online multigiocatore di massa! Quindi esegue lo streaming del fotogramma successivo! "Il rendering della GPU viene completato sul server una volta per frame univoco, compresso con LZ4 e trasmesso in streaming a tutti i client connessi tramite websocket".

Questo è un ottimo repository di apprendimento perché:

• ha una logica di business complessa sul lato server, ma il front-end utilizza Angular e Web-Socket e tecnologie Web aperte.
• È anche bello che abbia un Dockerfile multifase completo che è di per sé un ottimo esempio di come creare app .NET Core e Angular in Docker.
• Ampi (migliaia) di unit test con il Shouldly Assertion Framework e il Moq Mocking Framework.
• Grandi esempi di utilizzo della programmazione reattiva
• Unit Testing su server E client, utilizzando Karma Unit Testing per Angular

Ecco alcuni eleganti frammenti di codice preferiti in questo enorme repository.

Il pulsante reattivo preme:

_joyPadSubscription = _joyPadSubject
    .Buffer(FrameLength)
    .Where(x => x.Any())
    .Subscribe(presses =>
                {
                    var (button, name) = presses
                        .Where(x => !string.IsNullOrEmpty(x.name))
                        .GroupBy(x => x.button)
                        .OrderByDescending(grp => grp.Count())
                        .Select(grp => (button: grp.Key, name: grp.Select(x => x.name).First()))
                        .FirstOrDefault();
                    joyPad.PressOne(button);
                    Publish(name, $"Pressed {button}");

                    Thread.Sleep(ButtonPressLength);
                    joyPad.ReleaseAll();
                });

Il renderizzatore GPU:

private void Paint()
{
    var renderSettings = new RenderSettings(_gpuRegisters);

    var backgroundTileMap = _tileRam.ReadBytes(renderSettings.BackgroundTileMapAddress, 0x400);
    var tileSet = _tileRam.ReadBytes(renderSettings.TileSetAddress, 0x1000);
    var windowTileMap = renderSettings.WindowEnabled ? _tileRam.ReadBytes(renderSettings.WindowTileMapAddress, 0x400) : new byte[0];

    byte[] spriteOam, spriteTileSet;
    if (renderSettings.SpritesEnabled) {
        // If the background tiles are read from the sprite pattern table then we can reuse the bytes.
        spriteTileSet = renderSettings.SpriteAndBackgroundTileSetShared ? tileSet : _tileRam.ReadBytes(0x0, 0x1000);
        spriteOam = _spriteRam.ReadBytes(0x0, 0xa0);
    }
    else {
        spriteOam = spriteTileSet = new byte[0];
    }

    var renderState = new RenderState(renderSettings, tileSet, backgroundTileMap, windowTileMap, spriteOam, spriteTileSet);

    var renderStateChange = renderState.GetRenderStateChange(_lastRenderState);
    if (renderStateChange == RenderStateChange.None) {
        // No need to render the same frame twice.
        _frameSkip = 0;
        _framesRendered++;
        return;
    }

    _lastRenderState = renderState;
    _tileMapPointer = _tileMapPointer == null ? new TileMapPointer(renderState) : _tileMapPointer.Reset(renderState, renderStateChange);
    var bitmapPalette = _gpuRegisters.LcdMonochromePaletteRegister.Pallette;
    for (var y = 0; y < LcdHeight; y++) {
        for (var x = 0; x < LcdWidth; x++) {
            _lcdBuffer.SetPixel(x, y, (byte) bitmapPalette[_tileMapPointer.Pixel]);

            if (x + 1 < LcdWidth) {
                _tileMapPointer.NextColumn();
            }
        }

        if (y + 1 < LcdHeight){
            _tileMapPointer.NextRow();
        }
    }
    
    _renderer.Paint(_lcdBuffer);
    _frameSkip = 0;
    _framesRendered++;
}

I GameBoy Frame sono composti sul lato server, quindi compressi e inviati al client tramite WebSocket. Ha background e sprite funzionanti e c'è ancora del lavoro da fare.

Il Raw LCD è una tela HTML5:

<canvas #rawLcd [width]="lcdWidth" [height]="lcdHeight" class="d-none"></canvas>
<canvas #lcd
        [style.max-width]="maxWidth + 'px'"
        [style.max-height]="maxHeight + 'px'"
        [style.min-width]="minWidth + 'px'"
        [style.min-height]="minHeight + 'px'"
        class="lcd"></canvas>

Amo questo intero progetto perché ha tutto. TypeScript, tela JavaScript 2D, giochi retrò e molto altro!

const raw: HTMLCanvasElement = this.rawLcdCanvas.nativeElement;
const rawContext: CanvasRenderingContext2D = raw.getContext("2d");
const img = rawContext.createImageData(this.lcdWidth, this.lcdHeight);

for (let y = 0; y < this.lcdHeight; y++) {
  for (let x = 0; x < this.lcdWidth; x++) {
    const index = y * this.lcdWidth + x;
    const imgIndex = index * 4;
    const colourIndex = this.service.frame[index];
    if (colourIndex < 0 || colourIndex >= colours.length) {
      throw new Error("Unknown colour: " + colourIndex);
    }

    const colour = colours[colourIndex];

    img.data[imgIndex] = colour.red;
    img.data[imgIndex + 1] = colour.green;
    img.data[imgIndex + 2] = colour.blue;
    img.data[imgIndex + 3] = 255;
  }
}
rawContext.putImageData(img, 0, 0);

context.drawImage(raw, lcdX, lcdY, lcdW, lcdH);

Ti incoraggerei ad andare STAR e CLONE https://github.com/axle-h/Retro.Net e provarlo con Docker! È quindi possibile utilizzare Visual Studio Code e .NET Core per compilarlo ed eseguirlo in locale. Sta cercando aiuto con il suono del GameBoy e un debugger.

Sponsor: Ottieni l'ultimo JetBrains Rider per il debug di codice .NET di terze parti, Smart Step Into, ulteriori miglioramenti del debugger, C# Interactive, nuova procedura guidata di progetto e formattazione del codice nelle colonne.