研究

女の子を描いてみた。

こんにちは、しゃちです。

一年生でこのような記事をかくことに慣れていないので温かい目で見てくれれば幸いです。

今回は春学期に私が個人で練習したデジタルイラストに関する記事を書こうと思います。

描くものは今話題のバーチャルユーチューバーで私が推しているヤマトイオリを描こうと思います。

設定、下描き、線画をする。

まず、イラストの新規ファイルを作成します。このときに作成するイラストのファイル名、解像度などを設定します。今回は750dpiとして描いて行こうと思います。

ファイルを開いたらキャンパスが出てきますので、まず薄い鉛筆で下描きしたあと、Gペンで線画しました。このとき、線画、下描き、各部位の塗り、背景など種類によってレイヤーをわけておきます。今回はした図のように、肌、目、髪、服、背景などレイヤーを作ります。こうすることであとの塗りの作業で特定のパーツだけ塗れるようになります。

スクリーンショット (108)

 

下塗りをする。

レイヤーをわけて各パーツに色を塗ります。

 

スクリーンショット (110)

目、肌の影を塗る。

基本、影を塗る場合は下塗りした色より少しくらい色をおいていきます。肌の影を塗ります。肌の下塗りしたレイヤーの上に新規レイヤーを作成し、クリッピングという作業をします。こうすることでクリッピングしたレイヤーに置かれている色の領域でしかそのレイヤーにおいて色がおけなくなります。はっきりした影はGペンで、ぼんやりとした形はエアブラシでおいていきます。

スクリーンショット (111)

目においては何枚もレイヤーを重ねて塗っていきます。

スクリーンショット (113)

スクリーンショット (114)

スクリーンショット (117)

髪の毛を塗る。

髪の毛においても同様に何枚もレイヤーをかさなて影を置いていきます。私が塗った順番としては、

大まかな影→髪の毛のグラデーション→髪の毛の一本一本の流れ→光の反射

です。

ここで影を塗るレイヤーの設定を「乗算」とすることで下のレイヤーに塗られている色より濃い色を塗れるようになります。

スクリーンショット (120)

スクリーンショット (122)

スクリーンショット (123)

服を塗る。

服も同様に塗ります。ここで花柄はCLIP STUDIO PAINT で配布されているユーザーが作ったものを使用しています。

服を塗るにあたって、服の素材を引きだたせたいとおもいます。一度Gペンではっきり塗った後、「ぼかし」ツールで上の部分をやんわりとさせます。

スクリーンショット (128)

スクリーンショット (129)

背景、仕上げ

最後に背景や全体的な質感を醸し出すための調整をして完成です。

スクリーンショット (127)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

三田祭に向けたゲーム制作

こんにちは。Nokinokiです。

私は大学に入るまでは全くPCをいじってきませんでした。そのためunityでゲーム制作などもってのほかです。

”大学入って、KCS入って、unityやりまくる!!”

と4月は意気込んでいたものの、色々あって10月までに作ったゲームゼロ、unityに関する知識も身に付かず、やっちまった感が溢れんばかりでした。

そんな中、三田祭に向けて、Oculus Riftを使ったVRゲームを作る話があったので、これはチャンスと思い人生初のゲーム作りをすることになりました。

作ったゲーム

「横一列に並んだお客の前に寿司を置いていく」というものです。

何を血迷ってか寿司を仮想空間で配りたくなりました。なぜこんなゲームになったかというと、プレーヤーの移動に直感的操作を使いたかったからです。Wii fitのボードは皆さん使われたことがあると思います。これをVRで使ったらなかなか面白いのではないかと考えたのです。実現できそうな操作が体重をかけた方向に対しての直線的な移動だったため、左右に直線的に移動するだけのゲームを考えました。

スクリーンショット 2018-12-05 18.32.49

 

 

ゲーム内容

パシリ感が味わえる、横移動して寿司を呼ばれた所に置くゲーム」

この説明で十分な気もするぐらい単調なゲームですが、説明させていただきます。

「寿司!」の文字が五人の中からランダムで一人の頭の上に出るようになっています。その人の前まで体重移動で移動し、手を突き出しボタンを押すと手に握った寿司を客の前に置くことができ、スコアが加算されます。時間内にどれだけ置けるかという感じになっています。

 

スクリーンショット 2018-12-05 18.31.03

↑プレイヤー視点(※VRでプレイした時のものではありません。)

 

作ってみて

制作を三田祭一週間前までサボってしまっていたため、かなりお粗末なものとなってしまいました。自分でWii fitを使いたいと言ったにも関わらず、ボードで拾ったデータをどうやったら使えるのかわからず、先輩にその部分は丸投げしてしまい、初めて一からゲームを作ったためコードの書き方や整理?の仕方もわからず、デバッグ時には多大な負担を先輩におかけしてしまいました…。せめてハイスコアが記録されるくらいのことはしたかったのですが、締め切り1日前の時点で一度もVRで動かせていないという状況の中、私にそれをする気力も技術も皆無でした。三田祭では、皆さんVRが珍しいためか多くの方にプレイしていただけました。ゲーム内容は至極単純ではありますが楽しくプレイしていただけた方が多かった?と思われ、嬉しかったです。(自分は最終日しかシフト入らなかったので全体通してどうだったかは知らん。)今後このゲームがもう少しゲームらしくなるよう、またコードの書き方など改善していきたいと思います。

