Flipbookマテリアルについて

※2018.6/9追記
　UE4標準のマテリアル関数「Flipbook」の中身の方がシンプルで不具合もありません
　この記事の組み方は良くないです‥
　また時間のある際にそちらを解説します

UE4でエフェクト向けにマテリアルを組む際に、Particle System側ではなくマテリアル内でSubUVアニメーション（Flipbook / パラパラアニメ）させたいことがあります。

今回はその方法についてメモしておきたいと思います。

UE4標準のFlipbookマテリアル関数を使用する

UE4.19時点で、Flipbookのためのマテリアル関数が２つ見当たります。
1つはGPUパーティクル用みたいですね。

こちらを使用しても良いのですが、中身が少々分かり辛いのと不要な機能が入っていたりもするので、シンプルな構成のものを自作していきます。

基本的なマテリアル構成

テスト用にテクスチャを用意します。
縦と横のパターン数が違う方がデバッグしやすいと思います。

まずベースとなる基本構成はこちら。1パターン分の絵が表示されるようにしています。
横・縦ともに1パターン分のサイズを出してUV座標に掛けています。
この時点では機能していないAddの部分にUVの移動を与えていきます。

次に、1秒ごとにU方向へパターンが切り替わるようにします。
Timeの値をFloorで切り捨てると1秒ごとに1ずつ増える値を取得できるので、それをU座標に足すだけで1パターン分移動するようになります。
このようにTexcoordに対しては、パターン切り替えを先にAddで行って、後からMultiplyで1パターン分の大きさにUVをスケールする方が数値の流れを理解しやすいと思います。

今度は、U方向のパターンが最後まで表示されたら次はV方向に1パターン分移動するように構成します。
つまりU方向に5パターンの絵が敷き詰められているなら、Timeで1カウントするのに5秒かかるようにします。そのためにはTimeを5で割れば良いのですが、これまでの手順で5で割っている部分があるので再利用しています。

全体図を見てみます。これで1秒ごとにパターンが切り替わるようになりました。

パーティクルごとにランダムなパターンから再生を開始させる

開始パターンをランダムにしたい場合、Timeノードから得られる値に全パターン分の範囲内でランダムな値を足すようにしてあげればOKです。

Dynamic Parameterノード（cascadeでDynamicモジュールを追加して0～1の乱数を設定する必要があります）やParticle Random Valueノード（こちらはGPUパーティクル限定 / 詳しくはこちらの記事をどうぞ）を使って得られる「0～1」のランダムな値に対して全パターン分の値を掛けて、Timeに足せばOKです。

パターン切り替わり時に次のパターンをブレンドさせる

Timeから得られる値に1を足してあげるだけで次のパターンになります。
構成は一気に増えますがやっていることとしてはとてもシンプルです。

今の絵柄と次の絵柄をLerpノードでブレンドさせますが、遷移させるためにTimeの値をFracで小数点以下だけ取り出して、LerpのAlphaポートに繋いでいます。

パターンが切り替わる速度を変える

説明が後回しになりましたが、1秒に1パターンの切り替え速度では遅いですよね。
図のようにTimeに30を掛けると1秒間に30回、パターンが切り替わります。

ただし、Timeの値はもんしょさんの記事で解説されているようにパーシスタントレベル開始時からカウントされるため、時間経過とともに値がどんどん大きくなっていきますが、30のように大きな値を掛けるとさらに巨大な値になります。そして値が大きくなるにつれfloatの精度が悪くなるためか、このように絵が崩れていきます。

そこでTimeノードのプロパティ「Period」で、ある程度のカウントで0にリセットされるようにしておきます。リセットされる瞬間は切り替わりがおかしい絵が一瞬出てしまいますが、これは仕方ないかと思います。。

パーティクルの寿命に応じて一通り再生させる

パーティクルが生まれてから死ぬまでを0から1に遷移する値で取得できるParticle Relative Timeノードを使って、最初のパターンから最後のパターンまで再生させる構成は図のような感じになります。

開始パターンをランダムにする必要が無いので構成も楽ですね。

以上になります！参考になれば幸いです。
　

C# PictureBoxの主なプロパティ

良く忘れるのでメモ。

デフォルトから変えることが多いものを中心にメモっています。

◆動作

SizeMode
　StretchImage　‥にするとPictureBoxのサイズに合わせて画像を拡大縮小する

◆直に記述しないといけないもの

pictureBox1.AllowDrop = true;
　ドラッグ＆ドロップで画像を受け付ける場合にTrueにする
　public Form1() 内に記述すればOK

UE4にPythonプラグインを導入してみる

UE4.17でPythonを使用できるようにするUnrealEnginePythonプラグインを導入してみたのでメモ。

いくつかの記事を参考にさせて頂きました。

まず前提条件が以下になります。

・Python環境そのものをPCにインストールしていなくても大丈夫
・ビルド環境が無くても大丈夫
・プラグインの入ったzipをDLして所定の場所に入れるだけ

「eboard」で中学の数学をやり直してみる

