ひさしぶりに書きます
ネタが途切れたのもあって、少ない脳ミソのリソースを会社員モードに全振りしていたらいつの間にか梅雨が明けて蝉が鳴く季節になるまで放置。さすがに寂れるだろうと思っていたんですが、しみじみと閲覧数を維持できているのは驚きと同時に感謝の念でいっぱいです。
UE5への移行で何か書けることあるかなと思ってアップデートしてみたものの、思いの外すんなり手癖を受け入れてくれる懐の深さ。いつも通りな感じで操作できてしまう自分がいるのでした。
差分情報などはすでにいくつかトピックが上がっていたりで、これといって新鮮なネタを思いつかない自分の役目は終わったな、などと書かない言い訳を拾い集めるのが心苦しくなってきたころに、ようやく方向性が見つかった気がしてきた今日この頃です。
過去記事をUE5でリフレッシュするのも考えてはいたけど、新しいことをしたい気持ちの方が強くて、UMGでもっといろいろ作ってみようと。その過程でネタが見つかるんじゃないかと。あとTwitterで晒して「それってどうやってるの？」みたいな反応があれば記事にしたらいいんじゃないかと。
まあそんな感じで、前置きが長くなりましたが、Twitterにあげたネタからいくつかピックしてツラツラ書いてみます。
スタイライズドなファイヤー
ここでいうスタイライズド（Stylized）という語は、記号化、様式化されたというニュアンスで使っています。ただリアルに物理現象を模すのとは対照的に、印象として記号感を残しつつもある特徴的なルールに従って表現されているので、アーティストの考えた世界観がぐいぐい出てくる。
たとえば、既存のアウトラインフォントを使うとき。フォントワークス社のラグランパンチやマティスEB、ロウディなんかを、ゲームで使うのはなかなか難しいのと状況が似ていると感じてます。
「難しい」とぼかして書きましたが、その特徴的な印象とプロダクトが1対1の関係に紐づいてしまうと、後から第3者が使うというのは、リスペクトかパクリかどちらにせよポジティブな印象に転化するのは簡単じゃないという意図です。
今回の炎は、過去に見たツイートで紹介されてたテクニックで、URLを遺失していたので記憶を辿りながら再現を試みてみました。確か英語で図解されていたと思います。原理的なものはそんなに外れてないはず。
フォントはボリュームのことを思うとアレンジするコストが膨大なので速攻で諦めるのですが、炎のマテリアルくらいだったら、がんばったらいろいろ工夫転用したり新しいヒントに出会えるかもしれません。ということで今回作ったやつを公開することにします。
ここからいくつか閲覧注意な画像が登場します。
肝になったテクスチャですが、シームレスで作る必要があって、Photoshopのパターンプレビュー機能（ver22.0以降）が大いに役立ちました。
適当な大きさのテクスチャに円形のシェイプを一つ。塗りを円形のグラデーションにします。
このシャイプレイヤーのブレンド効果を比較（暗）にします。
あとはこれを複製（Ctrl + J が便利）しつつ大きさを調整しながらひたすら埋め尽くします。適当にランダムに。
トライポフォビアの方ごめんなさい。ちょっとキモくなるけど、そこは我慢するか、グラデーションマップを一番上においてマイルドにするといいかも。
なぜかスマートオブジェクトにするとこの後の作業でブレンドがうまくいかなくなるので、ここはレイヤーグループにまとめます。
表示メニューからパターンプレビュー機能を有効にし
レイヤーグループを、コピーして8方向に移動。
移動量はテクスチャサイズと同量。
数値を気にしながらドラッグするのが面倒なときは、ざっくり動かした後でドキュメントを拡大してカーソルキーでドット単位でズレがなくなるように調整するといいです。
これでシームレステクスチャの完成です。
恐ろしいパターンプレビューを終了して、テクスチャとして書き出します。
これをマスクテクスチャとしてエンジンで利用します。
参考までにインポート設定。
用途がマスクなので、Grayscaleを選択。sRGBを無効にする場合、
マテリアルでは LinearGrayScaleとして扱うことになります。
炎は自然現象なので、基本繰り返すことはありません。でもテクスチャを使用すると同じパターンが繰り返し現れてしまいます。それをなんとかしてランダムに見えるように工夫しています。
あくまでも一例ですが、２種類の動きをレイヤーとして作っています。
まずはレイヤー１
パラメータノードを使っているのは、同じマテリアルを使用した場合に同じ動きをしてしまうので、意図的にばタイミングなどにバラつきを与えるためです。
Pannerノードでスクロールスピードを調整。
TimeからSine（サイン）ノードの流れは、左右に揺らすためのものです。
次にレイヤー２
構造の基本はレイヤー１と同じで、スピードの調整であえて差が出るようにしています。
2種類の最小公倍数を可能な限り大きくする感覚です。
２つのレイヤーを掛け算したものを確認してみます。
Named Rerouteノード便利ですね。多用すると追いかけるの大変になるけど、ノードに名前が付くので分かりやすい。状況確認しやすいのもGood。
こういったお試しの
これに調整を加えてから丸く切り取って、２諧調化して仕上げます。
Grayscaleはチャンネルを一つしか扱わないので、RGBAという４つにまとめられたFloatのうちの一番目、Rを使うので赤としてプレビューされます。
ですが、
最終的に流れてきたデータが、Rしかないときは、エンジンは気を利かせて、残りのGとBに同じ値を入れてグレーで描画してくれます。
MaterialのBlendModeを Additive にして完成です。
これをUMGに持っていって配置。
大きさを変えて２枚重ねにすることで、厚みと透明感を表現。
適当に着色すればいろいろ楽しめます。
Stepノード使うとトゥーンな見た目になるので、Stepノードを使わずに
SmoothStep とグラデーションテクスチャで、こんなやつも作れます。
知恵と勇気とこだわりがあれば、何とかなりそうな予感。
ビットでRGB
いわゆる光の3原色といえは、おなじみRGBの赤緑青です。
最近はHSVでカラーを調整するのがデフォという若者が増えて、嘆かわしいことですな。ふむ。
とかなんとか言いながら作ってみたのがこのパズルっぽいやつ。
狐の持つ炎の色が 赤、緑、青、のどれかに決まっていてランダムに配置。２匹が組み合わさることで、合成された色になるので、そこから組み合わせの内訳を推測して並べなおすという遊び。１匹だけサボってるやつがいるので、そこで確定させるとヒントになります。上の図だと、右端の２匹のうちどちらかがサボりで、どちらかが青。
この遊びを作るにあたって、ビットを使って制御したり判定することを思いついたのでいろいろ試した。
RGBのビット順については、勝手に下図のように決めました。
加法混色ということで、基本的に2進数で考えると扱いやすい。
というわけで整数にして扱うようにしていますが、その値にRGBの各要素が含まれるか調べる必要がある。その方法で使ったのがビットマスク。
任意の整数から、RGBが含まれているかチェックして、カラーに置き換える関数。
＆というノードは ビットでの論理積で０と１の掛け算。
この”＆”（AND）を使い、特定の狙ったビットだけを残して ０か１かをチェックすることで、そのビットがどういう状態なのかがわかるというもの。
こんなことせずとも、RGBそれぞれ個別に配列作って管理してもいいんですけどね。
ちょっとやりたかったというか、まぁ自己満足ですね。
灼熱のサドル地獄炙り
昼休みに出かける際 暑いのでさっさと行って帰ってくるのがベスト。で、自転車に乗るのですが、屋外に停めてあるので黒いサドルがとんでもなく熱くなっていて、立ちこぎするしかない状況になる。尻の肉が焦げてしまいそうなくらい熱くなっている。気がする。そこでふと頭に浮かんだのが、料理名のような灼熱のサドル尻肉の地獄炙り。
語感も悪くない気がする。尻肉がなんかイマイチなので、肉の部位名を調べたら「イチボ」というらしい。テールはしっぽの付け根だし、ランプはもう少し上の腰のあたり。尻側のもも肉ということでイチボ。焼肉食べにいきたくなってきた。
それにしても普段エアコンのある場所で生活しているので、年々暑さ寒さに対する耐性が下がっている気がする。
ではでは
今回はこの辺で
P.S. ウィンルキンソンのパイナップルフレーバー炭酸が好きすぎる
