初心者のためのゲームプログラミング入門

プログラミングとゲームの杜

初心者のためのプログラミング入門 & ゲームプログラムの作り方入門

Processing 入門

4.設定の変更と絵の描きかた

 

絵といっても何かのキャラクターとかではなく、線や円など、いわゆる図形の
描き方を説明します。

 

 

設定について

Processing を本格的にはじめる前に、最低でも知ってほしい点を説明します。
作ったプログラム(スケッチ)はどこに保存されるのか、とか
保存場所を変更するにはどうするのか、などです。

まず「ファイル」をクリック、次に「設定」をクリックします。

 

processing 入門 ファイルの保存

 

設定ウィンドウが開いたら、「スケッチブックの場所」に注目してください。
ここに保存されます。
保存場所を変更した時には、OKボタンをクリックして閉じるようにしましょう。

 

 

つぎに日本語の対応についてです。
おそらく、前に説明した方法でインストールしていれば、普通に日本語が使えると
思います。私の場合は使えました。
日本語が使えない、または、フォントを変更したい場合には
赤枠の項目を変更してみて下さい。

 

processing 入門 日本語対応

 

変更したらOKをクリックしましょう。これでエディタに反映されます。
なお、項目によっては再起動が必要なときもあります。

 

 

私の環境では、「エディタフォントサイズ」と「コンソールフォントサイズ」の表示が
崩れていました。(下一桁しか表示されない)
しかし、設定は正常に行われているようなので大丈夫です。

 

processing 入門 エディタのフォントサイズ

 

 

描画サイズの変更について

つぎのプログラムを実行してみましょう。
結果は、描画エリアのサイズが幅 100 高さ 100 の大きさで表示されます。
これは何もサイズを指定しない場合です。

 

processing 入門 描画サイズの変更

 

 

描画サイズを指定するには size (幅 , 高さ) を使います。

 

processing 入門 描画領域を広げる

 

 

座標を意識しよう

絵を描くとき、どの位置に描くのか座標を指定する必要があります。
Processing の座標はつぎのように左上が原点( 0, 0 )となります。
横方向は X軸、縦に Y軸となっています。

 

processing 入門 座標の概念

 

 

以前、使ったことのある線を描く命令でみてみましょう。
パラメータは次の通りです。

line ( 始点 x, y, 終点 x, y );

processing 入門 線の引き方

 

 

一本、線を増やしてみました。
始点( 250, 50 )から終点( 0, 200 )へ線を引きます。

 

processing 入門 図形の描き方

 

 

図形を描いてみよう

それでは、おもな図形のパラメータを見てみましょう。
四角 rect は次の通りです。
線の line とは違って
第3パラメータが幅(W)、第4パラメータが高さ(H)
になっているので注意してください。

rect ( 左上の角 x, y, w, h )

 

processing入門 四角の描き方

 

 

もう1つ、四角を描いてみます。
これでパラメータの違いがはっきり分かると思います。

 

processing入門 図形の描き方

 

上のプログラムを見て分かると思いますが、
プログラムは基本的に、上から下へ順番に処理されます
つまり、後から描いた方が表示優先が高くなるのです。

 

 

つぎは円 ellipse のパラメータです。

ellipse ( 中心 x, y, 横の直径 w, 縦の直径 h )

 

processing入門 円の描き方

 

 

縦と横の直径を別にすることで楕円を描くこともできます。

 

processing入門 楕円の描き方

 

 

円と四角と線を描いてみました。
こんな感じで、いろいろと試してパラメータの違いを覚えましょう。

 

processing入門 線と四角と円の描き方

 

Processing では他にも絵を描く命令がたくさんあります。
パラメータの指定方法を変更することもできます。
しかし、初めのうちは1つのことを確実にマスターした方がいいと思います。
余裕のある人はリファレンスなど見てみましょう。