Graphics Scale Mode - HTML5

aditya · January 2018

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.

hgy29 · January 2018

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 ?

aditya · 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.

aditya · January 2018

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?

totebo · January 2018

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?

totebo · January 2018

Also, is this an issue only in a browser on mobile?

oleg · January 2018

try to set "no scale"

hgy29 · January 2018

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.

aditya · 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?

hgy29 · January 2018

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

aditya · January 2018

Checked with Gideros 2017.6 as well. No go.

totebo · January 2018

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.

oleg · January 2018

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

aditya · February 2018

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.

SinisterSoft · 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?

aditya · February 2018

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.

SinisterSoft · February 2018

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.

SinisterSoft · 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/

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Graphics Scale Mode - HTML5

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Graphics Scale Mode - HTML5

Comments