fishshellを触ってみた

                              執筆者:NamiFuji

(フリー素材です)

この記事はOUCC Advent Calendar 2021の25日目の記事です。前回は上月さんの「Live2Dを触ってみた」でした。さて本日はクリスマスです。皆さんは本日はどのようにお過ごしの予定でしょうか?私はこの前買ったパズルを完成させる予定です。人によってはクリぼっちで最悪だなんて言っている人がいますが、私の考えではクリスマスにひとりで過ごすということは全く恥じることではないと思います。なぜかというとクリスマスというのは本来イエス=キリストの誕生を祝うことが目的であるので、そもそもクリスマスに大勢で集まらなければならないと考えること自体が本来の目的とずれているからです。なので一人であるということ自体に対してなんら問題もなく、逆に誰かといなければと考えること自体が周りの考えに振り回されているということになり、それ自体が問題となるからです。

さて、余談は置いておいて、本記事のタイトルにも書いてある通りfishshellについて話していこうと思います。本記事は調べたらそのまま出てくるような内容をまとめたような形になってしまうかもしれないですが、そのような場合は温かい目で見守ってください。

shell

まず、shellとはざっくりいうと自身がPCに対して行ってもらいたい命令をOS対して出すプログラムのことです。そしてshellにはいくつか種類があり、たとえばbash,tcsh,zshなどがあります。それらには当然のように機能の面において違いがあります。今回話そうとしているfishとはそのようなshellのうちの一つです。

fishのどこがいいのか

さてこれからfishについて話していこうとおもいますが、なぜbashやzshではなくfishなのかと疑問に思う人がいるかもしれません。その理由を端的にいうと、fishは他のshellと比べてとても扱う(カスタマイズをする)のが容易であるからです。

fishのデフォルトの機能としてシンタックスハイライトの機能がついており、それによってコマンドやオプションが間違っているのか一目で確かめることができます。さらにコマンドを入力する際に過去のコマンド履歴からインタラクティブに補完を見ることもできます。

補完機能の例

入力時

間違った入力をした時

fishの簡単なカスタマイズの方法

実行環境:M1mac Monterey

1,iterm2かターミナルでfish_configとコマンドを入力する。

2,ブラウザが開かれるので、そこから設定を行う

以上のような簡単な操作だけでもまぁまぁ見た目を変えることができる。

fishのカスタマイズ方法

さきほどはfishの簡単なカスタマイズ方法を説明しましたが、この方法ではカスタマイズの自由度がとても狭いです。そのためつぎはさらに自由度の高いカスタマイズ方法について話そうと思います。

それは~/.config/fish/config.fishファイルに直接設定を書いていく方法です。

たったこれだけだと、文章として寂しいので私個人が実際にいじった部分をのせようと思います。

現時点の私の設定ファイルは見ての通り、あまり書かれていません。そのためこれからさらに使いやすいように設定ファイルをいじるのが私の目標です。

今までに述べた方法以外にも、プラグインを入れるというカスタマイズ方法もあります。みなさんもこれを機にfishをつかって、みなさんの使いやすいようにカスタマイズしてみてください。

Live2Dを触ってみた

この記事はOUCC Advent Calendar 2021の24日目の記事です。イブですね。イベント開催することで24日の予定を阻むFGOの運営の気持ちがよくわかる日になりました。いかがお過ごしでしょうか?前回は、かき氏の「Reactで時間割アプリを作ってみた」でした。

私が書いた記事は、前回はGANについて、前々回はOpenCVについて、前々々回はUnityについて書くといったように毎回分野を変えて記述しているので、今回はLive2Dについて記述していこうと思います。

~あらすじ~

自分の描いた絵が動くと嬉しいですよね。

というわけで、Live2Dやったことないけどやってみました。

~キャラについて~

今回動かすキャラは、「Angel-Rein」ちゃんです。
春のハッカソンで「嫌われているE-Learningを擬人化して対話することで好きになろう企画」の自然言語で会話する対話Botを作成することになりました。
その時に、新しいキャラを制作することが好きな私がデザインしたのがReinちゃんです。
マフラー付けて冬っぽい服装ですが、考案したのは春で、描いたのは夏ごろです。

名前の由来は、E-Learningのアナグラム

デザインやキャラの詳細については、ここを参照してください。(別ページへ飛びます。)

~出来たもの~

※読み込みに時間がかかるかも。お許しを

ここに画像が表示されるはず
ランダムAというデフォルトで用意されているアニメーションを再生したもの

▼表示されない方はこちらから(高画質版)

又はようつべリンクから

~感想~

むずい! 正直Blenderの方が簡単とさえ思えました。というか実際Blenderの方が簡単だと思います。
3Dを絵を変形させて表現するというのが難しい。
ここがこう回転すればこうなるといったようなことを頭の中で考えながら作成しなければならず、立体図形把握能力が求められる作業だと感じました。

