【Processing】開発を始める前に理解しておきたいこと

ども！今回はProcessingで開発する際に、最初に抑えておきたい知識についてまとめました。画面周りの定義とキーボードやマウスの入力を受け取る方法についてまとめています。Processingは簡単なゲームを作成できるので、プログラミング入門にはいい言語かもしれません。ブログの修正第一弾

ご挨拶

どもども！二年目も終わりそうな雰囲気をひしひしと感じながら、日々の仕事をこなしている龍ちゃんです。Tech Blogが100本超えたので、過去のブログを加筆だったり修正だったりしていきたいと決心しております。その第一弾として、ちょうど一年前に書いたブログの加筆していきます。

さて、今回はProcessingのお話になります。ここでは、Processingでゲーム開発する際に理解しておいた方が良いことについて書いていきます。具体的な内容としては、以下になります。

• setup：初期に一回だけ実行されて変わらない設定を記述する
• draw：フレームレートに従って実行され、描画処理を記述する
• mousePressed：マウスの入力を受け取る、予約済み関数
• keyPressed：キーボードの入力を受け取る、予約済み関数

それでは、順番に進めていきたいと思います。

開発を始める前に理解しておきたいこと

基本的な知識は、公式リファレンスを読めば理解できることばかりです（遠い目…）。ですが、こちらのリファレンスを読む作業が激重ですよね。なるべくさっくり理解できるように段階に分けて解説していきます。

開発環境については、こちらの記事を参考にしてください。

基本のカタチ：setup&draw

こちらでは、描画するための基本である「setup」と「draw」の二つについて解説しておきます。以下の内容をコピーしてください。

void setup() {
    // 画面の大きさ設定
    size(512, 512);
}

void draw() {
    // 円を描画する。mouseXとmouseYでマウスの位置に描画
    ellipse(mouseX, mouseY, 10, 10);
}

この二つはどちらも描画に関係する処理を行います。処理のすみわけとしては、以下の図のようになります。

setupでは、画面サイズの設定を行っており、drawで描画しています。drawでは、フレームレートで実行されています。つまりフレームレートが60fpsだった場合は、1秒間に60回処理が実行されます。フレームレートは、ソースからも設定することができます。

次に画面の特徴についてお話しておきます。以下の図のように、画面は左上を起点にされています。左下と良く勘違いしてミスをするので、頭に叩き込んでおきましょう。

キーボード入力を受け取る

ここでは、キーボードの入力を受け付ける予約済み関数を紹介します。公式ドキュメントではこちらです。Processingでは、keyPressed・keyReleasedという関数がすでに用意されており、キーボードの入力時に発火します。サンプルでは、矢印キーを押し込んだタイミングで押したキーの判別を行っています。

void keyPressed() {
    if (key == CODED) {
        switch(keyCode) {
            case UP:
                println("up");
                break;
            case DOWN:
                println("down");
                break;
            case LEFT:
                println("left");
                break;
            case RIGHT:
                println("right");
                break;
            case ESC:
                exit();
                break;
        }
    }
}

キーを押したタイミングで処理を開始して、キーを離したタイミングで処理を終了するといった実装も可能になります。

一つ注意点です。

draw内でもキー入力を検知することができます（draw内ではkeyPressedのみ予約変数）。ですが、フレームレートが60fpsの場合だと、1秒間で60回も発火することになるので、注意が必要です。体感ですが、リアルタイム性を求めない処理の場合は、外部の予約済み関数を使うことをお勧めします。また、keyReleasedは自前で実装する必要があります。

void draw() {
  if (keyPressed == true) {
    fill(0);
  } else {
    fill(255);
  }
  rect(25, 25, 50, 50);
}

マウスの入力を受け取る

ここでは、マウスの入力を受け付ける予約済み関数を紹介します。マウスに関する予約済み関数はいろいろあります。公式ドキュメントではこちらです。

色々なマウスイベントがあります。作成するアプリケーションの用途によって都度、使用する関数を選択しましょう。サンプルとしては、mousePressedを記載しておきます。

void mousePressed() {
    switch(mouseButton) {
        case LEFT:
            println("left");
            break;
        case RIGHT:
            println("rihgt");
            break;
        case CENTER:
            println("center");
            break;
    }
}

こちらの関数は、マウスボタンの特定の位置が押されたときに表示されるサンプルとなっています。

一つ注意点です。

draw内でもmouseEventを取得することができます。予約済みの変数としては、以下になります。

マウスの座標が簡単に手に入るのはすごく楽です。mouseDraggedやmouseReleasedなどは自前で実装する必要があります。以下のようなコードで簡単にテストすることができます。

void draw() {
  background(204);
  line(mouseX, 20, mouseX, 80);
  line(20, mouseY, 80, mouseY);
}

おわります

お疲れ様です。一年前に着けたタイトルが、「【Processing】ベース知識 Step.1」という何とも言えないタイトルだったんですよね。いろいろ修正してみました。こういう時は、過去記事を削除したほうが良いんでしょうか？新しい記事として出すべきなのか悩んでしまいます。

過去記事を修正する作業を始めてしまうと、本格的にブロガーの道が出てきた気がします。これからも、良い記事を作成するのを頑張っていきますわ！

ではまた！

About 龍：Ryu 107 Articles

2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中（業務もね）//

Twitter YouTube