どもども！平社員の龍ちゃんです。今回は、Processingを使用してゲーム開発をする際に必要なベース知識をまとめました。前回の内容はこちらです。まとめた内容としては、画面描画に関係している命令形です。線の色や塗りつぶしの指定方法なども合わせてまとめています。
ソースは動かしてもらったほうがいいので、環境は手元にあると良いです。環境構築はこちらで紹介しています。もしオンラインでソースをいじりたい場合は、こちらから。
先にソースコードと結果を示します。その後、ソース自体の解説を挟んでいきます。
ソースコードと結果
2つのソースを解説していきます。
描画「四角形・円」
このサンプルでは、四角形「rect」・点「point」・円「ellipse」の3つのサンプルを用意しています。Processingでは図形の描画と色の設定を別のコードで処理します。一度設定をすると設定が保存されてしまうので、特定の描画したいときは都度設定する必要があります。そのため設定要素である「strokeWeight」・「fill」・「stroke」が図形を描画するタイミングで登場します。
「rectMode」では、パラメータの意味を変更させることができます。中心を計算する方法が異なるのですが、これに関しては実際にゲームを作る際に力を入れて解説します。
描画「色変更」
先ほども説明しましたが、色の設定は独立したコードになっています。今回は、透明度を変更して残像を作成しました。玉のエフェクトのようですね。このコードのように複数行コードで一つの図形を描画します。今回は、単純な図形なので一つの命令ですが、複雑な図形の場合では下の行のコードが上のコードの図形の上に描画されるといった特徴があります。今回対象としているゲームでは単純な図形のみを使用するので、とっても単純に解説しています。
ソース解説
具体的に、ソースの意味について説明していきます。先ほどの章で説明したように描画と描画設定の2つに分類して説明を入れていきます。
ここでは、図形を描画する命令について説明します。長方形や円を組み合わせて新しい形を作成することもできます。円と点では近い表現になりますが、円の場合では枠線の色と図形の色をそれぞれ設定することができます。点の場合では枠線の色のみですね。
点をつなげることで線にすることもできます。線を描画する命令も存在します。点・線・円・四角形当たりの4つのメソッドを抑えておけば、簡易なゲームは作成することができます。また、4つのメソッドを組み合わせることで複雑な図形を書くことができます。ここで紹介したものにも点を指定して線をつなげるといったことも可能です。これはvertexといった命令ですね。
今回必要となるのは、長方形・円・点のみですので3つの命令を紹介しました。
色に関係するメソッド
ここでは、図形設定用の命令について説明します。図形では枠線と色を設定することができます。また、枠線の大きさを調整することも可能です。図の塗りつぶしでは、透明度を指定することで薄い色作成することができます。
終わりに
お疲れ様でした。基本的な描画を書く方法について紹介しました。超基本ですので、簡単な内容になっています。前回の記事と合わせて次回は簡単なゲームロジックを作成してみたいと思います。
それでは～