最後になりますが手伝ってくださった先輩方、モデルを作ってくれた我が友人、プレイしてくださった方、ありがとうございました。

 

 

 

 

Vocaloid5でポルタメントのタイミング調整をする裏技

こんにちは、音楽班のGMAです。

本当はKCS OBなんですが、折角の機会なので、KCSアドベントカレンダーに参加することにしました。

さて、今年の7月にVocaloid5が発表され、これまでよりもずっと歌声を手軽にかつ思い通りに調整できるようになりました。ただ、その一方でUIや仕様が大きく変わったのでVocaloid4以前から乗り換えた方は戸惑うことも多かったのではないでしょうか?

作曲をしているときに特に困ったのはポルタメントのタイミング調整。Vocaloid4以前であれば、ノートを右クリックしてプロパティを表示し、そこからタイミング調整を行うことができたのですが、それがVocaloid5には見当たらない…。5から新しく追加されたアタックエフェクトやリリースエフェクトを使うという方法もありますが、結構エフェクトのかかり方にクセがあるので、単純にタイミング調整だけしたい場合には不向きなんですよね…。

ですが、実はタイミング調整を比較的直感的に行う裏技がありまして。それは、

これを

vocaloid5

こうするだけです。

vocaloid5-2

お判りいただけましょうか?

どうやら、ポルタメントのタイミング計算にノートの長さを利用しているようで、ノートを次のノートに被せるように伸ばすことで、ポルタメントのタイミングを遅らせることができます。スクリーンショットのピッチラインを見ると、後者のほうがわずかにポルタメントのタイミングが遅れていることがわかると思います。

ちなみにこの方法では基本的にポルタメントのタイミングを早めることはできないので、その場合は従来どおり、母音分割して音を繋いであげるとか、コントロールパラメータのPortamento Timingをいじるとかしましょう。

あくまで裏技的なやり方だと思われますので、今後のアップデートで使えなくなる可能性はありますが、割と手軽にタイミング調整するのにはうってつけだと思います。ぜひ制作のお役に立てればと思います。

それでは!

←4日目 6日目→

Unity ML-Agentsの導入と自作ゲーム適応時の体験談

こんにちは、何時も元気に這いよる混沌に飲み込まれたk0buです。

いつもはコミケと技術書典でProcedural Generation系を書かせていただいていますが、地味にサイトの方で記事を投稿するのは初めてですね。

さてKCSアドベントカレンダーの4日目を飾らせていただく私の記事の内容は、Unityが提供してくださっているML-Agentsの導入、また自分のゲームに適用する際の考慮点について話させていただきます。

 

Unity ML-Agentsの準備

 

今回説明するUnity ML-Agentsのバージョンはv0.5.0となっております。また自分はWindows 10を使用しておりますので他OSでも同様の操作で使用できる保証はできません。また、Unity2017.4以降を使用しろと公式が書いているためそれ以前のUnityでは動く保証はないです。

また新たにバージョンが更新された場合は公式のドキュメントがあるGithubの方を確認していただいた方が安全です。

 

Unity ML-Agents関係のインストール

 

まず、Unity ML-AgentsではPythonを使用するため、そのインストールが必要です。今の所Python3.6であれば大丈夫そうです。個人的には脳死でAnacondaを通してインストールをしても良いと思います。とりあえずPythonで機械学習を学ぶ際に必要なモノは入っているため、分からない時はAnaconda一択ですね。

自分はPythonをそこまで使わないのでAnacondaしか使用したことなく、仮想環境もそちらの方で用意しました。使い分けをすることは無いと思った場合は仮想環境はなくても良いと思います。

今回は途中でpipを使うためAnacondaはもしかしたらあまりよろしくないかもしれません。元々Anacondaを使っている人は仮想環境を今回のために分け、pipをcondaでインストールし、rootのpipを使わず仮想環境上のpipを用いましょう(これが対策になるかわかっていない)。

Anacondaでの仮想環境の作り方を簡単に説明させていただくと、

conda create -n 仮想環境の名前 python=3.6

という風にCommand PromptかPowerShellで打っていただくと作ることができ、”activate 仮想環境の名前“と”deactivate 仮想環境の名前“で仮想環境に入っている状態と入っていない状態の間を遷移できます。

それではML-Agentsをインストールしていきますが、まずインストールするファイル/ディレクトリを作成(mkdir)し、CommandPromptかPowershell上でそのディレクトリ上に移動(cd)しておいてください。そこで

git clone https://github.com/Unity-Technologies/ml-agents.git

 

