前回のつづき
期待通りに動かなかったものを修正しました。
今回はJavaScript・・・CSS寄りのお話
※個人的な意見・指針です。
※間違ったり考えが偏ったりしてる可能性も高い内容です。
ゲーム画面の回転
前回思いついた案をさっと書いて実行してみたものの、想定通り動作しなかったので修正しました。
ゲーム画面ではないですが、テスト画像をゲーム画面と見立ててみてください。
スマホでしたら、画面の回転を。
PCでしたら、ブラウザのウィンドウサイズを縦長にしたり横長にしたりすることで効果を体感できると思います。
常にブラウザの幅のある方へ頭が向くようになっています。
これは逆に幅の短い方へ向けることもできます。
このように、製作者が望むディスプレイ方向でプレイするようにユーザーに依頼する(主にスマホやタブレットにおいて画面の回転を促す)のではなく、製作者が望むディスプレイ方向に表示し続ける。
この一定の方向へ向いていることが大事で、
スマホで画面を回転しても常に一定の方向を向いているので、ユーザーはプレイに最適な方向を保ちながらプレイできます。
ソースは次の通り
‘resizeTest01.html’
<DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リサイズテスト</title>
<script type="text/javascript" src="resizeTest01.js"></script>
</head>
<body style="margin: 0px">
<div id="game"><img style="width: 100%; height: 100%;" src="resizeTest.png"></div>
</body>
</html>
‘resizeTest01.js’
//divタグを格納するための変数
var game;
//window.onresizeで用いる時間変数
var timer = 0;
window.onload = function(){
game = document.getElementById("game");
//回転処理の影響で余白ができてしまうのでスクロール禁止
document.body.style.overflow = "hidden";
resize();
}
window.onresize = function(){
//200 milli seconds以内にリサイズが起こればタイマーリセット
clearTimeout(timer);
//200 milli seconds立てばリサイズし終わったと判断
timer = setTimeout(function(){
resize();
},200);
}
//リサイズに呼び出される
function resize(){
var width = window.innerWidth;
var height = window.innerHeight;
console.log("width:" + width + " height:" + height);
//ブラウザが横長かどうかで条件分岐
if(width > height){
//回転する前提でブラウザ高さを横幅に指定、ブラウザ幅を縦幅に指定
game.style.width = height;
game.style.height = width;
//以下回転処理
//回転中心を決め、回転中心を指定し、回転をする
var rotateCenter = height / 2;
game.style.transformOrigin = rotateCenter + "px " + rotateCenter + "px";
game.style.transform = "rotate(-90deg)";
}else{
//回転をしないのでブラウザサイズに合わせた変形
game.style.width = width;
game.style.height = height;
//回転を何も変形しないことで上書き
game.style.transform = "";
}
}
‘resizeTest.png’
ソース内にコメントを多めに記載したので詳細は省きます。(JavaScriptの記述が拙い点は、勉強中の身なので優しくご指摘頂ければ幸いです。)
さて、今回は画像で代用したのでウィンドウのリサイズを起点にしましたが、本来はリサイズでは拡大縮小のみを行い、回転はゲーム内外にボタンを配置してユーザー始動行っても良いと思います。(こちら方法のが特殊環境の吸収、ひいてはユーザビリティの向上につながりそう)
あとは、ブラウザにぴったり合わせて縦横比が変化しているので、実際はセンタリングして幅の短手側に合わせて長手に余白を入れてやるとか、指定した方向のみは無限遠に広がる設定にしておくとか、ゲームに合わせた方法にしてやれば良さそうですね。
因みに今回の変形はcssによる効果なので、cssを無効化する環境では拡大縮小や回転が行われなれません。
これでMemo.1を書くきっかけになった、実現したいことは大体できた気がします。
良かった良かった。
次回は試しにゲームを動作させるか、ASP.NETについてやるかします。
御覧いただきありがとうございました。