Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
Graphics Scale Mode - HTML5 - Gideros Forum

Graphics Scale Mode - HTML5

Graphics scale mode doesn't seem to work in the exported HTML5. Using gideros 2018.1.1.

Resolution: 320x480.

Tried letterbox, no scale, fit width/height, stretch. All look the same on a mobile device where the game screen doesn't fit in the device dimensions but goes outside those bounds.

Do you have to do this manually? i.e. scale every image based on application:getContentWidth/Height?

Same project on letterbox works fine with deployed apk on different android devices.

Loon Games LinkedIn Facebook Twitter - "Something bit me, gaah!"

Comments

  • hgy29hgy29 Maintainer
    Actually gideros can still draw outside the screen bounds, which can be more misleading on HTML5 than on other platforms especially if your game is landscape while the phone is held in portrait.

    Can you post snapshots of what you see vs what you expect to give us an idea about what happens ?
  • adityaaditya Member
    edited January 2018
    Project Properties:
    Scale Mode: Letterbox
    Logical Dimensions: 320x480
    Orientation: Portrait

    1) HTML5 (hosted on desktop WAMP server, opened on Samsung Galaxy S6, Chrome Browser):



    2) Gideros Android Player on Samsung Galaxy S6:



    3) Gideros Player on Windows Desktop:


    Resolution seems to scale automatically on all platforms except HTML5.
    winplayer.png
    330 x 549 - 27K
    html5 (3).png
    330 x 587 - 15K
    androidplayer1.png
    330 x 587 - 11K
    Loon Games LinkedIn Facebook Twitter - "Something bit me, gaah!"
  • You can add a single 64x64 bitmap to the stage and see the difference between the player and HTML5 output.

    The bitmap seems to lose it's aspect ratio and stretch vertically. It's position also changes upwards.

    How to fix this?
    Loon Games LinkedIn Facebook Twitter - "Something bit me, gaah!"
  • Strange that I haven't seen this before. I've published three letterbox games to HTML5, and they've been fine.

    Can you replicate the issue with a minimal project?
    My Gideros games: www.totebo.com
  • Also, is this an issue only in a browser on mobile?
    My Gideros games: www.totebo.com
  • try to set "no scale"
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • hgy29hgy29 Maintainer
    by the look of your pictures I am under the impression that the HTML5 canvas isn't correctly placed on the page. This could well be a browser issue, since as @totebo I exported a few projects in HTML5 and never saw something like that.
  • adityaaditya Member
    edited January 2018
    @totebo : Here's a minimal project. Added a 39x39 image to the stage. This issue only seems to be present on the mobile browser especially in portrait mode.

    Phone Browser (Chrome, Samsung S6):



    Gideros Player (Desktop):



    @oleg : Tried no scale in the above project. When No-scale center, 39x39 image is a tiny dot. No-scale left renders the image completely out of the canvas. Can just see a blank white screen.

    @hgy29 : It seems to be reproducible easily. Tested it on Samsung J7 as well as the default Samsung Internet app. Exact same problem persists.

    How to go about debugging this?
    browser.png
    330 x 566 - 7K
    giderosplayer.png
    338 x 525 - 10K
    Loon Games LinkedIn Facebook Twitter - "Something bit me, gaah!"
  • hgy29hgy29 Maintainer
    best way to debug this would be to inspect how the browser laid out the html, specifically the canvas. I think chrome (desktop) can link to chrome (mobile) if usb cable is connected to PC
  • adityaaditya Member
    edited January 2018
    Checked with Gideros 2017.6 as well. No go.
    Loon Games LinkedIn Facebook Twitter - "Something bit me, gaah!"
  • I've published games to HTML5, but thinking back I seem to remember issues running the games in a mobile browser. Since I was targeting apps and desktop HTML5, I never tried to fix it, though.
    My Gideros games: www.totebo.com
  • just an idea:
    set "no scaling" mode
    get the coordinates of the sides of the screen
    minX,minY,maxX,maxY=application:getLogicalBounds()

    add all objects to the sprite-"group"
    manually set the size of the group





    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • Used Defold engine and the same project works well in terms of overall performance (same code in lua which used to lag in Gideros runs fine in Defold) and automatic resolution, especially on mobile devices.

    This is not to run down Gideros in any way. The contributors are doing a wonderful job supporting this engine, just think that improvements need to be made before gideros can be used for HTML5 client projects.
    Loon Games LinkedIn Facebook Twitter - "Something bit me, gaah!"
  • SinisterSoftSinisterSoft Maintainer
    edited February 2018
    Do you mean game speed - if so I wonder what they are doing? They use emscripten, the lua speed should be about the same. Unless there is an optimisation for emscripten we don't know about.

    Or do you mean loading speed. Their game code on one of the basic samples is about 5MB of javascript.

    This is their loader: http://pipler.in/dmloader.js

    They also have this:
    	  <script type='text/javascript' src="dmloader.js"></script>
    	  <script type='text/javascript' src="Pipler.js" async onload=""></script>
    This is the bit that loads the loader and the game into the browser.

    Does it load faster for you? If so why does it load faster than Gideros html5 similar apps?
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • Have a loop that iterates over a normal array, then another loop inside which iterates over a 2d array. This is being called on mouse move, so quite often as you can imagine.

    Optimizations aside, this code used to lag quite a lot in Gideros. The exact same code runs smoothly in Defold.
    Loon Games LinkedIn Facebook Twitter - "Something bit me, gaah!"
  • That lust be an optimisation in the Lua interpreter. Can you post some code that does this lag - then we can really check it out and see what optimisation they have done with Lua - then possibly include that same optimisation.
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • SinisterSoftSinisterSoft Maintainer
    edited February 2018
    Ahh - Lua in defold for all platforms except iOS and HTML5 uses LuaJIT.

    That would explain why it's Lua is faster. Did you try making a html5 export of the test for lagging?

    https://www.defold.com/manuals/lua/
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
Sign In or Register to comment.