28:マウスの入力を処理する

◆PROCESSINGで始めるゲーム作りとコンピュータ

Thunder 28:マウスの入力を処理する

今日の話題

 

08:マウスのクリックを検知する

「小説やドラマ」と「ゲーム」の大きな違いの1つは、「プレーヤーがその世界に参加できるかどうか」ではないでしょうか?。

見る一方、受け取る一方ではなくて、プレーヤーがアクションを起こしてその世界に積極的に関与することができるのが、ゲームの醍醐味です。

そのためには、人間のアクション(動きや操作)をキャッチして、反応しなければいけません。簡単にいえばキーボードやマウスの操作を検知して、それに応じた動き(反応)をするわけです。

コンピュータの世界では、人間から操作を受け付ける装置(マウスやキーボードなど)のことを「入力デバイス」と呼びます。

プログラム次第では、人間のモーション(体の動き)や声、ゲームパッドの操作などをキャッチして、反応させることも可能です。

イベントキャッチ(画像URL:illust-AC 様:ひろさん さん、acworks さん、Designers solutionさん、dkawakawaさん)

夢は広がりますが、ここでは最も基本的な入力デバイスであるマウスの操作をキャッチする方法について学んでいきましょう。

みなさんの家庭にあるパソコンにはマウスが繋がっている事が多いかと思います。

Windowsで利用するマウスには、通常はボタンが2つとホイールと呼ばれる回転する部分がついています。

マウスの説明(画像URL:logicool 様)

ゲーミングマウスと呼ばれるものでは沢山のボタンがついているものがありますが、ここではオーソドックスな2つボタンとホイールがついたマウスを対象に考えます。

みなさんも良くご存知だとは思いますが、マウスの操作には独特の呼び方があります。代表的な操作名を復習しておきましょう。

マウスポインタ
マウスの動きに合わせて移動する、画面に表示される目印です。普通は矢印の形をしていますよね。「マウスカーソル」と呼ぶこともあります。

ポイント
マウスポインタをファイルやアイコンの上に重ねる操作です。重ねあわせる操作を「ポインティング」と現在進行形で呼ぶこともあります。

クリック
マウスボタンをカチッと1回押して離すことです。左ボタンを操作するなら「左クリック」、右ボタンなら「右クリック」といいます。下記のダブルクリックと区別する意味で「シングルクリック」と呼ぶことがあります。

プッシュ(押下)
マウスボタンを押す操作です。クリックは「カチっ」と押して離すことですが、プッシュは「押しっぱなし」にする操作になります。たまにクリックとプッシュを同じものとして説明しているページを見かけますが、PROCESSINGでは完全に別物です。

リリース
マウスボタンをプッシュ状態から離す操作です。「押す」と「離す」を明確に分けて扱いたい場合、離す操作をこう呼びます。

ダブルクリック
マウスボタンをカチカチッと2回連続でクリックする事です。あまりゆっくりと操作すると、連続でクリックしたにも関わらず「シングルクリックを2回行った」と判断される事があります(汗)。

トリプルクリック
マウスボタンをカチカチカチッと3回連続でクリックする事です。理論的には4回、5回と連続でクリックすることも可能ですが・・・まぁ普通はここまでですね(笑)。

ドラッグ
マウスポインタをファイルやアイコンに合わせた状態で、マウスボタンを押したまま(プッシュしたまま)マウスを移動させる事です。

ドロップ
ドラッグしている状態から、マウスのボタンを離す事です。普通はドラッグとドロップは連続して行われる操作なので、2つの操作を合わせて「ドラッグ&ドロップ」と呼びます。

ホイール
ボタンの間にある回転する部品(ホイール部分)をクルクルと回す事です。

ホイールクリック
ホイールボタンを真下に押して離す操作です。ホイールが押せないタイプのマウスもあります。この操作を「中クリック」と呼ぶ事があります。

PROCESSINGでは、上記で挙げたすべての操作を検知する事が可能なんです!。すごいですよね。

では前提知識を説明したところで、クリックを検知する方法について説明しましょう。

PROCESSINGでマウスのクリックを検知するには、クリックイベントハンドラを利用します。イベントハンドラについては「19:イベント処理とスコープ」で説明しました。忘れた方は復習してみて下さいね。

mouseClicked():マウスクリック

●種類
イベントハンドラ

●代表書式
void  mouseClicked( ) {  … }

●引数
なし

●戻り値
なし

●使用例
void  mouseClicked() {  println(“HOGE”);  }  //クリックされたらMSGを表示する

.

Sample04-1

