はじめに
ここでは、"p5.js"をベースに作られたライブラリである、"p5.play"についてまとめていきます。
下記の2点に当てはまる方であればちょうど良い内容かと思います。
- JavaScriptをちょびっとだけ触った事がある方
- p5.jsをちょびっとだけ触った事がある方
p5.jsについて
p5.jsは、アーティストやデザイナー向けに作られたJavaScriptライブラリです。
記述ルールがとてもシンプルなのでプログラミング初学者にピッタリなライブラリです。
(同時にとても教えやすいのでプログラミング教育等でも積極的に利用されています)
JavaScriptで動く
p5.jsはJavaScriptで記述し、GoogleChromeやFirefox等のWebブラウザ上で実行させる事ができます。
ブラウザがインストールされているパソコンであればすぐにでも試す事ができます。
p5.playについて
p5.playは、p5.jsのライブラリとして動作します。
いわば"パワーアップキット"の様なものですね。
p5.playは、ゲームを作るのにとても都合が良い"スプライト"を扱う事ができる様になります。
ちなみにp5.soundは、サウンドを簡単に再生させる事ができる様になります。
(簡単なゲームを作るにはこの2つがあれば十分ですね)
他にも沢山のライブラリがあります。
スプライトとは
"スプライト"とは、ゲームを構成する最小単位の事です。
ゲームに登場する様々な"キャラクター"と言うともっとわかりやすいかもしれませんね。
このスプライトには、画像の表示、移動や衝突判定といった様々な機能が一通り揃っています。(これが最大の魅力です!!)
これだけで何かが作れそうな感じがしてきますね。
開発環境について
さっそく作り始めたいところですが、その前に"開発環境構築"という大きな壁が立ち塞がります。
何事にも準備が必要なんですね。。。
開発環境さえ整ってしまえばしめたもの、後は作るだけです。
開発手法に関しては、大きく分けると下記の様に大きく2つに分けられます。
- Webブラウザを使ってオンラインで開発
- パソコンに専用のエディタをインストールして開発
この記事では、"Webブラウザを使ってオンラインで開発"する手法で解説を進めていきます。
(こちらの方が最近っぽいのですしお寿司)
ちなみに、記述するコードに関してはどちらの場合でも同じものになるので安心してくださいね。
オンラインエディタを選ぶ
ここからは"Webブラウザを使ってWebブラウザで動く何かを作る"お話になります。
(Webブラウザだけで完結!!)
さて、p5.jsで何かを作るにはJavaScriptを記述する必要がありますが、
それ専用で用意されたオンラインエディタが複数存在します。
その中でも特に有名なものを2つご紹介しますね。
どちらも甲乙付け難いとても人気のあるオンラインエディタです。
どちらを選んでも同じものができますので安心してくださいね。
この記事では、"OpenProcessing"を取り上げて解説を進めていきます。
OpenProcessingを使ってみよう
さっそく下記URLからアクセスしてみましょう。
- https://openprocessing.org/
"Coding is Beautiful(コーディングは美しい)"の文字が見えますでしょうか。
トップページの背景にある作品は"p5.js"で作られているものです。
(凄いですよね!!)
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の簡単な使い方を解説していきます。