canvasアニメーションでゲーム制作-2〜new Image()とマウス座標〜
普通にイラストレータの画面です。
戦闘機を作ってみました。
なんだか頼りない戦闘機ですが、まずはこれを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を、戦闘機の座標に入れてあげたらマウスと一緒に動きます。 試してみるとこんな感じです。
結果はこんな感じです。
戦闘機を作ってみました。
なんだか頼りない戦闘機ですが、まずはこれを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を、戦闘機の座標に入れてあげたらマウスと一緒に動きます。 試してみるとこんな感じです。
結果はこんな感じです。