<出力結果>
mouseClickedサンプル1
上記サンプルを見て下さい。
void   mouseClicked() {   }   と書かれた部分がマウスボタンのクリックをキャッチするイベントハンドラになります。

実行結果ウィンドウの上にマウスカーソルをポインティングした状態で、左右どちらかのボタンをクリックすると、コンソール領域にメッセージが表示されます。

すごく短いプログラムですが、「マウスボタンをクリックする」という「人間の操作をつかまえて反応する」プログラムができあがりました(笑)。

なおホイールが押せるタイプのマウスを利用されている方は、ホイールクリックを行った場合にも、コンソール領域にメッセージが表示される事が確認できると思います。

mouseClicked() イベントハンドラは、ボタンクリックだけでなくてホイールクリックにも反応するのです。

 

09:どのボタンがクリックされたか知る

上記サンプルでは、とにかく何かのボタンがクリックされたら、イベントハンドラが反応しました。

それでは「どのボタンがクリックされたのか」を知るにはどうしたら良いでしょうか?。

クリックされたボタンを知る方法は幾つかあるのですが、最も簡単な方法を紹介したいと思います。

PROCESSINGはクリックされたボタンの種類を、PROCESSINGが自動で用意している mouseButton という名前のグローバル変数に記録してくれます。

mouseButtonはint型(整数型)の変数で、マウスボタンごとに割り当てられている数値を格納しています。

ですので mouseClicked() イベントハンドラの中で、mouseButton変数の中身をチェックすれば、クリックされたボタンの種類を知る事ができます。

Sample04-2

<出力結果>
mouseClickedサンプル2
上記サンプルを見てください。
実行結果ウィンドウの上でマウスをクリックすると、クリックされたボタンがどれかを判定して、コンソール領域にメッセージを表示します。

左ボタンのクリックなら 37番、中クリックなら 3番、右ボタンのクリックなら 39番 という値が mouseButton 変数に格納されている事がわかると思います。

mouseButton変数(画像URL:logicool 様)

このようにコンピュータでは、入力デバイス毎(キーボードやマウス毎)に、各ボタンに1つ1つ別々な数値を割り当てて、どのボタンが操作されたかを判別できるような仕組みになっているのです。

ボタンと番号( 画像URL:illust-AC 様:K_handsさん、ごるさん)

例えばキーボードの「A」というキーなら65番、「0」なら49番、SHIFTキーなら16番といった具合です。

このようにボタンに割り当てられている番号の事を「キーコード」と呼びます。