と打っていただき、GitHubにあるML-Agentsのディレクトリをダウンロードしてきます。gitに生き恥を曝され恨んでいる人はUnityのGitHubページからzipファイルをダウンロードし、解凍してください。

AdventCalenderUnityML12/04MLdirectory

ダウンロード(clone)終了後、ml-agents\ml-agentsのディレクトリに移動し、そこで

pip install .

をしてください。これで今回用いるUnityが作ったPythonのパッケージであるmlagentsと、他に必要なパッケージがインストールされます。初めてPythonを入れた方の場合はコンソル上に文字がびっしり出てきて、ある程度の時間はかかると思いますので珈琲でもお茶でも飲みながら優雅に待ちましょう。ちなみに私はアールグレイが好きです。

用意されている環境をテストしてみる

まずUnityでGitHubよりインストールしたディレクトリよりml-agents\UnitySDKというファイルを開きます。次にAssets\ML-Agents\Examples\3DBall\Scenes下にある3DBallシーンをUnity上で開きます。

AdventCalenderUnityML12/03scene

ここでUnity上のEdit\Project Settings\Player内のOther Settings以下にあるScripting Runtime Version.Net 4.x Equivalentにします。またScripting Defined SymbolsENABLE_TENSORFLOWになっている事を確認します。そして、Resolution and Presentation以下にあるRun In Background欄がチェックに、Display Resolution Dialog欄がDisableになるようにしてください。またProduct Nameの方も3DBallにしておきます。

AdventCalenderUnityML12/04playerSettingsAdventCalenderUnityML12/03playerSettingNameBG

AdventCalenderUnityML12/03playerSettingEnableTensorflow

また、TensorFlowSharpをUnityに対応させたプラグインのインポートもする必要があるためこのリンクをクリックし、パッケージをUnity上でインポートしてください。

元々学習したモデルが用意されていますので、今回はそちらを利用しUnity ML-Agentsの体験をしてみようと思います。Hierarchy上のBall3DAcademyの子オブジェクトであるBall3DBrain内のインスタンスにBrain Typeを弄るパラメータがありますので、そちらをInternalにします。

AdventCalenderUnityML12/04finidingBrainAdventCalenderUnityML12/03ball3DBrainType

そうすると、モデルを入れるGraph Modelというパラメータが出てきますので、そちらに\Example\3DBall\TFModelsに存在する拡張子がbytesである3DBall.bytesファイルを入れてください。

そしてプレイボタンを押していただくと、ボールを落とさないように各板が動いているのが観察できます。凄いです(小並感)。

AdventCalenderUnityML12/03gameSceneTest

今度は自分で3DBall用のモデルを学習させてみます。まず先ほどのBrain TypeをExternalに直します。

次にビルドをします、ファイルはml-agents\envs下に保存します。

これから学習をさせていくためCommandPromptまたはPowerShellを用います。インストールしたプロジェクトの一番親であるml-agentsディレクトリに移動します。そこで

mlagents-learn config/trainer_config.yaml –env=envs/3DBall.exe –run-id=firstRun –train

と打っていただくと、以下のような画面になりUnityのゲームが起動し学習中の画面を表示してくれます。

AdventCalenderUnityML12/03trainingScene

AdventCalenderUnityML12/03training

学習したモデルはml-agents\models\firstRun-0\3DBall_firstRun-0.bytesとなりますのでこれをUnity上に分かる所に保存しましょう。

後はBrain TypeをInternalに戻し、Graph Modelに学習したモデルを入れゲームを再生すると、先ほど学習させた結果を見る事ができます。

もし学習時のconfigを弄りたい時は、ml-agents/config/trainer_config.yamlでハイパーパラメータ等の値を調整できるのでそちらを見てみてください。また、mlagents-learnを実行する時の引数によっても調整できるモノもあるのでこちらを参照してください。

ML-Agentsの概要

 

まず強化学習を簡単に説明すると、トライアンドエラーによる学習です。学習者であるAgentが存在し、Agentが何らかのアクションを決めて行いそれが環境に影響を与えます、その影響された環境という結果から状態および報酬を受け取り、またアクションを判断し起こすというサイクルでモデルは学習します。ML-Agentsでは端的にその出力するアクションの定義、どのような環境の時に正や負の報酬を出すのかを設定するだけでゲームのAIを作れるという風になっております。

まとめるとML-Agentsを使用する際に把握しておくべき重要な要素として

  • Observations(環境を見るための変数)
  • Actions(環境から決定されたアクション)
  • Rewards(環境から決定された報酬)

の3つとなっています。

ML-Agentsでの強化学習、模範学習のモデルとしてはOpen AI Gymを中では用いているようですが、これにまたラッパー(wrapper)としてUnityが作成したPython API(mlagents)が存在し、そちらを弄る方が簡単に学習を行うことができるようになりました。Open AI Gymを用いたり自身でTensorflow/Kerasでモデルを書いたりし、それを学習させることもできますが、機械学習を何も知らずにできるという利点においてはML-Agentsはそれを成し遂げていると感じました(現に私は強化学習に全く明るくありませんでした)。

