第2章:図形を描いてみよう

こんにちは、MSLABOです。

前回はデバッグ領域に文字を表示する1行だけの単純なプログラムでしたが、うまく出来たでしょうか?。わずか1行だけのプログラムでしたが、何事も基本が大事です

ちなみにPROCESSINGでは「わずか1行」だけでデバッグ領域に文字を表示できましたが、他の言語だと、そう簡単には行かない場合が多いです。このあたりに興味のある方はWikiペディアの「HelloWorldプログラムの一覧」をご覧いただくと面白いかもしれません。
(ちなみに、WikiのページにPROCESSINGの例は掲載されていません)

では今回の本題で、PROCESSINGが得意とする図形を画面に描画してみましょう。
図形は「実行結果ウィンドウ」と呼ばれるWindowに表示されます。「実行結果ウィンドウ」覚えて見えますか?

HELLO PROCESSINGと表示した際、下図のような小さなWindowが開いたと思いますが、これが「実行結果ウィンドウ」です。

pro_window

以降の説明はPROCESSINGの標準エディター用です。Eclipseを使われている方は「★Eclipseで四角形を描いてみよう」も合わせて参照してください。

(1)四角形を描いてみよう
プログラム領域からprint(“HELLO PROCESSING”);の1行を消して、次の記述をしてみてください。

 

second_prog

入力できたら、早速実行ボタンを押してみましょう。実行結果ウィンドウに下図のような四角が表示されたら成功です!。

second_prog_run

このプログラムは実行結果ウィンドウの大きさを変更し、指定された座標に四角形を書く処理をするものです。以降で解説していきますね。

まず先頭にある「//(ダブルスラッシュ)」で始まる行は「コメント行」です。コメントとは「必要な道具をそろえよう(おまけ)」でも説明した通り、プログラムに書き込むメモ、説明の事でした。ダブルスラッシュ以降、改行するまでの間に書かれた文章は、プログラムとしては動作せず、人間がプログラムを見やすくするための説明文として扱われます。

次 にある「size(640, 480);」は「size」と「(640,480)」部分に分けて考えます。「size」は最初のプログラムで使った「print」と同じく、 PROCESSINGが用意している関数です。「size」は「実行結果ウィンドウのサイズを、引数で与えられた幅、高さにしないさい」というものです。
「(640,480)」は引数で、「( 幅(width),? 高さ(height) )」の順番で指定します。この場合、実行結果ウィンドウの横幅を640pixl(ピクセル。点)、高さを480pixlにしなさいという意味になります。

最 後の「rect(20, 20, 80, 120);」が四角形を描く命令です。
PROCESSINGの実行結果ウィンドウは、下図のような座標系になっています。左上を原点(0,0)として、横がX座標、縦がY座標。右に行くほどXが大きくなり、下に行くほどYが大きくなります。
「rect」もPROCESSINGが用意している関数です。引数は「( 開始横位置,? 開始縦位置,? 横幅,? 縦の高さ )」という意味があり、この場合、実行結果ウィンドウの左上から横に20pixl、縦に20pixl行った場所から、横幅80pixl、高さ 120pixlの四角形を描く事になります。

pro_zahyou
この例では「size(640, 480);」で実行結果ウィンドウのサイズを横640pixl、縦480pixlにしましたので、X座標は0から639まで、Y座標は0から479までの 値が画面に表示される有効値となります。ちなみにPROCESSINGでは、四角形の他にも、線や、円、三角形を描いたり、点を打つなど、様々な図 形を描くことが可能です。

(2)画像を表示しよう
ゲーム作成でも図形を描画する事はありますが、通常は予め用意された画像を表示することが多いのではないかと思います。背景画像やUFOやモンスターの絵を用意しておいて、画面に表示したり動かすわけですね。

以降の説明はPROCESSINGの標準エディター用です。Eclipseを使われている方は「★Eclipseで画像を表示しよう」も合わせて参照してください。

必要な道具をそろえよう(おまけ)」でコンピュータで扱う文字は、コンピュータが番号をつけて管理しており(これを文字コードと言うのでした)、様々な種類があると説明させていただきましたが、絵(画像データ)の形式にも様々な物があります

絵の形式として代表的なものにbmp(ビーエムピー)、png(ピング)、jpg(ジェーペグ、jpegとも表現します)、gif(ジフ)などがあります。

絵のデータは、すごくサイズの大きなものになる(データ量が多くなる)事が多いです。ですので、何らかの形式でデータをコンパクトにして扱う事が考案されてきました。

