処理言語の究極のガイドパートI：基礎

公開: 2022-03-11

あなたは退屈に苦しんでいて、あなたの創造性を使うためにかゆみを感じています。 あなたは何か、視覚的に印象的なもの、芸術的なものを作りたいと思っています。 あるいは、プログラミングを学び、できるだけ早く何か印象的なものを作りたいと思うかもしれません。 もしそうなら、Processing言語が進むべき道です。

私がこれまでに使用したすべてのプログラミング言語の中で、Processingは間違いなく最も面白い言語の1つでした。 これは単純な言語であり、習得、理解、使用が簡単ですが、非常に強力です。 これは、コード行を使用して空のキャンバスにペイントしているようなものです。 あなたの創造性を制限するための厳格な規則やガイドラインはありません。唯一の制限はあなたの想像力です。

処理言語の究極のガイドパートI：基礎

大学では、高校生を集めて処理を教えるプログラムのティーチングアシスタントをしていました。 それらのほとんどは、強力なプログラミングのバックグラウンドを持っていませんでした。また、以前に1行のコードを記述したことのないものもありました。 たった5日で、彼らは言語を学び、独自の簡単なゲームを作ることが期待されていました。 成功率はほぼ100％で、失敗することはめったにありませんでした。 この記事では、これがまさに私たちが行うことです。 プログラム全体を2つの部分に縮小しました。 最初の部分では、言語について話します。 基本的な概要、処理のウォークスルー、およびいくつかのヒントとコツを紹介します。 次に、次のパートでは、簡単なゲームをステップバイステップで作成します。各ステップについて詳しく説明します。 また、p5jsを使用してゲームのコードをJavaScriptに変換し、ゲームをWebブラウザーで実行できるようにします。

あなたがすでに知っておくべきこと

これらの記事を理解して簡単に理解するには、プログラミングの基礎については説明しないので、プログラミングの基本的な知識が必要です。 ただし、高度なプログラミングの概念にはほとんど触れないので、表面的な理解で十分です。 オブジェクト指向プログラミング（OOP）などの低レベルのアイデアや概念について話す部分もありますが、それらは重要ではありません。 それらは、言語の構造に興味を持っている好奇心旺盛な読者のためのものです。 知りたくない場合は、それらの部分をスキップできます。 それ以外に、あなたが持っているべき唯一のものは、あなた自身のゲームを作成するためにこの素晴らしい言語と熱意を学ぶという野心です！

フォローする方法

私は常に、試行錯誤してプログラミングを学ぶことに賛成です。 自分のゲームに飛び込むのが早ければ早いほど、Processingに慣れることができます。 それが私の最初の提案になるので、あなた自身の環境ですべてのステップを試してください。 処理にはシンプルで使いやすいIDE（つまり、コードエディタ）があり、ダウンロードしてインストールする必要があるのはそれだけです。 こちらからダウンロードできます。

それでは始めましょう！

処理言語とは何ですか？

このセクションには、言語の簡単な技術概要、その構造、およびコンパイルと実行プロセスに関するいくつかの注意事項が含まれています。 詳細には、プログラミングとJava環境に関する高度な知識が含まれます。 今のところ詳細を気にせず、自分のゲームを学び、コーディングするのが待ちきれない場合は、「処理の基礎」セクションにスキップできます。

処理は、いわばコードを使ってスケッチできるビジュアルプログラミング言語です。 ただし、それ自体は正確にはプログラミング言語ではなく、「Java風」プログラミング言語と呼ばれています。つまり、言語はJavaプラットフォーム上に構築されていますが、それ自体は正確にはJavaではありません。 これはJavaに基づいており、実行ボタンを押すと、すべてのコードが前処理され、Javaコードに直接変換されます。 JavaのPAppletクラスは、すべてのProcessingスケッチの基本クラスです。 例を挙げると、いくつかの基本的な処理コードブロックを見てみましょう。

 public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