見てください、この点の数!たった腕を動かすだけでこれだけのキーを打ち込まなければなりませんでした。(もっと賢い方法はあるのかもしれませんが)
袖が動いて前と後ろが切り替わる所とか、それによって袖がどう動くかとか、腕がより俯瞰した位置ならどう見えるかなどなど考えて動かすとこうなりました。
Blenderなら立体図形を作成してしまえば、動き方に応じて図形を編集する必要は無いですが、live2dは立体図形は手元にないけど図形を動かすとこう見えるだろうという予測を立てなければならないです。
もっとも可動範囲を狭くする、例えば腕の振れ幅を10度だけにする、顔もほんのちょっとしか動かないとかいったことをすれば簡単になると思いますが、回転や拡大縮小以外の複雑に変形しながら動く場合には、それだけで数時間飛ぶ作業量を要求されたりします。
あと、原画はキャラ設定画像としてなるべく正面で描いた絵なのですが、少し見栄えよく見せようと顔が傾いていたりします。これのせいで、対称編集が出来ないといった書く段階で知りたかった事柄も相まって難易度を底上げしてしまったようです。
物理演算を入れる作業については、あまり細かいところを気にしなかった(気にしている余裕がなかった)からか、結構楽々に設定することができました。

しかし、この図形を想像しなければいけない部分とかどうにかならないのでしょうか。真に絵を描ける人はこの辺の能力が高いのかもしれませんね。
昔Live2D Euclidとかあって、自分の絵を3D化できるという話を聞いて心躍ったのですが、あれはどうやら既に公開停止になっているようです。何が原因で頓挫したのかは分からないですが、上手くいけばメタバース時代の覇権を握れたかもしれないと思えるだけに残念です。
それにしても、世の中のVtuberはLive2dであそこまで動かせてすごいんだなぁ~って今回作成してみて感じました。

~総括~

Blenderではなく、Live2Dを使用する場面というのは恐らく以下の場面でしょう。

  1. あまり動かさない、又は動く部位が回転や拡大縮小といった単純な変形で構成されることが多い場合

  2. 絵を動かしたい、又は3Dの見た目は好きじゃない、3Dでは表現できないデザインを動かしたい場合

少しでもご参考になれば幸いです。

筆者:上月さん

OUCC Advent Calendar DAY21 Unityでゲーム作るRTA+おまけの謎解き

執筆者:Pres.U(近々ハンドルネーム変更予定)
この記事はOUCC Advent Calendar 2021の21日目の記事です(実質9日目)。前回(12/21)はtakuemonさんのMixamoのススメです。

今回はUnityで2Dゲームをゼロから作りかつ記事を書くという無謀なRTAを行います。多分これが一番早いとは思いません

目次(と思しき何か)

  1. 初めに
  2. 作るゲーム
  3. 今回のRTAのレギュレーション
  4. 準備
  5. ゲームの方針
  6. 実装方法
  7. できた
  8. 完走した感想(俄並感)
  9. 謎解き

初めに

ほかの皆さんの記事は実用性があり内容も素晴らしいのですが、わたくしの書く記事は実用性も糞もなく、TDNただの読んでくださる人および執筆者の時間潰しにすぎません。それでも楽しんで頂けると幸いです。

おせちだよ~
図1:上はほかの皆様の記事、下は僕の記事

作るゲーム

今回は、脱出ゲームを作ってみようと思います。

図2:ゲーム画面の予定

今回のRTAのレギュレーション

  • Any%RTA、すなわち出来の良さを考慮しない
  • 計測開始はブログの執筆を開始した午後4時とす
  • 計測開始時点でのUnityプロジェクトは初期状態とする
  • 計測終了はブログを投稿した時間

準備

まずはプロジェクトを作りましょう。Unity Hubから新規作成→2D→任意で名前変更→作成で作れます。
次に、画像を自作します。ペイントがおすすめです。

ゲームの方針

軽い謎を解いて鍵をゲットし部屋から脱出する感じです。

実装方法


タイトル・本編・クリア画面の3つのシーンをSceneManagerを使って遷移させてやる感じです。また、アイテムの表示・非表示はオブジェクトの座標を画面外に移すことで疑似的に実行しています。

できた

後でドライブにzipファイルを置いておきます。

図3:ゲーム画面

完走した感想(俄並感)

じつは実装しているうちに、GameObjectを非表示にするとアタッチしているスクリプトが無効になるといった仕様に悩まされ方針を変更せざるを得なくなりました。
また、最近Unityに触れる機会がなかったので、いい練習の機会になったと思いました。
最後に、ゲーム作るのは大変でした。

謎解き

本編です。

1213①②16③④
④⑤⑥22⑦②⑧

⑥④⑦⑤er④→?

ヒント1:僕は22です(年齢じゃないよ)

ヒント2:①~⑧に入るのは数字ではなくアルファベット

ヒント3:このイベントはずばり…?

答え:mystery

Mixamoのススメ

執筆者:takuemon

 これはOUCC Advent Calendar 2021の20日の記事です。(なぜ記事を21日に記事が投稿されているんだ…おかしいぞ?…)前日(一昨日)の記事はyuyuさんの政府統計e-Statで学期末レポートを粉砕する 、明日(今日)の記事はMrMocchyさんのローポリのすゝめです。

今回は、Unityでゲーム制作しているときに個人的にお世話になったサイトを紹介させていただきたいと思います。

URL:https://www.mixamo.com/#/

Mixamoはどんなサイトかといいますと、大量のキャラクターとモーションが無料で使い放題という慈善事業みたいなことしてるサイトです。ここではキャラクターをアップロードして、専用のモーションをダウンロードするまでを解説していきます。

