【マンガで感じる】イベント駆動 ～起きたら動く～ 操作等に応じた処理【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門]

2026/05/25

　40年以上のゲームプログラミング経験をマンガで可視化。 今回は「イベント駆動」。 プレイヤー操作など、何かが起きたら動く処理です。 事前に設定した事象(イベント)が発生したことを受けて駆動します。

プログラミングブログ記事一覧

【マンガで感じる】イベント駆動 ～起きたら動く～

OXゲーム開発編 第7話：エピソード「イベント駆動」

　本エピソード「イベント駆動」は、OXゲーム開発編 第7話です。
　OXゲーム開発編は、OXゲーム(三目並べ・マルバツ)の開発を通じて、ゲームプログラミングの基礎の基礎を解説しています。
　OXゲーム開発編の各エピソードは、それまでのエピソードのマンガ(と解説)を前提としていますので、 もし途中から読み始めた方は、ぜひ最初のエピソード「プログラム」から読み進めてください。

「イベント駆動」のソースコード例

JavaScript

OXゲーム(三目並べ・マルバツ)：クリックで動く「イベント駆動」実装検証

「イベント駆動」とは：起きたら動く

　「イベント駆動」の本質は「起きたら動く」です。
　何らかの設定した事象が「起きたら」、プログラムが「動く」。 専門用語を用いると、イベント発火時にキックされて駆動するプログラムです。
　マンガでは、寝ている状態から起きていますが、 技術用語のスリープ状態とは別ですので、ご注意ください。

ソースコードの仕組み

　今回のプログラムを解説します。

駆動するイベントと関数を設定する

　JavaScriptの addEventListener は、「エレメントオブジェクト.addEventListener( イベント名 , 関数 )」の形式です。 その「エレメント」に対して、指定の「イベント」が発生したら「関数」を呼びます。
　つまりここでは「キャンバスがクリックされたら drawOX を呼び出す」という設定をするプログラムです。

リスナーとコールバック

　このように、ある処理に関数を渡して、処理が完了したときなど特定のタイミングでその関数を呼び返してもらう場合に、その渡す関数を「コールバック関数」と呼びます。
　その中でも特に、イベント発火時にキックされる関数のことを「リスナー」と呼びます。

「実装検証」で体験しよう

　前記「実装検証」セクションにて、キャンバスをクリックしてみてください。
　O や X が描かれます。 もう、これで十分遊べますよね！
　でも、これだけでは足りないことがあります。 その理由は、ぜひ、ご自身で触って確認してみてください。

ゲームプログラミングにおける「イベント駆動」

　ゲームプログラミングにおいて、イベント駆動は、特にゲームプレイに関する処理に使われます。

入力に応じた処理

　ゲームは、プレイヤーの操作に応じて変化するのが大きな特徴のひとつです。
　ゲームパッド(ゲームコントローラー)や、マウスおよびキーボードなどの入力デバイスに対するプレイヤー操作に応じて、 ゲームの進行が変化します。
　このとき、イベント駆動をうまく利用することで、より可読性の高い(わかりやすい)ゲームプログラミングが可能です。

「イベント駆動」が用いられるケース

　マンガの例では、メカ・イベントトリガーが、ダーツにより場所が示されたのを受けて起動し、最終的に O を描画しました。 実装検証のプログラムは、キャンバスがクリックされたら、その場所に O か X を描画します。 これらはイベント駆動です。
　また、メニューのこのアイテムが選択された、村人のこの人が話しかけられた、など、プレイヤーの操作に起因する処理などにも、イベント駆動型のプログラミングが用いられます。
　さらに、扉が開く、マップチェンジするなどの、操作と直接は関係のないイベントも活用することで、よりクオリティーの高いゲームプログラミングが可能です。
　そのため、ゲームプレイに関するプログラミングには、「イベント駆動」がよく用いられます。

「ポーリング」が用いられるケース

　「イベント駆動」に対する言葉は「ポーリング」です。
　ポーリングは、イベントが発生したかを定期的に確認して、発生していれば処理します。
　つまり、「イベントが発生しているかを確認する」という処理を定期的に行う必要があります。 そのためポーリングは無駄のあるプログラミングに感じるかもしれません。 しかしイベント駆動と異なり、処理時間が安定するメリットがあります。
　より具体的に説明します。
　ビデオゲームは、\(\frac{1}{60}\)秒など、一定時間以内に基本的な処理を完結する必要があります。
　イベント駆動の場合、発火タイミングを制御できませんので、短時間に多くのイベントが発生すると処理時間がかかり、処理落ちに繋がる可能性があります。 ポーリングであれば、プログラマーが割り当てる処理時間を決めてプログラミングできますので、安定させられます。
　処理落ちすると、画面がカクカクする、操作がしづらいなどの問題が出ますので、処理時間の安定はとても重要です。

