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\$
3
  • 1
    \$\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
    Commented May 11, 2017 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
    Commented Nov 9, 2017 at 15:38
  • \$\begingroup\$ You now have 15 rep :) \$\endgroup\$
    – Engineer
    Commented Nov 9, 2017 at 16:22

2 Answers 2

Reset to default
1
\$\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\$
1
  • \$\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
    Commented Sep 25, 2015 at 16:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .