Canvas上のオブジェクトがクリックされたか検知する

ブラウザゲームなどを開発するとき、Canvas上に描画されたオブジェクト（図形など）をクリックしたいときがある。ただEventTarget.addEventListener('click', listener)のように簡単に処理を追加できるわけではない。

そこで当記事では、「Canvas上にある四角と丸のオブジェクトをクリックしたら色がかわる」というサンプルを元に、オブジェクトのクリック判定やクリックされたときに処理を実行する方法について解説する。

Canvasで任意の色に近い色をカラーパレットから取得し画像を減色する

Canvasで表現できる色は、RGBがそれぞれ0〜255の値を取るので、256*256*256の16,777,216種類ある。（※Alphaについては考えない）
そのまま表示すれば実物に近い画像になるのだが、減色したいときもある。（レトロ感をだす画像処理フィルターとか）

そこで、任意の色に近い色をカラーパレットから取得し画像を減色する方法をまとめる。

Canvasでカメラの映像に画像処理フィルターをかけて表示する方法

カメラの映像をリアルタイムに処理しドット絵っぽくしたくて、年末から画像処理学んでいき欲が再燃した。
今回はWebカメラやラップトップパソコンのカメラを使って映像を取得し、適当な画像処理フィルターをかけ、ブラウザに表示する方法をまとめる。（筆者環境はMBP）

基本: カメラの映像をブラウザに表示する

単純に表示するだけの場合は、video要素（HTMLMediaElement）とMediaStreamを使う。

<video id="camera"></video>

async function main() {
  const video = document.querySelector("video#camera");
  // MediaStreamを取得する（Promiseが返る）
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });

  video.srcObject = stream;
  // MediaStreamが取得できたら再生する
  video.onloadedmetadata = () => video.play();
}

main();

今回は映像だけを使いたいので、mediaDevices.getUserMediaに{video: true}を指定したが、音声も使いたい場合は{video: true, audio: true}のように指定する。

詳細はMediaDevices.getUserMediaを参照してください。
※ 執筆時点では日本語ドキュメントが古いため、英語ドキュメントを読んだほうが良い。

[JS]クリックした位置までオブジェクトを最短距離で移動させる

シミュレーションゲームやリアルタイムストラテジーゲーム（RTS）でよくある「クリックした位置までキャラクタを移動させる」動作をJavaScript+Canvas APIで実装する。

イメージは以下のような感じ。

ゲーム開発初心者が教えるブラウザゲームのつくり方（後編）

この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会 フロントエンドナイト」で発表した内容を文字起こししたものの「後編」です。

• 発表スライド（SpeakerDeck）
• 前編: ゲーム開発初心者が教えるブラウザゲームのつくり方
• 後編: この記事

※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。
※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります

続き）シンプルなブラウザゲームのつくり方

ゲーム開発初心者が教えるブラウザゲームのつくり方（前編）

この記事は、2018年6月29日にさくらインターネットで行われた「さくらの勉強会 フロントエンドナイト」で発表した内容を文字起こししたものの「前編」です。

• 発表スライド（SpeakerDeck）
• 前編: この記事
• 後編: ゲーム開発初心者が教えるブラウザゲームのつくり方

※ [ディレクターズ・カット版]と書かれたスライドが、この記事を公開するにあたり追加したものです。
※ この記事には多くの画像が貼れれているため、読み込みに時間がかかる可能性があります

---

ゲーム開発初心者が教えるブラウザゲームのつくり方

[JS]ゲーム内に重力を追加し自然なジャンプモーションを実装する（3パターンで実装）

アクションゲームになくてはならない要素、それはジャンプモーション！
今回はゲーム内に重力を加え、自然なジャンプモーションを実装する。

方法としては3通りあるので、それぞれ解説していく。

• 三角関数（sin）を使う
• 月面でジャンプしているようなふんわりしたモーション
• 速度に加速度を足しこむ
• 簡単で自然なジャンプモーション
• 鉛直投げ上げの公式（y = v0t - 0.5gt^2）を使う
• より自然界に近いジャンプモーション

オフスクリーンCanvasにプリレンダリングし、描画内容を可視領域に表示する

Canvas APIを使ってブラウザゲームやアニメーションなど複雑な描画処理を行う場合、オフスクリーン（描画領域外）Canvasにプリレンダリングし、その内容を可視領域にあるCanvas要素にコピーし表示する手法がある。

利用シーン

たとえば15個の要素からなる背景があったとする。（下図参照）
可視領域内にあるCanvasにレンダリングしていると、1フレームごとに15回の描画処理が行われる。