必要な道具をそろえよう(その1)」で圧縮ファイルについて説明させていただきましたが、画像データについても圧縮を行って、サイズを少なくすることが考えられたのです。そのため、画像データの使われる目的(用途)に応じて、様々な形式が生まれることになりました。

PROCESSINGではjpg、png、gif、tgaの画像形式が扱えます。私のゲームサンプルではpng形式の画像を利用しています。

ではまずpng形式の画像(大きさは横400pixl、縦600pixl)を用意してください。「え、そんなの無理」という方の為に、以下に幾つかサンプルを用意しましたので、それをダウンロードして解凍してもらっても構いません。

画像提供:Sony Japan α CLOCK様、フリー写真素材

サンプル背景画像

ボール反射ゲームの背景画像として利用可能なサンプル画像です。ご自分で背景画像を用意する場合は、png形式の画像(横400pixl、縦600pixl)を用意し頂いてもOKです。

ちなみにサンプルの中の「background.png」を、私のサンプルゲームで利用しています。
では、用意した画像を実行結果ウィンドウの背景画像として表示してみましょう。

1.下準備
まず背景画像(上記でダウンロードした画像データの1つ、もしくは各自で用意して頂いたpng形式の画像)をPROCESSINGのプログラムソースを格納するフォルダーの下に置きます。

saveその手順ですが、「四角形を書いてみよう」で打ち込んだプログラムを消去し、空っぽの状態にしたら、左の形をした下矢印ボタンを押してプログラムソースを格納します。

どこに格納するか尋ねるWindowが開くので、プログラムを格納したい場所(例えばC:\processing-2.1.1\src)まで移動して、ファイル名に「BallReflectionGame」などと記入して保存ボタンを押してください。
pro_save
ファイルエクスプローラーで確認すると、C:\processing-2.1.1\src配下にBallReflectionGameというフォルダーが出来上がっている筈です。その中に移動すると、「BallReflectionGame.pde」という拡張子がpdeのファイルがありますよね?。これが格納されたプログラムファイルになります

このpdeファイルの有る場所に「data」というフォルダーを作成し、このdataフォルダーに背景画像を格納します。
私の場合は「C:\processing-2.1.1\src\BallReflectionGame」配下に「data」フォルダーを作成し、そこに「background.png」ファイルを格納しました。

pro_src_path

2.プログラムを作成する
以下の様なプログラムを書き込んでください。

pro_back_prog

実行ボタンを押下すると、下図のような画面が表示されたでしょうか?(下の画面は背景にbackground.pngを使った例です)

pro_back_view1
いきなり複数行のプログラムだったので驚かれたかもしれませんね。心配いりませんので、安心してください。

まず最初の「PImage pGameGround;」ですが、これは変数を定義する命令になります。
変数とは、プログラムの中で扱う様々な数値やデータを格納する場所の事で、その場所に名前をつけたものになります。

例えるなら、「コカコーラ」という飲み物(液体)を「瓶」という入れ物に入れるような感じです。コカコーラの液体が変数の中身、瓶が変数に相当します

現実には、適当な大きさの瓶には、コカコーラだけではなくて水やオレンジジュースも入りますし、小さなボール(パチンコ球)なども入るかもしれません。一方コンピュータの変数は、その変数にどのような種類の値を入れるのかを明確にする必要があります

コンピュータで扱うデータには、数値(0、1、2など)や文字(ABC)があります。また数値でも整数(0、1、-1など)もあれば少数(0.123など)もあります。

ですのでコンピュータに、いまから使う変数は「整数だよ」とか「文字だよ」と教えてあげる必要があるのです。この「変数がどのようなものか示す情報」を「型」と言います重要ですので、ここはしっかり覚えてくださいね。

「PImage pGameGround;」では「pGameGround」が変数名(瓶につけた名前)になります。そして、この変数の型が「PImage」になります。

PImageというのは「画像データを格納する変数だよ」という意味があります。ですのでこの命令は、「pGameGroundという名前の変数を用意し、そこには画像データが格納される予定です」という意味になります。

注意点として、変数を定義しただけでは、変数の中身は空っぽという事です。例えるなら液体を入れる瓶を用意しただけで、中身のコカコーラはまだ入っていない状態になります。

size(400,600);は「画像を表示しよう」で解説しましたね?。実行結果ウィンドウのサイズを横400pixl、縦600pixlにする命令になります。

