はい、こんにちは。
@CortanMathです。
今回は、JavaScript製の軽量ゲームエンジン「Enchant.js」についての記事になります。
別にEnchant.jsを使用しない場合においても応用できると思います。
で、内容は、「JavaScriptでスマホ向けアプリを作成した際、画面の向きを固定する」「画面を中央に表示する」といったものになります。
Enchant.js製のスマホ向けゲームで、画面横向き（または縦向き）のみでプレイしてほしい場合などがあると思います。
ただ、標準のままだとスマホの傾きにより画面が回転し、ゲーム画面サイズが小さくなってしまったりしますよね。
ということで、「画面の向きを判断し、もし目的の向きでなかった場合、その向きに端末を回転させるよう促す」ということを今回やりたいと思います。
最初のころは、何があっても強制的に画面を横向き（縦向き）に表示したいと考えていました。
「画面の向きを判定」 ⇒ 「もし目的の向きでなかった場合、ゲーム画面を無理やり90度回転させ、調節する」
という予定でしたが、スプライトとかの回転はできても画面自体の回転は良くわからなかったのと、画面横向きでプレイさせたい際に、縦にもった状態で横
向き表示する必要はないので、ただ警告を出すだけにしました。
また、それに加えて、Enchant.jsのゲーム画面を中央に表示するようにしたいと思います。
これをしないとゲーム画面は常に左上につめられて表示されるため、縦横比の異なるスマホとかでは、左右の余白のバランスがおかしなことになってしまい
ます。
スマホによって余白ができてしまうのはどうしようもないので、せめて、全体のバランスが良くなるようにしたいと思います。
では、やっていきましょう。
Enchant.jsでゲーム画面を横向き（縦向き）に
これを行うためにも、まず、スマホの向きが「今、縦なのか横なのか」を判断する必要がありま す。
書き方はいろいろあるのですが、今回はその中でもシンプルな書き方をします。
if (window.innerHeight > window.innerWidth) {
//縦向きだった場合
}
こんな感じです。
画面の幅と高さを出して、その長さの比較をするという簡単なやり方です。
で、この縦向きだった場合に、「端末を横向きにしてください。」みたいなメッセージを出せばよいわけです。
実際にメッセージ表示を実装するとこうなります。
gameオブジェクトがロードされたところに書きます。
var alert = new Scene();
alert.backgroundColor = 'black';
var message = new Label('端末を<br><br>横向きにして<br><br>持ってください。');
message.color = 'white';
message.font = '50px "Arial"';
message.textAlign = 'center';
message.x = (game.width - message._boundWidth) / 2;
alert.addChild(message);
if (window.innerHeight > window.innerWidth) {
game.replaceScene(alert);
}こんな感じです。
これで最初ゲームがロードされた際、もしスマホが縦向きだったら、横向きにしてくれという警告を出しています。
また、最初から横向きだった場合は、標準のrootSceneが読み込まれます。
rootSceneにゲーム本体を用意すればよいわけです。
それが嫌な人は、上記のコードのif分にelseを足し、そこにゲームのメインシーン（もしくはOPシーン）を読み込むように書けばいいと思います。
ただこのコードのままだと問題があります。
ロード時に端末が横向きだった場合は良いですが、縦向きだった場合、メッセージだけ表示してそれ以降なにも進みません。
端末を傾けて横にしたら～、という処理が必要なわけです。
その部分はこう書きます。
window.onload = function(){}; の外にでも書いてください。
window.addEventListener("orientationchange", function () {
location.reload();
});
こんな感じです。
端末を90度傾けたら、みたいなイベントのようです。（正確には違うかもしれない）
だから、横から縦にしても、縦から横にしても発生します。
で、そのイベント発生後、ウェブサイト自体をリロードしています。
そうすると先ほどのコードがまた読み込まれ、今度は、ゲームがスタートするという仕組みです。
リロードするというのはあまり賢い書き方ではないと思いますが、コードを簡潔にし、減らすために採用しました。
これで、画面の向きが解決しました。
画面を中央に表示する
今度はゲームの画面を中央に表示します。
var game = new Core(640, 360);
var CenterMove = function (core) {
var stage = document.getElementById('enchant-stage');
stage.style.position = 'absolute';
stage.style.top = (window.innerHeight - (core.height * core.scale)) / 2 + 'px';
stage.style.left = (window.innerWidth - (core.width * core.scale)) / 2 + 'px';
core._pageX = (window.innerWidth - (core.width * core.scale)) / 2;
core._pageY = (window.innerHeight - (core.height * core.scale)) / 2;
};
CenterMove(game);
こんな感じです。
gameオブジェクトを渡し、それをちょうど画面真ん中に来るよう移動しています。
以上です。
ではさようなら。
またお会いしましょう。
もしよければ、LINEスタンプの方もよろしくお願いします。
https://line.me/S/sticker/7072968
白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。
