芸軌社株式会社
RSS 2.0

芸軌社公式ブログ

2014年3月24日(月)15:03(+0900)

Processingでゲーム作成 その1

このエントリーをはてなブックマークに追加

ここでは、「Processing(プロセッシング)」について、ゲームを作成しつつ解説していきます。以下に、ゆっくり解説動画とその内容の文章を載せます。

Processingというのは、プログラミング言語および、プログラミング開発環境の一種で、初心者でも簡単にプログラミングが可能だとされています。ここでは、上のような、色のついたパネルをクリックする、一種のモグラたたき的なゲームを作ってみることにします。このゲームは、30から40行くらいのプログラムでできています。

Processingの入手

まずはProcessingを入手しましょう。インターネットで「Processing」で検索すると、多分一番最初に出てきます。Processingのホームページに入り、「Download Processing」をクリックすると、寄附をするかどうかを聞かれます。とりあえず今回はダウンロードだけする場合は、一番左の「ノー・ドネーション」をチェックし、「ダウンロード」をクリックすると、ダウンロードページになります。お使いのOSに合わせたProcessingを選びましょう。どれだか分からない場合は、とりあえず「Windows 32-bit」をダウンロードしましょう。ダウンロードが済んだら、ダウンロードしたファイルを解凍し、中にある「processing」を実行すれば、Processingが起動します。

Processingの画面

これがProcessingの画面です。左上の右向き三角がプログラムの実行です。これをクリックすると、小さなウィンドウが出てきます。初心者にやさしくないプログラミング言語では、何か出すまでにひと苦労する場合もありますが、Processingでは何も書いてなくても、とりあえずウィンドウが出てきます。

Processingの基本的な書き方

Processingのプログラムは基本的には、初期設定をする「void setup(){}」という部分と、ウィンドウへの描写を設定する「void draw(){}」という部分を作り、「{ }」の中にいろいろと書き込んでいきます。プログラム本文は、すべて半角で書くことに注意しましょう。大文字と小文字の違いにも注意です。「//」と書くと、それより後ろはコメントとなって、プログラムとしては無視されます。

横500ピクセル、縦500ピクセルのウィンドウを開く

ここではまず、横500ピクセル、縦500ピクセルの、ウィンドウを開いてみましょう。画面のサイズは、「void setup(){}」の部分に「size(横の大きさ,縦の大きさ);」と書くことで設定できます。横500ピクセル、縦500ピクセルのウィンドウを開くには、「size(500,500);」と書きます。最後の「;」を忘れないようにしましょう。

では、さっそく実行してみましょう。横500ピクセル、縦500ピクセルの、ウィンドウが開かれたはずです。

画像ファイルの準備

次に、画面に何か出してみましょう。まずは、画像ファイルを読み込んで、それを画面に表示することにします。まず、画面上の「↓」をクリックして、データを保存します。すると、保存した場所に、保存した名前のフォルダができているので、この中に、表示したいファイルを入れておきます。ここでは「img1.jpg」というファイルを入れておきました。

画像の表示

次に、実際に画面に描写しましょう。まずはプログラムの最初に「PImage img;」と書きます。これは、「画像を扱うための「img」という「モノ」を作ります。」という、おまじないです。

次に、「void setup(){}」の中に「img = loadImage("img1.png");」と書きます。これは、「「img」の中に、画像img1.pngを入れます。」というおまじないです。

さらに、「void draw(){}」の中に「image(img,0,0);」と書きます。これは、「「img」の画像を、ウィンドウの左上から、横に0ピクセル、縦に0ピクセルの場所に表示します。」という、おまじないです。

では、実行してみましょう。ウィンドウに比べ、画像がちょっと大きすぎますね。

画像サイズの調整

ここで、先ほどの「image(img,0,0);」を「image(img,0,0,500,500);」に書き換えてみましょう。後ろに加えた「500,500」というのは、「「img」の画像を、横500ピクセル、縦500ピクセルの大きさで表示します。」というおまじないです。

再び実行してみましょう。今度は良さそうな感じですね。

とりあえず今回はこのへんで。次回は画像の上に、タイルを並べていきます。ではまた。

固定リンク

2014年3月24日(月)

Processing,プログラミング,スケッチ,ゲーム作成