LoginSignup
1
1

More than 5 years have passed since last update.

アプリとデバイスのスクリーンサイズのあわせ方

Posted at

こちらの翻訳
公式サイト: http://developer.egret.com/cn/github/egret-docs/Engine2D/screenAdaptation/zoomMode/index.html

1. ズームモード

Egret Engineが対応しているズームモード

  • showAll
  • noScale
  • noBorder
  • exactFit
  • fixedWidth
  • fixedHeight
  • fixedNarrow
  • fixedWide

ズームモードの設定方法

  1. index.htmlファイルのdata-scale-modeプロパティを変更します。
  2. ソースコードで変更
this.stage.scaleMode = egret.StageScaleMode.SHOW_ALL;

ズームモードの説明

600px x 600px の画像ファイルemmad.jpgを使用しindex.htmlファイルで、デフォルトのステージサイズを 600px x 600pxにします。

サンプル画像:
sample.jpg

index.html
<div data-content-width="600" data-content-height="600">

1.1 showAllモード

showAllモードは、アスペクト比を維持し、コンテンツ全体を表示するモードです。もしコンテンツ縦幅か横幅がウインドウ幅に足りない場合は、余白が表示されます。

このモードでは、ステージサイズ(stage.stageWidthstage.stageHeight)は、初期化時に外部から渡されたアプリケーションコンテンツサイズ(data-content-widthdata-content-height)と常に等しくなります。showAllがデフォルトモードです。

例:
showAll

1.2 noScale モード

noScaleモードはアスペクト比・スケーリングは元のコンテンツのものが維持されます。画面の左上に表示されます。ウィンドウよりコンテンツが小さい場合は余白が表示されます。

このモードでは、ステージの大きさ(stage.stageWidthstage.stageHeight)は、常にウィンドウのサイズと一致しています。

例:
noScale

1.3 noBorder モード

余白が表示されないように、アスペクト比を維持しながらスケーリングが変更されます。

ステージサイズ(stage.stageWidthstage.stageHeight)は、初期化時に外部から渡されたアプリケーションコンテンツサイズと常に等しくなります。

表示効果:
noBorder

1.4 exactFitモード

余白が表示されないようにアスペクト比・スケーリングが変更されます。
ステージサイズ(stage.stageWidthstage.stageHeight)は、初期化時に外部から渡されたアプリケーションコンテンツサイズと常に等しくなります。

例:
exactFit

1.5 fixedWidthモード

アスペクト比は維持されたまま、コンテンツの幅がウインドウ幅にあわようにスケーリングされます。コンテンツの高さは、初期設定のままではなく、ウインドウ高さに合うように変更されます。

ステージ幅(stage.stageWidth)は、初期化時に外部から渡されたアプリケーションコンテンツの幅と常に等しくなります。ステージの高さ(stage.stageHeight)は、スケーリングとプレーヤーウィンドウの高さに応じて決まります。

例:
fixedWidth

1.6 fixedHeightモード

fixedWidthの高さ版です

例:
fixedHeight

1.7 fiexedNarrow モード

アスペクト比を維持しながらコンテンツ全体がウインドウにマッチするようにスケーリングされます。もし縦か横方向のコンテンツサイズが不足する場合は余白が表示されます。

このモードでは、ステージの高さと幅(Stage.stageHeightStage.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.

例:
fiexedNarrow

1.8 fixedWide モード

アスペクト比を維持しながらウインドウ全体にコンテンツが表示されるようにスケーリングされます。もし縦か横方向のウインドウサイズが不足する場合はコンテンツは見切れます。

このモードでは、ステージの高さと幅(Stage.stageHeightStage.stageWidth)は、スケーリングとビューポートのサイズによって決まります。

例:
fixedWide

fixedNarrowとfixedWideモードの追記

fixedNarrowfixedWideモードは、fixedWidthfixedHeightを拡張したモードです。

この2種類の表示は似ていますが、スケーリングを決定する方向が動的に決まる点が異なります。スケーリングを縦横どちらを基準に行うかは、コンテンツとスクリーンのサイズに応じて決まります。fixedNarrowfixedWideのほうがUIのレイアウトが容易です。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1