またUnity上でTensorflowで学習したモデルを読みこめるようにするため、上でインポートしたTensorFlowSharpをUnityに対応させたパッケージがありました。TensorFlowSharp自身はTensorflowの学習モデルを.Net APIにおいて使用できるようにしたという感じです。

新しいゲームに適応させてみた際の触感

 

のちのち投稿するかもしれない動画のネタとして活用したい為、コード類は省かせていただきますが、それだと寂しいので考慮しないといけない点を書いていきます。

今回適応させたゲームでは画像を入力(環境を表す変数)として試してみましたが、この時の得られた知見を書きます。

  • 1つ目は環境を表すパラメータの数をなるべく少なくする事です。これは機械学習の点で考えた際、単純に入力数が多くなると計算量が多くなるためそれだけ1つ1つの学習に時間がかかるためオススメはできません。また、短期間の間隔でアクションを決定しないといけないとき程、遅延が発生しないように計算量を減らす事が重要です。
  • 2つ目はバグを取り除く作業が通常以上に難しくなる可能性です。大体のエラーはML-Agents内のスクリプト内で現れるのでゲームのコードをML-Agents様に実装している間にどのようなミスが起きたかが分かりにくくなっています。偶に自分が最終的に頼りにしているprintでのデバッギングも予想以上に動かず、バグを取り除くのに1日以上かかる時もありました(分からなくて単にサボタージュしていたとも言える)。
  • 3つ目はドキュメントやGitHubのIssueが潤っていないため、上で生じたバグやエラーは自分で解決しないといけません。そのため通常検索して終わる程度の見落としでも長い時間苦しまないといけないこともあります。しかし、皆さんが使用し始めIssueが潤えば、この問題は解消されますので是非使用してみてください!

 

完走した感想

 

Unity ML-Agentsをワークフローに取り入れれば確かにゲームAIの作成時間が早まる可能性はあります。しかし、学習時の細かい調整(ハイパーパラメータや環境を表すパラメータの取り方)をしなければならないため結果的に現状どちらとも言えないですね。模倣学習の方もあるのでそちらの方も試してみて、出来ればまた記事か動画を投稿したいと思います。

明日はKCSの音楽系の神の一柱であるGMAさんの記事です、どのような記事を書かれるか期待が高まりますね!

私は音楽といえばAtlusの世界樹の迷宮、メガテン、ペルソナが大好きですね。世界樹の迷宮に至っては目を閉じればそのゲームの一つ一つの階層が見え、またボウケンシャー達の活躍や失敗、苦難が見えてきて、現実を忘れるには持ってこいの曲が一杯です!

皆さんはどのような音楽が好きでしょうか、それではまた次の 12月30日(日曜日)にあるc95の東ト59b にてお会いしましょう。

ではでは~

 

←3日目 5日目→

 

2018年、Vの年

サークルメンバーで作ったVTuber配信ツール”KCSTuber”のHPをchoko君と作成しました.
https://kcs1959.github.io/kcstuber

記事を投稿しました.
https://kcs1959.jp/archives/4064/research/rust_image-crate_example

動画を投稿しました(VTuber活動).
https://youtu.be/oqtV6uOIpeU
https://youtu.be/dff4qQsI-XU

少し前に投稿したサークル製作のゲーム紹介
https://youtu.be/jHxQcV7AeV8
https://youtu.be/XK3xnx-_oQw


あらゆるすべてがアツ過ぎた2018年12月01日は過ぎ去りました.
あの滾るような1分1秒は過去のものとなり,人々の記憶からもいずれはなくなることでしょう.
我々は書物に残された記録から過去を復元しようとしますが,決して実感として体験することはできません.
一人の人間が経験し覚えていられることなど,所詮長い時間の中の一瞬に過ぎず,そういった意味では未来も過去も等しく未知といえます.

世界中の死んでいないみなさん,こんにちは.
Lait-au-Cafeです.
みなさんいかがお過ごしでしょうか.

今年はバーチャルユーチューバー(以下VTuber)が話題となった年かと思います.
世間一般の健常なみなさんがどう受け止めているかは想像もつきませんが,私にとってはかなりインパクトが大きいコンテンツでした.

理想的な作業環境
理想的な作業環境の図

アニメーションや漫画のキャラクターにも魂はありますが,アニメーションや漫画のキャラクターの魂は物語の文脈の中で描き出されるのに対し,VTuberというコンテンツではキャラクターが自発的に動き回るという特性のためか,VTuberには魂の存在を強く感じます.
アニメーションや漫画は作者→視聴者・読者という方向性が強く,基本的には作者の用意した文脈の中にキャラクターの魂を見出していく形になりますが,VTuberはそのインタラクティブ性質上,受け手側から堀り下げられる余地があり,魂の奥行きを実感することが出来るように思います.

