# Processingで複雑なプロジェクトを作る時に使えるテクニック
## はじめに
この記事は[FUN Advent Calendar 2021](https://adventar.org/calendars/6526)の19日目の記事です。
18日目は[Ataruさんの「Bottom Sheet」に関する記事](https://atarubift.hatenablog.com/entry/fun_advent_calender_20211218)でした。以前、ある経緯で私も同じ物が欲しかったのですが、結局名前がわからないままフルスクラッチで実装することになりました…もっと早くこの記事を見たかったです（笑）

## あんただれ
[キャサリン](https://twitter.com/cathiecode)と申します。周りの人からは大体`キャ(サリン|シー)(コード)?`と呼ばれています。ブロック崩しを作るために未来大に入りました。

## 概要
公立はこだて未来大学に入学してから約8ヵ月、私は「情報表現入門」という授業をきっかけに様々なモノを[Processing](https://processing.org/)で作ってきました。「情報表現入門」では、ゲームやアプリケーションをProcessingで書く課題が出されます。発表会もあるため、腕の見せ所だととんでもないものを作ろうと挑む方もいらっしゃるかもしれません。しかし、Processingは大きく複雑なプロジェクトを書くには少々非力で、様々な制限やパフォーマンス上の問題があります。
幸いなことに、それらの問題は様々なテクニックを使うことにより回避することができます。本記事では、Processingで複雑なプロジェクトを製作する際に私が使っていたテクニックを紹介します。

## Processing IDEを使う場合
### タブを分ける
関数やクラスなど大きな機能のまとまり一つにつきタブを一つ用意することにより、コードを見やすく分けることができます。コードとコードを素早く行き来することができるため効率的な開発をすることができます。

### 自動フォーマットを使う
コードを書いていくうちに、インデントや字空けがぐちゃぐちゃになっていくことがあります。この際に、「自動フォーマット」機能を使うことにより一発でコードを整頓することができます。インデントを綺麗にしておかないと見つけられるバグが見つからないという事態にもなりかねないため、自動フォーマットを活用してコードを綺麗にしておくことをおすすめします。

### 素材のフォルダを分ける
Processingは`loadImage()`などで画像を読み込めるようになっていますが、この時にスケッチのフォルダの中にある`data`フォルダの中身を優先して読み込むようになっています。また、`data`フォルダの中にもフォルダを作成してデータを整理することができます。これにより、何がどこにあるかを一目瞭然にすることができ、素材の手直しなどをするときに素早くファイルを見つけることができます。
一例として以下のようなフォルダの構成が考えられます。

- data/
  - image/
    - title.png
    - chara.png
  - audio/
    - bgm.mp3
    - hit.wav
- application.pde
- title.pde
- game.pde
- credit.pde

この場合、タイトル画像を読み込む場合は`loadImage("data/image/title.png")`で読み込むことができます。

### P2Dレンダラを使う
Processingは標準でCPUを使う描画方式を採用しています。この方式は互換性の問題が発生しづらいので扱いやすくはあるのですが、ほかの方式に比べてだいぶ処理が遅いです。ゲームを作る時や大規模なアプリケーションを作る時は`P2D`レンダラを使うことをおすすめします。この方式では、近年ほとんどすべてのPCに搭載されているOpenGLを使うことにより非常に高速な描画を行うことができます。
使用方法は、スケッチの画面サイズを指定する`size()`コマンドに`size(1280, 720, P2D)`のように`P2D`を追加するだけです。ケースによりますが、これだけでフレームレートが数十倍になることもあります。
3D表現をしたいときは`P3D`レンダラを使うこともできます。詳しくは[Processing.orgのsizeの項目](https://processing.org/reference/size_.html)をご確認ください。

### 「ページ」をクラスに閉じ込める
Processingでは、Javaと同じように`class`を使うことができます。これは、変数と関数を一つの変数に押し込むことができる機能です。これを使うことにより、ページとページの移動を綺麗に実装することができます。古き良きグローバル変数と`switch`によるページの実現もよいのですが、巨大なプロジェクトの状態を管理する用途ではswitch文が巨大になってしまうなどの欠点があります。そのため、ひとつのページを表す`interface`とそれを`implement`して具体的なページを実装する`class`を用意する方法をおすすめします。詳しくは`Stateパターン`で検索すれば情報が見つかるかと思います。

## Processing IDEを使わない場合
Processing公式のコードエディタであるProcessing IDEは、小規模なプロジェクトを書く際に使える軽量で簡単なエディタです。しかしながら、このエディタでは~~emacsキーバインドが使えない~~標準で自動保存が使用できないなどの制限があります。そのため、大規模なプロジェクトを書く際には少し不便な面があります。これを避けるため、ProcessingではVSCodeやemacsなどのエディタを使用することができます。
ここでは書きませんが、ビルドコマンドをVSCodeから実行できるようにする設定など、便利にProcessingを書くための設定があります。拙作ですがこれを実現する[Processing VSCode Starter Kit](https://github.com/cathiecode/processing-vscode-starter-kit)をご用意しています。よろしければご活用ください。

### コードをディレクトリに分ける
Processingでは、プログラムコードのファイルである`.pde`ファイルを複数のフォルダに分けることが**できません**。そのため、大規模な開発をする際には不便なことがあります。しかし、実行する直前にフォルダを統合することによって疑似的にフォルダを使用することができます。つまり、

- data
  - player.png
- src
- title
  - Title.pde
  - TitleButton.pde
- game
  - Chara.pde
  - Enemy.pde
  - Player.pde
  - Stage.pde

これを、

- build
  - data
    - player.png
  - title_Title.pde
  - title_TitleButton.pde
  - game_Chara.pde
  - game_Enemy.pde
  - game_Player.pde
  - game_Stage.pde

このように変換するコードを書き、スケッチを実行する直前に発動させればフォルダを分けることができるのです。
[Processing VSCode Starter Kit](https://github.com/cathiecode/processing-vscode-starter-kit)では、この機能を実装しているためこのテクニックを簡単に使うことができます。ご興味があれば[リブロ・イラストラド](https://github.com/cathiecode/libro-ilustrado)で具体的にどう使用するかをご覧いただけます。

### Gitを使う
Gitは、過去に編集したコードにいつでも戻ることができるようにする、「バージョン管理システム」です。これを使うことにより、制作中にコードを壊してしまった場合でも動いていたバージョンまで巻き戻すことができます。VSCodeを使う場合は便利なUIが付属しているため、簡単に扱うことができます。プロジェクト学習などでも使うかもしれないので、Processingで使わないにしても覚えておいて損はないと思います。

### Processingを使わない(番外)
私はいまいちよく知らないですが、Processingを直接書くのではなく、JavaやKotlinなどのJVMに互換性のあるプログラミング言語から呼び出すことによってProcessingの機能を活用する方法があるようです。こた先輩の[ProcessingForKotlinTemplate](https://github.com/kota-shiokara/ProcessingForKotlinTemplate)などを見るとやり方がわかるかもしれません。ただ、これを使った場合、情報表現入門などの課題のレギュレーションに適合するのかどうかがいまいちよくわかりません。課題に使う場合などは担当教員に確認の上使ってみてください。

## おわりに
最後までお付き合いいただき、ありがとうございました。
Processingは機能が少ないように見える言語ですが、うまく使えばJavaと同等かそれ以上のパワーを発揮させることができます。敷居は低く天井がない素晴らしい言語なので、是非いろいろなモノを書いてみてください。
それでは。