html5 game size in browser

  • #1, by Simon_ASASunday, 30. July 2017, 15:41 8 years ago
    Hi! When I export to html5, how can I prevent a game to play in fullscreen inside the internet browser?
    Right now the game is scaled to fit the window, but I'd like it to keep its original resolution and have black borders around.
    Is it possible?

    Great Poster

    321 Posts


  • #2, by Simon_ASAThursday, 03. August 2017, 16:40 8 years ago
    No?

    Great Poster

    321 Posts

  • #3, by sebastianThursday, 03. August 2017, 17:21 8 years ago
    cant you edit the canvas size via css? 

    Thread Captain

    2346 Posts

  • #4, by Simon_ASAWednesday, 09. August 2017, 18:52 7 years ago
    Thanks for trying to help Sebastian wink

    I tried to edit the main file, index.html
    I've changed the following lines:

    document.getElementById('canvas').width = window.innerWidth;

    document.getElementById('canvas').height = window.innerHeight;



    to

    document.getElementById('canvas').width = 1024;

    document.getElementById('canvas').height = 576;



    Now the game doesn't resize automatically anymore to fit the web browser, and it keeps the original game resolution (1024x576). So you could think I've solved it.
    However it brings some problems:
    - It often happens that the game freezes at runtime (after loading: black screen).
    - The game is not centered, it is at the top left corner of the screen.

    Finally I have noticed that the game is slower in html5 (in Firefox, I've not tried others). It's not a problem of slow connexion because I tried both online and local (offline) and the result is the same.

    But it's not very important. I'm already happy to be able to export to html5, it's great to have the choice!

    Great Poster

    321 Posts

  • #5, by afrlmeWednesday, 09. August 2017, 19:04 7 years ago
    Firefox eats up your system resources. Check it out in task manager or the mac equivalent - I forget if you are working with windows or mac. Sorry - bloody memory. I checked task manager the other day & Firefox was using 400mb RAM & all I had open was VS forum. I was replying to someones post.

    I would recommend converting to webp for html5 as like playing an application on windows or mac, it should load & run much faster & smoother.

    I think html5 downloads temp files to the hdd before running the game? I'm not savvy on exactly how it works, but I vaguely recall when I tried Game Royale html5 version that someone linked on here, that it tried to download the files before it would play.

    Imperator

    7285 Posts

  • #6, by sebastianWednesday, 09. August 2017, 21:28 7 years ago
    you could wrap that canvas inside a < div > tag which has :

    position: auto;
top:50%;
left:50%;
margin-top: -288px;
margin-left: -512px;

    Thread Captain

    2346 Posts

  • #7, by Simon_ASAThursday, 10. August 2017, 11:44 7 years ago
    @AFRLme
    You're right, Firefox uses 337MB right now. That's a lot, indeed.
    I'm already using webp format, but there could be some png left here and there, i'll check.
    Regarding the download of temp files, I didn't think of it, and it's a good way to look for! I will try to optimize even more the files compression.

    @sebastian
    Thanks it's really kind of you. I'll give it a try!

    Great Poster

    321 Posts

  • #8, by NigecFriday, 11. August 2017, 15:56 7 years ago
    I noticed care need to be taken loading scenes, stuff seems to be loading a lot slower, so the next scene loading can be quite ugly
    I fade in and out is probably a good idea and have animation and sound pre loaded

    Key Killer

    640 Posts

  • #9, by afrlmeFriday, 11. August 2017, 16:01 7 years ago
    I noticed care need to be taken loading scenes, stuff seems to be loading a lot slower, so the next scene loading can be quite ugly
    I fade in and out is probably a good idea and have animation and sound pre loaded

    Or if you are creating specifically for html5 only keep that in mind & try to optimize as much as possible for it. Lower resolutions. Less animation frames. Less openGL shader effects. Webp format for images & animations, etc.

    Browser based games should be fairly small in general.

    Imperator

    7285 Posts