そうした奥行きゆえか,一見して似たようなカテゴリに属するライバーたちでも,ライブを見ていると思わぬところで決定的な違いを感じ,驚かされることがしばしばあります.
そういった個別性・多様性がVTuberというコンテンツの魅力の一つだと考えます.

特に意味はないです.

←ふつかめ よっかめ→

Rustで画像入出力

みなさん,Rust使ってますか?
新元号がRustに決まったことは記憶に新しいですね.
まだ使っていないよ!という方もこれを機に始めてみてはいかがでしょうか.

さて今回はRustで画像処理を行うために画像入出力用のcrateであるimageを使ってみたいと思います.
https://docs.rs/image/0.20.1/image/

GolangではC++実装のOpenCVを直接呼出しました( GolangでもOpenCVしたい!!! ).
RustでもOpenCVのラッパであるcv-rsを使ってもよいのですが,どのみち処理はすべて自分で書くので入出力だけできればよく,今回はimageを選びました.(imshowが出来ないのはちょっと不便かも).

今回はサンプルとしてグレースケール化を実装します.
もちろん画像読み込み時に直接グレースケールとして解釈すればよいのですが,一連の処理フローを確認するという意味でいくつかの方法でべた書きで実装します.

コードは以下.

使い勝手はそれなりにいいですが,いくつかうーんと思う仕様もあります.
たとえばget_pixelは範囲外にアクセスした際にpanicしてしまいますが,RustなのだからOptionで返すなどしてほしいです.
またget_pixel時のオプションとして範囲外アクセス時の挙動(clamp, wrapなど,CUDAでいうところのアドレッシングモード)の指定ができるとよいですね.
他にもimage::Rgbで各要素に.r()/.g()/.b()でアクセスできるようにしたり,まだまだ開発途上感はありますが,PNGやJPEGを自前でエンコード/デコードしなくてよいのはそれだけで非常にありがたい事です.

FnMutを画像として読み込むことが出来るのも極めて興味深い点です.
テスト用の合成画像を作りたい場合や簡単なフィルタを適用したいときに便利かと思います.

最後に,image crateに限らず,もしライブラリのビルドに失敗する場合はrustup updateを適用してみてください.rustcのバージョン違いでビルドできていない可能性があります(一敗).

それではみなさん,Rustで楽しい画像処理ライフを.

Blenderで脚を作ります

どうも。チョコです。

気づいたら12月になって、Advent Calenderに調子乗って2日投稿にしたのに何も書くネタが思い付かなくて焦っている(1日現在)。

これだと総代表様から怒られが発生するので、僕が一番素早く記事にできるものは何だろうと自分に問い詰めた結果、”Blenderでの KCSちゃん 幼女 名取 脚 の作り方”にたどり着きました。ちゃんと真面目で健全な内容なのでご安心ください。それでも総代表様から怒られが発生しうるが。

(Advent Calender2日目にこのようなしょうもない記事を出して誠に申し訳ございません。)

(私はプロモデラーではないので、これが脚のモデルのやり方だ!というのはあまり大きな声で言えないが、まあ参考までに。)

(タイトルを「Blenderでの脚の作り方」にしたかったんですけど、ちょっと調子に乗ってそうなので変えました。)


さて、脚はモデルの半分なので、綺麗に作るに越したことはありません。SDキャラだったら脚はcylinder作って若干下の部分を縮めば出来上がりですが、愛着が湧かないのでここではフルサイズキャラについて語ります。

Screenshot (461)
図1:SDのKCSちゃん

*愛着が湧かないというのは脚へのことであって、別にKCSちゃんへ愛着が湧かないなわけではありません。KCSちゃんには常に日頃愛着が湧いています。

ただし、綺麗な脚を作ろうと思うと、ボーンを物凄く入れて筋肉表現を表すことももちろんできますが、やりません。変態(褒め言葉)じゃないので。あくまでゲームで使うモデルで最小限のボーン数で再現できる範囲で作ります。そのほうが参考になるかと。多分。

Siri

脚が始まるところです。アニメーションをつけるキャラクタには、動かすことを意識して作らなければなりません。特に、脚が曲がったときにSiriの部分に体積が足りないとこうなります。

Screenshot (465) Screenshot (466)

図3:Siriが消える

したがって、この状態でも大丈夫よう、Siriの下部分に頂点が近づけますね。これが横から見ると特徴的な形状になりますね。ウェイトをつけるときは上のほうの頂点に影響少なめにすると、いい感じに曲がります。

Screenshot (462) Screenshot (463) Screenshot (464)

図3:頂点を足した

ただし、脚は裏には曲がりませんので、頂点が変になっても気にする必要がありません。脚が後ろに曲げたいときは腰のボーンを曲げましょう。

太もも

一番大事なところですね(個人的な意見)。太ももを前から見たときに、内側は3次曲線で外側は2次曲線、という認識を持っていますね。形状をもっと強調したいときは内側の下部分にU型のトポロジーを入れます。

