WebのプロジェクトをRetina対応画像(@2x)で表示する
Retina対応の設定をしていない場合、プロジェクト設定を「Web」に設定したプロジェクトではスクリーンが追加した画像のサイズのままで表示されます。そのため、以下の2つの現象が発生することがあります。
1) Retina対応(@2xサイズ)の画像を追加した場合に、想定よりも2倍の大きさで表示される
2) Retina対応のディスプレイで通常(@1xサイズ)の画像を見るとぼやけて表示される
スクリーンに「@2x」の設定をすると、 スクリーンの幅と高さが1/2で表示されるため、これら2つの現象を回避することができます。
スクリーンを「@2x」で表示する
「@2x」で表示する設定方法は2つあります。新しいスクリーンも、すでにProttにあるスクリーンも「@2x」に変更することができます。
新しいスクリーンとして「@2x」画像を追加する
- 「@2x」サイズで書き出した画像のファイル名の末尾に「 @2x」を追記します。
例:login.png
→login@2x.png
- 新しいスクリーンとして、プロジェクトに追加します。
- プレビューモードとプレゼンモードで確認すると「@2x」として表示されます。
すでにあるスクリーンを「@2x」画像に置き換える
すでにリンクエリアなどが設定されたスクリーンを「@2x」画像にする方法です。リンクエリアやトランジションの情報は維持されます。
- 「画像を置き換え」またはドラッグ&ドロップで、「@1xサイズ」の画像を同じファイル名の「@2xサイズ」の画像に置き換えます。
- スクリーン名の末尾に「@2x」を追記します。
例:ログイン画面
→ログイン画面@2x
- プレビューモードとプレゼンモードで確認すると「@2x」として表示されます。
注意:
Retina対応の画像はコメント、プレビュー、プレゼンモードで表示されます。スクリーンにアップロードした画像が大きくなると、ページの読み込みが遅くなる場合があります。