mcmillen/snej
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

autoscale canvas based on browser dimensions.

Browse Source 
add more canvas scale options.
hide canvas element until scale is set.
This commit is contained in:
Colin McMillen 2019-09-25 10:24:31 -04:00
parent 2fe15e98fb
commit 0ebdf6f47f
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -22,7 +22,7 @@
</head> </head>
<body> <body>
<!-- SNES resolution: 256x224. 4x scaled: 1024 x 896. --> <!-- SNES resolution: 256x224. 4x scaled: 1024 x 896. -->
<canvas id="canvas" width="256" height="224"></canvas> <canvas id="canvas" width="256" height="224" style="display: none"></canvas>
<div id="fps"></div> <div id="fps"></div>
<div id="debug"></div> <div id="debug"></div>
<button id="1x">1x</button> <button id="1x">1x</button>
@ -30,6 +30,9 @@
<button id="3x">3x</button> <button id="3x">3x</button>
<button id="4x">4x</button> <button id="4x">4x</button>
<button id="5x">5x</button> <button id="5x">5x</button>
<button id="6x">6x</button>
<button id="7x">7x</button>
<button id="8x">8x</button>
<img src="res/tf/atlantis/tf_atlantis_tiles.png" id="atlantis" style="display: none"> <img src="res/tf/atlantis/tf_atlantis_tiles.png" id="atlantis" style="display: none">
<img src="res/tf/halloween/ghost1.png" id="ghost" style="display: none"> <img src="res/tf/halloween/ghost1.png" id="ghost" style="display: none">
<script src="main.js"></script> <script src="main.js"></script>

17
main.js
View File

@ -484,6 +484,17 @@ function setCanvasScale(scale) {
const canvas = document.getElementById('canvas'); const canvas = document.getElementById('canvas');
canvas.style.width = '' + snesWidth * scale + 'px'; canvas.style.width = '' + snesWidth * scale + 'px';
canvas.style.height = '' + snesHeight * scale + 'px'; canvas.style.height = '' + snesHeight * scale + 'px';
debug('set scale to ' + scale + 'x');
canvas.style.display = '';
}
function setAutoCanvasScale() {
const snesWidth = 256;
const snesHeight = 224;
const widthAspect = Math.floor(window.innerWidth / snesWidth);
const heightAspect = Math.floor(window.innerHeight / snesHeight);
const scale = Math.min(widthAspect, heightAspect)
setCanvasScale(scale);
} }
function init() { function init() {
@ -495,9 +506,11 @@ function init() {
document.getElementById('3x').onclick = () => setCanvasScale(3); document.getElementById('3x').onclick = () => setCanvasScale(3);
document.getElementById('4x').onclick = () => setCanvasScale(4); document.getElementById('4x').onclick = () => setCanvasScale(4);
document.getElementById('5x').onclick = () => setCanvasScale(5); document.getElementById('5x').onclick = () => setCanvasScale(5);
setCanvasScale(4); document.getElementById('6x').onclick = () => setCanvasScale(6);
document.getElementById('7x').onclick = () => setCanvasScale(7);
document.getElementById('8x').onclick = () => setCanvasScale(8);
setAutoCanvasScale();
window.requestAnimationFrame(loop(world, gfx)); window.requestAnimationFrame(loop(world, gfx));
debug('initialized!');
} }
init(); init();