こちらの翻訳
公式サイト: http://developer.egret.com/cn/github/egret-docs/Engine2D/screenAdaptation/zoomMode/index.html
1. ズームモード
Egret Engineが対応しているズームモード
- showAll
- noScale
- noBorder
- exactFit
- fixedWidth
- fixedHeight
- fixedNarrow
- fixedWide
ズームモードの設定方法
-
index.htmlファイルのdata-scale-modeプロパティを変更します。 - ソースコードで変更
this.stage.scaleMode = egret.StageScaleMode.SHOW_ALL;
ズームモードの説明
600px x 600px の画像ファイルemmad.jpgを使用しindex.htmlファイルで、デフォルトのステージサイズを 600px x 600pxにします。
サンプル画像：
<div data-content-width="600" data-content-height="600">
1.1 showAllモード
showAllモードは、アスペクト比を維持し、コンテンツ全体を表示するモードです。もしコンテンツ縦幅か横幅がウインドウ幅に足りない場合は、余白が表示されます。
このモードでは、ステージサイズ（stage.stageWidth、stage.stageHeight）は、初期化時に外部から渡されたアプリケーションコンテンツサイズ(data-content-widthとdata-content-height)と常に等しくなります。showAllがデフォルトモードです。
例：
1.2 noScale モード
noScaleモードはアスペクト比・スケーリングは元のコンテンツのものが維持されます。画面の左上に表示されます。ウィンドウよりコンテンツが小さい場合は余白が表示されます。
このモードでは、ステージの大きさ(stage.stageWidth、stage.stageHeight）は、常にウィンドウのサイズと一致しています。
例:
1.3 noBorder モード
余白が表示されないように、アスペクト比を維持しながらスケーリングが変更されます。
ステージサイズ（stage.stageWidth、stage.stageHeight）は、初期化時に外部から渡されたアプリケーションコンテンツサイズと常に等しくなります。
表示効果:
1.4 exactFitモード
余白が表示されないようにアスペクト比・スケーリングが変更されます。
ステージサイズ（stage.stageWidth、stage.stageHeight）は、初期化時に外部から渡されたアプリケーションコンテンツサイズと常に等しくなります。
例:
1.5 fixedWidthモード
アスペクト比は維持されたまま、コンテンツの幅がウインドウ幅にあわようにスケーリングされます。コンテンツの高さは、初期設定のままではなく、ウインドウ高さに合うように変更されます。
ステージ幅（stage.stageWidth）は、初期化時に外部から渡されたアプリケーションコンテンツの幅と常に等しくなります。ステージの高さ（stage.stageHeight）は、スケーリングとプレーヤーウィンドウの高さに応じて決まります。
例:
1.6 fixedHeightモード
fixedWidthの高さ版です
例:
1.7 fiexedNarrow モード
アスペクト比を維持しながらコンテンツ全体がウインドウにマッチするようにスケーリングされます。もし縦か横方向のコンテンツサイズが不足する場合は余白が表示されます。
このモードでは、ステージの高さと幅(Stage.stageHeight・Stage.stageWidth)は、スケーリングとビューポートのサイズによって決まります。
The original aspect ratio is scaled to the application content. After scaling, the application content fills the player viewport horizontally and vertically, and the narrower direction of the application content may not be wide enough to fill.
例:
1.8 fixedWide モード
アスペクト比を維持しながらウインドウ全体にコンテンツが表示されるようにスケーリングされます。もし縦か横方向のウインドウサイズが不足する場合はコンテンツは見切れます。
このモードでは、ステージの高さと幅(Stage.stageHeight・Stage.stageWidth)は、スケーリングとビューポートのサイズによって決まります。
例:
fixedNarrowとfixedWideモードの追記
fixedNarrow とfixedWideモードは、fixedWidth とfixedHeightを拡張したモードです。
この2種類の表示は似ていますが、スケーリングを決定する方向が動的に決まる点が異なります。スケーリングを縦横どちらを基準に行うかは、コンテンツとスクリーンのサイズに応じて決まります。fixedNarrowとfixedWideのほうがUIのレイアウトが容易です。