3DCGツールでスクリプトに手を出したり、シェーダーなどに触れたりすると、数学が必要な場面があって、高校時代に全くと言って良いほど勉強しなかった自分は「高校数学を学び直さないと‥」「いや、高校数学どころか中学からやり直さねば多分わからん‥」と思うことがよくあります。

そう思いつつもほったらかしになっていたのですが、最近こんなツイートが流れてきました。

昨年度，息子が受験生で，ちょうど始まったN予備校の講義を一緒にみていたのですが親の方が本気で見ました．昨年は無料でしたが，今年は1000円／月．https://t.co/m1ahVyKOt7　僕は予備校というところに通ったことがないので，高校科目を，一流の先生がどう再構成しているか，大いに参考になりました https://t.co/nRnivZJGCB

— Shigekazu Ishihara (@shigekzishihara) 2017年12月30日

ほうほう、これはいいなーと思ってRTしたのですが、ついでに「中学の数学を学びなおすのに良いサービスはないかな？」と思ってググってみたらトップに出てきたのがこちら。

「eboard」は主に中学生で学ぶ内容を動画で分かりやすく丁寧に教えてくれるサービスのようですが、ユーザー登録しなくても視聴可能で、ユーザー登録すればテスト問題を解いたりどこまで進めたかグラフィカルに表示されたりします。

高校生で学ぶ内容では「高校数学I」だけありますね。

こちらを試しに中学数学の頭から1年生の終わりまで視聴してみましたが、テストをすっ飛ばして動画を見るだけなら半日～1日あれば十分観終える感じでした。
1つの動画は数分程度で、短いものだと2～3分だったりもします。

ということは3日間くらい集中して観れば、中学数学の復習ができるなあ！と。

思ったより短時間で高校数学まで辿りつきそうでモチベーションが上がってきました。
非常に素敵なサービスだと思います。

寄付のページをざっと見てみてもちゃんとしているなあと思いましたし、大きな企業からの協賛もあって素晴らしいなと。寄付は定額だけでなく単発でもいけるようなので、高校数学Iを終えたら感謝の分の寄付をしたいなと思いました。

しかし数学を学習してみて思うのは、1つずつステップアップしていくカリキュラムの流れが美しいなあと。今覚えたものが次に役立つ、の繰り返しで。
国内独自の工夫が盛り込まれているのか、海外と同じなのか。海外がどういったカリキュラムなのかは知りませんが、沢山の頭の良い人達によって長年の間に洗練されてきているのでしょうか。
「はじき」とか「ひとよひとよに‥」が昔と全く変わっていなくてそこはほほえましく思いつつも、こういったカリキュラムを考えられるというのはすごいなと思うのでした。
ハードウェアやソフトウェア、3Dグラフィックスパイプラインやリアルタイムグラフィックス、ゲームエフェクト、果ては開発とかマネジメントとかも順を追って基礎から学べる動画があると良いなあとぼんやり考えたり。

しかし反面、数学は他の教科と比べて、何のために役立つのかイメージしにくくて子供たちにはモチベーションになりにくいだろうなあという点と、他の教科に比べて学習が階段的であるというか‥1つ躓くと以降のステップがどんどん分からなくなっていって脱落しやすい科目だなあというのをあらためて感じました。
先生も教えたりついていけない子をフォローしていくのも大変だろうなと。。

数学だと特にグラフとか図形では3DCGアニメーションを使ってグラフィカルに提示したら理解のしやすさが格段に上がるだろうし、またゲームのプログラミングでは数学が活用される場面が多いと思うので活用例とシリアスゲームがうまくミックスされたようなコンテンツがあれば良さそうと思いましたがすでにあるのかな？

ちなみに、実のところ中学の数学についてはYouTubeで解説動画が色々と上がっていて、ちょこっと視聴したことはあるのですが、YouTubeの動画リストからでは一覧性が悪くアクセスし辛い印象なので、こういった学習に特化したサイトで視聴できる方がやっぱりいいですね。

Udemyも探せば高校数学とかCGクリエーター向けの数学の講座もあるのでしょうか。
Online Courses - Anytime, Anywhere | Udemy

またこちらも漁ってみたいと思います。

追記：
後日、無事に中学数学の視聴を一通り終えました。
先に書いたように3日間集中して視聴すれば一通り観終える感じでした。
早く高校数学に入っていきたかったのですが、そういう場合にどこか飛ばせる要素は無いか振り返ってみたものの、無いですね。。
因数分解も覚える必要あるんだろうかと思いましたが、高校の数学Iでまた出てきますし‥

と言う訳で、引き続き高校数学を学んでいきたいと思います。
3DCG周りで必要なのは「三角関数」「ベクトル」「行列」あたりになるようです。

メモ：

ゲーム開発者による情報発信や副業について考えてみる

今日は2017年の大晦日ですね。

今年は色々と感慨深い年でもあったので、私にとって永遠のテーマでもある「ゲーム開発者にとってのプライベートでの情報発信や副業」について、さらっとではありますが今の考えを書いてみます。

C# DataGridViewの主なプロパティと関数

良く忘れるのでメモ。

デフォルトから変えることが多いものを中心にメモっています。

DataGridViewの主なプロパティ

◆動作

AllowUserToAddRows　　False　‥にするとユーザーが行を追加できなくなる