それをあらかじめ背景用のオフスクリーンCanvasに描画しておいて、1フレームごとに可視領域内のCanvasにコピーして描画すると、背景の描画処理は1回ですむ。
負荷の高い描画処理が15→1回になることでパフォーマンス向上が見込めるという技だ。

requestAnimationFrameの処理落ちをフレームスキップで対応する

ブラウザゲームやアニメーションを作るときなど、定期的に画面を再描画するときにはrequestAnimationFrameやsetInterval、setTimeoutが使われる。

当記事ではrequestAnimationFrameにフォーカスし、ブラウザゲームを開発する際に必要なフレームスキップ処理について紹介する。

requestAnimationFrameとsetInterval, setTimeoutは何が違うのか？

requestAnimationFrameとsetIntervalsetTimeoutには明確な違いがある。

requestAnimationFrameはブラウザの状態により実行間隔を自動で調整してくれるのに対し、
setIntervalsetTimeoutは時間どおりに実行するため、処理がすべて終わる前に次の処理が実行されてしまう。

そのため、ブラウザゲーム開発ではrequestAnimationFrameを使うことが多い。


ただ、わざとブラウザに負荷をかけたりバックグラウンドで実行させたりすると、描画を遅らせることができてしまう。このような処理落ちはゲームバランスを壊す要因になりうるため、フレームスキップ処理の実装が必要になってくる。


ということで、今回は処理落ちしたときにフレームスキップする方法を紹介する。

押しっぱなしのkeydownまたはkeypressイベントの初動をスムーズにする

勉強がてらCanvasをつかったブラウザゲームを作っている。そこでkeydownまたはkeypressイベントでCanvas内に描画したオブジェクトを動かそうとしたときに問題が生じた。

次のgifアニメを見てほしい。

これは矢印キーを押しっぱなしにしたときのオブジェクトの動きだ。
わかりづらいかもしれないが、初動（正確には2回目のイベント）が遅れて、「ダッ、ダダダダ…」みたい感じで動いている。

これを解決するための方法をまとめる。

Canvasに表示したオブジェクトに当たり判定（衝突判定）をつける方法

HTML5 Canvas APIをつかってゲームをつくろうとしている。もちろん自作ゲームエンジンで！
ということで前回Canvas上に表示したオブジェクトをキーボード操作で移動させる方法をまとめた。

今回はその続きで、移動させたオブジェクトが他の何らかのオブジェクトに当たったときの判定（当たり判定、衝突判定）を実装する。

Canvasに表示したオブジェクトをキーボード操作で移動させる方法

Canvas+JavaScriptでゲームをつくろうとしている。もちろん自作ゲームエンジンで！
その第一歩として、Canvasに表示したオブジェクト（Player）をキーボード操作で移動させる方法をまとめる。

ゲームエンジンの基本は無限ループ

ゲームの基本は無限ループなので、以下のような流れで処理していく。

1. Canvasをクリアする（白紙に戻す）
2. キーボード操作などを受け付る
3. オブジェクトの座標や画像を変更する
4. Canvasに描画する
5. 1に戻ってループする

このループをfps30なら1秒間に30回、fps60なら1秒間に60回繰り返す。
ループ内でキーボード操作（keydown、keypress、keyupなど）を取得し、オブジェクトの座標を変更することで、移動させることができる。

Canvasを用いた9つの画像処理フィルターとそのアルゴリズムの解説

頭の体操のためにCanvasを用いたフィルタリングを学びはじめた。
当記事では、画像フィルターの中でも（独断と偏見で選んだ）代表的な9つの画像処理アルゴリズムを解説する。

1. グレースケール
2. 色調反転（ネガポジ変換）
3. 二値化
4. ガンマ補正
5. ブラー（ぼかし）
6. シャープ化（輪郭強調）
7. メディアンフィルタ
8. エンボス
9. モザイク

たたみ込み演算を知らなくても、理解していただけると思う。

[HTML5]Canvasで画像をズームイン・アウト、ドラッグで移動させる方法

Twitterのアイコン・ヘッダー画像のアップロード機能のように、画像を読み込み、ブラウザ上で簡単な編集・トリミング加工し、画像ファイルとして出力したい。

いろいろ調べてみると、HTML5のCanvasを使えばできることがわかった。
ということで、Canvasで画像のズームイン・アウト（拡大縮小）、トリミング（切り取り）する方法をまとめる。


↓こんな感じのを実装する。

※ ちなみにTwitterのアップロード機能はCanvasは使われておらず、imgタグで頑張っているみたい

[HTML5]Canvasを使って画像をトリミングする方法まとめ

Photo by Judy

CSSスプライトのようにbackground-positionで表示位置を調整して疑似トリミングを実現することもできるが、今回はHTML5のCanvasを使ってトリミングする方法をまとめる。

CSSスプライトについては、以下の記事を参照ください。