a

図4:太もも

また、気づくかもしれませんが、内側の膨らみは筋肉なので、内側の方が食い込みます。つまり、ニーハイやベルトを装着するとこうなります。

asdfffdsa

図5:ニーハイの履き方

(ニーハイに食い込みは作らないですって?物理法則違反です。作りましょう。)

膝もまた変形するところですね。察すると思いますが、内側より外側の方に頂点を多く入れますね。膝の形も強調したいので、前から見るとU形になっている感じで作ります。そうすると小牛も自然に後ろに生えます。

膝の裏は、曲がるときに食い込みが発生する問題を解決するために、曲がるところに変形する頂点を置きません。また、靱帯は上から下に生えて逆Vを作っていますので、ボーンのウェイト平衡点を上部分にずらします。すると比較的に綺麗な曲がり方ができますね。あと、足も同じく前に曲がることはないので、膝のウェイトは太ももボーンが支配的ですね。

Screenshot (467) Screenshot (468) wfer

図6:膝

(うん?何か飛ばした?幻覚です。)

足は下から見ると特徴的な形状を持ちますね。正直いうと大体靴か靴下を履かせていますので生足経験が少ない(パワーワード)が、基本的にはこの不均一感を出すのは大事ですね。特に、内側が上に上がる部分はちゃんとあげましょう。

また、足首から足指にかけては、”へ”の形がしていて、決して平らや球状ではありません。足小指に行くと位置は後ろにずれますので、上から見ると斜めの配置になっていますね。

そして、足の裏は一本の太い靱帯と両側の凸の間は若干食い込みます。これを意識して作ると特に制服の靴を履くと若干隙間ができていいです()。

egrs
図7:足

(こうして記事にまとめると,足へのこだわりが足りないことに気づきますね.足だけに.反省.)

結論

以上のポイントを全部合わせると、綺麗な脚を作ることができるんでしょうね。まあ、場合によって強調する量を調整したり、違ったトポロジーで作ったりしますので、決して鉄則ではありませんね。3Dモデリングですから。

このしょうもない記事をここまで読んでいただいてありがとうございます。最後に、参考までに僕が2年前に作ったえりりを見てください。脚にはそれなりに力を入れました。

*これはAdventCalender 2日目の記事です*

←1日目 3日目→

超絶簡単unityライフハック -スクリプト生成編-

こんにちは。mo-takusanです。

さて、いよいよ始まりましたKCSアドベントカレンダーです。
第一日目ということで今回はあまり難解なことは書かずに、知っていると便利な機能を紹介していこうと思います。

unityのC#テンプレートがやばい

皆さんも毎日のようにunityを使っていると思いますが、この見出しみたいなこと感じたことありませんか?

2018-11-30_12h33_16

この図のようにunityのテンプレートはC#のコーディング規則に沿っておらずきれにするためにはいちいち書き換えなければなりません。このコメントアウトもいりませんし、ちゃんと名前空間も設定したいところです。さらにMonoBehaviourに限らずScriptableObjectなどもテンプレートとして用意されていれば便利そうです。

したがって今回の記事では、

2018-11-23_23h20_17

2018-11-24_18h59_40

こんな感じで「Create」->「MonoBehaviour」でMonoBehaviourが作成され、いい感じのテンプレートで自動的に初期化してくれることを目標にします。ScriptableObjectも作成したいですが、冗長になるだけなので今回は割愛します。

今回の記事はこの記事を参考にしました。

オリジナルのテンプレートを作る

それではまずはオリジナルのテンプレートを作成することから始めましょう。
参考記事によるとwindowsでは

"unityのアプリケーション位置"\Unity\Editor\Data\Resources\ScriptTemplates\

に存在するテキストを編集することで簡単にテンプレートを作成できるようです。
今回は以下のように編集してみました。なおファイル名は81-MonoBehaviour-NewBehaviourScript.cs.txtとしました。これで「Create」->「MonoBehaviour」から「NewBehaviourScript.cs」を作成することができるようになります。