AllowUserToDeleteRows　　False　‥にするとユーザーが行を削除できなくなる

ReadOnly　　True　‥にするとユーザーがセルを編集できなくなる

◆配置

AutoSizeColumnsMode　　Fill　‥にすると列が枠にピタっと収まる

◆表示

RowHeaderVisible　False　‥にすると行ヘッダーを非表示にする
ColumnHeadersDefaultCellStyle＞AlignmentをMiddleCenter　‥にすると行ヘッダーを中央揃えにできる

DataGridViewでよく利用する関数

//全ての行の内容をクリア
dataGridView1.Rows.Clear();
//全ての列の内容をクリア
dataGridView1.Columns.Clear();
//行数をカウント
dataGridView1.Rows.Count;
//指定セルの背景色を変更
dataGridView1.Rows[0].Cells[0].Style.BackColor = Color.FromArgb(0, 0, 0);
//選択している行を削除
dataGridView1.Rows.Remove(dataGridView1.CurrentRow)

C# List<T>の中身をDataGridViewに追加する方法

C#でListの中身をDataGridViewに追加する方法。 すぐに忘れてしまうのでメモ。。

▼外観はこんな感じで用意しておいて‥ ▼ボタンを押すとこうなる感じです。

複数のListの中で最も多い要素数を割り出して、その分の行を最初に追加しています。
単にMath.Maxだと2つの値しか比較できないので、LINQで検索したら出てきたこちらの記事を参考にさせて頂きました。 qiita.com

コードはこんな感じ。

// Listの中身を適当に定義
List<string> list1 = new List<string> { "a", "b" ,"c" };
List<string> list2 = new List<string> { "1", "2", "3" };
List<string> list3 = new List<string> { "A", "B", "C", "D", "E" };
List<string> list4 = new List<string> { "4", "5", "6" };

//下準備
private void Form1_Load(object sender, EventArgs e)
{
    foreach (string s in list1)
    {
        textBox1.AppendText(s + "\r\n");
    }
    foreach (string s in list2)
    {
        textBox2.AppendText(s + "\r\n");
    }
    foreach (string s in list3)
    {
        textBox3.AppendText(s + "\r\n");
    }
    foreach (string s in list4)
    {
        textBox4.AppendText(s + "\r\n");
    }

    //行ヘッダを非表示にする ※Formデザイナーのプロパティ内でも設定可能
    dataGridView1.RowHeadersVisible = false;
}

// ボタン押下でDataGridViewに表示
private void button1_Click(object sender, EventArgs e)
{
    //Listの最大格納数を割り出す
    int iMax = new List<int> { list1.Count, list2.Count, list3.Count, list4.Count }.Max();

    //Listの最大格納数だけ行を追加
    for (int i = 0; i < iMax; i++)
    {
        dataGridView1.Rows.Add();
    }

    //行にデータを入力
    for (int i = 0; i < list1.Count; i++)
    {
        dataGridView1.Rows[i].Cells[0].Value = list1[i];
    }
    for (int i = 0; i < list2.Count; i++)
    {
        dataGridView1.Rows[i].Cells[1].Value = list2[i];
    }
    for (int i = 0; i < list3.Count; i++)
    {
        dataGridView1.Rows[i].Cells[2].Value = list3[i];
    }
    for (int i = 0; i < list4.Count; i++)
    {
        dataGridView1.Rows[i].Cells[3].Value = list4[i];
    }
}

C# UE4のアセットの命名規則チェックツールを作ってみた

QiitaのUE4アドベントカレンダー初参加です。

UE4の大量のアセットに対して「命名規則が守られているかをチェックしたい！」と思い、せっかく覚えたC#でチェックツールを作ってみました。

完成したツールはこんな感じ。

左のテキストボックスにUE4のアセットのリファレンス情報を貼り付けて、アセットの種類に応じたボタンを押せば、命名規則が守られていないものだけが右のテキストボックスにリストアップされます。

命名規則をどうチェックするかというと、あらかじめ正しい規則をチェック用のテキストファイルに正規表現で指定しておきます。

その正規表現にマッチしないものがリストアップされるという訳です。

2017.12.17　ver2.0にアップデートしました！
　・レベルとスケルタルメッシュを追加対応
　・ボタンの並び順を変更
　・アセットの種類をリファレンス情報を元に判定
　　ボタンに対応するアセットが無い場合にメッセージを表示
　・結果の数を正しい値が出るよう修正
　・変数名や関数名が分かりにくかったので全体的に修正

2017.12.28　ver3.0にアップデートしました！
　・チェックボタン一発で表に全タイプのアセットを一括でリストアップ
　・Exelに貼り付け時にセル内で折り返さないようクリップボードへコピーボタンを追加

ライセンスについてのメモ

最近、ツールのソースコードを公開したりする機会もあり「ライセンス（使用許諾条件）」について軽く調べたのでまとめておきたいと思います。

アーティストだって素材を配布したりもするので関係ありますよね。

さて、参考にさせて頂いた記事はこちらの2つ。

C# WindowsFormのコントロールの概要

Windowsフォームアプリで利用できるコントロールについて、簡単にまとめました。