Nesbox javascript emulátor méret állítás gond.

Nesbox javascript emulátor méret állítás gond.
2017-11-03T07:40:46+01:00
2017-11-04T20:36:38+01:00
2022-10-15T21:36:10+02:00
Mofli
Valamiért a megjelenő kép felbontását nem tudom nagyobbra írni.:
Mellékeltem a programot. A nesbox.js-ben sem találok semmit.
258x240 csak.:

<center> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <br><br> <canvas id="nesbox-canvas" style="width:650; height:600 "></canvas> <script type="text/javascript"> var canvas = document.getElementById("nesbox-canvas"); var context = canvas.getContext("2d"); context.rect(0,0,650,600); context.fillStyle = "black"; context.fill(); context.fillStyle = "white"; context.fillText("Emulátor betöltése, Kérem várjon...", 10, 20); </script> <script type="text/javascript"> var Module = { canvas: document.getElementById('nesbox-canvas'), rom: 'http://vtmk.hu/roms/Kirbys Adventure (USA).nes' }; </script> <script async type="text/javascript" src="http://vtmk.hu/js/nesbox.js"></script> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES * * */ var disqus_shortname = 'nesbox-emulator'; /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <p><img src="img/keyboard.png" width="300" height="80"/></p> <div> <img src="nes_kb.png" alt="irányítás" border="0" width="400" height="250" /></div> </center>
Mutasd a teljes hozzászólást!
The standard display resolution of the NES is 256 horizontal pixels by 240 vertical pixels.

Nintendo Entertainment System - Wikipedia

