satofumi 2020/12/07 20:00

字幕を表示できるようにする

今回は動画に字幕(メッセージ)を表示できるようにしていきます。

録画するカメラへの文字列の描画

まず、UI の操作の前にテスト文字列を配置して録画できることを確認します。

動画の出力に使っている Video Capture Pro には「UI を含めて保存できます」あったのですが、方法がわからなかったのでカメラの前に 3D な文字列を配置することにしました。

そして、Unity の TextMesh と TextMesh Pro な文字列を配置した様子がこれ↓です。


左上の TextMesh Pro はモデルの奥側に描画されてしまっています。一方の TextMesh はシェーダーの関係で常に最前面に描画されるようです。

今回のツールでは描画する文字には縁取りを行いたいので、TextMesh Pro を使います。文字列の最前面への描画は、カメラの最前面に縮小した文字列を配置することで実現しました。


↑カメラとモデルと文字列のい位置関係

良いですね。
録画してみて文字列が描画されるのも確認しました。良いです。

文字列の UI での追加

次に文字列を UI から追加するあたりを実装します。

文字の追加は右上のパネルから行い、追加した文字列の編集については左上から行うようにします。描画する文字列で編集する項目としては

・テキスト
・表示秒数
・フォントサイズ
・左寄せ、中央寄せなんかの設定
・縁取りの有無や太さ
・色

にします。メッセージ途中の何文字かのフォントサイズを変更する方法については後でまたどうにかします。
これら項目のうち、メッセージのテキストと表示秒数以外はこの文字列を配置するタイムラインで共通にします。

それでは実装していきます。まずは右上のパネルから文字列を追加する UI の実装です。


↑とりあえず実装したものがこれです。


↑そして、文字列を入力した後で動画を出力した結果がこれです。

文字列が表示されてて良い感じです。大変良いです。

さて、動作したので今回はここまでにします。
次回は文字列表示の残りをするか、表情やハンドサインを変更するあたりの実装に着手しようと思います。がんばります。

次回の更新: 水曜日の 20時

月別アーカイブ

限定特典から探す

記事を検索