実務的なアプローチ：ハイブリッド設計

　これらの要件により、実務的には工夫が必要です。 結論としてはハイブリッドな設計にすべきです。
　例えば、連続的に扱うことが多い情報、例えば「ゲームパッドの入力情報」は、毎フレームのポーリングで読んでおきます。 そして非連続的なイベント、例えば「村人に話しかけた」などは、イベント駆動で処理します。
　このように、双方の良いところを上手に活用すべきです。
　なお、なぜ「\(\frac{1}{60}\)秒」なのか、および「フレーム」に関しては、後のエピソードで詳しく解説予定です。
　また、厳密には入力装置の情報は割り込みというイベント駆動で動いている部分があります。 ここはOSやハードウェアレベルの深い話になりますので、さらに後のエピソードで解説予定です。

【参考】クリックイベント発火時にインデックスを求めるプログラム

　実際にクリックイベントが発火した時にどのように処理するかを、参考として記載します。 ここでは、 drawOX の中から呼ばれる関数 getIndexByEvent を解説します。

キャンバスがクリックされた時にインデックスを求める

インデックスを取得する関数 getIndexByEventを定義

　まずは、関数 getIndexByEvent を定義します。

引数 e : イベントオブジェクト

　引数 e はイベントオブジェクトです。 ここでは、キャンバスがクリックされた時の情報が入っています。

クリックされた座標を変換する

　この2行で、クリックされた座標を、横および縦のマスの位置、0から2 に変換します。
　クリック時には、イベントオブジェクトのプロパティ offsetX および offsetY に、クリックしたキャンバス内の座標が保持されています。
　座標についてはエピソード「プログラミング」で解説していますが、1マス100ピクセルの設計です。 つまりこれを 100 で割って、小数点以下を切り捨てることで、マスの縦および横の位置を 0,1,2 で取得できます。
　これが、イベントを受けて処理するプログラムの、心臓部です。

　縦横のマスの位置を、インデックスの番号に変換して、値を返します。
　エピソード「関数」で解説した変換を、逆にしたものです。

マンガで感じる！本当の基礎から学ぶゲームプログラミングとは

　「マンガで感じる！本当の基礎から学ぶゲームプログラミング」シリーズでは、 主に、ゲーム開発を題材として、プログラミング時に筆者が脳内でイメージするコンピューター内部動作や本質を、マンガにてお伝えします。

プログラミングの本質をマンガで理解

　AI時代のプログラミングは、本質理解が重要です。 本質を理解していれば、あとはAIに任せて、自身を持って完成したプログラムに責任が持てるでしょう。
　そのため本シリーズでは、コーディングの実例や詳細よりも、「本質をイメージとして感じられること」を最優先としています。 まずマンガで、情報をできる限り絞り、プログラミングの仕組みやコンピューターの内部動作を、物理的に可視化してお届けします。
　そして文章の解説で徹底的に深堀りします。

登場人物紹介

　マンガで感じる！本当の基礎から学ぶゲームプログラミングシリーズには、主に社長、クリスタル、およびメカたちが登場します。 ※実在の人物とは関係ありません

社長

　本シリーズの偉い人です。
　マンガでは、指示すなわち「要件定義」を行います。

クリスタル

　社長の指示を、メカを活用して解決します。
　名前は、コンピューター内部で指揮者の役割を果たす「水晶発振器」に由来します。

メカたち

　用途に応じて多数存在し、果たす役割がそれぞれ与えられています。
　クリスタルの指示に従い、ある時はプログラムの変数や関数のように、ある時は電子回路の素子のように振る舞います。

「マンガで感じる！本当の基礎から学ぶゲームプログラミング」にかける想い

　筆者が本シリーズにかける想いや、 より詳しいコンセプトは「マンガで感じる！本当の基礎から学ぶゲームプログラミング」にて語っています。 そちらもぜひご覧ください。

AIを専属の家庭教師にしてイベント駆動を学ぼう

　本エピソードでは、プレイヤーの操作への応答などに利用する「イベント駆動」について解説しました。
　マンガを読んで興味が湧いた、解説のこのキーワードが気になった、などあれば、AIを専属の家庭教師に見立てて対話してみましょう。 各人の理解度に応じた質疑応答ができて、理解が深まりますので強くオススメします。
　本エピソードが、イベント駆動およびゲームプログラミングの本質理解に少しでもお役に立てれば幸いです。

補足

カテゴリー：マンガで感じる！本当の基礎から学ぶゲームプログラミング,OXゲーム開発編