吉里吉里のゲームをSTEAMに対応する方法 プラグイン編

Steamの話

steamといえば、言わずと知れた世界で一番有名かつ大きなゲームの販売サイトです。
そこが去年の後半に成年向けゲームの販売を許可しだしたというので話題になりました。
また、日本ではあまり元気がないように思えますノベル系ADVゲームですが、最近は海外勢のものをよく見かけます。逆に人気があるのでしょうか。

2019/04/12 実際の案件を元に内容を更新
この記事の続きを読む

吉里吉里TJSで実装した経路探索アルゴリズムを公開した話

limecat制作のタイトルの制作依頼のときに作成したAstarアルゴリズムを、limecatさんの合意を得た上で、整理して使いやすくしてgithubに公開しました。

ちょっとした説明

limecatでは、広い室内を逃げるということだったので経路探索アルゴリズムを実装しました。

https://github.com/suigensoba/krkrastar

本来はC++などでプラグイン実装するのがスマートなのですが、諸般の都合でTJSで実装されています。

もちろんTJSなので毎フレーム計算するようなリアルタイム処理には向いていません。なのでUnityのNaviMeshみたいなものを想像してはいけません。

目的地を指定するとワンテンポ遅れて、そこまでの経路座標を配列で返すだけの代物です。
一応計算をフレームで分割するようにはしています。

地形データは画像データ(Layerクラス)を用います。
なのでこの画像を操作することで半動的に地形を変化することができます。
イベントによって通路が通行可能になったり不可能になったり、というのも可能です。

地形データのサンプル
黒が通行可能

詳しい使い方はgithubのほうを見てください。
吉里吉里2/Zでの動作を想定しています。
そのほかの吉里吉里プロジェクトではわかりません。
この記事の続きを読む

公式Twitterページを省スペースで使う

Twitterは近々(2018/8/16)UserStreamの廃止という大きな仕様変更が行われます。
詳しいことはここでは解説しませんが利用者目線でざっくり言うと「無料のサードパーティークライアントでは、これまでの流れるタイムラインを表示出来なくなるよ」というもの。

この仕様変更を境にTwitterのPCクライアント界隈も、色々とバージョンアップするかと思います。
ただ中には開発が停まっていてバージョンアップしなかったり、やむを得ず機能の削除が行われるクライアントもあるかと思います。

なら繋ぎで公式ページを使ってみるか、と思って開いてみたら「公式ページ、余計なのが多いよ」と気になる人がいるかもしれません。

PC版の公式ページは3カラムで、ウィンドウを縮めてもこんな感じ。
横幅を縮めたところ
レスポンシブにレイアウトが変わってくれればいいのに、というか自分のアイコンとかフォロワー数とか常時要らないよ、と思うのは自分だけじゃないはず。

この記事はそんな人向けに、公式ページをすっきりさせようという話です。

この記事の続きを読む

AEでカートゥーン風爆発エフェクトを作る


AEネタが続きます。
今回はAEでカートゥーン風の爆発を作る方法を、覚え書きついでにざっくりと書いてみます。

カートゥーン風と言っても年代やジャンルによって様々ですが、トムとジェリーのようなコミカルなものではなく、今回はわりと新しい目のアニメの雰囲気を目指します。

ご本家は手書きでぐりぐり書き込んだり、マスクをアニメーションさせたり、3Dモデリングで作っていくのだと思いますが、こちらは変形系のエフェクトを使ってそれっぽく再現したいと思います。

この記事の続きを読む

AEだけでVR動画を作る話

AfterEffectsオンリーでVR動画を作る機会がここ立て続けて二つほどありました。
いわゆる360度なカメラで撮影したものではなく、3Dレイヤーなどで1から映像を作るものです。
作れることは知っていたのですが、以外と日本語のリソースがなかったのでメモ代わりに書いておこうと思います。

使ったAEはCC 2018.1、つまり最新版です。
作るだけなら一個前の2018でも出来ますが、最新版のほうがプレビューが圧倒的に楽です。
最新版だとAEからVR HMDに映像を送れるのでいちいち書き出す必要がなくて便利です。

説明は日本語版の表記で進めていきます。

セットアップ

いきなりのtipsなのですが、環境設定で「レイヤーをコンポジションの開始時間に作成」をオンにします。
これをオンにしておかないと、後々面倒になります。


続いて「コンポジション>VR>VR環境を作成」を開きます。



開いた「VR環境を設定」ウィンドウを設定していきます。


項目を軽く説明します。

サイズ

サイズはVR空間のコンポジションサイズになります。
AEのVRは正方形を6面組み合わせた箱の中心にカメラを置いた形になります。その一面の解像度を指定するところになります。
正方形になっていますがこれで問題ありません。

サイズを高くするとより鮮明な映像になります。
ですが高くし過ぎても重くなりますし、最後にこのコンポジションを3列2行の6面貼り合わせます。よって最終サイズの横幅は3倍の3072x1536になります。結構な高解像度です。
ただVR動画の画質という点では、3072x1536は悪くない数字だと思いますが、4Kきっちりで作りたいと方2048を選んで後で縮小すると良いと思います。

フレームレート

そのまんまです。
高い方が現実感が高まります。
ただし、高いと書き出すのが遅くなります。

小技として、編集は29,97でしておいて、書き出し時に倍にする手も使えます。ただこの場合はエクスプレッションなどを使っていると予期しない挙動を起こすので注意が必要です。

余談ですが、VR動画アプリによってはフレームレートとヘッドトラッキングのFPSが同期するものがあったりします。

デュレーション

言わずと知れたコンポジションの長さです。

2ノードカメラを使用

カメラを2ノードカメラで作成します。
映像中にカメラを動かす必要のある人は、1ノードか2ノードかやりやすい方を選んで下さい。

3Dヌルカメラコントロール...

カメラ操作用のリグをヌルレイヤーで作成します。
有った方が楽です。

カメラの中心

カメラを空間の中央に配置します。
3Dモデリング風に言えば座標0か、人の目線を想定した位置に配置するかを決めます。
1024x1024のコンポジションの場合、オンで512,512,0、オフで512,512,-512にカメラが初期配置されます。

もっとも後からいくらでも調節出来るので、最初に作業しやすい方でいいでしょう。

3Dプラグインの使用

これはELEMENT 3DやParticularのように「平面レイヤーだけどカメラ情報を参照して見え方が変わる3Dレンダリング系プラグインを使っているか」という項目です。
該当するプラグインを使う予定ならオンで。

今回はこれはオン前提で進めます。

エッジブレンディングを使用

エッジブレンディングとは複数のスクリーンをつなぎ合わせるとき、隣のスクリーンと少し被せて配置することで滑らかに繋げることです。
プロジェクターを複数台使って大画面を構築するときによく聞く言葉です。

AEの場合は、前後左右上下に向けられた複数のカメラ映像を滑らかに繋げるために、間になる映像を生成します。
オフだと前後左右上下の一つのコンポから6面に生成するのに対して、オンだと20面生成します。
結果、かなりムービーの書き出しが重くなります。

ただコンポジションで3D系の描画系プラグインを使う場合や、オブジェクトが空間内を動き回る場合はエッジ付近のつながりが良くなり映像の質は良くなります。時間に余裕があるなら使っていきたい項目です。

コンポの作成

必要な設定を済ませたら、「VRマスターを作成」をクリックします。
カメラなど必要なレイヤーが設定されたコンポが開きます。
「VRマスターコントローラー」というのは「3Dヌルカメラコントロール...」で作成したリグになります。
カメラの移動はこれに対して行います。

オブジェクトの配置


コンポ内のオブジェクトは基本的に3Dレイヤーで行います。
そうすることで、VR動画に変換したさい、適切な位置に表示されます。

じゃあ、2Dレイヤーを配置したらどうなるかというと、こうなります。
VR変換後のコンポ

2Dと書かれた白い平面が2Dレイヤーです。それが画面上にいくつも存在します。
360度動画を素の状態で見たことある人なら、ピンとくるかも知れません。
2Dで配置すると、前後左右上下すべての面に描画されてしまい、不思議空間になってしまいます。
ただ、この性質を利用して単色背景として使うのはアリですし、是が非でも読ませたい警告文とかそういうものを表示するならばアリかもしれません。

3Dエフェクトのオブジェクトの配置


3DレイヤーやElement 3DやC4Dのオブジェクトは普通に配置します。
テキストレイヤーも3Dレイヤーにして下さい。
例では3Dレイヤーで地面のグリッドを作り、E3Dで適当に箱を散らしてみました。

さて、ここまで来たら一旦360度動画へ変換してみましょう。

360動画の作成


360度の変換には先ほどの「VR環境を設定」ウィンドウを使います。

1.ウィンドウ上部にある「現在のコンポジションからVRを作成」を選択します。
2.VRを作成したコンポを選択します。普通は「VRマスター」になります。
3.「VR出力を生成」を押します。
何やらコンポが自動的に生成されて、以下のような画面が出来るはずです。

これで360度見渡せる動画の完成です。
ミスっていたら「VRマスター」コンポに戻り、修正後に「VR環境を設定」ウィンドウから、「VR出力を更新」を押します。すると再度計算されて修正内容が適用されます。

後は適当な形式でエンコード&書き出しをすれば映像を見ることが出来ます。
周囲360度をぐるりと箱に囲まれた不思議空間が出来ているはずです。

ただ、いちいち書き出してVRプレイヤーでチェックして・・・というのは大変面倒です。
そこでAE2018からAEからVR機器へ直接映像を送りプレビュー出来るようになりました。

SteamVR対応機器を持っている場合は、VR機器でプレビューをすることが出来ます。
現在の対応はOculusとVIVEらしいですが、steamVR経由なのでriftcatやMS MRもいけるんじゃ無いかと思うんですがこの辺りは未確認です。(自分はOculusで確認しました)


コンポジションパネルの左下にあるHMDのアイコンをクリックし、適切な方式を選べばSteamVRが起動し、HMDに映像が送られます。
この場合は、立体視が入っていないので平面視になります。


立体視の設定


さて、折角なので立体視つまり3D VRな動画にしてみましょう。
立体にするに必要なことは左右用別々の映像をつくることです。

人の目は左右にあります。そのためそれぞれの目が見ている映像は微妙に角度が違います。人はその僅かな角度のずれから距離感を感じ取っています。

なので3DなVR動画を作る際も、微妙に角度が違う動画を作りだす必要があります。

コンポの修正


視差を作るにはカメラを少し左右に動かせば事足ります。
なのでVRマスターを複製し、カメラ位置を少しずつ動かせばいいです。
ただ一発で決まればいいのですが、距離感の調節を繰り返す場合、毎回複製してカメラを移動して・・・とするのは面倒です。
なのでここはエクスプレッションの力を借りてしまいしょう。

カメラコントローラの位置に次のようなコンポジションを追加します。

t = transform.position;
if(thisComp.name.indexOf("2") == -1)
x=t[0]-20;
else
x=t[0]+20;
[x,t[1],t[2]];

ざっくり説明するとコンポ名に”2”が入っていれば右にずらし、入っていなければ左にずらす、という内容です。
コンポを複製すると「VRマスター」は「VRマスター 2」となるように、末尾に数字が入ります。この数字をチェックして勝手にずらすようにしています。

ずらす量は中央からそれぞれ20ずつ、このあたりは適当です。
離せば立体感が増しますが、多すぎると見え方が変になります。
少ないと立体感は損ないますが、安定した絵になります。

動画の出力


3D動画を出力します。

まず「VR環境を設定」ウィンドウから、「VR出力を更新」でVRマスターコンポを出力します。

続いてプロジェクトパネルでVRマスターコンポを複製します。この時、「VRマスター 2」とコンポ名がなっていることを確認します。

次にもう一度、「VR環境を設定」ウィンドウから、「VR出力を出力」で「VRマスター2」コンポを出力します。

これで微妙に視差がある360動画が二つ完成しました。



今回は、立体視上下(T/B = トップアンドボトム)形式で作成します。
これは上半分が左目、下半分が右目になっている動画の形式です。