「pGameGround = loadImage(“background.png”);」は、下準備で作成したdataフォルダーの中にある「background.png」という画像ファイルを読み出す関数です。「background.png」の部分には、みなさんが用意したファイルの名前を指定してください。

読み出された画像データはpGameGroundという変数に格納されます。ここで初めて瓶の中にコカコーラが注入されました。
hennsuu
最後の「background( pGameGround );」は、引数で与えた変数の内容を画像データとみなして、実行結果ウィンドウの背景画像として表示する関数です。

pGameGroundという変数にはloadImageで画像データが格納されていますので、このデータを背景画像として表示する事になります。

もしもうまくいかない場合は、下準備でC:\processing-2.1.1\src\BallReflectionGame\dataフォルダーにbackground.pngが存在するか、よく確かめてみてください。

次回は、デバッグエリアではなく実行結果ウィンドウに文字を表示します。


★Eclipseで四角形を描いてみよう
(1)Eclipseを起動し、新規プロジェクトを生成してください。
もしくは前回Eclipseで作成したプロジェクトを開いて、

にある print(“HELLO PROCESSING”); の行を削除してもOKです。
Eclipseで新規プロジェクトの作り方がわからない方は、前回の「はじめてのプログラム」を参照してください。

(2)四角形を描いてみる
続いて、以下のようなプログラムを書いてください。

いっぱい書いているように見えますが、大切なのはsizeとrectの部分の2行です。書く場所にも注意してくださいね。sizeはsetup(){} の{}の中、rectはdrow(){} の{}の中に書き込みます

「sample0201」の部分は、あなたがつけたプロジェクトの名前になりますので、私と一緒ではなくても気にしなくてよいです。

プログラムが書けたら実行してみましょう。実行結果ウィンドウに標準エディターと同じような結果がでれば成功です!。


★Eclipseで画像を表示しよう
(1)下準備
まずpng形式の画像(大きさは横400pixl、縦600pixl)を用意してください。画像は用意したサンプル画像をダウンロードしてもらってもOKですが、絵心のある方はGIMPなどの画像加工ソフトで自作して頂いても構いません。(ただし、画像のサイズは必ず横400pixl、縦600pixlで用意してください)

サンプル背景画像

ボール反射ゲームの背景画像として利用可能なサンプル画像です。ご自分で背景画像を用意する場合は、png形式の画像(横400pixl、縦600pixl)を用意し頂いてもOKです。

続いて、用意した画像ファイルをdataフォルダーに格納します。
その方法ですが、ファイルエクスプローラーからEclipseのパッケージエクスプローラーのdataフォルダーにファイルをドラッグします。

例えばパッケージエクスプローラーのsample02_01\src\dataにファイルを摘んで落とします。
pkc_exp_copy
するとファイル操作Windowが開きますので、「ファイルをコピー」が選択されていることを確認してOKボタンを押してください。

pkc_exp_copy_msg
コピーできると、下の図のような感じで dataエリアの下にファイルが出来上がっているはずです。(下図は background.png を複写した例です)

pkc_exp_copy2

(2)プログラムを作成する
以下の様なプログラムを書き込んでください。

プログラムを書き込む場所に注意してくださいね。
また先頭3行目にある「import processing.core.PImage;」も忘れないで下さい

気が付かれた方は鋭い!のですが、何気にコメントが日本語になっていますよね?。そうなんです!、これがEclipseを使う利点の1つです

ここでも「sample0201」の部分は、あなたがつけたプロジェクトの名前になりますので、私と一緒ではなくても気にしなくてよいです。
プログラムが書けたら実行してみましょう。実行結果ウィンドウに標準エディターと同じような結果がでれば成功です!。


《覚えたこと》

  1. 実行結果ウィンドウの大きさを変更する方法
  2. 四角形を描画する方法
  3. 変数と型
  4. 画像ファイルを画像変数に読み込む方法
  5. 画像変数の内容を背景画像として表示する方法

《覚えた関数》

  1. size()
  2. rect()
  3. loadImage()
  4. background()

次章:
第2章:文字を表示しよう へ進む

前章:
第2章:はじめてのプログラム
 へ戻る

目次:
目次 へ戻る


◆よりプログラミングを楽しみたい方、プログラム作成のお供に:
PROCESSING逆引きリファレンス


★お知らせ★
よりわかり易く読みやすい記事を目指して「PROCESSINGで始めるゲーム作りとコンピュータ」の記事を改定しています。

改定版の記事は以下から閲覧できます。よろしければ、どうぞ。

(改定版)PROCESSINGで始めるゲーム作りとコンピュータ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)