1.アカウントを作る

青色のボタンをクリックしてアカウントをつくります。

右上のCharacterのタブをクリックすると大量のキャラクターをダウンロードできますが、今回は自分でキャラクターをアップロードします、UPLOAD CHARACTERをクリックしましょう。

するとこのウィンドウが表示されます。私はユニティちゃんのfbxファイルをアップロードしました。

テクスチャが貼られたモデルをアップロードしたい場合は、テクスチャとモデルを圧縮したzipファイルをアップロードしてください。

左下の頭蓋骨をおすと、ボーンが表示されます。NEXTをクリックします。

すると、こんな感じに警告文が表示されます(初見でちょっとビビった)が、全く問題ないので無視してNEXTをクリックしましょう。

これでユニティちゃんがアップロードされました! 左側のモーションをクリックすることで、ユニティちゃんにモーションを反映させることができます。例えば、

それではこれらのモーションをダウンロードしてみましょう。DOWNLOADをクリックします。

するとこのようなウィンドウが表示されますがそのままでDOWNLOADをクリックしてください。これでユニティちゃんのモーションがダウンロードされました。

いかがだったでしょうか? Unityで3Dゲームを作る時、キャラクターのモーションに悩まされることは多いと思います。そんなとき、Mixamoに頼ってみると、あなたの求めるキャラクターやモーションが手に入るかもしれません。気になった人は是非!

ローポリのすゝめ

執筆者:MrMocchy

はじめに

この文章はOUCCアドベントカレンダー2021の12/21のものです。
前回はtakuemonさんのMixamoのススメです。

これが自分のはじめてのブログ記事になります。
調べものの際によく出てくるブログをまねる感じで書くつもりです。
暖かい目でご覧ください。

ローポリ

自分はノートパソコンしか持っていないのですが、3Dゲームは重いのばっかりで興味をもったやつの多くは必要スペックを満たせずに断念していたりします。
しかし、ある程度のグラフィックでも快適に遊べるものもあります。まあゲーム性自体がシンプルだってのもありますが、その多くは(たぶん)ローポリです。

ローポリとは、ロー・ポリゴンの略で、少ないポリゴン(=面)でできた、ざっくり言えば精巧でない3Dモデルを形容する言葉です。
それを綺麗に見せるためにテクスチャやシェーダーに力を入れているようなのですが、本記事のメインはローポリです。

エンティティを大量に配置するゲームを作る際、クオリティより数を必要とする際、その他とにかく軽くしたい際、ローポリは非常に有効です。

カメ

さて、ローポリについて話すとなれば何かの3Dモデルを用意する必要がありますが、なぜでしょうか、カメを作ろうと思いました。甲羅にポリゴン感があるからでしょうか。
「カメ 3Dモデル」などと検索してみてください。精巧なカメの画像がたくさん見つかると思います。手足や頭の曲線、皺、甲羅の凸凹感。重そうですね。

そこで自分が作ったカメがこちらです。

シンプルですね。5分で作れそうです。15分ぐらいで作りました。
しかし、このモノクロでもカメ、それもリクガメでもウミガメでもない、ミドリガメのようなカメだと分かります。

画像の左上にあるのがこれの三角面数などの情報です。比較対象は後に出しますが、基本的にこれが少ない=データ量が小さい=描画が軽いということになります。

ちなみに、もっとローポリにすることも可能です。それがこちら。

もはやカメだとも言われなければ分からなさそう…ですかね?よく見ればカメだとは思いますが。
ですがテクスチャを設定するだけで、随分と分かりやすくなるものです。現に、2色のべた塗りでも、

ほら、カメです(断言)。

先ほども述べましたが、モデルの精巧さだけでなく、このテクスチャにこだわることでもより正確なカメを表現することができます。
ただ、自分個人の意見としては、このような極端なローポリのモデルは、同じく極端に単純なモデル、パステルカラーなイメージの少ない色数といった感じのデザインで統一し、かわいい方向にした方が好きですね。

ウサギ

カメときたらウサギです。

誰が見てもウサギ、かは分かりませんが、多くの人はウサギだと言ってくれるでしょう。

これもさらにローポリにしようとしたのですが、なかなかうまいこと行きませんでした。

とりあえず鼻先を小さくするとして、やはり胴体がネックですね()。これが限界な気がします。

なので、逆に精巧に作ってみることにしました。

なにかがおかしい。犬でもない。なにかこう、いそうでいないようなクリーチャーができました。

できました。口の周りを膨らませたらウサギっぽくなりました。あとは草を咥えさせたら完全にウサギです。
色と背景を付けるとこうなります。

完成。

ここで見てもらいたいのが、2つ上の画像の左上の数字。…潰れてますね。こちらです。

そして先ほどのカメの数字をご覧ください。

ローポリの偉大さが分かっていただけたのではないでしょうか。

おわりに

まとめ:ローポリは軽い。作るのは非常に楽。かわいい。

ご覧いただきありがとうございました。

次回のOUCCアドベントカレンダー2021は、Pres.UさんのOUCC Advent Calendar DAY21 Unityでゲーム作るRTA+おまけの謎解きです。

ちなみに