でも上のサンプルよく見ると、 if(mouseButton == LEFT ) {  のようにプログラミングしています。 if (  moustButton  == 37  ) {  とかではありません・・・。

この LEFT とか RIGHT というのは何でしょうか?。

これはPROCESSINGが自動で用意してくれている定数です。そして、それぞれに

  • LEFT = 37
  • RIGHT = 39
  • CENTER = 3

が定義されています。

つまりマウスボタンのキーコードに対応する定数が、あらかじめ用意されているのです。

それでは何故、以下のようにプログラミングしないのでしょうか?。

それは、このようにプログラミングしてしまうと、ぱっとみて「37」という数値が何を示す値なのか、わかりにくくなってしまうからです。

プログラムを作った時はよく覚えていても、1ヶ月もたつ頃には作った本人でさえ「この値、なんだったっけ?」となりかねません。物覚えが悪くなった私などは確実にアウトです・・・(汗)。

多くの人がプログラミングに携わるプロの現場では、みんなが直ぐにわかるプログラムを作る事が大切となります。

37や39という値を「LEFT」とか「RIGHT」という、わりやすい名前の定数として定義し、if(mouseButton == LEFT ) {  のようにプログラミングすると、「お、LEFTって書いてあるから左ボタンの事かな?」と想像がついて、わかりやすくなります。

「先輩この 37 って数値は、なんなんですか?」なんて後輩に尋ねられるようなプログラムを作成するのは、プロの現場では恥ずかしい事なのです(笑)。

恥じらい( 画像URL:illust-AC 様:きのこさん)

このように if ( mouseButton == 37 ) {  という形式で、プログラムに直接数値を書き込んでプログラムする事を「マジックナンバー」とか「リテラル値」と呼びます。

しかしこのような方法はプログラムを理解しづらくする可能性があるため、必要がある場合以外はなるべく避けるようにしましょう。

 

10:カーソルの位置を知る

これでマウスボタンが

  • クリックされた事
  • クリックされたボタンが何なのか

を知ることができるようになりました。

でもこれだけでは、ゲーム作成には十分ではありません。なぜなら、上記サンプルを試してもらえば判りますが、実行結果ウィンドウの「どこをクリック」しても同じ反応となるからです。

ゲームでは敵やアイテムなど「特定の場所」がクリックされた事を知る必要があります。例えばキャラクターを操作したい時、宿屋をクリックされたのに武器屋に向かったのでは、ゲームになりませんよね?(笑)。

そのためには、「どこをクリックされたのか=クリックされた座標」を知る必要があります。それではクリックされた座標を知るにはどうしたら良いでしょうか?。

PROCESSINGには、「クリックされた座標」ではなく「現在マウスカーソルがある座標」を知る簡単な方法があります。

PROCESSINGはマウスカーソルの座標を、PROCESSINGが自動で用意している mouseX と mouseY いう名前のグローバル変数に、常に記録しているのです。

mouseカーソル4記録するタイミングは、描画処理関数(draw)が実行される(ゲームループが回る)タイミングになります。

Sample04-3

<出力結果>
mouseカーソル
上記を実行すると、マウスカーソルの動きに追従して、青い点が次々と打たれていきます。

描画処理関数(draw)の中で point() 命令を利用して、mouseXとmouseY の位置に点を打っているのがわかると思います。

ここで利用している strokeWeight() や point() 命令は「24:図形を描いてみよう」で解説していますので、忘れたちゃった方は参考としてみてください。

mouseXとmouseYが示す座標は、実行結果ウィンドウの左上隅( 0, 0 )からの相対位置になります。DISPLAY全体での位置ではありません。

mouseカーソル5通常 描画処理関数(draw)はすごい速さで繰り返し実行されています。言い換えるなら、すごい速さで「その時点のマウスカーソルがどこにあるのか」を常に記憶しているのです。

ですから、マウスボタンがクリックされた時にmouseXとmouseYの値を参照すれば、(ほぼ正確に)クリックされた時点のカーソル位置がわかります。

Sample04-4

<出力結果>
mouseカーソル2

上記サンプルを実行すると、画面の左右に「武器屋」「宿屋」と書かれた画像が表示されます。

クリックされた位置(この例では横座標=mouseX)を元に、画面の右半分(width/2より大きな箇所)がクリックされたなら「宿屋を選択」、左半分なら「武器屋を選択」と、コンソール領域に表示します。

mouseカーソル3サンプルで用いた画像は以下からダウンロード可能です。本当は綺麗な武器屋と宿屋の画像を提供したかったのですが・・・大人の事情で出来ませんでした(汗)。

学習用サンプル画像2

イメージを表示するための学習用サンプル画像です。しょうもない画像でスイマセン・・・orz。


ダウンロードファイル名:sample04Image.zip

ご自分で用意される場合は、横350、縦300ピクセルの画像を2つ用意し、それぞれに「yadoya.png」「bukiya.png」というファイル名をつけて下さい。

用意した画像は「25:画像を表示する」記事で説明したように、スケッチファイル格納フォルダの下に作成した data フォルダ内に置いてください。

 

Forest今日の言葉

・入力デバイス

キーボードやマウス、ゲームパッドなどコンピュータに情報を入力する装置。

・キーコード

キーボードやマウスの各ボタンに割り当てられた番号。この番号を調べることで、どのキーが押されたかを知る事が可能です。

・マジックナンバー

定数を使わないで、プログラムの中に直接数値を書き込むこと。そのほうが良い場合もありますが、普通は避けるべき方法とされています。

・リテラル値

マジックナンバーと同意であるかのように紹介しましたが、厳密には違います。正確にはプログラムの中に書き込まれた数値や文字の事を指す言葉です。定数であっても直接値を定義している場合は「リテラル値」と呼びます。

 

scroll今日の文法

・void  mouseClicked( ) {  … } イベントハンドラ

マウスボタンがクリックされた事を検知するイベントハンドラです。

・mouseX/mouseY

マウスカーソルがどこにあるのかを、PROCESSINGが自動で覚えている変数。

・LEFT/RIGHT/CENTER

マウスボタンのキーコードが定義された定数。PROCESSINGが自動的に用意しているもの。

 

 今日のまとめ

  • マウスボタンがクリックされた事を知るには、専用のイベントハンドラを利用する
  • どのボタンがクリックされたかを知ることができる
  • クリックされた座標も知ることができる

29:キーボードの入力を処理する へ進む
27:画像を動かす へ戻る
目次へ戻る


本ページで利用している特に参照元記載のないアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。