enchantjsでスマホの回転に対応させる |
スマホを回転させると画面のサイズが変わらないため
ゲーム画面の一部しか表示されません。
で、どうにかならないかなと
施行錯誤をして、なんとかなりそうだったので
その方法を紹介してみます。
まず、今回紹介するサンプルを
らくだFactory公式サイトにアップしたので
どのような動きをするのか、ご確認ください。
サンプルページ
具体的には、回転イベント(resizeかorientationchange)で
ブラウザの幅と高さからゲーム画面の拡大率を
再計算し、再設定します。
ブラウザ画面上部やブラウザ画面の端に
ゲーム画面が寄ってしまうのも、
みっともないので画面中央に配置します。
また、ゲーム画面以外の場所をドラッグすることで発生する
ブラウザスクロールですが
タッチイベントを設定することで回避しています。
※ブラウザ上部のアドレスバーを隠してしまうので
ゲーム画面に他のページへの遷移ボタンなどを
かならず実装してください。
今回使用したサンプルは
公式サイトからダウンロードした
zipファイルのexamplesフォルダの下記のものです。
「plugins/ui/index.html」
(現時点で最新版の0.62を使用)
大きく修正したものに関して、
紹介します。
注意:jQueryを使ってます。(楽なんです・・・)
HTML(太文字が追記箇所です)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=320,initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>スマホ回転対応サンプル</title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/lib/enchant.js"></script>
<script type="text/javascript" src="js/lib/ui.enchant.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="common.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<div id="base" style="overflow:hidden;position:relative;">
<div id="enchant-stage">
</div>
<div>
</body>
</html>
common.js
//enchantjsの画面サイズの設定
function resetScreen(){
//ベースの幅を画面いっぱいに広げる
$("#base").width(window.innerWidth).height(window.innerHeight);
//enchantjs-stageの画面サイズを計算
var width = window.innerWidth;
var height = window.innerHeight;
//回転方向を幅と高さを比較して確認
var orientation = "";
if(width < height){
//縦
orientation = "portrait";
height = width;
}else{
//横
orientation = "landscape";
width = height;
}
//div enchant-stageを取得
var stage = $("#enchant-stage");
//スケールを計算
var scale = height / 320.0;
//div enchant-stage配下のdiv(その配下にcanvasが格納されている)に
//スケールを設定
var transformKey = "-" + enchant.ENV.VENDOR_PREFIX + "-transform";
stage.children("div").css(transformKey,"scale(" + scale + ")");
//enchantjsの画面を中央に寄せる
var left,top;
if(orientation == "portrait"){
top = (window.innerHeight-height)*0.5;
left = 0;
}else{
top = 0;
left = (window.innerWidth-width)*0.5;
}
stage.height(height).width(width);
stage.css({"position":"absolute","left":left+"px","top":top+"px"});
//スクロール位置を0,0に設定
$(window).scrollLeft(0).scrollTop(0);
//enchant.Coreへの反映情報として連想配列を返す
return {"scale":scale,"left":left,"top":top};
}
//初期設定
$(function(){
//回転時の処理
var orientationChange = function(){
//画面サイズ設定
var result = resetScreen();
//enchant.Coreへの変更情報を反映
var game = enchant.Core.instance;
if(game !== null){
game.scale = result["scale"];
game._pageX = result["left"];
game._pageY = result["top"];
}
};
//回転イベント
$(window).on("resize",function(event){
orientationChange();
});
$(window).on("orientationchange",function(event){
orientationChange();
});
//余白部分をドラッグすることによるスクロールを無効にする
$("#base").on("touchstart",function(event){event.preventDefault();});
//初回時のスクリーン設定
orientationChange();
});
ipod touchで動作確認済みです。
手持ちのAndroid端末で確認しましたが
canvas系の不具合で、
ゲーム画面がまともに表示されませんでした・・・
参考になれば幸いです。
【2/9 追記】
canvasがまともに表示されない現象はAndroid2.3ではなく
Android2.1でした。
Android2.3はcanvasは表示されるものの、
ボタンが表示されませんでした。
(ボタンの文字は表示される)
よかったらクリックしてください。
にほんブログ村