Esetleg ezt probald meg
Scaling Your HTML5 Canvas to Fit Different ViewPorts (or Resolutions)
Mutasd a teljes hozzászólást!

  • Nézted van-e valami hibaüzenet? => F12 Konzol
    Esetleg az embed.js-ben?
    Mutasd a teljes hozzászólást!
  • <canvas id="nesbox-canvas" style="width:650; height:600 "></canvas>

    CSS-nél mindig írd ki a mértékegységet.

    A böngésző nem tudhatja mire gondolhattál amikor leírtad azt, hogy width:650. Jogosan kérdezi, hogy 650 mi: px, pt, pc, em, ex, mm, in, wh, wv, % vagy valami más?

    Ha a fentebb említett F12-ős fejlesztői eszközben ráinspektálsz az elemre, akkor rögtön kiderülnek az ilyen elírások.
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Az a baj az embed.js nincs a csomagban és nem tudom sehonnan letölteni. Én is arra gyanakszok. Mert mikor bejön az oldal egy pillanatig a megadott felbontás van de egy másodperc és levált a gyári felbontásra...
    Mutasd a teljes hozzászólást!
  • azt már én írtam bele utólag... De megmondom ugyanúgy kicsi marad.....
    Mutasd a teljes hozzászólást!
  • Az a baj az embed.js nincs a csomagban...

    Mivel nem tudom, hogy honnan-mit töltöttél le és a JS-es megoldásod honnan származik, sajnos én sem tudom...
    Mutasd a teljes hozzászólást!
  • Innen töltöttem le:

    nesbox/nesbox.github.io
    Mutasd a teljes hozzászólást!
  • A canvas-nak külön width és height tulajdonsága van, ami más, mint a CSS-ben megadott érték.

    Tehát erre cseréld:

    <canvas id="nesbox-canvas" width="650" height="600"></canvas>
    Mutasd a teljes hozzászólást!
  • Nem akarja...

    Eredetileg így nézett ki a kódom:
    index.html:

    <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Nesbox - mobile and web development</title> <!-- Bootstrap --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <link rel="shortcut icon" href="/img/favicon.ico"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-9879465-1', 'auto'); ga('send', 'pageview'); </script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <style type="text/css"> body { padding-top: 50px; padding-bottom: 20px; } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/">nesbox.com</a> </div> </div> </nav> <div class="container"> <h3>Choose platform for Nesbox Emulator:</h3> <ul class="nav nav-pills"> <li role="presentation" ><a href="/emulator/windows">Windows</a></li> <li role="presentation" class="active"><a href="/emulator/js">JavaScript</a></li> <li role="presentation" ><a href="/emulator/flash">Flash</a></li> <li role="presentation" class="disabled"><a>Andriod (soon)</a></li> <li role="presentation" class="disabled"><a>Chrome (soon)</a></li> </ul> <br> </div> <div class="jumbotron"> <div class="container"> <div class="row"> <div class="col-md-3"> <img class="img-responsive" src="/emulator/js/img/js_logo.png"> </div> <div class="col-md-9"> <h1>Nesbox Emulator</h1> <p><b>built on JavaScript</b></p> <p>Browser based version of the emulator compiled to JavaScript with Emscripten Web technology. It&#39;s open source and you can embed it to your website.</p> <p><a class="btn btn-primary btn-lg" href="https://github.com/nesbox/emulator.js" target="_blank">Learn more on Github</a></p> </div> </div> </div> </div> <div class="container"> <h2>Demo version</h2> <hr> <p class="lead">Works without any problems on browsers which support <a target="_blank" href="https://en.wikipedia.org/wiki/Asm.js">ASM.js</a> technology like <a href="https://www.mozilla.org/firefox/">Mozilla Firefox</a> or <a href="http://windows.microsoft.com/en-us/windows/preview-microsoft-edge-pc">Microsoft Edge (Spartan)</a>, on other browsers works with small delays.</p> <p> <canvas id="nesbox-canvas"></canvas> </p> <p> <img src="/emulator/js/img/keyboard.png"> </p> <p> <div> <span class="label label-default">UP</span> <span class="label label-default">DOWN</span> <span class="label label-default">LEFT</span> <span class="label label-default">RIGHT</span> - <span class="label label-primary">arrows</span> </div> <div> <span class="label label-default">SELECT</span> - <span class="label label-primary">space</span>, <span class="label label-default">START</span> - <span class="label label-primary">enter</span> </div> <div> <span class="label label-default">A</span> - <span class="label label-primary">z</span>, <span class="label label-default">B</span> - <span class="label label-primary">x</span>, <span class="label label-default">C</span> - <span class="label label-primary">c</span> </div> <div> <span class="label label-default">X</span> - <span class="label label-primary">a</span>, <span class="label label-default">Y</span> - <span class="label label-primary">s</span>, <span class="label label-default">Z</span> - <span class="label label-primary">d</span> </div> <div> <span class="label label-default">R</span> - <span class="label label-primary">d</span>, <span class="label label-default">L</span> - <span class="label label-primary">c</span> </div> </p> <hr> <div> <h3>How to embed it to your website?</h3> Coming soon... </div> <script type="text/javascript"> var canvas = document.getElementById("nesbox-canvas"); var context = canvas.getContext("2d"); context.rect(0,0,300,150); context.fillStyle = "black"; context.fill(); context.fillStyle = "white"; context.fillText("Loading emulator, please wait...", 10, 20); </script> <script type="text/javascript"> var Module = { canvas: document.getElementById('nesbox-canvas'), rom: '/emulator/js/roms/chip.nes' }; </script> <script async type="text/javascript" src="/emulator/js/js/nesbox.js"></script> <hr> <p> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES * * */ var disqus_shortname = 'nesbox-emulator'; /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript> </p> </div> <div class="container"> <hr> <footer class="footer"> <p class="pull-right" style="text-align:center;"> <a title="@nesboxcom" rel="tooltip" href="http://twitter.com/nesboxcom">twitter</a> <span class="text-muted">|</span> <a href="http://facebook.com/nesbox">facebook</a> <span class="text-muted">|</span> <a href="http://vk.com/nesboxclub">vkontakte</a> <span class="text-muted">|</span> <a href="https://plus.google.com/+Nesbox">google+</a> <span class="text-muted">|</span> <a title="support@nesbox.com" rel="tooltip" href="mailto:support@nesbox.com">support</a> </p> <p class="pull-left">&copy; 2015 Nesbox. All rights reserved.</a></p> </footer> </div> </body> </html>
    Mutasd a teljes hozzászólást!
  • A canvas mérete változik, csak a fekete hátteret is ekkorára kell állítanod, hogy ez nyilvánvaló legyen:

    <canvas id="nesbox-canvas" width="650" height="600"></canvas>
    És:
    context.rect(0, 0, 650, 600);
    Mutasd a teljes hozzászólást!
  • Nem hiszem el.. Nemigaz,hogy nincs valahol valami szabályzása ennek...
    Nem sikerül.... Nem enged az erőszaknak...

    <canvas id="nesbox-canvas" width="650" height="600"></canvas> <script type="text/javascript"> var canvas = document.getElementById("nesbox-canvas"); var context = canvas.getContext("2d"); context.rect(0, 0, 650, 600); context.fillStyle = "black"; context.fill(); context.fillStyle = "white"; context.fillText("Emulátor betöltése, Kérem várjon...", 10, 20); </script>
    Mutasd a teljes hozzászólást!
  • Pedig működnie kell:

    WXwrKq
    Mutasd a teljes hozzászólást!
  • Mutasd a teljes hozzászólást!
  • Az oldalon amit linkelsz, a canvas-on a width 256, a height 240.
    Mutasd a teljes hozzászólást!
  • Ertem de nem talalom hol van beirva a 256x240
    Mutasd a teljes hozzászólást!
  • Sugok. Benne van azema kerdesben.
     Miert nem tudom atirni a felbontasat sehol se talalom.
    Mutasd a teljes hozzászólást!
  •  Miert nem tudom atirni a felbontasat sehol se talalom.

    Ha a "sajat-utvonal/nesbox.github.io-master/emulator/js/index.html" fájl az amelyiket futtatod, akkor abban

    <!-- kb 99. sor --> <canvas id="nesbox-canvas" style="width:650px;height:600px;"></canvas> <!-- és a kb. 146. sor --> <script type="text/javascript"> var canvas = document.getElementById("nesbox-canvas"); var context = canvas.getContext("2d"); context.rect(0,0,650,600); context.fillStyle = "black"; context.fill(); context.fillStyle = "white"; context.fillText("Loading emulator, please wait...", 10, 20); </script>
    Megj: Ha ezek után is a kisebb méretben fog működni, akkor a konkrét betöltött játék (pl. nintendo) okozza, azaz annak az a beállított mérete...
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Amig nincs betöltve játék, más emulátor méret...
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Ugyanavval a beállítással, miután a játék betöltődött...
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • The standard display resolution of the NES is 256 horizontal pixels by 240 vertical pixels.

    Nintendo Entertainment System - Wikipedia

    Esetleg ezt probald meg
    Scaling Your HTML5 Canvas to Fit Different ViewPorts (or Resolutions)
    Mutasd a teljes hozzászólást!
  • De az előző flash emulátornál miért lehetett a felbontást állítani?? Ugyaezekkel a rom-okkal volt.
    Mutasd a teljes hozzászólást!
  • Teljesen mas tech.
    a flashbel van StageScaleMode, HTML5 nel meg nincs (ha jol tudom)
    Mutasd a teljes hozzászólást!
  • Akkor így ebben a formában nem is lehetséges nagyobbra állítani?
    Bocsi nem tudom azért kérdezem.
    Mutasd a teljes hozzászólást!
  • Fentebb irtam, hogy mit probalj meg.
    Mutasd a teljes hozzászólást!
  • Igen most már szuper köszönöm szépen:

    <head> <style> canvas { width: 650px; height: 600px; } </style> </head>

    http://vtmk.hu/kirbytest.php
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd