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

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 さんです!

現役生と卒業生で LT 会を開催

本日、OUCC の卒業生と現役生との交流会を兼ねて卒業生による LT 会を開催しました。

内容は社会人としての経験や大学院での研究経験、また趣味で行っているプログラミングや電子回路技術の紹介といった様々な貴重なお話をして頂きました。

OUCC では、今後もこのような卒業生との交流会の機会を作っていけたらと思っております。ご協力くださった卒業生の皆様、ありがとうございました!

合格おめでとうございます!

令和3年度大阪大学一般入試を突破された新入生の皆様、合格おめでとうございます!
今年度はコロナにより模試日程や授業形態が例年と異なることに加え、本年度から始まった新しい試験の共通テストが実施されたということもあり、受験生は例年よりも大変な思いをされたと思います。ちなみに、中の人は基礎工学部情報科学科の学部4年生ですが、今年の倍率は3.8倍と聞いて驚いております。(今年受けたら落ちてそう...汗)

OUCCでは春に新歓活動として、プログラミングやITスキルに関わる講習会を開催します。詳しい情報はTwitterの新歓アカウント公式サイトにて順次公開しますので、是非ご覧ください!

大学ではたくさんの出会いや学びの機会、今までの人生では味わえなかった経験をすることができます。激動の一年(もしくはそれ以上)を乗り越えた皆様と共に大学生活を送ることができるのを心待ちにしております。

dotfiles を作ってみた

公開日: 2021年2月20日 最終更新: 2021年2月20日 執筆者: watamario15

大学の課題を全て出し終わり、ようやく自分の作業に取り組むことができるようになりました。無事に単位が取れていて、GPA もあれば良いのですが...

色々とやることはあるのですが、まずは dotfiles を作成することにしました。

dotfiles とは

検索すればすぐに分かるのですが、簡単に言うと環境構築を秒速で終わらせるためのファイル群です。Unix 系のソフトウェアの多くはテキストファイルを設定ファイルとして扱うものが多く、それをカスタマイズすることで自分好みに設定することができるようになっています。ここで、そのファイル群とそれを適切に配置したりその他の設定をしたりするスクリプトもセットで GitHub に上げておけば、新しい環境でも git clone してスクリプトを走らせるだけで即座に自分の環境が出来上がる、という訳です。

なお、dotfiles という名前は、設定ファイルの多くが名前がドット (.) で始まる「ドットファイル」であることが由来です。ちなみに、Unix 系システムにおいてドットファイルは隠しファイルとなります。

どんな dotfiles を作ったのか

これが私の dotfiles です: https://github.com/watamario15/dotfiles
機能や使い方などの説明は Readme.md にありますので、気になる方は読んでください。もちろん、install.sh.bashrc とかを参考にしてもらっても構いません(特に alias 周り)。まだまだ未熟ですが、少しずつ成長させて行けたらと思っています(この記事を読んでいる方で、もし「絶対これは設定すべき!」みたいなのがあれば issue 立てたり pull request 出したりして頂けると嬉しいです)。initialize.sh に付けた CASLII/COMETII のシミュレータをインストールする機能、阪大生(だけ)には割と需要ありそうですね(笑)

今回の投稿は以上です。ところで、推薦入試の合格発表があったそうですが、合格した皆さんおめでとうございます!もし合格してサークルを探している、という方で OUCC の活動に興味を持たれた方がいらっしゃれば、ぜひ Discord 新歓サーバー に参加してみてください(もちろん上回生も大歓迎!)。もちろん、これから一般入試だという方も全力で応援します!

GAN使用のアプリ制作における雑記

~あらすじ~

 GANを3か月前から学び始めたんですが、OUCCのAdvent Calendarの24日目?の記事を書くに当たって、自分が今までやったことがない技術を使用しようと思いまして、StackGANというGANを使用したアプリを制作しようとしました。具体的には大阪大学生協食堂の料理の写真とその料理名を学習して、入力された架空の料理名から架空の料理画像を生成するアプリです。結論から言いますと上手くいかなかったのですが、その間に得られた知見などの心に移りゆくよしなし事をそこはかとなく書きつくりました。

~GANって?~

GANについて軽く説明します。詳しくはググってください。

 GeneratorとDiscriminatorという2つの学習するモデルから構成される機械学習モデルです。小学校とかの先生と生徒の関係で例えると、生徒のGenerator君は答えを写した宿題を作成し、Discriminator先生は提出された答案が答えを写したものかきちんと解いて得られた答案かを見分けます。その見分けた結果、答えを写したことがばれて叱られたGenerator君は、学習してより自分で解いたかのように見える答案を作成します。Discriminator先生もきちんと解いてきた答案かどうかを見分けられる様に学習します。そのように一方が利するともう一方が損する関係によってお互いが高めあい、Generator君は自分で解いた答案と変わらない答案を作成することができるように成長します。つまり、Generatorモデルが最終的に本物そっくりのものが生成できるようになる学習の仕組みがGANというモデルです。

~StackGANって?~

 私も最近知ったのでよく知りません。言語から画像を生成する方法ないかなと探していたら発見したGANの一種のモデルです。これも詳しくはGoogle先生に教えを乞うか、私が参考にしたサイトを閲覧してください。(GANの説明に疲れて丸投げしたのでは無い)

 なお、レシピから料理を生成するCookGANというものがあるみたいですが、今回は料理名をラベルとして使用するので恐らく使えないです。

・何が駄目だったのか

 あまり制作にかける時間がなかったので原因究明はきちんとはされていないですが、早い話学習データが圧倒的に不足していました。もし、学習が上手くいかなくてどういうわけかこのページに行きついてしまったかわいそうな人にはこんな結論で申し訳ないです。それはさておき何が駄目だったかというと、130枚の、しかもラベルが重複しない、共通点としては器の形が似ているだけの画像で学習しようとしたことが無謀でした。そのデータ数でよくやろうと思ったなと言われそうですが、言い訳をすると入力する料理名に含まれる名詞は重複が多く何とかなるかなと思ってやってみた次第です。さらにGANの学習データを水増しするDifferentiable Augmentationという技術を発見して、もしかしたら出来るのでは?と愚考した次第です。

 Differentiable Augmentationについて軽く説明しますと、従来の画像のクラス分類学習では訓練データにちょっとした加工を加えることでデータの水増しを行うことができましたが、GANの学習ではさらにGeneratorの生成した画像に同様の加工を加えることで、より良いデータの水増し効果が得られるという技術がDifferentiable Augmentationです。間違っていたらすみません、詳しくはgoog(ry

・使用したデータの一例

 一枚目がピリ辛サーモン丼。美味で個人的なおすすめ。二枚目はマヨラーの友人によって犠牲となった親子丼。親子丼に何の恨みがあったのだろうか。なお、二枚目は学習には使用していません。

・結果

 StackGANのstage1の学習段階で上手くいきそうな気配がないのでやめました。

一応stage1の学習結果だけ載せておきます。

心が清い人には遠目で見るとかろうじて料理に見えるはず。

 これだけでは申し訳ないので、同じデータセットで学習したDCGANで生成したものを貼り付けておきます。

 右下以外はまんま存在する料理が生成されています。あ、そう くらいのつまらなさで申し訳ない。やはり、生成画像を人間がコントロールできるものを作った方が楽しいですね。

・損失関数について

 最近GANの学習にはHinge Lossを使用すれば上手くいくよという記事を見つけたので、これとは違うGANのアプリに実装すると劇的に学習が向上しました。なのでこのDCGANにもHinge Lossを適用したらより上手くいくかと思ったら、逆に学習しなくなってしまいました。Hinge Lossの取る値はReLUみたいに途中から一定の値になりますが、Binary Cross Entropyは少しの値の変化もLossの値に反映されるので、これが原因ではないかと考えています。

~終わりに~

 いかがでしたか?ろくな原因究明をしていない分、悪質なキュレーションサイトの方がよっぽど役に立つような内容でした。この山無し落ち無し意味なしのやおいページにお付き合い下さり有難うございました。そして1月になって記事を書いたことお許しください。

著者:AI班上月

昔作ったゲームを振り返る

これはアドベントカレンダー25日目の記事です。なんでトリなんて選んだんでしょうね。

特に書くこともないので昔作ったゲームでも紹介します。
1つ目はブロック崩し。
僕が初めて作ったゲームです。javascriptとhtmlで作りました。

2つのゲームを同時にクリアさせる必要があります。カーソルは1つなのでなかなか忙しいです。当てるなってやつに当てると画面が変化して見づらくなります。初めて作ったにしてはなかなかいい発想してたと思います。


2つ目は人生ゲーム。何番目に作ったのかは覚えてません。
小学生のころ考えた留置所と戦争に行くという要素を含んだものです。
ほかにも途中で無職になったり、事故を起こして裁判になったりと、およそ市販できないようなマスを用意しています。最近のマスがどんなものか知りませんが。大体所持金がマイナスになるというそれはひどい人生ゲームです。ちなみに画像は無職なのに車を買って事故を起こし、裁判で賠償金490万払ったところです。賠償金安すぎですね。

3つ目は陣取りゲームです。某イカのゲームが流行っていたので作りました。

右にあるいろいろな塗り方から選んで盤面を塗っていきます。緑色の場所しか選べず、盤面がすべて赤色か青色で塗られたらゲーム終了。色の多いほうが勝ちです。一番右にある4つはスペシャル技で、1種類だけ使えます。正方形が強かった気がします。

最後はトランプオセロ。これだけ大学に入ってから作ったものです。部室でトランプで遊んでた時にふと思いついたのでゲームにしたものです。

トランプでオセロをすることで、単純に表の数でなく数値の和で勝敗を決める戦略性、裏が同じ模様のトランプであることから両者が使える裏というおき方、裏返ったカードの色と数値を記憶する必要があるという神経衰弱要素、そしてジョーカーを使うことで場のカードを1枚ひっくり返せるという逆転要素が盛りだくさんです。自分の周りでは結構評価高かった気がします。

こうして振り返ってみるとなかなか頑張ってたなという気がします。今はこんな気力はないですけど、また面白そうなもの思いついたら形にしておきたいですね。たとえ日の目を浴びなくても、こうして思い出すことで自分も頑張ってたんだな、とか面白いこと考えてたな、とか懐かしい気持ちになれるなら形にした意味はあるんじゃないでしょうか。