ScaleMode for HTML

Haxe
#1

Hi.
If I use next settings in project.xml window width=“0” height=“0” unless=“mobile” - the html target uses NO_SCALE mode, and stage.scaleMode parameters does not works, but if I set 1024 * 768 for example, the html target uses SHOW_ALL mode and stage.scaleMode parameters does not works too.
How I can use EXAT_FIT for html target ?
And stage.scaleMode parameters only for flash target ???
Thanks

#2

We don’t currently fully support stage.scaleMode at the moment. If you allow HTML5 to be width="0" height="0" in your project.xml (which is default), it scales to match the size of the DIV you embed it in. If you instead specify an exact width/height in your project file, then it scales up and down, preserving the same aspect ratio.

stage.scaleMode will work the same on the Flash target as you would expect, though

#3

Thx. But I dont understand about div scailing.

Ok . I have image 500 * 500, resolution screen 2000 * 1000. If i set width = 500, height = 500 in project properties - I see 1000 * 1000 image - there is SHOW_ALL scailing. But if i want to see exact fit scailing, the image must 2000 * 1000 resizing. What i can do , if my all assets has 500 * 500, but after build see 2000 * 1000 scailing ?

#4

The default behavior (<window width="0" height="0" if="html5" />) would result in the following:

  1. Image is displayed at it’s own size (500w * 500h)
  2. The canvas is resized automatically along with the size of it’s parent DIV (in other words, by default it is the full screen)
  3. If a resize occurs, Event.RESIZE is dispatched from stage

This is similar to StageScaleMode.SHOW_ALL on Flash

However, using a set window size (like <window width="500" height="500" />) results in this behavior:

  1. Image is displayed at it’s own size (500w * 500h)
  2. The canvas is scaled (not resized) using CSS to the largest size it can be without cropping. In a 2000w * 1000h window, this results in a 500w * 500h canvas with 200% scale using CSS, for an effective display size of 1000w * 1000h
  3. The default template will center this canvas on a black background, resulting in a “black box” effect of 500px on each side of the canvas

This is similar to the StageScaleMode.NO_BORDER behavior, sort of.

In the future, I would like to support additional stage scale modes using stage.scaleMode, but currently this is ignored. In the meantime, you can use the first approach (with a full size window) and handle Event.RESIZE to scale your content Sprite based on your own logic.

#5

Big thx! Now understand