![Slow
Nes.Cpu.prototype.emulateCycle = function() {
this.interrupt != null &&
this["handle" +
(["nmi", "irq", "reset"]
.filter(function(type, index) {
return index == this.interrupt;
})[0])
]();
// ...
};](https://image.slidesharecdn.com/emulating-with-javascript-121124192342-phpapp01/85/Emulating-With-JavaScript-91-320.jpg)
![// Support gamepads in WebKit.
var GamePad = function(callback) {
if (typeof callback != "function") {
throw Error("Callback must implement [[call]].");
}
this.callback = callback;
this.running = false;
};
GamePad.prototype.start = function() {
this.running = true;
this.tick();
};
GamePad.prototype.stop = function() {
this.running = false;
};
GamePad.prototype.tick = function() {
if ( ! this.running) {
return;
}
this.callback(navigator.webkitGetGamepads());
webkitRequestAnimationFrame(this.tick.bind(this));
};](https://image.slidesharecdn.com/emulating-with-javascript-121124192342-phpapp01/85/Emulating-With-JavaScript-184-320.jpg)
Emulating With JavaScript
- 1. Emulating with JavaScript new Cpu;
- 2. WHOAMI
- 4. WHOAMI • Alexander Dickson • @alexdickson
- 5. WHOAMI • Alexander Dickson • @alexdickson • Not an emulation expert
- 6. WHOAMI • Alexander Dickson • @alexdickson • Not an emulation expert • JavaScript developer at Atlassian
- 7. WHOAMI • Alexander Dickson • @alexdickson • Not an emulation expert • JavaScript developer at Atlassian ;
- 10. JavaScript today • Fast • Browser APIs are awesome
- 11. JavaScript today • Fast • Browser APIs are awesome • Inputs and outputs are awesome
- 12. What we have
- 13. What we have • Canvas Element
- 14. What we have • Canvas Element • Web Audio API
- 15. What we have • Canvas Element • Web Audio API • GamePad API
- 16. What we have • Canvas Element • Web Audio API • GamePad API • Typed Arrays
- 17. What we have • Canvas Element • Web Audio API • GamePad API • Typed Arrays • requestAnimationFrame()
- 18. What we don’t have
- 19. What we don’t have • Sane implementations
- 20. What we don’t have • Sane implementations • Just kidding, but some are better than others
- 21. What we can build
- 22. What we can build • Lots of awesome, practical stuff...
- 23. What we can build • Lots of awesome, practical stuff... • ...or, emulate hardware, such as gaming consoles.
- 24. Why?
- 27. What is an emulator? In computing, an emulator is hardware or software or both that duplicates (or emulates) the functions of a first computer system (the guest) in a different second computer system (the host), so that the emulated behaviour closely resembles the behaviour of the real system. http://en.wikipedia.org/wiki/Emulator
- 28. What can be emulated
- 29. What can be emulated • Church-Turing thesis
- 30. What can be emulated • Church-Turing thesis • Any system can be emulated
- 31. Implementations
- 33. Implementations • Interpreter • Dynamic Re-compilation
- 34. Implementations • Interpreter • Dynamic Re-compilation • Static Re-compilation
- 35. Shhhh...
- 36. Shhhh... • Emulation can sometimes be a bit shaky from a legal perspective.
- 37. Shhhh... • Emulation can sometimes be a bit shaky from a legal perspective. • Emulate at your own risk and always use free programs.
- 38. Shhhh... • Emulation can sometimes be a bit shaky from a legal perspective. • Emulate at your own risk and always use free programs.
- 39. Where to start CPU
- 40. Where to start • Pick a system, anyCPU system
- 41. Where to start • Pick a system, anyCPU system • Discover its components
- 42. Where to start • Pick a system, anyCPU system • Discover its components • Find technical information on how components work
- 43. Chip8
- 44. Chip8 is Easy
- 45. Chip8 is Easy • Simple CPU implementation
- 46. Chip8 is Easy • Simple CPU implementation • Simple graphics
- 47. Chip8 is Easy • Simple CPU implementation • Simple graphics • Fixed audio sample
- 48. Demo Time
- 49. Example System
- 52. Nintendo Entertainment System • Custom 6502 CPU
- 53. Nintendo Entertainment System • Custom 6502 CPU • 2KiB onboard RAM, 2KiB video RAM, 256B OAM RAM, 28B palette RAM
- 54. Nintendo Entertainment System • Custom 6502 CPU • 2KiB onboard RAM, 2KiB video RAM, 256B OAM RAM, 28B palette RAM • Custom-made PPU
- 55. Nintendo Entertainment System • Custom 6502 CPU • 2KiB onboard RAM, 2KiB video RAM, 256B OAM RAM, 28B palette RAM • Custom-made PPU • 5 sound channels
- 56. Nintendo Entertainment System • Custom 6502 CPU • 2KiB onboard RAM, 2KiB video RAM, 256B OAM RAM, 28B palette RAM • Custom-made PPU • 5 sound channels • Awesome rectangular controllers
- 57. Von-Neumann Architecture CPU Memory Bus Peripherals
- 58. CPU
- 59. CPU • Basically a loop
- 60. CPU • Basically a loop • Read operation codes (opcodes) from memory, processes them
- 61. CPU • Basically a loop • Read operation codes (opcodes) from memory, processes them • Opcodes mostly operate on registers
- 62. 6502
- 63. 6502 • Ricoh 2A03/2A07, customised 6502 w/ audio w/ gamepad w/o BCD
- 64. 6502 • Ricoh 2A03/2A07, customised 6502 w/ audio w/ gamepad w/o BCD • 8 bit processor w/ 16 bit address bus
- 65. 6502 • Ricoh 2A03/2A07, customised 6502 w/ audio w/ gamepad w/o BCD • 8 bit processor w/ 16 bit address bus • 1-2MHz clock speed
- 66. 6502 • Ricoh 2A03/2A07, customised 6502 w/ audio w/ gamepad w/o BCD • 8 bit processor w/ 16 bit address bus • 1-2MHz clock speed • http://www.6502.org/documents/datasheets/ rockwell/
- 67. // Customised 6502 CPU Nes.Cpu = function() { this.registers = { // Program Counter (16bit) pc: null, // Stack Pointer (8bit) sp: null, // Accumulator (8bit) a: null, // Index X (8bit) x: null, // Index Y (8bit) y: null, // Processor Status, p: null }; // ... this.reset(); };
- 68. Memory
- 69. Memory • Contiguous block of data
- 70. Memory • Contiguous block of data • ROM (readable)/RAM (readable/writable)
- 71. NES Memory
- 72. NES Memory • 2KiB onboard
- 73. NES Memory • 2KiB onboard • Internally stored zero-page, stack, general purpose memory
- 74. NES Memory • 2KiB onboard • Internally stored zero-page, stack, general purpose memory • Addressable up to 0x10000
- 75. NES Memory • 2KiB onboard • Internally stored zero-page, stack, general purpose memory • Addressable up to 0x10000 • Program ROM contain opcodes, graphics and sound
- 76. Typed Arrays
- 77. Typed Arrays • TypedArrays help performance critical applications such as emulators
- 78. Typed Arrays • TypedArrays help performance critical applications such as emulators • Makes it trivial to reach any specified offset
- 79. Typed Arrays • TypedArrays help performance critical applications such as emulators • Makes it trivial to reach any specified offset • http://www.khronos.org/registry/ typedarray/specs/latest/
- 80. Nes.Cpu = function() { // ... // Our device has 2KiB of RAM. var memoryBuffer = new ArrayBuffer(0x800); // 6502 is a 8 bit processor, able // to address 8 bits at once. this.memory = new Uint8Array(memory); // ... };
- 81. Need Getters/Setters Memory is mapped everywhere, so you need to delegate reads and writes to different areas.
- 83. Fetch/Decode Loop • Check for interrupts
- 84. Fetch/Decode Loop • Check for interrupts • Read memory at PC
- 85. Fetch/Decode Loop • Check for interrupts • Read memory at PC • Decode addressing mode
- 86. Fetch/Decode Loop • Check for interrupts • Read memory at PC • Decode addressing mode • Process opcode
- 87. Interrupts
- 88. Interrupts • Special signal that interrupts normal execution
- 89. Interrupts • Special signal that interrupts normal execution • Loads special address into PC and executes it
- 90. Nes.Cpu = function() { // ... // Interrupt Types. this.interruptTypes = { NMI: 0 // ... }; // Current Interrupt. this.interrupt = null; // ... }; Nes.Cpu.prototype.emulateCycle = function() { if (this.interrupt != null) { switch (this.interrupt) { // Non-Maskable case this.interruptTypes.NMI: this.handleNmi(); break; // ... } } // ... };
- 91. Slow Nes.Cpu.prototype.emulateCycle = function() { this.interrupt != null && this["handle" + (["nmi", "irq", "reset"] .filter(function(type, index) { return index == this.interrupt; })[0]) ](); // ... };
- 92. Handling Opcodes
- 93. Handling Opcodes • Read location in PC from memory
- 94. Handling Opcodes • Read location in PC from memory • Lookup opcode
- 95. Handling Opcodes • Read location in PC from memory • Lookup opcode • Find addressing mode
- 96. Handling Opcodes • Read location in PC from memory • Lookup opcode • Find addressing mode • Process opcode
- 97. Handling Opcodes • Read location in PC from memory • Lookup opcode • Find addressing mode • Process opcode • Increment PC
- 98. Cpu.prototype.emulateCycle = function() { // ... // Get opcode at PC. var opcode = this.getOpcode(this.loadMemory(this.pc)); var address; // Get final address via addressing mode of opcode. switch (opcode.addressingMode) { // Zero Page // Uses a single operand which address // memory in zero page (0x0000-0x00FF). case this.addressingModes.ZERO_PAGE: address = this.loadMemory(this.pc + 1); break; } this.pc += opcode.bytes; // ... };
- 99. Process All The Opcodes
- 100. Process All The Opcodes • Read technical paper twice, implement once
- 101. Process All The Opcodes • Read technical paper twice, implement once • Debugging is hard, so get it right
- 102. Process All The Opcodes • Read technical paper twice, implement once • Debugging is hard, so get it right • When you don’t get it right, try again
- 103. Nes.Cpu.prototype.emulateCycle = function() { // ... switch (opcode.type) { // JMP // Jump to location. case this.operands.JMP: this.pc = address; break; } // ... };
- 104. PPU
- 105. PPU • Generates video signals from memory
- 106. PPU • Generates video signals from memory • Handles sprites, scrolling, colours
- 107. RP2C02 RP2C07
- 108. RP2C02 RP2C07 • Different chip for NTSC/PAL
- 109. RP2C02 RP2C07 • Different chip for NTSC/PAL • 2KiB RAM
- 110. RP2C02 RP2C07 • Different chip for NTSC/PAL • 2KiB RAM • 8x8 or 8x16 sprites
- 111. RP2C02 RP2C07 • Different chip for NTSC/PAL • 2KiB RAM • 8x8 or 8x16 sprites • Resolution of 256x240
- 112. Communicating with your PPU
- 113. Communicating with your PPU • 0x2000-0x2007 on CPU memory map to PPU’s registers
- 114. Communicating with your PPU • 0x2000-0x2007 on CPU memory map to PPU’s registers • 8x8 or 8x16 pixel tiles, accessed on program ROM
- 115. Colour Palette • 52 colours available • 2 palettes, 16b each, image and sprite • Can use 25 colours at once on screen
- 116. TileS
- 117. TileS • Each 8x8 tile occupies 16b
- 118. TileS • Each 8x8 tile occupies 16b • Position of bit denotes position of pixel
- 119. TileS • Each 8x8 tile occupies 16b • Position of bit denotes position of pixel • First 8 bits combine with second 8 bits
- 120. TileS • Each 8x8 tile occupies 16b • Position of bit denotes position of pixel • First 8 bits combine with second 8 bits • Combine bits to get colour index
- 121. Anatomy of a tile 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 0 0 1 1 1 0 1 0 1 1 1 1 1 0 1 1 0 1 1 1 1 0 1 1 1 0 1 1 0 0 1 0 0 1 1 1 1 1 1 1 1 1 1
- 122. Anatomy of a tile 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 0 0 1 1 1 0 1 0 1 1 1 1 1 0 1 1 0 1 1 1 1 0 1 1 1 0 1 1 0 0 1 0 0 1 1 1 1 1 1 1 1 1 1 (simplified)
- 123. Nametables
- 124. Nametables • Bytes which index pattern table
- 125. Nametables • Bytes which index pattern table • 32 horizontal and 30 vertical tiles, 960 tiles
- 126. Nametables • Bytes which index pattern table • 32 horizontal and 30 vertical tiles, 960 tiles • 1KiB long, delta contains extra colour information
- 127. Nothing is wasted
- 128. Nothing is wasted • Remaining 64b stores extra colour information (attribute bytes)
- 129. Nothing is wasted • Remaining 64b stores extra colour information (attribute bytes) • Attribute bytes map to 16 tiled blocks of nametable (64 32x32 pixel tiles)
- 130. Nothing is wasted • Remaining 64b stores extra colour information (attribute bytes) • Attribute bytes map to 16 tiled blocks of nametable (64 32x32 pixel tiles) • Each of these blocks is sub-blocked into 4 tiles (4 16x16 pixel tiles)
- 131. Nothing is wasted • Remaining 64b stores extra colour information (attribute bytes) • Attribute bytes map to 16 tiled blocks of nametable (64 32x32 pixel tiles) • Each of these blocks is sub-blocked into 4 tiles (4 16x16 pixel tiles) • Sub blocks affected by 2 bits from attribute bytes
- 132. Put it all together 0. 1 0 1 1 0 0 1 1 8. 0 0 1 0 1 0 0 1 960. 1 1 0 0 0 0 1 1 ============================= 1110 1100 0011 ... =============================
- 133. Put it all together 0. 1 0 1 1 0 0 1 1 8. 0 0 1 0 1 0 0 1 960. 1 1 0 0 0 0 1 1 ============================= 1110 1100 0011 ... =============================
- 134. Put it all together 0. 1 0 1 1 0 0 1 1 8. 0 0 1 0 1 0 0 1 960. 1 1 0 0 0 0 1 1 ============================= 1110 1100 0011 ... =============================
- 135. Put it all together 0. 1 0 1 1 0 0 1 1 8. 0 0 1 0 1 0 0 1 960. 1 1 0 0 0 0 1 1 ============================= 1110 1100 0011 ... =============================
- 136. // Byte at offset 0. var a = 0xB3; // Byte at offset 8. var b = 0x29; // Byte at offset 960. var c = 0xC3; var merged = (a & 0x80) >> 0x6; merged |= b >> 0x7; merged |= (c & 0x3) << 0x2;
- 138. Scratching the surface • There is a whole lot more going on
- 139. Scratching the surface • There is a whole lot more going on • http://wiki.nesdev.com/w/index.php/PPU
- 141. Full Screen API
- 142. Full Screen API • Look ma, no chrome
- 143. Full Screen API • Look ma, no chrome • Still want Chrome for performance
- 144. Full Screen API • Look ma, no chrome • Still want Chrome for performance • https://developer.mozilla.org/en-US/docs/ DOM/Using_fullscreen_mode
- 145. var goFullScreen = (function() { // Polyfills for cross browser support. return function(element, callback) { typeof callback != "function" && (callback = function() {}); var requestFullScreen = getFullScreenMethod(element); if (requestFullScreen) { requestFullScreen = requestFullScreen.call(element); } else { return false; } document.addEventListener(fullScreenEvent, function() { callback.call(this, getFullScreenElement()); }); }; })();
- 146. Demo Time
- 147. Sound
- 148. Sound • Vibration of air
- 149. Sound • Vibration of air • Represented as waves w/ freq. and amplitude
- 150. Sound • Vibration of air • Represented as waves w/ freq. and amplitude • Frequency is number of phase changes per second
- 151. Sound • Vibration of air • Represented as waves w/ freq. and amplitude • Frequency is number of phase changes per second • Amplitude is volume of the wave measured in dB
- 152. NES Sound
- 153. NES Sound • 5 sound channels
- 154. NES Sound • 5 sound channels • 2 pulse wave channels of variable duty cycle
- 155. NES Sound • 5 sound channels • 2 pulse wave channels of variable duty cycle • 16 volume levels
- 156. NES Sound • 5 sound channels • 2 pulse wave channels of variable duty cycle • 16 volume levels • Pitch bending
- 159. APU
- 160. APU • APU registers mapped to CPU memory starting at 0x4000
- 161. APU • APU registers mapped to CPU memory starting at 0x4000 • 2 pulse-wave channels, 1 triangle-wave channel, 1 random-wave channel and 1 digital channel
- 162. PULSE Wave 0x4000. 1011 1111 0x4002. 0001 0111 0x4003. 0000 0001
- 163. PULSE Wave 0x4000. 1011 1111 Volume 0x4002. 0001 0111 0x4003. 0000 0001
- 164. PULSE Wave 0x4000. 1011 1111 Volume Low order bits 0x4002. 0001 0111 of raw period 0x4003. 0000 0001
- 165. PULSE Wave 0x4000. 1011 1111 Volume Low order bits 0x4002. 0001 0111 of raw period High order bits 0x4003. 0000 0001 of raw period
- 166. PULSE Wave 0x4000. 1011 1111 Volume Low order bits 0x4002. 0001 0111 of raw period round(111860.8 / 0x117) - 1) = 400hz High order bits 0x4003. 0000 0001 of raw period
- 167. Demo Time
- 168. Web Audio API
- 169. Web Audio API • Based on Audio Routes
- 170. Web Audio API • Based on Audio Routes • Connect nodes to each other
- 171. Web Audio API • Based on Audio Routes • Connect nodes to each other • Perfect for emulator sound
- 172. var gainNode = ctx.createGainNode(); gainNode.gain.value = volume; var osc = ctx.createOscillator(); osc.connect(gainNode); osc.type = type; osc.frequency.value = frequency; gainNode.connect(ctx.destination); osc.noteOn(0); setTimeout(function () { osc.noteOff(0); }, duration);
- 173. Demo Time
- 174. Sounds good
- 175. Sounds good • Again, scratching the surface
- 176. Sounds good • Again, scratching the surface • Sound information is rarer to find
- 177. Sounds good • Again, scratching the surface • Sound information is rarer to find • http://wiki.nesdev.com/w/index.php/APU
- 178. Controller
- 179. Controller • Two controllers, mapped to CPU memory at 0x4016 and 0x4017
- 180. Controller • Two controllers, mapped to CPU memory at 0x4016 and 0x4017 • When written to, controller’s state is stored in sequential 8 bytes, as low order bit
- 181. Gamepad API
- 182. Gamepad API • Firefox has an event based system
- 183. Gamepad API • Firefox has an event based system • WebKit requires polling
- 184. // Support gamepads in WebKit. var GamePad = function(callback) { if (typeof callback != "function") { throw Error("Callback must implement [[call]]."); } this.callback = callback; this.running = false; }; GamePad.prototype.start = function() { this.running = true; this.tick(); }; GamePad.prototype.stop = function() { this.running = false; }; GamePad.prototype.tick = function() { if ( ! this.running) { return; } this.callback(navigator.webkitGetGamepads()); webkitRequestAnimationFrame(this.tick.bind(this)); };
- 185. Demo Time
- 186. Cycles
- 187. Cycles • Components IRL run in parallel
- 188. Cycles • Components IRL run in parallel • Count cycles, use to sync other components
- 189. Cycles • Components IRL run in parallel • Count cycles, use to sync other components • Try using Web Workers
- 190. Your very own emulator
- 191. Your very own emulator • Spend a lot of time researching
- 192. Your very own emulator • Spend a lot of time researching • Start programming your own programs
- 193. Your very own emulator • Spend a lot of time researching • Start programming your own programs • http://skilldrick.github.com/easy6502/
- 194. Your very own emulator • Spend a lot of time researching • Start programming your own programs • http://skilldrick.github.com/easy6502/ • http://www.6502.org/books
- 195. Getting Started
- 196. Getting Started C8IYF
- 197. Getting Started C8IYF (Chip-8 Is Your Friend)
- 198. Tips
- 199. Tips • JavaScript as you would C
- 200. Tips • JavaScript as you would C • Optimise passing around data
- 201. Tips • JavaScript as you would C • Optimise passing around data • Know about V8 optimisations
- 202. Tips • JavaScript as you would C • Optimise passing around data • Know about V8 optimisations • Write your own programs
- 203. Possibilities
- 204. Possibilities • Multiplayer via WebSockets
- 205. Possibilities • Multiplayer via WebSockets • Vibration API for force feedback
- 206. Possibilities • Multiplayer via WebSockets • Vibration API for force feedback • File API and application cache for portable offline emulators
- 207. Possibilities • Multiplayer via WebSockets • Vibration API for force feedback • File API and application cache for portable offline emulators • localStorage for battery backed saved state
- 208. Thank You
- 209. Thank You Questions
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: \n
- #87: \n
- #88: \n
- #89: \n
- #90: \n
- #91: \n
- #92: \n
- #93: \n
- #94: \n
- #95: \n
- #96: \n
- #97: \n
- #98: \n
- #99: \n
- #100: \n
- #101: \n
- #102: \n
- #103: \n
- #104: \n
- #105: \n
- #106: \n
- #107: \n
- #108: \n
- #109: \n
- #110: \n
- #111: \n
- #112: \n
- #113: \n
- #114: \n
- #115: \n
- #116: \n
- #117: \n
- #118: \n
- #119: \n
- #120: \n
- #121: \n
- #122: \n
- #123: \n
- #124: \n
- #125: \n
- #126: \n
- #127: \n
- #128: \n
- #129: \n
- #130: \n
- #131: \n
- #132: \n
- #133: \n
- #134: \n
- #135: \n
- #136: \n
- #137: \n
- #138: \n
- #139: \n
- #140: \n
- #141: \n
- #142: \n
- #143: \n
- #144: \n
- #145: \n
- #146: \n
- #147: \n
- #148: \n
- #149: \n
- #150: \n
- #151: \n
- #152: \n
- #153: \n
- #154: \n
- #155: \n
- #156: \n
- #157: \n
- #158: \n
- #159: \n
- #160: \n
- #161: \n
- #162: \n
- #163: \n
- #164: \n
- #165: \n
- #166: \n
- #167: \n
- #168: \n
- #169: \n
- #170: \n
- #171: \n
- #172: \n
- #173: \n
- #174: \n
- #175: \n
- #176: \n
- #177: \n
- #178: \n
- #179: \n
- #180: \n
- #181: \n