上の3DモデルはBlenderというフリーソフトで作りました。完全フリーです。どこかの機能を使おうとしたら有料アップグレードを要求されることなんてありません。広告もありません。開発側はどうやって稼いでいるのでしょうか。

ローポリモデル欲しい、けどモデリングしたくない人は
「○○ 3Dモデル フリー」とかで検索、ダウンロード⇒Blenderにインポート⇒モディファイアーを追加>デシメート⇒比率を調整
で簡単にポリゴンの削減ができるはずです。あまり削減しすぎると崩れてきますが。

そしてウサギの背景をもらってきたのはPoly Havenというサイトからです。そこのHDRIs(=360°画像)で入手することができます。このサイトではテクスチャや3Dモデルも無料で利用できます。IT業界の発展のための無償公開だそうです。非常にありがたいです。

Blender:https://www.blender.org/
Poly Haven:https://polyhaven.com

政府統計e-Statで学期末レポートを粉砕する

執筆者:yuyu

この記事はOUCC Advent Calendar 2021の19日目の記事です。前回はyuさんの「パワポを動画にしようとしてみた」でした。

吐く息も白くなってきて、いよいよ令和も3年目を終え、はや4年目を迎えることに驚きを隠せておりません。yuyuです。みなさんはいかがお過ごしでしょうか。私は下宿をしている身ですが、部屋に備え付けの暖房の効きが異常に悪く、毎日布団にくるまっているミノムッチ状態です。

さて、今日は「政府統計の総合窓口」e-Statについて解説したいと思います。e-Statとは例えば「人口・世帯」、「労働・賃金」といった17の分野の政府による統計結果が集まったサイトです。具体的には国勢調査の結果や賃金構造基本統計調査(様々な業種の基本給を調査)の結果などが公表されています。URLはこちら。https://www.e-stat.go.jp/

※この記事は主にデータ分析のために、あるいは基盤教養科目などのレポート課題で自身の主張を裏付けるために公的な統計結果が欲しい方向けです。例えば、法学部に所属している私なら、特に政治学の分野において適切な政策を考案するために日本の現状を知る手段の一つとしてe-Statを利用しています。

目次

  1. はじめに
  2. この記事で伝えたいこと
  3. 解決したい問題
  4. じゃあ、どうする?
  5. e-Statの良いところ・悪いところ
  6. e-Statの使い方
  7. 補足
  8. おわりに
  9. リンク

1. はじめに

あなたはこれまでの人生で公的な統計結果が欲しいと感じたことがありませんでしたか?高校で調べ学習を課されたり、大学の基盤教養科目でレポート課題を課されたり。往々にして「引用するデータは信頼のおける発信者のものにしなさい」と注文が来ます。信頼のおける発信者とは公的機関、特に政府機関です。とはいえピンポイントで見つけるのは難しいです。たいていの場合は省庁が出している報告書に引っ掛かる程度。

そこで登場するのが我らがe-Statであり、これはありとあらゆる公的な統計調査結果を集約したサイトで、そこからさまざまな調査結果を調べ、データのダウンロード、ブラウザ上で表作成、グラフ作成が可能です。

こんな便利なサイトがあるのに使いこなさないのはもったいない!!!ということで、今日は[冬季集中講義]e-Stat基礎論を開講します。安心してください、楽単ですよ。

2. この記事で伝えたいこと

  • e-Statは政府統計調査のポータルサイトとしての役割をもつ
  • データのダウンロードが可能、簡単に利用できる

3. 解決したい問題

公的統計調査結果の効率的な収集です。そもそも、どのような統計調査が行われているのかを具体的に認識していないと単にブラウザで調べるという手法では限界があります。

4. じゃあ、どうする?

ついにこの記事の真打、e-Statの登場です。先述の通り、e-Statとは政府統計調査のポータルサイトです。ここを経由して様々な統計データにアクセスができます。ここでいったんe-Statの長所短所を確認しておきましょう。

5. e-Statの良いところと悪いところ

◇良いところ

  • 政府統計調査ポータルサイトの役割を担い、あらゆる統計調査にアクセスできる
  • csv形式やxlsx形式でデータのダウンロードが可能
  • 全国で平均を取ったデータだけでなく、都道府県別、市区町村別のデータも完備
  • 「詳細」からその統計を管轄する機関のサイトに飛び、細かい情報を得られる

◇悪いところ

  • 若干、作成したグラフが見づらい

こんなところです。べた褒めをしても政府の回し者に思われてしまいそうなので短所を出しておきましたが、個人的には気にならないかなと思っています。それは、デザインの問題であるという性質上、xlsx形式でダウンロードしてExcelを開いて自分で表やグラフを作成すれば済むことだからです。

6. e-Statの使い方

今回は「家計調査」を題材として説明していきたいと思います。

(1)e-Statにアクセスする

