WebMSX: Criando um Emulador

online a partir do zero

http://webmsx.org
© 2018 Paulo Augusto Peccin
 Conteúdo
● FPGA é ou não é Emulação?
● VHDL: Hardware Description Language é
uma Linguagem?
● Um Código Fonte VHDL pode ser
chamado de Software?

kkk...
● Histórico e Motivação
● Características
● Desenvolvimento
● Tecnologia e Desafios Técnicos
● Arquitetura e Design
● Feedback e Futuro
● Demonstração
 Histórico e Motivação

● 1987: MSX1 Expert

● Somente PCs desde então
● Profissão: Desenvolvimento de Software
● Sonho de criar um Emulador do zero
● Desafio técnico, paixão por desenvolver
● 2011: Javatari Emulador de Atari 2600 Java
● 2014: Aprender JavaScript, porte do Javatari
● 2015: WebMSX, por que não?
 Características
● Web, multiplataforma, App único, sem Server
● Facilmente embarcado em WebPages
● Interface gráfica minimalista e intuitiva
● Mobile responsivo, controles Touch
● Pacote único, plug & play, extensões
● Máquina MSX genérica, imaginária
● Japanese, European, American, PAL e NTSC
● Turbo modes, Debug modes, Frame advance
● Funções online, NetPlay!
Drag & Drop
Keyboard Settings
Controllers Settings
SymbOS in Action
iPhone Portrait
iPhone Landscape
iPad Landscape
Desenvolvimento
 Tecnologia e Desafios
● HTML 5, CSS 3, JavaScript 5 puros, sem libs
● Browsers tem diferenças, foco nos melhores
● Sandbox no browser, acessos restritos
● JS é lento, faz garbage-collect, gera pausas
● JS não é tipado, e não suporta tipos básicos
como byte ou int (tudo float e objetos)
● Uso de tecnologias Web avançadas:
○ Canvas, WebAudio, WebRTC, Gamepad,
Touch, Typed Arrays, RAF, FS, Cache
● Browsers mobile (iOS) são muito chatos!
 Primeiros Passos
● Busca dos documentos e manuais técnicos
● Foco no desenvolvimento da CPU Z80, testes
de velocidade e viabilidade
● Z80 completo, passando no ZEXALL
● Desenho inicial da arquitetura
● Mainboard inicial, BUS, Slots, BIOS, RAM
● I/O, VDP, PSG e PPI mínimos
● Sequencia de Boot, prompt no BASIC
● Interfaces iniciais: Keyboard, Cartridge
● Iterações incrementais do PSG e VDP, modos,
cores, sprites, Cassette, Disk
● Criação da GUI do Emulador e Settings
Primeiro Boot na Matrix
Screen 0 ASCII Render
Primeiro VDP Render
Screen 1 Color Render
Screen 2 Color Render
Screen 2 Sprites Render
Arquitetura e Design
 Componentes

● Separação dos componentes internos

○ Principais Chips e suas conexões
● Representação lógica dos componentes
● Identificação e separação das interfaces da
Máquina Virtual com o mundo externo
● Separação clara entre componentes da
Máquina Virtual e dispositivos de interface
com a Máquina Host
 Z80 CPU

BUS Instructions

Mem R INT JS Func

Fetch Decode
Instruction Instruction

Execute
Instruction
Mem R/W Device I/O

BUS
 Main Board

Device I/O CPU Memory R/W

VDP SLOTS

PSG ROM
BUS
PPI RAM

Misc. Cartridges
 Machine Interface Sockets

Cartridge Video
SLOTS VDP
Disk Clock
BUS
Cassette Audio
PPI PSG
Keyboard Controller

State General Misc.

 Room

Cartridge Slot Peripherals Screen

Machine
Disk Drive Cartridge Video Clock Source
Disk Clock

Cassette Audio
Cassette
State Controls Speaker
Deck

Save State
Controllers
Media
 Interfaces: Video

Video Canvas
VDP Video
Screen
Signal

HTML5 Canvas

● Video Signal carrega frames completos

● Carrega também OSDs e info. de resolução, assim
a Screen pode se adaptar
● Opções de Aspect Ratio, Fullscreen, Filter, etc.
controlados diretamente na Screen
● Controle de “video pull-down” no Video Signal para
se adaptar ao Vsync nativo do host
 Interfaces: Audio

PSG

SCC Audio WebAudio

