こちらの翻訳
公式サイト: 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のレイアウトが容易です。