From e4388d12fa53cfa314432f64a92296e0e55a179e Mon Sep 17 00:00:00 2001 From: Daniel Brooks Date: Sun, 14 Jul 2019 13:00:03 -0700 Subject: [PATCH] fix scaling at least for MAME Turns out that a program that uses emscripten's SDL port to create a "window" (by calling SDL_CreateWindow) gets exactly the canvas size that they requested, and emscripten actually resets the canvas back to this size on certain events (such as window resize). This means that the application must request the scaled size, or explictly resize the canvas using a different API. Since MAME accepts a -resolution command-line argument, I can at least make it request a window of the scaled size. It's not as efficient as letting the browser scale the window, but it works. --- .dir-locals.el | 5 ++++- example_macplus.html | 1 + loader.js | 22 ++++++++++++++-------- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/.dir-locals.el b/.dir-locals.el index 1f84612c..289bfeee 100644 --- a/.dir-locals.el +++ b/.dir-locals.el @@ -2,4 +2,7 @@ ;;; For more information see (info "(emacs) Directory Variables") ((js-mode - (js2-basic-offset . 2))) + (js2-basic-offset . 2)) + (js2-mode + (js2-include-browser-externs . t))) + diff --git a/example_macplus.html b/example_macplus.html index 896a410c..6238595b 100644 --- a/example_macplus.html +++ b/example_macplus.html @@ -29,6 +29,7 @@ PCELoader.fetchFile("PCE Config", "examples/pce/pce-macclassic.cfg")), PCELoader.emulatorJS("emulators/pce/pce-macplus.js"))) + emulator.setScale(2); emulator.start({ waitAfterDownloading: true }); diff --git a/loader.js b/loader.js index 72628f4f..4a4cae5f 100644 --- a/loader.js +++ b/loader.js @@ -199,14 +199,15 @@ var Module = null; cfgr.fileSystemKey(game), cfgr.nativeResolution(nr[0], nr[1]), cfgr.aspectRatio(nr[0] / nr[1]), + cfgr.scale(scale), cfgr.sampleRate(SAMPLE_RATE)]; if ('keepAspect' in cfgr) { - cfgr.keepAspect(modulecfg.keepAspect); + config_args.push(cfgr.keepAspect(modulecfg.keepAspect)); } if (/archive\.org$/.test(document.location.hostname)) { - cfgr.muted(!(typeof $ !== 'undefined' && $.cookie && $.cookie('unmute'))); + config_args.push(cfgr.muted(!(typeof $ !== 'undefined' && $.cookie && $.cookie('unmute')))); } if (module && module.indexOf("dosbox") === 0) { @@ -662,6 +663,10 @@ var Module = null; return { aspectRatio: ratio }; }; + BaseLoader.scale = function (scale) { + return { scale: scale }; + }; + BaseLoader.sampleRate = function (rate) { return { sample_rate: rate }; }; @@ -742,7 +747,7 @@ var Module = null; config.emulator_arguments = build_mame_arguments(config.muted, config.mame_driver, config.nativeResolution, config.sample_rate, config.peripheral, config.extra_mame_args, - config.keep_aspect); + config.keep_aspect, config.scale); config.runner = MAMERunner; return config; } @@ -887,7 +892,8 @@ var Module = null; return { extra_np2_args: args }; }; - var build_mame_arguments = function (muted, driver, native_resolution, sample_rate, peripheral, extra_args, keepaspect) { + var build_mame_arguments = function (muted, driver, native_resolution, sample_rate, peripheral, extra_args, keepaspect, scale) { + scale = scale || 1; var args = [driver, '-verbose', '-rompath', 'emulator', @@ -895,7 +901,7 @@ var Module = null; keepaspect ? '-keepaspect' : '-nokeepaspect']; if (native_resolution && "width" in native_resolution && "height" in native_resolution) { - args.push('-resolution', [native_resolution.width, native_resolution.height].join('x')); + args.push('-resolution', [native_resolution.width * scale, native_resolution.height * scale].join('x')); } if (muted) { @@ -1562,7 +1568,7 @@ var Module = null; function setup_runner() { var runner = new game_data.runner(canvas, game_data); - resizeCanvas(canvas, 1, game_data.nativeResolution, game_data.aspectRatio); + resizeCanvas(canvas, scale, game_data.nativeResolution, game_data.aspectRatio); runner.onStarted(function () { splash.finished_loading = true; splash.hide(); @@ -1686,8 +1692,8 @@ var Module = null; canvas.style.width = resolution.width * scale +'px'; canvas.style.height = resolution.height * scale +'px'; - canvas.width = resolution.width; - canvas.height = resolution.height; + canvas.setAttribute("width", resolution.width * scale); + canvas.setAttribute("height", resolution.height * scale); } };