まず、二つの360度動画を並べるためにコンポを作ります。
このコンポの解像度は最終的なレンダリングの解像度になりますので、ターゲットになるプラットフォームに合わせます。
今回はYoutubeにアップロードする、と仮定します。
Youtubeの仕様はこんな感じです。
最大8Kまでオッケーみたいです。

なの今回は1920x1080前提の360度動画で作りますので、単純に高さを2倍にして1920x2160でコンポを作りました。
もしVRマスターのサイズを2048などで作っている人はここで4Kを選んでもいいかもしれません。
このコンポを仮に「3D VR」と名付けます。

3D VRコンポに「VR マスター (VR 出力)」と「VR マスター 2(VR 出力)」を放り込みます。

後はこのコンポを上下に二つ並べるだけなのですが、コンポサイズとVR出力のコンポサイズが一致していない上に縦横比が合っていないのでサイズと位置の調節が必要になります。
画面を見ながら合わせてもいいのですが、面倒なのでこれもエクスプレッションで解決します。

まず位置決めがやりやすいように二つのコンポのアンカーを0,0に設定します。
左目用の「VR マスター (VR 出力)」の位置を0,0にします。
次に右目用の「VR マスター 2(VR 出力)」の位置を0,1080にします。

続いてスケールのところに以下のエクスプレッションを入力します。

[thisComp.width / width*100,(thisComp.height/2) / height * 100];

これでぴったりになります。



プレビューと修正


この状態になるとHMDでプレビューすることが出来ます。
距離感などを確認します。
修正したくなったら、またVRマスターコンポまで戻ります。
修正が終わったら、プロジェクトパネルから「VRマスター 2」を削除して、「VRマスター」を複製します。すると修正された「VRマスター 2」が作られます。
「VR環境を設定」ウィンドウから、「VR出力を更新」で「VRマスター」と「VRマスター 2」コンポを出力すれば、修正完了です。
(この課程がいまいち面倒なのですが、どうにか良い方法がないものかと)

書き出しと配信


完成したら適当な形式を指定して書き出します。
カメラ6ないし20個分の映像をレンダリングしますのでゆっくり待ちましょう。

youtubeにアップロードする場合は「360 Video Metadata アプリ」で「これは360度で立体視動画ですよ」という情報を書き込む必要があります。
このあたりは上にあるYoutubeのページに説明が書いてあるのでここでは割愛します。

まとめ


AEでモーショングラフィックなどを、3Dな360度動画、いわゆるVR動画で作るのはそれほど難しくはありません。
コンポジションを作るだけなら普通の動画とほぼ一緒です。
強いて違うすれば以下の点です。



  • すべて3Dレイヤーで組む必要がある
  • 奥行きを感じられるので、HMDで見たときのサイズ感や距離感に注意が必要
  • 同じような理由で、2D的な誤魔化しが効かない(効きづらい)


  • 映像を正面以外も考える必要がありますが、個人的には仕込みは前方向200度くらいに納めておけばと思います。
    個人的な経験でVRゴーグルを付けて振り返るというのはなかなかしないです。

    以上がAEだけで作る360度VR動画の覚え書きでした。


    この記事の続きを読む

    iPadで長文や小説を書くのに適したテキストエディタ話(2017年版)

    去年末に書いた「iPadで長文や小説を書くのに適したテキストエディタ話(2016年版)」のアップデート版になります。
    新規に登場したアプリや使い勝手が大きく変わったアプリ、新しく見つけたアプリが中心になります。

    今回、取り扱うアプリは次の通りです。


    • iA Writer
    • Wrix
    • Tate Pad
    • その他
    この記事の続きを読む

    iOS11のキーボードの"ショートカット”の謎(CMD+Cとかじゃない方)

    外図家キーボードでiライターズというアプリを使っていて、入力行が画面下端のほうになると入力文字と変換候補が被ってしまうという問題が起きました。

    多分一番したにあるキーボードの”ショートカット”のせいかなと思い、これを非表示にしようと思ったのですが…設定項目が無いんです。
    iOS9の頃には確かにあったのにです。

    この記事の続きを読む