improve frame timings some more in both runtimes

src/run-web.html

@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf8"><title>uw8-run</title><style>body,canvas,html{background-color:#202024;margin:0;padding:0}body,html{height:100%}body{display:grid;grid-template-rows:1fr}#screen{align-self:center;border:4px solid #303040;image-rendering:pixelated;justify-self:center}#message{background-color:rgba(0,0,0,.4);color:#c64;font:700 12pt sans-serif;padding:8px;position:absolute;width:calc(100% - 16px);z-index:2}@media (min-width:648px) and (min-height:488px){#screen{height:480px;width:640px}}@media (min-width:968px) and (min-height:728px){#screen{height:720px;width:960px}}</style></head><body> <canvas id="screen" width="320" height="240" tabindex="1"> </canvas> <div id="message"></div> </body><script type="module">function e(e){return e&&e.__esModule?e.default:e}class t extends AudioWorkletNode{constructor(e){super(e,"apu",{outputChannelCount:[2]})}}let A=(...e)=>new Uint8Array(...e),s=(...e)=>new Uint32Array(...e);let a=function(a,B={}){B.setMessage||(B.setMessage=(e,t)=>{t&&console.log("error: "+t)});let r,n,o,i,d,l,D,F,u=a.getContext("2d"),c=u.createImageData(320,240),f=B.devkitMode,g=0,w=null==B.keyboardElement?a:B.keyboardElement;if(w){let e=e=>{let t,A="keydown"==e.type;switch(e.code){case"ArrowUp":t=1;break;case"ArrowDown":t=2;break;case"ArrowLeft":t=4;break;case"ArrowRight":t=8;break;case"KeyZ":t=16;break;case"KeyX":t=32;break;case"KeyA":t=64;break;case"KeyS":t=128;break;case"KeyR":A&&C(n,!0);break;case"F9":A&&a.toBlob((e=>{m(e,".png")})),e.preventDefault();break;case"F10":A&&function(){if(d)return d.stop(),d=null,D.disconnect(F),D=null,void(F=null);let e=a.captureStream();F=o.createMediaStreamDestination(),D=i,i.connect(F),e.addTrack(F.stream.getAudioTracks()[0]),d=new MediaRecorder(e,{mimeType:"video/webm",videoBitsPerSecond:25e6});let t=[];d.ondataavailable=e=>{t.push(e.data)};let A=B.timerElement;A&&(A.hidden=!1,A.innerText="00:00");function s(){if(l){if(A){let e=Math.floor((Date.now()-l)/1e3);A.innerText=Math.floor(e/60).toString().padStart(2,"0")+":"+(e%60).toString().padStart(2,"0")}setTimeout(s,1e3)}}d.onstop=()=>{A&&(A.hidden=!0),m(new Blob(t,{type:"video/webm"}),".webm")},d.start(),l=Date.now(),setTimeout(s,1e3)}(),e.preventDefault()}A?g|=t:g&=~t};w.onkeydown=e,w.onkeyup=e}async function C(d,l){r&&(r(),r=null),o=new AudioContext({sampleRate:44100});let D=!0,F=new AbortController;r=()=>{o.close(),D=!1,F.abort()};let w=d.byteLength;if(B.setMessage(w),0==w)return;await o.audioWorklet.addModule(e("data:application/javascript,let%20e%3D%28...e%29%3D%3Enew%20Uint8Array%28...e%29%3Bclass%20s%20extends%20AudioWorkletProcessor%7Bconstructor%28%29%7Bsuper%28%29%2Cthis.sampleIndex%3D0%2Cthis.currentTime%3D0%2Cthis.isFirstMessage%3D%210%2Cthis.pendingUpdates%3D%5B%5D%2Cthis.port.onmessage%3De%3D%3E%7Bthis.memory%3F%28this.isFirstMessage%26%26%28this.currentTime%2B%3D%28e.data.t-this.currentTime%29%2F8%2Cthis.isFirstMessage%3D%211%29%2Cthis.pendingUpdates.push%28e.data%29%29%3Athis.load%28e.data%5B0%5D%2Ce.data%5B1%5D%29%7D%7Dasync%20load%28e%2Cs%29%7Blet%20t%3Dnew%20WebAssembly.Memory%28%7Binitial%3A4%2Cmaximum%3A4%7D%29%2Ci%3D%7Benv%3A%7Bmemory%3At%7D%7D%3Bfor%28let%20e%20of%5B%22acos%22%2C%22asin%22%2C%22atan%22%2C%22atan2%22%2C%22cos%22%2C%22exp%22%2C%22log%22%2C%22sin%22%2C%22tan%22%2C%22pow%22%5D%29i.env%5Be%5D%3DMath%5Be%5D%3Bfor%28let%20e%3D9%3Be%3C64%3B%2B%2Be%29i.env%5B%22reserved%22%2Be%5D%3D%28%29%3D%3E%7B%7D%3Bfor%28let%20e%3D0%3Be%3C16%3B%2B%2Be%29i.env%5B%22g_reserved%22%2Be%5D%3D0%3Blet%20r%3Dasync%20e%3D%3E%28await%20WebAssembly.instantiate%28e%2Ci%29%29.instance%2Cn%3Dawait%20r%28e%29%3Bfor%28let%20e%20in%20n.exports%29i.env%5Be%5D%3Dn.exports%5Be%5D%3Blet%20a%3Dawait%20r%28s%29%3Bthis.memory%3Dt%2Cthis.snd%3Da.exports.snd%7C%7Cn.exports.gesSnd%2Cthis.port.postMessage%282%29%7Dprocess%28s%2Ct%2Ci%29%7Bif%28this.isFirstMessage%3D%210%2Cthis.snd%29%7Bfor%28%3Bthis.pendingUpdates.length%3E0%26%26this.pendingUpdates%5B0%5D.t%3C%3Dthis.currentTime%3B%29e%28this.memory.buffer%2C80%2C32%29.set%28e%28this.pendingUpdates.shift%28%29.r%29%29%3Bnew%20Uint32Array%28this.memory.buffer%29%5B16%5D%3Dthis.currentTime%3Blet%20s%3Dt%5B0%5D%2Ci%3Dthis.sampleIndex%2Cr%3Ds%5B0%5D.length%3Bfor%28let%20e%3D0%3Be%3Cr%3B%2B%2Be%29s%5B0%5D%5Be%5D%3Dthis.snd%28i%2B%2B%29%2Cs%5B1%5D%5Be%5D%3Dthis.snd%28i%2B%2B%29%3Bthis.sampleIndex%3D4294967295%26i%2Cthis.currentTime%2B%3Dr%2F44.1%7Dreturn%210%7D%7DregisterProcessor%28%22apu%22%2Cs%29%3B")),i=new t(o);let m,Q=0,h=new Promise((e=>m=e)),y=e=>{Q|=e,3==Q&&m&&(m(!0),m=null)},E=()=>{"suspended"==o.state?(B.startButton&&(B.startButton.style="",a.style="display:none"),(B.startButton||a).onclick=()=>{o.resume()}):(B.startButton&&(B.startButton.style="display:none",a.style=""),y(1))};o.onstatechange=E,E(),n=d;let p=window.location.pathname;if(w<=1024&&!l){let e="";for(let t of A(d))e+=String.fromCharCode(t);p+="#"+btoa(e),p!=window.location.pathname+window.location.hash&&history.pushState(null,null,p)}a.width=a.width;try{let t={initial:4};f||(t.maLine truncated
+<!doctype html><html><head><meta charset="utf8"><title>uw8-run</title><style>html,body,canvas{background-color:#202024;margin:0;padding:0}html{height:100%}body{height:100%;grid-template-rows:1fr;display:grid}#screen{image-rendering:pixelated;border:4px solid #303040;place-self:center}#message{width:calc(100% - 16px);color:#c64;z-index:2;background-color:#0006;padding:8px;font:700 12pt sans-serif;position:absolute}@media (min-width:648px) and (min-height:488px){#screen{width:640px;height:480px}}@media (min-width:968px) and (min-height:728px){#screen{width:960px;height:720px}}</style></head><body> <canvas id="screen" width="320" height="240" tabindex="1"> </canvas> <div id="message"></div> </body><script type="module">function e(e){return e&&e.__esModule?e.default:e}class t extends AudioWorkletNode{constructor(e){super(e,"apu",{outputChannelCount:[2]})}}let A=(...e)=>new Uint8Array(...e),s=(...e)=>new Uint32Array(...e);let a=function(a,B={}){B.setMessage||(B.setMessage=(e,t)=>{t&&console.log("error: "+t)});let r,n,o,i,d,l,D,F,u=a.getContext("2d"),c=u.createImageData(320,240),f=B.devkitMode,g=0,w=null==B.keyboardElement?a:B.keyboardElement;if(w){let e=e=>{let t,A="keydown"==e.type;switch(e.code){case"ArrowUp":t=1;break;case"ArrowDown":t=2;break;case"ArrowLeft":t=4;break;case"ArrowRight":t=8;break;case"KeyZ":t=16;break;case"KeyX":t=32;break;case"KeyA":t=64;break;case"KeyS":t=128;break;case"KeyR":A&&C(n,!0);break;case"F9":A&&a.toBlob((e=>{m(e,".png")})),e.preventDefault();break;case"F10":A&&function(){if(d)return d.stop(),d=null,D.disconnect(F),D=null,void(F=null);let e=a.captureStream();F=o.createMediaStreamDestination(),D=i,i.connect(F),e.addTrack(F.stream.getAudioTracks()[0]),d=new MediaRecorder(e,{mimeType:"video/webm",videoBitsPerSecond:25e6});let t=[];d.ondataavailable=e=>{t.push(e.data)};let A=B.timerElement;A&&(A.hidden=!1,A.innerText="00:00");function s(){if(l){if(A){let e=Math.floor((Date.now()-l)/1e3);A.innerText=Math.floor(e/60).toString().padStart(2,"0")+":"+(e%60).toString().padStart(2,"0")}setTimeout(s,1e3)}}d.onstop=()=>{A&&(A.hidden=!0),m(new Blob(t,{type:"video/webm"}),".webm")},d.start(),l=Date.now(),setTimeout(s,1e3)}(),e.preventDefault()}A?g|=t:g&=~t};w.onkeydown=e,w.onkeyup=e}async function C(d,l){r&&(r(),r=null),o=new AudioContext({sampleRate:44100});let D=!0,F=new AbortController;r=()=>{o.close(),D=!1,F.abort()};let w=d.byteLength;if(B.setMessage(w),0==w)return;await o.audioWorklet.addModule(e("data:application/javascript,let%20e%3D%28...e%29%3D%3Enew%20Uint8Array%28...e%29%3Bclass%20s%20extends%20AudioWorkletProcessor%7Bconstructor%28%29%7Bsuper%28%29%2Cthis.sampleIndex%3D0%2Cthis.currentTime%3D0%2Cthis.isFirstMessage%3D%210%2Cthis.pendingUpdates%3D%5B%5D%2Cthis.port.onmessage%3De%3D%3E%7Bthis.memory%3F%28this.isFirstMessage%26%26%28this.currentTime%2B%3D%28e.data.t-this.currentTime%29%2F8%2Cthis.isFirstMessage%3D%211%29%2Cthis.pendingUpdates.push%28e.data%29%29%3Athis.load%28e.data%5B0%5D%2Ce.data%5B1%5D%29%7D%7Dasync%20load%28e%2Cs%29%7Blet%20t%3Dnew%20WebAssembly.Memory%28%7Binitial%3A4%2Cmaximum%3A4%7D%29%2Ci%3D%7Benv%3A%7Bmemory%3At%7D%7D%3Bfor%28let%20e%20of%5B%22acos%22%2C%22asin%22%2C%22atan%22%2C%22atan2%22%2C%22cos%22%2C%22exp%22%2C%22log%22%2C%22sin%22%2C%22tan%22%2C%22pow%22%5D%29i.env%5Be%5D%3DMath%5Be%5D%3Bfor%28let%20e%3D9%3Be%3C64%3B%2B%2Be%29i.env%5B%22reserved%22%2Be%5D%3D%28%29%3D%3E%7B%7D%3Bfor%28let%20e%3D0%3Be%3C16%3B%2B%2Be%29i.env%5B%22g_reserved%22%2Be%5D%3D0%3Blet%20r%3Dasync%20e%3D%3E%28await%20WebAssembly.instantiate%28e%2Ci%29%29.instance%2Cn%3Dawait%20r%28e%29%3Bfor%28let%20e%20in%20n.exports%29i.env%5Be%5D%3Dn.exports%5Be%5D%3Blet%20a%3Dawait%20r%28s%29%3Bthis.memory%3Dt%2Cthis.snd%3Da.exports.snd%7C%7Cn.exports.gesSnd%2Cthis.port.postMessage%282%29%7Dprocess%28s%2Ct%2Ci%29%7Bif%28this.isFirstMessage%3D%210%2Cthis.snd%29%7Bfor%28%3Bthis.pendingUpdates.length%3E0%26%26this.pendingUpdates%5B0%5D.t%3C%3Dthis.currentTime%3B%29e%28this.memory.buffer%2C80%2C32%29.set%28e%28this.pendingUpdates.shift%28%29.r%29%29%3Bnew%20Uint32Array%28this.memory.buffer%29%5B16%5D%3Dthis.currentTime%3Blet%20s%3Dt%5B0%5D%2Ci%3Dthis.sampleIndex%2Cr%3Ds%5B0%5D.length%3Bfor%28let%20e%3D0%3Be%3Cr%3B%2B%2Be%29s%5B0%5D%5Be%5D%3Dthis.snd%28i%2B%2B%29%2Cs%5B1%5D%5Be%5D%3Dthis.snd%28i%2B%2B%29%3Bthis.sampleIndex%3D4294967295%26i%2Cthis.currentTime%2B%3Dr%2F44.1%7Dreturn%210%7D%7DregisterProcessor%28%22apu%22%2Cs%29%3B")),i=new t(o);let m,Q=0,h=new Promise((e=>m=e)),y=e=>{Q|=e,3==Q&&m&&(m(!0),m=null)},E=()=>{"suspended"==o.state?(B.startButton&&(B.startButton.style="",a.style="display:none"),(B.startButton||a).onclick=()=>{o.resume()}):(B.startButton&&(B.startButton.style="display:none",a.style=""),y(1))};o.onstatechange=E,E(),n=d;let p=window.location.pathname;if(w<=1024&&!l){let e="";for(let t of A(d))e+=String.fromCharCode(t);p+="#"+btoa(e),p!=window.location.pathname+window.location.hash&&history.pushState(null,null,p)}a.width=a.width;try{let t={initial:4};f||(t.maximum=4);let a,r=new WLine truncated

src/run_native.rs

@@ -37,6 +37,7 @@ struct UW8Instance {
     end_frame: TypedFunc<(), ()>,
     update: Option<TypedFunc<(), ()>>,
     start_time: Instant,
+    next_frame: Instant,
     module: Vec<u8>,
     watchdog: Arc<Mutex<UW8WatchDog>>,
     sound: Option<Uw8Sound>,
@@ -69,8 +70,7 @@ impl MicroW8 {
             resize: true,
             ..Default::default()
         };
-        let mut window = Window::new("MicroW8", 320, 240, options)?;
+        let window = Window::new("MicroW8", 320, 240, options)?;
-        window.limit_update_rate(Some(std::time::Duration::from_micros(16666)));
 
         Ok(MicroW8 {
             engine,
@@ -186,6 +186,7 @@ impl super::Runtime for MicroW8 {
             end_frame,
             update,
             start_time: Instant::now(),
+            next_frame: Instant::now(),
             module: module_data.into(),
             watchdog,
             sound,
@@ -197,7 +198,19 @@ impl super::Runtime for MicroW8 {
     fn run_frame(&mut self) -> Result<()> {
         let mut result = Ok(());
         if let Some(mut instance) = self.instance.take() {
-            let time = instance.start_time.elapsed().as_millis() as i32;
+            {
+                if let Some(sleep) = instance.next_frame.checked_duration_since(Instant::now()) {
+                    std::thread::sleep(sleep);
+                }
+            }
+
+            let now = Instant::now();
+            let time = (now - instance.start_time).as_millis() as i32;
+            {
+                let offset = ((time as u32 as i64 * 6) % 100 - 50) / 6;
+                instance.next_frame = now + Duration::from_millis((16 - offset) as u64);
+            }
+
             {
                 let mut gamepad: u32 = 0;
                 for key in self.window.get_keys() {

test/frame_time.cwa

@@ -0,0 +1,20 @@
+include "../examples/include/microw8-api.cwa"
+
+global mut pos = 0;
+global mut next = 0;
+
+export fn upd() {
+    let lazy t = 32!32;
+    let lazy tick = t * 6 / 100;
+    let lazy rel = t - tick * 100 / 6;
+
+    setBackgroundColor(select(tick == next, 0, select(tick < next, 0x35, 0x55)));
+    setCursorPosition(pos % 13 * 3, pos / 13 % 30);
+    if rel < 10 {
+        printChar(32);
+    }
+    printInt(rel);
+
+    pos = pos + 1;
+    next = tick + 1;
+}

web/src/microw8.js

@@ -318,7 +318,7 @@ export default function MicroW8(screen, config = {}) {
                     if (restart) {
                         runModule(currentData);
                     } else {
-                        window.setTimeout(mainloop, Math.round(nextFrame - now))
+                        window.setTimeout(mainloop, nextFrame - now)
                     }
                 } catch (err) {
                     config.setMessage(cartridgeSize, err.toString());