Audio Speaker
OPL4 Signals

etc. Web Audio API

● Signals carregam buffers com samples gerados

● Podem ser mono/stereo e ter a própria Sampling Rate
(PSG 112KHz, FM 50KHz, OPL4 44.1KHz)
● Speaker se adapta ao Sampling Rate nativo do Host e
faz mixagem e “re-sampling” dos Signals on-the-fly
 Interfaces: Controllers

Read
PPI Keyboard
Ports Controllers Hub
PSG Controller
Read/Write DOM Events,
Gamepad API

● Eventos HTML para Teclado e Mouse

● Gamepad API nos browsers suportados para leitura de
até 2 Joysticks, botões configuráveis
● Teclado configurável com algumas opções de idioma
● Função para travar ponteiro do Mouse na tela
● Controles touch-screen, Teclado on-screen
 Interfaces: Clock

Clock
VDP Clock Clock Source
Pulses

JS Timers, RAF

● Se adapta ao FPS nativo do Host para Vsync

● Request Animation Frame quando suportado pelo Host
(50 Hz ~ 240 Hz)
● Não sendo possível, usa Timers (menor precisão)
● VDP centraliza o Clock e repassa para demais
componentes com dividers (CPU, PSG, etc)
 Interfaces: Cartridges
Insert
Remove File Cartridge
SLOTS Cartridge
Slot
Load/Save
SRAM
File/URL interface

● Carregamento de ROMs por arquivo do disco local

do Host, drag&drop, ou da rede/internet via URL
● Função para salvar arquivo da memória SRAM para
cartuchos como PAC, etc.
● Detecção do tipo de Mapper e Hardwares adicionais
● Salvamento por download de arquivos no browser
 Interfaces: Disk

Floppy Format File Disk

Disk
Nextor Drive
R/W

File/URL interface

● Carregamento de DSKs por arquivo do disco local do

Host, drag&drop, ou da rede/internet via URL
● Vários discos em cada Drive, função para troca de disco
● Import de arquivos e ZIPs do Host para o disco virtual
● Criação automática de discos vazios e de Boot
● Salvamento por download de arquivos no browser
 Interfaces: Cassette

Motor File Cassette

PPI Cassette
Deck
R/W

File/URL interface

● Carregamento de CAS por arquivo do disco local do

Host, drag&drop, ou da rede/internet via URL
● Funcões para FF/RW da fita
● Auto execução do programa após Boot
● Salvamento por download de arquivos no browser
 Interfaces: Save State

Load/Save Save State

General State
Media
State

Local Storage,
File and URL

● Salva estado completo incluindo tipo de máquina,

extensões, discos, cartuchos, etc.
● Carregamento de LocalStorage, arquivos ou URLs
● Salvamento em LocalStorage, ou download de arquivo
● Mantém saves no browser e lembra na próxima sessão
● 12 “quick save” slots
 Room

Cartridge Slot Peripherals Screen

Machine
Disk Drive Cartridge Video Clock Source
Disk Clock

Cassette Audio
Cassette
State Controls Speaker
Deck

Save State
Controllers
Media
 NetPlay! Session
Server Room Client Room(s)
Network
Cart Video Video Cart

Disk Clock WebRTC Clock Disk

Cas Audio Audio Cas

Sync
State Controls Controls State

● Periféricos são “NetPlay! aware” e trocam informações

com seus pares para sincronização
● Componentes abaixo dos periféricos (Machine) não tem
conhecimento algum do NetPlay!
● Todos os periféricos enviam os mesmos estímulos para
as Machines, que se comportam deterministicamente
Feedback e Futuro
 Comunidade e Usuários
● Barulho nas redes sociais (inglês, japonês)
● Dúvidas, sugestões e bug reports
● Vários websites retro utilizando
● File Hunter:
○ https://www.file-hunter.com/MSX/
● MSXPen:
○ https://msxpen.com/
● MSX Games World:
○ https://www.msxgamesworld.com/
● Alguns Apps nas lojas sem autorização!
 Roadmap de Features

● OPL4 / MoonSound (em desenv.)

● MSX-AUDIO
● TurboR
● V9990
● Tipos avançados de Controllers
● Teclado com mapeamento para texto
● Melhoria nos timings e Turbo
● Pixel accuracy
Demonstração
 Obrigado!

http://webmsx.org
© 2018 Paulo Augusto Peccin