Skip to content

お絵描きアプリで学ぶHTML5のCanvas超速入門 #2 iPhoneで行こう

こんにちは。shi3zだよ。

東京は海外にいるときに思ったより落ち着いてるみたいだけど、余震とかけっこうドキッとするね。

僕の親戚が福島に住んでたんだけど、津波で家がなくなっちゃって、早々に東京の僕の家に避難してきたんだ。会ってみたらわりと元気そうで安心したよ。

地震で役に立ったものといえば、なんといっても、ケータイとTwitterだよね。

僕もアメリカにいたとき、日本にぜんぜん電話がつながらないし、ケータイメールも打てない、という状況になってすごく心配したんだけど、TwitterのDMだけは生きていて、なるほどこりゃ便利だわい、と思ったんだ。

さて、そんなわけで、せっかくお絵描きアプリを作るなら、iPhoneやAndroidでも動くといいよね?

 

今回はとりあえずiPhoneで動くようにしてみよう。Androidへの対応は次回フィーチャーするよ!

Macを持っていれば、以下のページからiPhone用のSDK(ソフトウェア開発キット)をダウンロードできる

http://developer.apple.com/devcenter/ios/index.action

インストールしたら、spotlightでiosと打ってみよう

するとiOSシミュレータを起動することができる。

これは、iPhoneだけでなく、iPadなどiOSを使うものをぜんぶシミュレートできるスグレモノだ。

 

起動すると以下のようにiPhone風の画面がでてくる。

 

本来は、iOS用のAppをテストするための環境なんだけど、iOS内蔵ブラウザのSafariを使うテストはもっと簡単だ。

HTMLファイルをこの画面にあらわれた仮想iPhoneにドラッグ&ドロップするだけでOK。

ファイルを作ったりするのが面倒な人は、とりあえず仮想iPhone上でSafariを起動して、URLのところに「junk.wise9.jp/game/」と入力、ソースコードを流し込むといい。
流し込んだら、「ゲームを実行」で実行される。OKかな?

ところがひとつ問題がある。

実は、前回のプログラムはそのままではiPhoneでは使えないのだ。

iPhoneに対応させたければ、以下のようなプログラムを書く必要がある。


var Blush=true;
var x=0,y=0;
function onLoad() {
    var canvasDiv = document.getElementById("canvas0");
    var canvas =document.createElement("canvas");
    canvas.width=320;
    canvas.height=480;
    canvasDiv.appendChild(canvas);
    ctx = canvas.getContext('2d');

    document.addEventListener("touchmove", function(event){ //A タッチムーブイベント
        mouseX = event.touches[0].pageX; //B 最初にタッチされた指のX座標
        mouseY = event.touches[0].pageY; //C 最初にタッチされた指のY座標
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(mouseX, mouseY);
        ctx.stroke();
        x =mouseX;
        y =mouseY;
        event.preventDefault(); //D 画面が動かないようにおまじない
    }, false);
    document.addEventListener("touchstart", function(event){ //E タッチスタートイベント
        Blush=true;
        x = event.touches[0].pageX;
        y = event.touches[0].pageY;
        }, false);
    document.addEventListener("touchend", function(){ //F タッチエンドイベント
        Blush=false;
        }, false);

}

前回は、イベントとリスナー(コールバック関数)を学んだね。
あのときは「mousemove(マウス移動)」とか「mousedown(マウスボタン押下)」というイベントだったと思う。

でもiPhoneやiPadにマウスはないよね?
そう。iOSでは、マウスイベントは拾えないのだ。

そこででてくるのが、タッチイベントだ。
タッチイベントの場合、「touchmove(タッチ移動)」「touchstart(タッチ開始)」「touchend(タッチ終了)」という種類がある。

マウスのようにボタンを押さないで移動、ということはタッチの場合は原理上あり得ないわけだ。

タッチイベントを設定しているのは、A、E、Fの行。これはもう見ればわかるね。
さて、もうひとつ。

タッチされた場所の情報を得るにはどうすればいいか?
それがB、Cの行だ。


        mouseX = event.touches[0].pageX; //B 最初にタッチされた指のX座標
        mouseY = event.touches[0].pageY; //C 最初にタッチされた指のY座標

マウスの場合、event.pageXとevent.pageYにマウス座標が入って来た。
タッチの場合、iPhoneはマルチタッチだから、そもそもタッチされた座標がひとつとは限らないんだ。

そこでevent.touchesに配列として渡される。
複数のタッチがあるかどうかは、この配列の大きさ、event.touches.lengthを見ると判定できるというワケ。賢いね。

お絵描きアプリの場合、とりあえずマウスと同じように指一本だけサポートすればいいから、event.touches[0]だけを見ている。

これで完成だ。
JavaScriptだけでiPhoneでお絵描きできるようになったね。

このエントリーをはてなブックマークに追加
はてなブックマーク - お絵描きアプリで学ぶHTML5のCanvas超速入門 #2 iPhoneで行こう
Post to Google Buzz
Share on GREE

Related posts:

  1. お絵描きアプリで学ぶHTML5のCanvas超速入門 #1
  2. shi3z式ゲームプログラミング入門 #2 あと48時間でゲームプログラマになる方法
  3. shi3z式ゲームプログラミング入門 #3 “ゲームらしく”する
  4. Kinectでキミもアイアンマンになれる!?(実装編)/バイナリとソース付き
  5. shi3z式ゲームプログラミング入門 #1 72時間でゲームプログラマになる方法

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*