4
\$\begingroup\$

Can i change the screen dimensions in libGDX in HTML?

If I inspect the element (the game) in Chrome and I change canvas width or height it changes the screen dimensions, but I don't know how to do it in the HTML file. I have the default file generated by libGDX.

The CSS path to the canvas containing the screen size is: #embed-html > table > tbody > tr > td > canvas

The HTML is:

   <body>
          <a class="superdev" href="javascript:%7B%20window.__gwt_bookmarklet_params%20%3D%20%7B'server_url'%3A'http%3A%2F%2Flocalhost%3A9876%2F'%7D%3B%20var%20s%20%3D%20document.createElement('script')%3B%20s.src%20%3D%20'http%3A%2F%2Flocalhost%3A9876%2Fdev_mode_on.js'%3B%20void(document.getElementsByTagName('head')%5B0%5D.appendChild(s))%3B%7D">&#8635;</a>
          <div align="center" id="embed-html"></div>
          <script type="text/javascript" src="html/html.nocache.js"></script>
   </body>

   <script>
          function handleMouseDown(evt) {
            evt.preventDefault();
            evt.stopPropagation();
            evt.target.style.cursor = 'default';
          }

          function handleMouseUp(evt) {
            evt.preventDefault();
            evt.stopPropagation();
            evt.target.style.cursor = '';
          }
          document.getElementById('embed-html').addEventListener('mousedown', handleMouseDown, false);
          document.getElementById('embed-html').addEventListener('mouseup', handleMouseUp, false);
   </script>

\$\endgroup\$
  • \$\begingroup\$ Please take the answer out of your question, create your own answer, and then accept it. In case for some reason you cannot do that (due to low rep or whatever), I have created answer for you to accept. We like to close questions on this site :) \$\endgroup\$ – Engineer May 11 '17 at 10:10
  • \$\begingroup\$ Ok, thanks for the advice :) I cant accept your answer right now due to low reputation, but i'll accept it as soon as i got 15 rep. \$\endgroup\$ – Diogo Peres Nov 9 '17 at 15:38
  • \$\begingroup\$ You now have 15 rep :) \$\endgroup\$ – Engineer Nov 9 '17 at 16:22
2
\$\begingroup\$

(OP's own answer)

The solution to change the screen dimensions directly in the HTML/CSS is:

<style>
   div#embed-html table tbody tr td canvas{
     width:320px;
     height: 480px;
   }
</style>

That's where the screen is located.

\$\endgroup\$
0
\$\begingroup\$

I don't know if i understand your question correctly but in case you want to change the screen size of the game for webpage, you can do that by going to html game directory > src > yourpackage.client > HtmlLauncher.java and then modify resolution 480x320 to something else.

@Override
public GwtApplicationConfiguration getConfig () {
    return new GwtApplicationConfiguration(480, 320);
}
\$\endgroup\$
  • \$\begingroup\$ Yes, thats the way i know, to change the screen dimensions in the code before exporting, but i want to change them in the html. Example: style="width:100px". But the css path to the canvas where the screen is #embed-html > table > tbody > tr > td > canvas \$\endgroup\$ – Diogo Peres Sep 25 '15 at 16:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.