ScaleMode for HTML

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

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

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 ?

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.

Big thx! Now understand