これらのコードブロックは、次のようなものに変換されます。

 public class ExampleFrame extends Frame { public ExampleFrame() { super("Embedded PApplet"); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

処理コードブロックがJavaのPAppletから拡張されたクラスでラップされていることがわかります。 したがって、処理コードで定義するすべてのクラスは、存在する場合、内部クラスとして扱われます。

ProcessingがJavaベースであるという事実は、特にJava開発者の場合、多くの利点をもたらします。 構文に精通しているだけでなく、Javaコード、ライブラリ、JARファイルをスケッチに埋め込む、Javaアプリケーションで直接Processingアプレットを使用する、クラスを定義する、intなどの標準データ型を使用するなどの機能も提供します。 、float、charなど。 設定に時間をかけたい場合は、Eclipseから直接Pocessingコードを作成することもできます。 実行できないことの1つは、Processingのループの性質と競合するため、ProcessingスケッチでAWTまたはSwingコンポーネントを使用することです。 しかし、心配しないでください。この記事では、そのような派手なことは一切行いません。

処理の基礎

コードの処理は、セットアップブロックと描画ブロックの2つの主要部分で構成されています。 セットアップブロックはコードが実行されるときに1回実行され、描画ブロックは継続的に実行されます。 処理の背後にある主な考え方は、描画ブロック内に書き込んだ内容は、プログラムが終了するまで、1秒間に上から下に60回実行されるということです。 このアイデアを活かして、すべてを構築していきます。 この機能を使用して、オブジェクトを移動させ、スコアを保持し、衝突を検出し、重力を実装し、その他のほとんどすべてを実行します。 この更新ループは、私たちのプロジェクトの心臓部です。 このハートビートを使用してコードを実現する方法については、後のセクションで説明します。 まず、ProcessingIDEを紹介します。

IDEの処理

この時点まで読んでも、Processing IDEをダウンロードしなかった場合は、先に進んでダウンロードしてください。 この記事全体を通して、自分で試すことができるいくつかの簡単なタスクの概要を説明します。IDEを起動して実行している場合にのみ、練習することができます。 これは、処理IDEの簡単な紹介です。 とてもシンプルで自明なので、短くしておきます。

ご想像のとおり、実行ボタンと停止ボタンは提案どおりに機能します。 実行ボタンをクリックすると、コードがコンパイルされて実行されます。 本質的に、処理プログラムは決して終了することはなく、邪魔されるまで永遠に実行されます。 プログラムで終了できますが、終了しない場合は、停止ボタンを使用できます。

実行と停止の右側にある蝶のように見えるボタンはデバッガーです。 デバッガーを使用するには、専用の別の記事が必要です。 この記事の範囲外なので、今のところ無視してかまいません。 デバッガーボタンの横にあるドロップダウンは、modを追加/設定する場所です。 Modは、特定の機能を提供し、Android用のコードを記述したり、Pythonでコードを記述したりすることができます。 Modも範囲外なので、デフォルトのJavaモードのままにして、無視することもできます。

コードエディタのウィンドウは、スケッチが通常実行される場所です。 サイズや背景色などのプロパティを設定していないか、何も描画していないため、画像では空白になっています。

コードエディタについて話すことはあまりありません。コードを書く場所です。 行番号があります（！）古いバージョンのProcessingにはそれがなく、最初に見たときの私がどれほど幸せだったか想像できません。

下のブラックボックスはコンソールです。 迅速なデバッグのために、これを使用して印刷します。 コンソールの横にある[エラー]タブには、エラーが表示されます。 これは、Processing3.0に付属する新しい便利な機能でもあります。 以前のバージョンでは、エラーがコンソールに出力され、追跡するのが困難でした。

セットアップブロック

前述のように、セットアップブロックはプログラムの起動時に1回実行されます。 設定の作成や、画像や音声の読み込みなど、一度だけ実行したいものに使用できます。 セットアップブロックの例を次に示します。 このコードを自分の環境で実行して、自分で結果を確認してください。

 public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage("test.jpg")); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

スタイリング（背景、塗り、線）に関連する方法は、プロパティと設定のセクションで説明されます。 今のところ、知っておく必要があるのは、ここで設定した設定と構成がスケッチ全体にどのように影響するかです。 ここに記述されたコードは、スケッチ全体に適用可能ないくつかの基本ルールセットを設定するために使用されます。 このセクションでも理解する必要があるのは、以下にリストされている方法です。

size（） -名前が示すように、この関数はスケッチのサイズを構成するために使用されます。 セットアップコードブロックの最初の行にある必要があります。 次の形式で使用できます。

  • サイズ（幅、高さ）;
  • サイズ（幅、高さ、レンダラー）;

幅と高さの値はピクセル単位で指定できます。 サイズ関数は、スケッチが使用するレンダリングエンジンを設定するために使用される3番目のパラメーターであるレンダラーを受け入れます。 デフォルトでは、レンダラーはP2Dに設定されています。 使用可能なレンダラーは、P2D（Processing 2D）、P3D（Processing 3D、スケッチに3Dグラフィックスが含まれる場合に使用する必要があります）およびPDF（2DグラフィックスはAcrobat PDFファイルに直接描画されます。詳細についてはこちらをご覧ください）。 P2DおよびP3Dレンダラーは、OpenGL互換のグラフィックハードウェアを利用します。

fullScreen（） -Processing 3.0以降、size（）関数の代わりにfullScreen関数を使用できるようになりました。 size（）関数と同様に、セットアップブロックの最初の行にも含める必要があります。 使用法は次のとおりです。

  • 全画面表示（）;
  • fullScreen（display）;
  • fullScreen（レンダラー）;
  • fullScreen（display、renderer）;

パラメータなしで使用すると、処理スケッチはフルスクリーンで実行され、メインディスプレイで実行されます。 'display'パラメータは、スケッチを実行するディスプレイを設定するために使用されます。 たとえば、外部モニターをコンピューターに接続する場合、表示変数を2（または3、4など）に設定すると、スケッチがそこで実行されます。 'renderer'パラメータは、上記のsize（）の部分で説明されているとおりです。

設定ブロック

これは、Processingの新しいリリースで導入されたもう1つの機能です。 これは、セットアップや描画と同じように、コードブロックです。 変数パラメーターを使用してsize（）またはfullScreen（）メソッドを定義する場合に便利です。 EclipseなどのProcessing独自のIDE以外の環境を使用している場合は、このコードブロックでsize（）およびsmooth（）などの他のスタイリングプロパティを定義する必要もあります。 しかし、ほとんどの場合、この記事では絶対に必要ありません。

ブロックを描く

ドローブロックについて話すのに特別なことは何もありませんが、それでもすべてが特別です。 ドローブロックは、すべての魔法が起こる場所です。 それはあなたのプログラムの中心であり、1秒間に60回叩きます。 このコードブロックには、すべてのコードロジックが格納されています。 すべての形、オブジェクトなどがここに書き込まれます。

この記事で説明するコードのほとんどは描画ブロックからのものであるため、このコードブロックがどのように機能するかを明確に理解することが重要です。 デモンストレーションを行うために、ここで試すことができます。 まず、 print（）またはprintln（）メソッドを使用して、コンソールに何でも印刷できることに注意してください。 printメソッドはコンソールにのみ出力しますが、printlnは最後に改行を出力して追加するため、各println（）は別々の行に出力されます。

したがって、次のコードブロックを見てください。 まず、コンソールに何が表示されるかを推測してみてください。 次に、先に進んで試してみてください。

 void setup(){ } void draw(){ int x = 0; x += 1; print(x+" "); }

あなたが「123 4…」と推測したなら、私はあなたを手に入れました！ これは、処理における混乱の1つです。 このブロックが繰り返し実行されることを覚えていますか？ ここで変数を定義すると、各ループで何度も定義されます。 各反復で、xは0に設定され、1ずつ増分され、コンソールに出力されます。 したがって、結果は「1 111…」になります。 この例はやや明白でしたが、物事が少し複雑になると混乱する可能性があります。

xを上書きしたくないので、どうすればこれを達成して「1 2 34…」という結果を得ることができますか？ グローバル変数を使用する。 これは特別なことではありません。変数を描画ブロックの外側で定義するだけなので、反復ごとに再定義されることはありません。 また、変数のスコープはスケッチ全体で到達可能になります。 以下のコードを参照してください。

 int x = 0; void setup(){ } void draw(){ x += 1; print(x+" "); }

ブロックの外で定義された変数はどのように機能するのでしょうか。 そして、最初に一度実行されるので、なぜsetup（）ブロックを使用しなかったのですか？ 答えはオブジェクト指向プログラミングとスコープに関連しています。慣れていない場合は、この段落をスキップしてください。 処理コードがJavaに変換される方法を説明した部分を参照してください。 それらがJavaクラスでラップされる方法を覚えていますか？ setup（）およびdraw（）ブロックの外部で記述した変数もラップされるため、コードをラップする外部クラスのフィールドとして扱われます。 x + = 1を使用することは、this.x +=1を使用することと同じです。 また、この場合も同じように機能します。draw（）のスコープにxという変数が定義されておらず、このスコープである外部スコープが検索されます。 そして、なぜsetup（）セクションで変数xを定義しなかったのですか？ その場合、xが定義されているスコープはセットアップ関数のスコープになり、draw（）ブロックからはアクセスできなくなります。

図形とテキストの描画

これで、セットアップブロックを使用してスケッチを構成する方法と、描画ブロックの機能がわかりました。 それでは、少し視覚的になって、処理の楽しい部分、つまり図形の描画方法について学びましょう。

始める前に、座標系を理解する必要があります。 処理では、画面に描画するすべてのオブジェクトの座標を決定します。 座標系はピクセル単位です。 原点（つまり開始点）は左上隅です。その点を基準にした座標を指定する必要があります。 知っておくべきもう1つのことは、各形状には異なる基準点があるということです。 たとえば、rect（）の左上隅が参照ポイントになります。 ellipse（）の場合、これが中心です。 これらの参照ポイントは、rectMode（）やellipseMode（）などのメソッドを使用して変更できます。これについては、プロパティと設定のセクションで説明します。 理解を深めるために、図の例が提供されています。

この記事は処理の基本的な概要であるため、頂点や3D形状などの複雑な形状には触れません。 基本的な2D形状は、実際には、独自のゲームを作成するのに十分すぎるほどです。 この図では、形状がどのように描画されるかの例を見ることができます。 各形状には作成する独自の構文がありますが、基本的な考え方は、座標またはサイズ、あるいはその両方を指定することです。 よく知っておくべきいくつかの形状を次に示します（以下に示すすべての値について、「x」と「y」はピクセル単位のx座標とy座標を意味し、「w」と「h」はピクセル単位の幅と高さの値を意味します）。

point（） -単純な点。必要な座標は1つだけです。 使用法：

  • point（x、y）
  • point（x、y、z）-3次元を使用している場合。

line（） -線を作成します。 始点と終点のみで線を作成できます。 使用法：

  • line（x1、y1、x2、y2）
  • line（x1、y1、z1、x2、y2、z2）-3次元を使用している場合。

Triangle（） -三角形を作成します。 使用法：triangle（x1、y1、x2、y2、x3、y3）

quad（） -四辺形を作成します。 使用法：quad（x1、y1、x2、y2、x3、y3、x4、y4）

rect（） -長方形を作成します。 基準点は、デフォルトでは左上隅です（図を参照）。 使用法は次のとおりです。

  • rect（x、y、w、h）
  • rect（x、y、w、h、r）-'r'は、角を丸くするためのピクセル単位の半径を意味します。
  • rect（x、y、w、h、tl、tr、br、bl）-それぞれ左上、右上、右下、左下の角の半径。 これもピクセル単位です。

ellipse（） -楕円形を作成します。 これは円を作成するためにも使用されます。同じ幅と高さの値を指定する必要があります。 この形状の基準点は、デフォルトでは中心です（図を参照）。 使用法は次のとおりです。

  • ellipse（x、y、w、h）

arc（） -円弧を描画します。 使用法：

  • arc（x、y、w、h、start、stop）-'start'および'stop'は、円弧の描画を開始および停止する角度を決定するために使用されます。 値はラジアンです。 「PI、HALF_PI、QUARTER_PI、TWO_PI」などの定数を使用できます。
  • arc（x、y、w、h、start、stop、mode）-'mode'変数は、アーク（文字列）のレンダリングスタイルを決定します。 利用可能なオプションは「OPEN、CHORD、PIE」です。 OPENは、描画されていないパーツをフチなしのままにします。 CHORDは、描画されていない部分を境界線で完成させます。 PIEは、円弧を円グラフのように見せます。

画面にテキストを表示することは、図形を表示することに似ています。基本的な考え方は、テキストを表示する座標を決定することです。 ただし、テキストの処理にはまだまだあります。 プロパティと設定セクションの後で、テキストをより細かく制御できるようになります。ここでは、設定とプロパティをオブジェクトに適用する方法を学習します。 ここでは、テキストの表示の基本を説明します。 それを行うには多くの方法があります、私は本質的なものだけを示します。

text（） -テキストを表示します。 使用法：

  • text（c、x、y）-'c'は文字を意味し、任意の英数字が表示されます。
  • text（c、x、y、z）-3次元で作業している場合。
  • text（str、x、y）-'str'は表示される文字列です。
  • text（str、x、y、z）-3次元で作業している場合。
  • text（num、x、y）-'num'は表示される数値です。
  • text（num、x、y、z）-3次元で作業している場合。

プロパティと設定

このセクションで最初に説明する必要があるのは、オブジェクトのプロパティ設定の背後にあるロジックです。 塗りつぶしの色、背景色、境界線、境界線の幅、境界線の色、図形の配置、境界線のスタイルなどは、これらのプロパティの例です。

プロパティを設定するときは、コードが上から下に実行されることを覚えておく必要があります。 たとえば、「fill」プロパティを赤に設定すると、その線の下に描画されたすべてのオブジェクトは、別のfillプロパティによって上書きされるまで赤で塗りつぶされます。 同じことが他のプロパティにも当てはまりますが、すべてのプロパティが相互に上書きするわけではないことに注意してください。 たとえば、「stroke」プロパティは「fill」プロパティを上書きせず、代わりに連携して機能します。 ロジックを理解するための視覚的表現は次のとおりです。

画像でわかるように、最初の行は塗りの色を赤に設定し、2番目の行は線の色を青に設定します。 これで、2つのアクティブな設定ができました。赤と青のストロークを塗りつぶします。 ご想像のとおり、次の行にあるオブジェクトが何であれ、オブジェクトは赤で塗りつぶされ、青のストロークになります（該当する場合）。 このように画像を調べ続けることができ、論理を理解することができます。

一般的に使用されるいくつかの重要なプロパティと設定は次のとおりです。

スタイリング設定

fill（） -塗りつぶしの色をオブジェクトに設定します。 この設定は、テキストの色付けにも使用されます。 今のところ、次の使用法を知る必要があるだけです。

  • fill（r、g、b）-整数としての赤、緑、青の値
  • fill（r、g、b、a）-追加のアルファ値、最大は255

noFill（） -塗りつぶしの色を透明に設定します。

stroke（） -ストロークの色をオブジェクトに設定します。 ストロークプロパティは、オブジェクトの周囲の線と境界線に適用できます。 今のところ、次の使用法を知る必要があるだけです。

  • stroke（r、g、b）-整数としての赤、緑、青の値。
  • stroke（r、g、b、a）-追加のアルファ値、最大は255

noStroke（） -ストロークを削除します。

strokeWeight（） -ストロークの幅を設定します。 使用法：

  • strokeWeight（x）-xは整数であり、ストロークの幅をピクセル単位で表します。

background（） -背景色を設定します。 今のところ、次の使用法を知る必要があるだけです。

  • background（r、g、b）-整数としての赤、緑、青の値。
  • background（r、g、b、a）-追加のアルファ値、最大は255

配置設定

ellipseMode（） -楕円を整列する参照点として使用する場所を設定します。 使用法：

  • ellipseMode（mode）-'mode'はパラメーターです。使用可能なパラメーターは次のとおりです。
    • CENTER（デフォルト）：中心を基準点とします。
    • RADIUS：これも基準点として中心を取りますが、このモードでは、指定したwとhの値は半分として扱われます（つまり、直径ではなく半径）
    • コーナー：左上隅を基準点とします。
    • コーナー：最初の2つのパラメーター（xとy）を左上隅の位置として設定し、最後の2つのパラメーター（wとh）を楕円の左下隅の位置として設定します。 したがって、このモード、「幅」と「高さ」は関係ありません。 この場合、楕円（x_tl、y_tl、x_br、y_br）と考える方が理にかなっています。

rectMode（） -長方形を整列する参照点としてどこを取るかを設定します。 使用法：

  • rectMode（mode）-'mode'はパラメーターです。使用可能なパラメーターは次のとおりです。
    • 中心：中心を基準点とします。
    • RADIUS：これも基準点として中心を取りますが、このモードでは、指定したw値とh値は半分として扱われます
    • CORNER（デフォルト）：左上隅を基準点とします。
    • コーナー：最初の2つのパラメーター（xとy）を左上隅の位置として設定し、最後の2つのパラメーター（wとh）を楕円の左下隅の位置として設定します。 したがって、このモード、「幅」と「高さ」は関係ありません。 この場合、rect（x_tl、y_tl、x_br、y_br）と考える方が理にかなっています。

テキスト関連の設定

textSize（） -テキストのフォントサイズを設定します。 使用法：

  • textSize（size）-目的のサイズの整数値。

textLeading（） -テキストの行の高さを設定します。 使用法：

  • textLeading（lineheight）-行間のスペースのピクセル値。

textAlign（） -テキストを整列する参照点としてどこを取るかを設定します。 使用法。

  • textAlign（alignX）-'alignX'は水平方向の配置用です。 利用可能：左、中央、右
  • textAlign（alignX、alignY）-'alignY'は垂直方向の配置用です。 利用可能：TOP、BOTTOM、CENTER、BASELINE。

アニメーション

これまで、オブジェクトやテキストの描画方法を学びました。 しかし、それらの問題は、それらが静的であるということです。 では、どうすればそれらを動かすことができますか？ 単純で、座標を整数として与える代わりに、変数を使用して、それらをインクリメント/デクリメントできるようにします。 わかる？ 次のコードを見てください。

 // initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

アニメーションをどのように管理したかわかりますか？ xとyをグローバル変数として設定し、それらの初期値を0に設定します。描画ループで、楕円を作成し、塗りつぶしの色を赤、ストロークの色を青、座標をxとyに設定しました。 xとyをインクリメントすると、ボールは単にその位置を変更します。 しかし、このコードには問題があります。気付くことができますか？ 自分にとって簡単な挑戦として、問題が何であるかを理解し、それをテストしてみてください。 結果は次のとおりです。

これを実現するための私の意図は、Processingのループの性質がどのように機能するかを理解してもらうことでした。 「ドローブロック」セクションの例を参照してください。「123…」ではなく「111…」を取得した理由を覚えていますか？ ボールが跡を残しているのと同じ理由。 ドローブロックが繰り返されるたびに、xとyが5ずつ増加するため、ボールは上下5ピクセルに再描画されます。 ただし、ボールは前の反復から描画され、ビューに残ります。 どうすればそれらをなくすことができますか？ 何か推測はありますか？

ボールが残したマークを取り除くには、セットアップブロックからbackground（255）を削除し、それを描画ブロックの最初の行に貼り付けます。 バックグラウンドコードがセットアップブロックにあるとき、最初に1回実行され、バックグラウンドが白になりました。 しかし、それだけでは十分ではありません。前のループから引き出されたボールをカバーするために、各ループの背景を白に設定する必要があります。 背景が最初の行であるということは、それが最初に実行され、ベースレイヤーになることを意味します。 各ループで、キャンバスは白く塗られ、新しい要素が白い背景の上に描画されます。 ですから、マークはありません。

これが、Processingで物事をアニメーション化し、オブジェクトの座標をプログラムで操作して位置を変更する背後にある考え方です。 しかし、ボールを画面に保持するなど、どのように凝ったことをするのでしょうか。 それとも重力を実装しますか？ この記事の次のパートでは、このような方法を説明します。 試して構築することで学びます。 その方法を学び、すぐにゲームに適用します。 最後に、完全で、プレイ可能で、うまくいけば楽しいゲームができあがります。

キーボードとマウスの相互作用

処理におけるキーボードとマウスの相互作用は非常に簡単で簡単です。 イベントごとに呼び出すことができるメソッドがあり、内部に書き込んだ内容は、イベントが発生したときに1回実行されます。 また、描画ブロックでループを利用するために使用できる、mousePressedやkeyPressedなどのグローバル変数があります。 説明付きのメソッドのいくつかを次に示します。

 void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

ご覧のとおり、マウスがクリックされているかどうか、またはどのキーが押されているかを確認するのは非常に簡単です。 ただし、mousePressed変数とkeyCode変数に使用できるオプションは他にもあります。 mousePressedで使用できるオプションは、LEFT、RIGHT、およびCENTERです。 keyCodeで利用できるものは他にもたくさんあります。 UP、DOWN、LEFT、RIGHT、ALT、CONTROL、SHIFT、BACKSPACE、TAB、ENTER、RETURN、ESC、およびDELETE。

マウス変数について知っておくべきことの1つは、これを頻繁に使用することですが、マウスの座標を取得する方法です。 カーソルの正確な座標を取得するには、draw（）ブロックで直接mouseX変数とmouseY変数を使用できます。 最後になりましたが、他にも多くの便利な方法を確認する必要があります。 それらはすべて、処理リファレンスに記載されています。

結論

これで、処理に慣れているはずです。 ただし、ここで停止すると、この知識はすべて飛んでしまいます。 学んだことをいじって練習を続けることを強くお勧めします。 あなたが練習するのを助けるために、私はあなたに2つの練習を提供します。 あなたは自分でそれをするために最善を尽くすべきです。 行き詰まったら、GoogleとProcessingReferenceがあなたの親友になるはずです。 最初のコードを提供しますが、それらを確認することが最後に行う必要があります。

推奨される演習1

画面の4つの角から始めて、異なる速度で中央を移動する、異なる色の4つのボールを作成する必要があります。 マウスボタンをクリックして押したままにすると、ボールがフリーズします。 また、マウスを離すと、ボールが元の位置に戻って動き続ける可能性があります。 だから、私はこのようなものを探しています。

自分で演習を試した後、ここでコードを確認できます。

推奨される演習2

DVDロゴが画面上で跳ね返る有名なDVDスクリーンセーバーを覚えていますか？私たちは皆、それが角を曲がるのを必死に待っていましたか？ そのスクリーンセーバーを複製してほしいのですが、DVDロゴの代わりに長方形のみを使用しています。 アプリを起動すると、画面が黒くなり、長方形がランダムな位置から開始するはずです。 長方形が角に当たるたびに、その色（そして明らかに方向）が変わるはずです。 マウスを動かすと、長方形が消え、背景色が白に変わります（スクリーンセーバーですね）。 この記事では、この演習のコードは提供しません。 あなたはそれを実装するために最善を尽くすべきです、そしてコードはこの記事の後半で提供されます。

簡単なゲームを構築するためのステップバイステップのチュートリアルである、Processingの究極のガイドの第2部が公開されました。

Toptal Engineeringブログでさらに読む：

  • インタプリタを最初から書く方法