参考ページに載っているようにテンプレートにはパラメータがいくつか用意されており、スクリプト名などを勝手に置き替えてくれるようです。しかし、5行目のコメントアウトから分かるようにプロジェクト名や作成したディレクトリ名もパラメータとして用意してあれば文句はなかったのですが、さすがにそこまで融通は利かないようです。(ちなみにディレクトリ名を名前空間として設定するってC#でもやるんですかね?)

そこで、次節ではこれらのパラメータも認識するように工夫していきます。

自作パラメータを置き換えさせる

ところが、先ほどのように単に一筋縄ではいきません。ちゃんとエディタ拡張をする必要があるようです。
unityではアセットを作成した際に対応したEndNameEditAction抽象クラスのActionメソッドが呼ばれるそうです。つまり、前節のようにしてテンプレートを作成すると、unity側が命名規則に従って自動的にデフォルトのActionメソッドを呼び出してくれると考えることができます。パラメータを自作する場合はこのActionメソッド内にパラメータを置き換えるコードを書くことになります。

それでは早速プロジェクトを作成します。
まず、プロジェクト内に「Editor」フォルダを作成し、ここに先ほど作成したテンプレートを入れてしまいます。この時、先ほどのコメントアウトは消しておきます。以降で作成するパラメータは他のプロジェクトでは機能しないのでこのようにして隔離しておく必要があります。

それではEditorファイル内にスクリプトを生成します。

23~27行目のようにしてパラメータに対応する文字列を入れ替えていきます。それ以降にも何やらごちゃごちゃと書いていますが、エディタ拡張職人になるわけではないので「このような手順を踏んでアセットが作成されるんだ」くらいの認識で良いと思います。

ところが、これだけではうまく動きません。先ほど述べたようにActionメソッドは対応したアセットに対してのみ実行されるため、作成したC#スクリプトに結び付けてやる必要があるのです。そこで、メニューアイテムも自作し、EndNameEditActionを紐づけます。メニューアイテムを自作するにはstaticメソッドにMenuItem属性を付与する必要があります。ただし、このようにしてメニューアイテムを自作する場合、既存のC#スクリプトと競合させてしまうと色々と面倒だったため、別のメニューとして作成します。また、この際の紐づけには次のメソッドを利用します。

このように事細かく指定する必要があるのは、自作したメニューアイテムからではデフォルトのActionメソッドだけでなく、アイコンを指定するメソッドや、アセット名を自動的に付けてくれる処理も呼ばれないためです。
完成したスクリプトは以下のようになります。

これで見事今回の目標は達成となりました。

全てのプロジェクトで使いたい

しかし、このままでは今回作成したプロジェクト内でしか利用することができません。そこで、以降に作成するプロジェクト全てに自動的に反映されるように工夫しましょう。と言っても非常に簡単です。windowsでは

"unityのアプリケーション位置"\Unity\Editor\Data\Resources\PackageManager\ProjectTemplates\

にデフォルトのプロジェクトが用意されているので、ここに作成したファイルを入れてやるだけです。
今回はcom.unity.template.3d\Assetsに入れてみます。

それでは試にプロジェクトを作成してみましょう。

2018-11-26_20h49_05

プロジェクトに先ほど作成したファイルが存在していることが確認できると思います。

おわりに

日々利用するアプリケーションだからこそ開発環境を自分好みにカスタマイズすることが大切ですね。unityのエディタ拡張は専用のメソッドが多く、わかりにくいように感じられますが、「全てを理解する必要はない」と割り切ってしまえばそう難しくもないと思います。実際エディタ拡張ばかりではいつになってもゲームは完成しませんしね。

それでは明日以降も部員たちによる個性的な記事が投稿されることを期待して本記事を締めさせて頂きます。

矢上祭とSwitch

チョコです.

矢上祭,お疲れさまでした.

今年もぴょんぴょん(+)人気だったな,,,,思った以上に「面白い」,「ハマる」って感想いただけてすごくうれしかったです.

 

さて,ぴょんぴょんですが,去年のゲームジャムで3日で作ったにして結構人気があったシューティングゲーム.今年用に二人プレイできるようにしたのと,かわいいかわいいKCSちゃんモードを入れました.

3

図1:ぴょんぴょん+の宣伝図(宣伝してない)

このゲームを毎年プロジェクターを使って大画面でやるのが恒例なのですが,KCSは Oculusを買う金はあるのに 同じコントローラーを二つも持っていません.ではここで,「試しにNintendo SwitchさまのJoyconを使ってはどう」という発想に至ったわけです.

さっそくSwitchを借りて,やってみよう!と思ったわけですが,ここでとても重要な2ポイントがあります.

1.PCにはBluetoothで通信できる

2.UnityはJoyconをコントローラーとして認識できる

まさに神.2秒で移植できるじゃん.(1日かかりました)

(1ですが,Joyconの上にある小さいボタンを長押ししながらpairingをしないと認識できません.)

とりあえず,ボタンを軸登録することですね.なお,キーボードででも同じ操作ができるように,以下のような入力ラッパーを書きました.

public static bool jbt(int i, int j) {
    return Input.GetKey("joystick " + i.ToString() + " button " + j.ToString());
}
public static bool jump(int i) {
    return Input.GetKey("space") || jbt(i, 4);
}

リスト1:InputManager.csの一部

ボタンのIDはこんな感じですね.

httrhgtrh

図2:JoyconのボタンID

Bluetoothの登録順でjoystick 1, joystick 2, …で決まりますね.つまり,複数台Switch持ってれば(ry

 

最後に,Input.GetButtonDown(“Jump”)を全部InputManager.jumpに変えるだけですね.

 

あ,そう.あとは一人プレイ用に書いたガバスクリプトを二人プレイにしたときに発生したバグの塊を解消する作業ですね...

 

来年も出したいな,,,(卒業しなくていいの?)

完.

ジオメトリシェーダでファーシェーダを実装した話

こんにちは、mo-takusanです。
今回は題名の通りファーシェーダを実装しました。

https://kcs1959.jp/archives/1928/research/unity%E3%81%A7fur-shader

こちらの先輩の記事を見て私も実装してみようと思い、今回取り組んでみました。
またググってみると、unityでファーシェーダを実装している記事は多くあるのですが、ジオメトリシェーダを利用しているものが見当たらなかったため、今回はこれを利用したものにすることを目標としました。

完成図は図のようになります。左側が今回実装したファーシェーダになります。左右どちらの球も同じテクスチャを貼っているのですが、違いは一目瞭然ですね。

2018-09-16_11h12_28

なお、実装においてはこちらの記事を大いに参考にしました。
https://qiita.com/edo_m18/items/75db04f117355adcadbb

また、実装において利用したテクスチャは次のサイトから使わせて頂きました。
http://photoshopvip.net/25382

ファーシェーダとは

ファーシェーダとは、その名の通り毛並みのふわふわ感を表現するシェーダを指します。
ファーシェーダは主にシェル法やフィン法などの実装方法がありますが、今回はシェル法を用いていきます。

シェル法

シェル法においては毛並みを一本一本描画していくわけではなく、層状に毛の断面を描画していくことで、全体として毛並みのように表現する手法です。
具体的には、次のように行います。

  1. 各頂点に対してそれぞれの法線方向に一定距離だけ移動した頂点を生成し、元のメッシュより一回り大きいメッシュを生成する。
  2. メインテクスチャとは別に毛束の断面のようなテクスチャを用意し、そのテクスチャのRGB値が一定を超えたテクセルに対してのみメインテクスチャの色を乗せ、それ以外の部分は描画を行わないようにする。
  3. メインテクスチャを貼る閾値を少し大きくしていきながら、1.及び2.の操作をくり返す。

1.の操作をジオメトリシェーダで、2.の操作をフラグメントシェーダによって実装していきます。

先述のようにシェル法では毛を一本一本描画するわけではないため、層の数が十分でない時は毛束に見えません。以下の図に示すように層が目立ってしまうことが分かると思います。

2018-09-16_11h19_14

実装

それでは実装を示していきます。
先述のように、1.をジオメトリシェーダで、2.をフラグメントシェーダで実装します。

まずは1.です。

今回ジオメトリシェーダでは三角メッシュを受け取って三角メッシュを出力します。それぞれのメッシュは依存関係がないため、PointStreamの入出力でもよさそうですが、仕様上PointStreamで出力してしまうと、面を貼ってくれなくなってしまうため、このように記述するしかありません。
ちなみに、maxvertexcountが81になっていますが、これより大きい3の倍数でVaridation Errorになってしまうためです(maxvertexcountのリファレンスを読んだのですがこれに関する記述は見当たりませんでした)。この値はフラグメントシェーダに値を渡す構造体の大きさにも依存していたので、渡せるデータサイズの上限値があるのでしょう。

残りは先ほど提示したページの実装とほとんど同じものです。
異なる部分はライティングのためのものになりますが、今回の内容と直接の関係はないので割愛します。触りだけ説明すると、ライトの方向を計算し、ライト情報を適切にフラグメントシェーダに渡しています。
詳しくはこちらの記事をご覧ください。
https://qiita.com/edo_m18/items/21d3b37596da3fd4b32b#%E9%96%A2%E9%80%A3%E3%83%AA%E3%83%B3%E3%82%AF

2.についてもライティング以外は同様の処理です。違いといえばノーマルマップによるライティングを行っている程度です。

さて3.についてですが、先ほどmaxvertexcountの値が81だと述べましたが、これでは層の数が最大でも27層までとなってしまい、元々表現したかったフサフサ感が損なわれてしまいます。これでは本末転倒なので、今回の実装でも参考ページと同様に同じパスを何度も記述して層の量増しを行いました。
といっても一回のパスで27層描画できるので3つだけ同じパスを用意しました。

ジオメトリシェーダによる実装のメリット

ジオメトリシェーダを利用して実装を行うと、プラットフォームによっては動かない可能性があるため、望ましくないことも多々あります。しかしながら、ジオメトリシェーダによってファーシェーダを実装した場合、次のようなメリットが考えられます。

  • 全く同じパスを数十個書く必要がないためスマート
  • バッチ数を抑えられる
  • 層の数を可変にすることができる

特に、層を可変にできることでお好みのフサフサ具合を表現でき、非常に便利でしょう。バッチ数を抑えることで
パフォーマンスは改善されるのでしょうか?ジオメトリシェーダがどれほど重いか計測が面倒だったので言及しないことにします。

まとめ

ジオメトリシェーダを利用することで、比較的スマートにファーシェーダを実装することができました。シェーダはすぐにビジュアルに表れるので実装していてとても楽しいですね!