Translate

2015年3月11日水曜日

JINS花粉カット眼鏡の重さ

花粉症には辛い季節になりました。
仕事柄、眠くなるタイプの薬は飲まないようにしているのですが、
目が痒いですね。とても痒い。プログラミングどころじゃないっての。
早く世の中にまさかりダイエットが流行って、一日一本ずつ杉の木を伐採する人がでてくるといいなと思います。
いつか来るその日のための繋ぎとして、花粉症対策眼鏡を買ってみました。
花粉をカットしてくれるかどうかは、よくわかりませんが・・・
これは重い!普段使っている眼鏡よりずっと重い!
そういえば、小学生くらいの時につけていた眼鏡はこれくらいの重さだったなぁ・・・と思いながら、
試しに重さを測ってみました。
両方とも、同じ度付きの眼鏡です。



普段使いの眼鏡(owndays)

JINS 花粉CUTパーフェクトフィットタイプ

大体、三倍くらい重さが違うんですねー。
花粉のカットももちろん大事なんですが、かけていて耳が痛くなるのは評価できませんなー

2015年3月1日日曜日

monaca内でのcanvas全画面処理と画像の表示方法

Monacaは一つのコードでandroidやappleのアプリを同時に作れるのがメリットですが、
端末によってディスプレイのサイズが違うのが難しいところです。
色々な端末があります・・・ 

tableタグなどでレイアウト調整すればいい場合もありますが、
今回苦戦したのがcanvasで大きな一枚絵を表示するケースです。
メインのマップを表示する際、後で色々なエフェクトを足したかったので
canvasを使う方法を選んだのですが、

まず、canvasを全画面にするのに一苦労。
こちらのページを参考にしました。

    var main = document.getElementById("main");
    mainhtml='<div id="wrapper" style="    width: 100%; height: 100%; position: fixed;">';    
    mainhtml+='<canvas id= "world" onclick="coordinate()"></canvas>';      
    mainhtml+='</div>';  
    main.innerHTML =mainhtml;


$(function () {
    sizing();
$(window).resize(function() {
sizing();
});
});

function sizing(){
$("#world").attr({height:$("#wrapper").height()});
$("#world").attr({width:$("#wrapper").width()});
}

これで、画面いっぱいに表示されました。


全画面表示成功

ところが、ipadのような端末のシミュレーターだと、縦横比が異なるため、
mapの見え方が変わってきてしまいます。

間延びした格好に 
というわけで、画像の縦横比とcanvasの縦横比を比べて、
画像のほうが横長のときはcanvas内で縮めて表示するようにしました。
(画像の表示については、他の記事を見てください。)

    if(img.width/canvaswidth> img.height/canvasheight)//横長の比率がcanvasのほうがきついとき
    {
縦を少し縮めて表示
        ctx.drawImage(img,0,0,img.width , img.height*(img.width/canvaswidth)/(img.height/canvasheight),0,0, canvaswidth, canvasheight);
 
    }
    else
    {
//通常通り表示
        ctx.drawImage(img,0,0,img.width , img.height,0,0, canvaswidth, canvasheight);
    }




うまくいきました。下の開いたスペースには、後で飾りを入れてごまかしましょう。

2015年2月23日月曜日

ゲーム内のメニューを作る

ゲーム中に呼び出せるメニューを作ります。
こちらがスタート画面で、タップしてメイン画面に進むと・・・

左端に、menuというタブができます。

タップすると、色々な画面へ飛べるようになります。(画面は開発中のものです)

特別なものを作ったのではなく、jqueryを使った
mb.extruder
をそのまま設置しています。
用意するもの
mbExtruder.js(上記の公式HPから入手できます)
jquery

jqueryとは何か・・・というのは詳しい人に譲るとして、monacaでは簡単にjqueryを設置できます。

ビルド設定からjqueryを有効にすれば、loader.jsで自動的に読み込んでくれます。

それでは、設定してみます。
ポイントは、スタート画面ではメニューを入れず、ゲーム画面になったら表示するというところ。
まず、スタート画面であるindex.htmlに
<script src="components/mbExtruder.js"></script>と書いておきます。
もちろん、mbExtruder.jsはアップロードしておきましょう。

<script src="components/loader.js"></script>
と記述してあるかも確認します。

次に、<div id="demo-left" class="a {title:'menu'}"></div>
と、空のdivを記述しておきます。後々にメニュー部分となるところですが、今は中身を記述しません。
また、script部分に、gamstart=false;という変数を宣言しておきます。
これで下準備は完了です。

次に、main画面で、
if(menuopen === false)
{
menuopen=true;
var main = document.getElementById("demo-left");
var mainhtml='<h3><a class = "sidemenu" href="javascript:void(0)" onclick="pagejump(\'main\'); return false;">MAIN</a></h3><h3></p><h3><a class = "sidemenu" href="javascript:void(0)" onclick="pagejump(\'shop\'); return false;" >SHOP</a></h3><h3><a class = "sidemenu" href="javascript:void(0)" onclick="pagejump(\'party\'); return false;" >PARTY</a></h3>';
main.innerHTML =mainhtml;

$(function(){//以下、MbExtruderの設定
    $("#demo-left").buildMbExtruder({
    position:"left",
    width:250,
    extruderOpacity:.8,
    hidePanelsOnClose:false,
    closeOnExternalClick:true,
    accordionPanels:false,
    onExtOpen:function(){},
    onExtContentLoad:function(){$("#demo-left").openPanel();},
    onExtClose:function(){}
  });
});

}
とscript内に書きます。
こうすることで、
「メイン画面に移動した最初の一回目のみ、メニューを起動する」
という動作が行えます。後は、公式HPを見ながらお好みでMbExtruderの設定を書き換えてカスタマイズしていけばいいでしょう。

もし、戦闘中とかでメニューを消したい場合は、
var main = document.getElementById("demo-left");
var mainhtml='';
main.innerHTML =mainhtml;
menuopen=false;
と書いておけば、最初のゲーム画面に戻るまで、メニューを隠すことが出来ます。