NW.js を使ってアプリを作成していく過程で、画面アスペクト比の違いに対応する方法について実装しました。
画面アスペクト比率とは
画面アスペクト比率とは、モニターの表示部分の縦横比のことです。
様々なディスプレイがあります。
SVGA ( 800 x 600 )
XGA ( 1024 x 768 )
WXGA ( 1280 x 800 )
フルHD ( 1920 x 1080 )
WUXGA ( 1920 x 1200 )
他にワイドなど…です。
たいがいの場合、お使いの様々なゲームエンジンやゲームライブラリが全部吸収し、よしなにやってくれる場合がほとんどですが、自前のライブラリで作成していますので、この部分ももちろん自分で実装していきます。
実装方法
縦横比率には様々な状態があります。
縦が長い場合、横が長い場合、短い場合…など。
これら全部を網羅して、場合分けして….
などはもちろんしません。
とりあえずフルスクリーンを前提にしますので、nw.js におけるスクリーンの縦横の長さを取得する方法です。
|
1 2 3 4 |
nw.Screen.Init(); let bounds = nw.Screen.screens[0].bounds let currentWidth = bounds.width let currentHeight = bounds.height |
さらにここからフルスクリーンにする方法です。
|
1 2 3 4 |
let win = nw.Window.get(); win.resizeTo(currentWidth,currentHeight) win.enterFullscreen() win.setResizable(false) |
enterKioskMode というものもありますが、これをやると他のアプリに移動しようとするのを阻止します。大変嫌がられると思います、やめましょう。
さてこれをやると気づきます、canvasが圧倒的にはみ出たり、canvasの長さが足りなかったり、中身が変だったり、です。
これではあまりに素人が作った感じが満載ですよね。さすがに厳しいので、直していきます。
直し方には二種類あり、Zoomとletterbox になります。
Zoomは中央に表示して画面に合うように拡大する、ということになりますが、当然ゲームの要素がはみ出す可能性などがあります。
letterboxはゲーム全体を必ず収めるように、縮小する、ことです。
実装方法は簡単で、縦と縦、横と横の比率を計算し、比率が小さい方に全体を合わせる、という方法になります。
比率の計算
例えば 横(2) – 縦(1) の四角形を、横(1)-縦(1)に当てはめようとする場合を考えます。
この場合、横の比率は 1/2
縦の比率は 1/1 で
全体の比率としては小さい方を取るので、1/2 になります。
よって全体に 1/2 をかけ合わせればよい、ということになります。
|
1 2 3 4 5 6 7 |
let baseWidth = 1920 let baseHeight = 1080 let widthRatio = currentWidth/baseWidth let heightRatio = currentHeight/baseHeight theRatio = widthRatio if( widthRatio > heightRatio ){ theRatio = heightRatio} |
上記はフルHDを基準にしています。
どのような画面サイズに収まろうとするときも、フルHDの縦横比を維持する、ということになります。
ただ、これだけですと描画フィールドの大きさが変わるだけなので、ゲーム的には大問題です。
各要素を描画する際にも、この比率をかみ合わせます。具体的には以下のようになります。
以下は作成中のSuger.js から抜粋して一部変更したものです。
|
1 |
ctx.drawImage( v.src, sx, sy, v.fWidth, v.fHeight, theRatio * (v.x-(~~(w/2))), theRatio * (v.y-(~~(h/2))), theRatio*(w), theRatio*(h) ); |
canvas への設定
canvas には二つの設定がありますので、この二つともに忘れずに反映させます。
二つとは、
canvas の width, height の attribute
canvas の style の width, height
です。
