はじめに

この本は、OpenProcessingの導入から"p5.play"の使い方までの手順をまとめたものです。
(以前の記事をベースに修正加筆をしたものです)

このライブラリは、"p5.js"をベースにしたものです。
"p5.jsって何かしら?"という方は、別途資料をご参照ください。
p5.jsをかじる本

最終的な完成イメージは下記の通りです。


気合い避けゲー

どんなものが作れるのか

p5.playには、"スプライト"というとても便利な機能が備わっています。
この機能を駆使する事で、シンプルなゲームであれば簡単に作る事が出来る様になるでしょう。


Pong(サンプルコード)


Breakout(サンプルコード)


Asteroids(サンプルコード)


FlappyBird(サンプルコード)

この本では、エディタをインストールする事なく気軽に体験できる様、
"OpenProcessing"というWebサービスを利用しています。
(自分の作品を気軽に編集、公開が出来るのでオススメです)

OpenProcessing

p5.jsについて

p5.jsは、アーティストやデザイナー向けに作られたJavaScriptライブラリです。
記述ルールがシンプルなので、プログラミング初学者にピッタリです。
(同時にとても教えやすく、教育にも積極的に利用されています)

p5.js公式サイト

JavaScriptで動く

p5.jsはJavaScriptで動作します。
具体的には、ChromeやFirefox等のWebブラウザ上で実行する事になります。

p5.playについて

p5.playは、p5.jsのライブラリとして動作します。
いわば"パワーアップキット"の様なものですね。

前述の通り、p5.playにはゲームを作るのに都合が良い、"スプライト"という強力な機能が備わっています。
そしてもう一つ、サウンドを簡単に再生させる事ができるp5.soundも利用します。
(簡単なゲームを作るにはこの2つがあれば十分です)

他にも沢山のライブラリがあるので、興味がある方はチェックしてみると良いでしょう。

p5.play公式サイト

スプライトとは

"スプライト"とは、ゲームを構成する最小単位の事です。
ゲームに登場する様々な"キャラクター"と言うともっとわかりやすいかもしれませんね。
この"スプライト"には、画像の表示、移動や衝突、削除といった様々な機能が揃っています。
(これを使わない手はありません!!)

これだけで何かが作れそうな感じがしてきますよね?

開発環境について

さっそく作り始めたいところですが、その前に"開発環境"を準備しましょう。
(何事にも段取りが必要なのです)
開発環境さえ整ってしまえばしめたもの、後は作るだけです。

開発手法に関しては、大きく分けると下記の様に2つに分けられます。

  1. Webブラウザでのオンラインで開発
  2. パソコンに専用のエディタをインストールして開発

この記事では、"Webブラウザでのオンライン開発"に着目して解説を進めていきます。
ちなみに、記述するコードに関してはどちらの場合でも同じものになるので安心してくださいね。

オンラインエディタを選ぶ

ここからは"Webブラウザでのオンライン開発"についてのお話になります。
(Webブラウザだけで完結しますよ!!)

p5.jsにはそれ専用で用意されたオンラインエディタが複数存在するのですが、
ここでは特に有名な2つのエディタをご紹介しますね。

  1. OpenProcessing
  2. p5.jsWebエディタ

どちらを選んでも良いのですが、ここでは"OpenProcessing"で解説を進めていきます。
(筆者がよく利用させてもらっている為です!!)

OpenProcessingを使ってみよう

さっそく次のURLからアクセスしてみましょう。
OpenProcessing

"Coding is Beautiful(コーディングは美しい)"の文字が見えますでしょうか。
トップページの背景にある作品は"p5.js"で作られているものです。
(カッコ良い!!)

OpenProcessing公式サイト

OpenProcessingは無料で利用する事ができます。(ありがたや)
アカウントの作成には、E-mailアドレスが必要になりますので各自用意しましょう。

アカウントを作る

次の手順に沿ってアカウントを作りましょう。(簡単です)

1. "Join"をクリックします。

画面の左側にある"Join"をクリックします。

2. 必要事項を記入

必要事項にそれぞれ記入して"Join"ボタンをクリックします。

  1. NAMEに名前を記入します(本名じゃなくてもOKですよ)
  2. EMAILにメールアドレスを記入します
  3. PASSWORDにパスワードを記入します
  4. "I'm not a robot"にチェックを入れます(ロボットじゃない事を証明します)

3. 登録したE-mailを確認

先ほど記入したE-mailに"OpenProcessing"からメッセージが送られてくる筈です。
登録者のメールアドレスを確認する作業がありますが、クリックして許可をしましょう。
以降からは、NAMEとPASSWORDで"Sign In"をする事ができる様になります。

次回はOpenProcessingの使い方についてのお話しです。