任意のWebブラウザで「e-Stat」と検索していただくと”e-Stat政府統計の総合窓口”にアクセスできると思います。(直リンは https://www.e-stat.go.jp/)

トップページはこんな感じ

(2)知りたい情報のキーワードを考える

ここからお目当てのデータにたどり着くには「・統計データを探す」というところから「すべて」、「分野」、「組織」、キーワード検索の4通りの方法があります。基本的には探しやすい「分野」を用いるのが良いと思います。探し出せなければキーワード検索を使いましょう。

今回の例として用いる題材は家計調査でしたね。つまり、キーワードは「家計」、「経済」です。まず分野を確認してみて、なければキーワード検索です。

「分野」をクリック

「企業・家計・経済」という分野の主な調査に掲載されている「家計調査」をクリックしましょう。

「家計調査」をクリック

(3)統計調査の詳細な内容確認

クリックして次のページに進んだら当該統計調査の目的と内容が大まかに書かれているのがわかると思います。統計データを分析するには統計で用いられている用語の定義を確認することが非常に重要です。自分の考えていた意味とは全く異なる場合があります。統計調査名の右にある「詳細」をクリックしてください。

「詳細」をクリック

すると担当機関名や課室名、連絡先などの情報がありますがそれらは無視して「ホームページURL」とあるのをクリックしてください。担当機関の当該統計調査に関するページに飛びます。

URLをクリック

ここには調査の概要や結果が載っています。この統計では総務省統計局のホームページですが、別の統計で担当機関が異なる場合でも同様に調査の概要を説明するページに飛びます。さて、最も重要なのは用語の定義です。調査の結果 > 用語の解説と進みます。

調査の結果 > 用語の解説

可処分所得を例に確認します。

「実収入」から税金,社会保険料などの「非消費支出」を差し引いた額で,いわゆる手取り収入のことである。これにより購買力の強さを測ることができる。

用語の解説

実収入と非消費支出にカギ括弧がついていますが、これらの定義も同じページに説明があるので確認してみてください。

(4)データ取得

用語の定義を確認したらいよいよデータを取得します。(2)が終わった段階までページをさかのぼります。「データベース」と「ファイル」の2つが確認できるかと思います。

このうち、「データベース」を選択した場合はブラウザ上で表の作成、グラフの作成ができます。単に内蔵データを確認したいならこちらを選択してください。一覧が出てくるので家計収支編 > 総世帯 > 年次を選び(図1)、続けて用途分類(総数)の全国の右にあるDBをクリックしてください(図2)。作成された表を閲覧できます(図3)。表をそのままダウンロードも可能です。APIは私自身がよくわからないので使っていません。

図1
図2
図3

一方、「ファイル」を選択した場合は Excelデータのダウンロードができます。

(5)データ分析

データを取得したら分析をして類似する別のデータを調べたりします。その場合は(1)からの手順を繰り返します。データ分析の手法は本題ではないので省略します。

7. 補足

今回取り扱った統計調査は国が行ったものであって、その収集単位も国全体です。しかし都道府県別のデータなど、地方公共団体を単位とする統計調査データが欲しいときもあると思います。そんなときはe-Statのトップページから「・統計データを活用する」にある「地域」を選択してください。

8. おわりに

いかがでしたでしょうか。ここまでお付き合いくださりありがとうございます。次節のリンクに学習用サイトのリンクを貼っておくのでわからない部分があればそちらを参考にしてください。

レポート課題のときだけでなく常日頃からさまざまな統計データに触れておくことで現政府の政策にある意図に気づくことができます。コロナ禍の今は皆さんも政府の動向にとりわけ注意を払っているはず。せっかくの機会ですからいろいろ考察してみると面白いかもしれないですね!

OUCC Advent Calendar 2021 次回はtakuemonさんです!お楽しみに!

9. リンク

パワポを動画にしようとしてみた

はじめに

この記事は、OUCC Advent Calendar 2021の18日目の記事です。前回はAreiさんのハンドヘルドコンピュータの製作と展望でした。 今回はPower Pointのスライドショーを動画に変換しようとしてみました。

やり方

音声付きスライドを考えると動画を作るためには画像と音声が必要です。しかし、pptxファイルやppsxファイルから直接画像や音声を取り出すことのできるライブラリはありませんでした。

まずは音声ファイルの抽出から行うことにしました。pptxを含むoffceファイルは中身はただのzipファイルなのでos.Rename()を使ってファイル形式を変え、zipfileライブラリで開くことで中の情報に直接アクセスできます。音声ファイルがあるのは ppt/media のディレクトリで、どの音声がどのスライドに紐づけられているのかというのは ppt/slides/_rels にあるrelsファイルに書いてあります。relsファイルはxmlファイルなのでこれもos.Rename()でファイル形式を変えて扱います。そこから音声ファイルとスライドの関連情報が得られ、音声ファイルの準備は完了します。

次に画像ファイルの作成ですが、現状pptxから自力で画像を作ること大変難しいのでPower Pointアプリを起動し、画像をエクスポートさせます。これはcomtypesライブラリを用いることで実現しました。

最後にこれらをまとめるのですがこれにはffmpegというコマンドライン上から動画編集ができるソフトをいれ、python上でそのコマンド実行するというゴリ押しの方法で行いました。

作っている途中で気づいたこと

Power Pointのエクスポートに動画に出力する機能があり、自作するより圧倒的に多機能であること

それを知って

デバッグする気力がなくなったため、途中からデバッグしてません。理論は分かったけど、もう動作させる理由がありませんでした。たぶん動かないと思います。

ゲームや動画等の演出の話 (雑)

OUCC Advent Calender 2021 16日目の記事です。 執筆者: ちょくぽ
前回はShiokaiさんの GrabPassで取得したテクスチャが意外と後まで使える でした。

演出関連の気づきを、自分用にメモするくらいの気持ちで書いていきます。
これは特別演出の勉強などはしていない、一般趣味クリエイターによる記事です。読者としてポートフォリオを作るような方々ではなく、一般人を想定しています。

特殊演出や凝った編集のような話ではありません。普段コンテンツを見る側として気にも留めていなかった、しかし制作側は知っておかないと作れない、そんなことが中心です

色彩

基本的には目立たせたい所にコントラストを使い、色相・明度・彩度に差を出します。これは広く知られていることかと思います。しかし、実際に三要素全てで差を出すと強烈になりすぎます。メイン(キャラや障害物等、ゲームプレイに関係のあるもの)と比較して背景は明度で差を、敵や弾と主人公とは色相で差を出し(例.2Pカラー)、主人公等見て欲しいものにより高い明度・彩度を使う(≒光を当てる)ことで目立たせる等が常套手段。

逆に単一オブジェクトの中では三要素全てをある程度まとめるべきです。特に背景はぼかしてでも1~3色程度にまとめましょう(敵の弱点やギミック等は見て欲しいものなのでこの限りでない)。 単一オブジェクト内では、下画像のように使用色がパレット上で一直線に並ぶようにするとまとまりが良いです。色相を少しだけ変えると汚くなりにくい。アクセントの色はむしろ外れる方がキャッチーかも。

確かに使用色がばらけるほど目立ちますが、ゲームや動画・キャラデザの文脈では目立ちすぎると目が疲れる・悪目立ちといった印象になるので、メイン色範囲(直線)1本、アクセント1,2色程度に留めましょう。

OUCC Advent Calender 2021 day16 pic1

ビジュアルノベルやRPG(アクションでない)等では、逆に雰囲気を重視し環境光などでキャラをなじませることがよくあります。書いてあることと逆じゃないかと思うかもしれませんが、このときは背景美術や音楽などもっと目立たせたいものが他にあることや、キャラの実在感を出すためということもあります。後者の場合、光を当てたり視点誘導などでメインが目立つようにしています。

動画や広告等でも同じことが言えます。字幕を縁取りすることはコントラストを作り目立たせる手法として一般的です。また、赤色の特徴である購入意欲向上や、信頼感の青色、明るい気分の黄色など色の特徴を使うこともあります。

いら〇とやなどを使うときは当然他の素材と競合しないようにするべきです。い〇すとや等イラスト素材は、それ単体でメインになる程度の情報量(≒色の多さ、十分な明るさ、三要素のばらつき具合)を持っています。文章だけの掲示に彩りを与えるには良いですが、他にメインとなる画像素材がある場合、いらす〇やは実は邪魔かもしれないのです。

動き

イージング最高!イージング最高!イェイイェイ!

すべてのUI、ズームイン/アウト、表示などに、親の仇のようにイージングを使いましょう。イージングとは、簡単に言うと加減速のことです。

アイコンやボタンなどの表示はEase-In-Outがいいでしょう。最初に加速、最後に減速です。いきなりアイコンが動くとユーザーが驚くし、急に停止すると不自然な上にフリーズか仕様か分かりません。加速度の絶対値が小さすぎるとのっそりもっそりしてしまうので、すぐに最高速度に達するようにしましょう。

ボタンを押したとき等、ユーザーが能動的に操作するとき、その演出にはEase-Outを使いましょう。最初からトップスピード、最後に減速です。ユーザーが触れた瞬間に動き出すので、クリックにより”弾いた”感があり、操作している感が出ます。

*直線移動、Ease-in-out、Ease-outの例をGIF画像で作ったがこのブログ.gif対応してない*

ぶっちゃけ動きの演出なんて無限通りあります。イージングはいついかなる場所でも大体通用しますが、エフェクトはそう簡単ではありません。

使用するエフェクトは世界観ごとに、前もってある程度まで限定しておきましょう。
サイバーな世界ではグリッチやモザイク、発光などを多用し、ポップな世界ではバウンド、いったん拡大縮小しすぎて戻るやつなどを多用します。アイコンはもちろん、キャラクターの動きや字幕までエフェクトを統一すると、より世界観を演出できます。

ゲームに限った話ではありません。業務用ソフトのUIや動画にも世界観というものはあります。UIに明るい世界観を与えると、ユーザーフレンドリーな感じになります。

一瞬色を反転させる、拡大縮小と共にフェードインさせる、明度が高い所だけを先に描画し印象付ける、など世界観を持たない演出は便利に使えますし、他の演出と組み合わせることもできます。無限です。ここはもう製作者の好みの話です。

配置

余白を上手く使うことができる人は強いです

イラストを描く人なら知っているかもしれませんが、キャラが向いている方向に空間があると、安定して良く見えます。逆にキャラの背後に空間があると不安を煽り、キャラの頭上に空間を大きく取ると開放感を与えます。また、キャラが前を向いていると未来を、振り返っていると過去を、カメラと目が合うと元気さを、カメラと目が合わないと不思議を演出します。

視点誘導の方法も様々です。見て欲しいものをキャラが見ている方向に置いたり、光を当てたりすると目立ちます。窓枠やその他物などで囲いを作り、中に見て欲しいものを置くのもありです。(ただし、四角形の中に物を入れるのは不安感を煽る手法でもあります)

先ほどの四角の他に、画面を傾けたり(Dutch angle)、重要なものの一部をあえて画面外へやることでも不安感を演出できます。未知や不安定は怖いものです。

画面上の適当な三角形の領域に見て欲しいものを収める構図は躍動感を与えます。(丸の場合は安定感を出します) 広く知られていながら、常に強力な構図です。*三角構図*
同様に、画面を3×3分割し、その交点上 or 線上に見て欲しいものを置く(≒ド真ん中を避ける)のも魅力的です。*三分割法*

広告の文脈では、人間は左上→右下で視点を動かす癖があるので、これを意識した配置にするのがおススメです。街中の広告でも、見出しが左上に書いてあることが多いかと思います。(縦書きの場合右上→左下)

当たり前に聞こえるかもしれませんが、大きいものは目立ちます。文字や画像に大小をつけるということは優先順位を定義することであり、ユーザーはどれから見れば良いのかが分かります。逆に大小がないとユーザーにストレスがかかり、読まれません。動画やゲームでもそうです。ボスの登場時はボスにカメラを寄せて強敵感を出しますし、エフェクトが派手で大きいと印象に残ります。

音響

金銭的理由からフリー音源を使いがちな趣味クリエイターには辛いことですが、SEとBGMはそのコンテンツの世界観の半分を決定します。神ゲーと言われるインディーゲームのほとんどはBGMやSEに信じられないほどの情熱を注いでいます。

詳しくは触れませんが、当然ながら、音楽は強烈な世界観を持ちます。調や進行だけでなく、音源やリバーブですら世界観を演出します。SEもまた世界観を持ちます。

音楽と絵の世界観は、不気味さを演出するのでない限りは合わせるべきです。が、これがなかなか難しい。特定の世界観を持たない演出を多用すれば音楽に合いはしますが、個性が潰れます。DTMを嗜む御仁や絵の描ける御仁は、自分の手の届かない、素材を使うしかない領域を先に作り、その世界観に合わせて柔軟に制作をしてみてはいかがでしょう。

しめ

コンテンツ内容とエフェクト、音楽と絵のように、複数の要素間で世界観を共有するのは非常に難しいことです。ディレクターの大事な役割の一つは、世界観を開発メンバーと共有し調節することなのでしょう。ここがアマチュアとプロの境界であり、マルチクリエイターの強みでもあるかと思います。

さいごに、細かい設定を練った末に出てくる些細なこだわりはオタクの心をくすぐる神演出になるものです。裏の設定を練りましょう。舞台裏を、世界を想像しましょう。

OUCC Advent Calender 2021 次回は izumi104 さんです!

GrabPassで取得したテクスチャが意外と後まで使える

執筆者: Shiokai

はじめに

この記事は、OUCC Advent Calendar 2021の15日目の記事です(投稿日がずれているのは気にしない)。前回はwatamario15さんのテトリスの電子辞書移植でした。
またこの記事はUnityのShaderのGrabPassに関する内容です。

本題

シェーダーを触ったことのある人なら大抵一度は触ってみたくなる(よね?)GrabPassではありますが、Unityのドキュメントにはわずか1ページの説明しかありません。その中に、GrabPassで取得したテクスチャ(以下GrabTex)は「後続のパス」で使用できるとあります。この「後続のパス」というのが肝で、私は当初同じシェーダー(SubShader)内で後に来るパスのことを指しているのかと思っていました。

ところがある日Twitterを見ていると、異なるシェーダーでもGrabTexが使用できるといった内容のツイートを見かけました(何方のツイートか分からなくなってしまってリンクが貼れない……)。これは試さねばと思い、GrabPassだけをするシェーダーと、GrabTexを貼るだけのシェーダーを書いてみると、なんと確かに異なるシェーダーでもGrabTexが使えているではありませんか!

さらにもう少し触ってみると、GrabPassが呼ばれてから、再度同じ名前のGrabTexでGrabPassが呼ばれるまでの間であれば、初めのGrabTexがどんなシェーダーからでも使える様でした。GrabPassが呼ばれるタイミングは通常のPassと同様にRenderQueueと前後関係による(はずな)ので、単純にRenderQueueがGrabPassより後ならGrabTexがそのまま使えてしまうことになります。

更に、GrabPassとGrabTexを使うシェーダーのRenderQueueを逆転してみたところ、なんと前のフレームのGrabPassで取得したと思しきGrabTexが使用できてしまいました。ただ、その場合オブジェクトを動かすかどうかでうまく描画できなくなることもあったので、実用に耐えうるかどうかは怪しいものですが。
これを見るに、GrabTexが使える「後続のパス」は、時系列的に後であれば本当に何でもいいようです。

注意点としては、GrabPassをしているシェーダーがカリングされてしまうとGrabTexを使用している側には意図しないテクスチャ(たいてい灰色一色)が渡されることになるので、オブジェクトの配置やBoundsには気を付ける必要があるでしょう。

これで何ができるの?

GrabTexが他のシェーダーで使えることでどういった表現ができるようになるかと言われると……正直自分にはさっぱり何も思いつきません。例えばオブジェクトの座標を色情報にしてシェーダー間で受け渡しできたりはしますが、それはGPUInstancingを使った既存の手法もありますし、何よりスクリプトが使えれば簡単にできることで、では他にわざわざ他のシェーダーからGrabTexを持ってきてするようなことがあるかというと……。この記事を読んだ方が何か素晴らしいアイデアを実現してくれるといいなぁ。

終わりに

ゴミみたいな文章が出来上がってしまった……

OUCC Advent Calendar 2021、次回の担当者はちょくぽさんです。

テトリスの電子辞書移植

執筆者: watamario15

これは OUCC Advent Calendar 2021 の14日目の記事です。前日の記事は…おかしいなぁ誰もいないぞ?w 明日の記事は shiokai が担当します。

さて、何を書きましょうか。マジでネタがありません。何を隠そう今まさに12月14日23:22です。今年は大量の課題やら部室の引っ越しやらノーキャリアの学祭やら Brain Wiki の整備やらの事務的なことが多く、個人でプログラムを書く時間をあまり取れなかったのです(そういえば、今年から Brain Wiki の Admin になりました)。情報科学科なら講義でプログラムを書くのでは?と思うかもしれませんが、はっきり言ってあんなのおまけで数学や回路設計の方がはるかに workload が高いです。というか、プログラミングの講義自体レポートを書く部分が本質みたいなところあります。つらい。

うーんどうしようか、そういえばギリギリ今年のはじめに OB の方が作ったテトリスを電子辞書に移植するのやってたな、あれの流れと宣伝でも書いとくか(ここでようやくタイトル欄を埋める)。

経緯

さて、電子辞書とは言っても明確な機種を指定していませんでしたね。機種は SHARP のカラー電子辞書 Brain シリーズです。ただし、2021年発売のモデル以降は見た目こそほぼ変わりませんが中身が全く違うので対象としません。昨年の私の記事で、実際に作り方を説明していますので興味があれば見ていってください。

まず、なぜ移植しようと思ったのか。それは突如として OB さんの1人が

「最近win32apiでテトリスを実装しました。」

という投稿と共に OUCC の Discord (内部サーバーで、当時はこちらがメインの活動場所だった)でテトリスを添付されたことが始まりです。何という奇遇でしょうか。WinCE が動く SHARP Brain は、ライブラリこそ碌に流通していませんが Win32 API の subset を利用することができます(詳細は昨年の記事)。そして、その完成度の高さにも驚きました。結構昔から電子辞書で動くテトリスは実はあったのですが、それはモノクロで乱数も seed 値が全く同じでパターンが変化しない、とても単純なものでした。

「これは移植すると面白いかもしれない」

そうして、移植が始まったのでした。

序盤

本当は詳しく書きたいものですが、何しろ今 23:38 です。時間がありません。概況だけ書きます。

まず、最初の状態でそのまま CeGCC に掛けるとしっかりエラーになりました。まあ、そうなりますよね。想定内です。あくまで subset の API しかサポートしないので、そのまま動くなんぞ甘い期待は禁物です。

まず、1つは menu bar の仕様違いです。ここは WinCE をやるときの1つの沼で、私もかつて知るまではずっと何がダメなのか分からなかったし、分かっても仕様がどこを調べても書いていないので苦労しました。CE はモバイル用 OS で、それゆえ画面領域が貴重です。狭い範囲に最大限の情報を詰め込むため、×ボタンなどの並びと menu bar を共通にできる command bar が導入されています。なので、これに置き換える必要があるのです。とはいえ、この苦労は既に1年前に経験したものですから、簡単に切り抜けました。

中盤

あ^~もう 23:46 じゃないか!!やばい!!

次はレイアウトの問題です。何か酷いことになってたんですよねこの段階では。これも command bar の仕業です。通常 Windows なら menu bar は描画範囲外ですが、何と CE では範囲内です。なので、その分画面全体を下にずらさなければなりません。いやぁとんだ沼ですね。しかも、幅はさすがに取得する API があるのですが画面が出てからしか使えません。よって、ウィンドウサイズを起動した後に変えるような仕様変更をすることになりました。

終盤

ここが一番苦労した部分です。なぜか適切に描画されなくなる問題が生じて、あれやこれやと色々試す沼にはまりました。時間も無いので (23:54) 結果だけ書いてしまうと、電子辞書の超低スペックでもまともに動くようにするために FPS を落としたとき、プログラム仕様をよく分かっておらず「やってはいけない」設定変更を実施したことによるものでした。悲しいですね。

成果

https://github.com/OUCC/tetris

何はともあれ一応動くものは完成しました。上記の GitHub Repository に置いてあるので、対象機種をお持ちの方はぜひ遊んでみてください(くれぐれも先生の前でやって没収されぬよう…)。ただ、割と高度な音声処理が組み込まれているらしく、そのせいか電子辞書では結構もっさりします(十分遊べますが)。あと、電子辞書版が遊ばれる状況を考慮して初期状態では音量が0になっています。右のスライダーやページ送りボタンで音量を上げると、効果音付きで遊べますので是非お試しください。

(あー10分超過したッ!!許せッ!!)