CSS3やHTML5要素のコードヒント機能拡張を作っている丸山さん(兄さん)と、夜スカイプで話をして、「へえ」なんて聞いていたけど、自分でもやってみようかな?って、本当は全然自信がなかったんだけど、ちょっと触ってみたら、ここまで出来た。

「HTML5.JP – 次世代HTML標準 HTML5情報サイト」http://www.html5.jp/
CSS3やHTML5要素のコードヒント機能拡張を作っている丸山さん(兄さん)と、夜スカイプで話をして、「へえ」なんて聞いていたけど、自分でもやってみようかな?って、本当は全然自信がなかったんだけど、ちょっと触ってみたら、ここまで出来た。
「HTML5.JP – 次世代HTML標準 HTML5情報サイト」http://www.html5.jp/
145ページからの
特集2:新バージョンの奥義を入手せよ!大攻略「Adobe Creative Suite5」
という特集記事です。
CS5の主要製品の新機能を紹介していて、僕はFlash担当でした。
特に大きく取り上げたのは、TLF(テキストレイアウトフレームワーク)って機能で、Flash上で縦書きや段組みなども出来る機能を紹介させてもらったほか、ActrionScript3.0が苦手なデザイナーさんでもありがたい「コードスニペットパネル」や、ActrionScriptコードのコード補完機能がFlash IDE内でもかなり良くなった点をあげました。
僕の中ではこのコード補完機能が実はもっともデカイな、と感じています。
http://station5.jp/seminar/list.html
さてさて、前回のサンプルでは、マウスに戦闘機がくっついてくるのはいいんですが、スタンプを押し続けたように何機も表示されますよね?
canvasはFlashのムービークリップを動かすのと違い、アニメーションしたい所は、一度背景も全部書き直しが必要なんです。
で、どうするかというと、前回のサンプルから1行だけ、ある場所に動かすだけで解決!します。
それがこのソースです。
ちゃんと戦闘機がついてきてます。
↓クリックしたらデモページに飛んじゃいます。
普通にイラストレータの画面です。
戦闘機を作ってみました。
なんだか頼りない戦闘機ですが、まずはこれをcanvasに表示してみましょう。
PNG形式で透過付きの状態で保存します。
これをHTMLと同じ階層に「images」というフォルダを作ってそこに「player.png」と名付けて保存しましょう。
出来たら前回のJavaScriptコードの中にちょっと追加します。
結果はこんな感じです。
解説はこんな感じです。
これを「マウスの動きに付いてくる」やつを作りましょう。
昔あったなあ、マウスに付いてくるなんてヤツ、今はそんなに見ないですか、、やっぱり。
こういう場合、なんといってもマウスの座標が分からない事には、なんともなりません。
で、色々訳あって、IEを除いたとしてもすべてのブラウザで、マウスの取得方法が一緒とは限りません。
何故かというと、canvasがブラウザの左上隅にある場合問題ないですが、
スクロールしたりして、ブラウザの左上からcanvasの位置がずれている場合、Safari, FF, Chromeなどで共通して、マウスの位置を取れません。
で、こないだ朋やんが教えてくれたやり方でこんな方法がありました。
http://cpplover.blogspot.com/2009/06/dom-level-3.html
「canvas.onmousemove = getMousePoint;」は、キャンバスでマウスが動くたびに「getMousePoint」って関数を呼びなさいって言ってます。
その中でこのように書くと、マウスの座標がそれぞれmouseX、mouseYに代入されますからこれが使えます。
そのmouseX、mouseYを、戦闘機の座標に入れてあげたらマウスと一緒に動きます。
試してみるとこんな感じです。
あるWeb系セミナーイベントのおまけで作ったcanvasを使ったゲームです。
と言っても点数が出るわけでもなく、戦闘機を動かして、クリックしたら弾が出て敵のタコキャラを消していくって一連の流れを追って作っていきましょう。
まずcanvasですが、お決まりのパターンとして憶えておきます。
1200pxの横幅、800pxの高さのcanvasタグを書きます。
これをJavaScriptで読みにいきます。
これで、このあとはJavaScriptで変数「ctx」にドットシンタックス(ドット「.」で命令をつないでいく文法、JavaScriptやActionScriptでは定番)で書いていくことになります。
で、四角を描く方法は以下の通りです。(ソースをコピペしてcanvas対応ブラウザで見てください)
今回は左上隅に横300px、縦200pxの長方形を描いた訳です。
で、次は四角形ではなく、IllustratorやPhotoshopなどで作ったPNG画像を読み込んで表示してみましょう。