Unity1Week共有会#9で使用したスライドです ProcessingをUnityと絡めて使うぞい

1. Unity×Processing 1 Week
Unity1Week共有会 #9
えふぇ子

2. 自己の紹介
えふぇ子
@EphedrineUniuni
ゲームを作る羊です
内なる世界観をゲームにしたい！
エルデの王になりました 二週目中

3. 話すこと
Processingはいいぞ！！！！

4. 作ったもの
呪いを溜めて呪と天使を滅すゲーム(?)
呪溜
ゲーム性は浜で死にました

5. 身体を侵す呪いの表現
↑主人公の呪い蓄積ゲージと対応した画面端
→天使を呪いで
攻撃したときの
エフェクト
←市民の呪いを
吸収したときの
エフェクト

6. しくみ
・グレスケ不透明画像をアルファ値を持つものに
(Spriteの設定から)
・Sprite MaskのAlpha Cutoffによって、
透明度がt~1の範囲をマスクとして扱う

7. Unity上で
・マスク画像の設定
・TextureType ：Sprite(2D and UI)
・AlphaSource ：From Gray Scale
・Sprite Maskの設定
・Sprite ：マスク画像を参照
・AlphaCutoff ：スクリプト等からいじる
・CustomRange ：複数マスク使うなら必須
SortingLayerを使って範囲を指定
・Sprite Rendererの設定
・MaskInteraction： Visible Outside(又はInside) Mask

8. 今回のマスク用ルール画像

9. 今回のマスク用ルール画像
1
2
1
█ 塗りつぶし候補(ランダム選択)
█ 塗りつぶしたピクセル
█ まだその時ではない
6 10 14 2
1 5 15 9
12 16 11 3
7 4 13 8
・・・
・画像の縁から順に黒～白くしていく
・後に塗るものほど白く
・塗りつぶしたpxの隣のpxも縁判定
※手間だったので段々白くはしてない

10. で、どう作る？
・グラデーションやパーリンノイズであればPhotoShopやクリスタで十分代用可能
・アルゴリズムを組む必要があるときはコーディング必須
・Processing、結構おすすめ

11. Processingとは
Processing（プロセシング）は、キャセイ・レアス（英語版）（Casey Reas）とベンジャミン・フライ（英語版）
（Benjamin Fry）によるオープンソースプロジェクトであり、かつてはMITメディアラボで開発されていた。電子
アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境（IDE）である。アーティストに
よるコンテンツ制作作業のために、詳細な設定を行う関数を排除している。 視覚的なフィードバックが即座に得ら
れるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。
Java を単純化し、グラフィック機能に特化した言語といえる。
(https://ja.wikipedia.org/wiki/Processingより引用)
フラクタル羊🐑🐑🐑🐑🐑 ライブラリ使用、手書き風お星さま なんか菊っぽさを感じる……!

12. いいとこ2つ
①Unityの苦手を補ってくれる
②ユニラーにとって学習コスト低め

13. いいとこ① Unityの苦手を補ってくれる
・Unity、画像ファイル生成苦手ちゃん
// 白色の64×64のテクスチャをAssets/に作成する
private static void CreateTexture()
{
var texture = CreateTempTexture(64, 64, Color.white);
// これを呼ばないと色が書き込まれない
texture.Apply();
System.IO.File.WriteAllBytes(Application.dataPath + "/temp.png",
texture.EncodeToPNG());
// 削除を忘れない
DestroyImmediate(texture);
AssetDatabase.Refresh();
}
/// <summary>
/// 特定の色で埋めたテクスチャを取得
/// </summary>
private static Texture2D CreateTempTexture(int width, int height, Color
defaultColor = default)
{
var texture = new Texture2D(width, height, TextureFormat.RGB24, false);
for (int y = 0; y < texture.height; y++)
for (int x = 0; x < texture.width; x++)
texture.SetPixel(x, y, defaultColor);
return texture;
}
引用：【Unity】単色テクスチャを生成する うにてぃブログ
https://hacchi-man.hatenablog.com/entry/2020/02/29/220000
size(64,64);
background(255);
saveFrame(パス);
=

14. 画像インスタンスを作って1画素ずつ設定
生成方法2通り
colorMode(HSB, 360, 100, 100);
PImage img = createImage(64, 64, RGB); //画像ｲﾝｽﾀﾝｽ作
成
int[] pxs = new int[64*64]; //画素の配列
for(int n=0;n<64*64;n++)pxs[n]=color(0);
for (int n=0; n<50; n++)
{
int col = color(random(360), 50, 90); //色(HSB)か
らintに
int gridPos = (int)random(64);
for (int m=0; m<64; m++)
{
pxs[gridPos*64+m]=col; //配列の値を変更
pxs[gridPos+64*m]=col;
}
}
img.pixels = pxs; //画素配列を適用
img.save(パス); //画像を保存

15. 生成方法2通り
ウィンドウに直接描いてそれを保存
size(512,512); //ウィンドウを作る
colorMode(HSB,360,100,100);
background(0);
noStroke();
blendMode(ADD); //加算モード
for(int n=0;n<100;n++)
{
fill(random(360),40,30); //塗りつぶし色設定
circle(random(width),random(height),100); //円を描く
}
saveFrame(パス) //ウィンドウを保存

16. いいとこ② C#と似たノリで書ける
・ProcessingはJavaから派生したもの
・静的型付け言語
・オブジェクト指向（画像生成だとあんま意味ないけど）
→C#と近いので学習コストが低い！
・画像生成ならPythonもあるけど 羊は負けてしまったので
・動的型付け許すまじ

17. おまけ こんなこともできるぞ

18. れっつProcessing!