【雑記】ビデオキャプチャー機器と動画配信

雑記というか日記。

どうやら、社長がビデオキャプチャー機器を欲しがっているようです。

 

ぶつ

ブツを調べてみましたが、意外とお求めやすい価格のようです。例えばこれだと

入力は4K60Hzまでの信号を受け取り、1080pの映像をキャプチャー、出力することが可能。連番画像としても保存できるらしいです。

便利そう。

 

けいい

恐らくこうなった経緯。

10/14(日)に、横浜で開催されたUNREAL FEST EAST 2018に行ったんですね。

unrealengine.jp

ゲームやその他XRコンテンツ開発者として、大変有意義な内容でした。

この内容で参加費無料なんて、Epic Games様素敵!

その中の一つで異彩を放っていたのが、こちら

www.slideshare.net

水瀬ツバキさん可愛いんじゃ~

10/17時点では動画はまだ公開されていませんが、大変ボリュームのある内容となっております。VTuberに興味のある方は必見です。特に所持デバイスが増えていく様は面白かったです。どうしてこうなった。

なお質疑応答によると、単なる無料動画の配信に使う限りではUE4のライセンスフィーは不要らしいです。つまり完全に無料で使えるらしいです。Epic Games様かっこいい!

これに影響されたのかどうかは分かりませんが、どうやら社長が色々と企てているようです。もしかすると……

【Unity】VideoPlayerでの動画再生(2)

 前回の続きです。

 

VideoPlayer

Unity 5.6あたりから、VideoPlayerコンポーネントが利用できるようになっています。

VideoClipまたはURLの動画を再生できます。

 

なお今回の動画素材は、Pexels Videosのこちらからお借りしました。

Free stock video of beach, dawn, drone

  

Video Clipから再生

一番簡単なのは、動画ファイルをVideo Clipとして取り込み、それを再生することです

なお、Video Clipの取り込みにはQuickTimeのインストールが必要です(Windows版はもうサポートが終了していますが……)そのため、H.265やVP9などでエンコードされた動画は取り込めないようです。

f:id:chirotec:20180930234804p:plain

H.264またはVP8にトランスコードすることも可能です。

 

これをVideoPlayerで指定すると、再生することが出来ます。 

カメラに直接描画したり、RenderTextureに描画してそれを用いてオブジェクトを描画するといったことが可能です。

 

URLから再生

URLを指定すると、Web上にあるファイルやローカルのシステム上にあるファイルを再生することが出来ます。

ローカルのファイルを再生する場合、"file://"を付けると再生することが出来ます。

例えばAndroidで"/mnt/sdcard/Movies"フォルダに動画がコピーされる機種の場合、

URLに「file:///mnt/sdcard/Movies/a.mp4」を指定すれば動画フォルダのa.mp4が再生出来ます。

また、動画ファイルをStreamingAssetsフォルダ内に配置するとVideo Clipへの変換が行われないので、そちらに配置しておく方法もあります。

きちんと使うには、スクリプトAPIを呼び出して正確な位置を把握して指定する必要があるとおもいます。

 

 

この場合、システムで利用できるコーデックが使用されます。システムが対応していれば、ハードウェアデコードの恩恵も受けることが出来ます。H.265やVP9でエンコードされた動画も再生できます。

 

よくありそうな問題と対策

AndroidでSDカードやインターネット上にある動画ファイルを再生できない

Build Settingで、適切なアクセス権を与える必要があります。

 

音が遅延する

Edit > Project Settings > Audioで、プロジェクトのオーディオの設定を見てみます。

(AudioManager)

f:id:chirotec:20181001001912p:plain

DSP Buffer Siseの項目はデフォルトだと"Best performance"となっていますが、

バッファサイズが大きすぎるため、環境によっては音が遅れて聞こえてきます。

"Good latency"あたりに変更すれば、遅延は軽減されます。

(ゲーム内の効果音にも同じことが言えます。)

代わりに音飛びが発生しやすくなるリスクがありますので、注意してください。

【Unity】VideoPlayerでの動画再生

今日は動画ファイルの形式と、動画再生についてのメモです。

 

動画ファイルについて

参考:ビデオファイルについて - Unity マニュアル

コンテナ

動画ファイルにはいろいろな形式がありますが、一般に.mp4, .mov, .webm, .aviなどの拡張子は、だいたいデータがどのコンテナ形式で格納されているかを示しています。

コーデック

動画ファイルの場合、拡張子だけではデータがどの様に圧縮されているかは分かりません。圧縮・展開を行うソフトウェアがコーデックです。

(Compression/DECompressionの略です)

ビデオコーデック

H.264/AVCは現在よく用いられている、圧縮率や画質に優れたコーデックです。

参考:Q&Aで学ぶH.264/AVC(1):H.264とは? AVCとは? | 情報通信(ICT) | スマートグリッドフォーラム

後継規格としてH.265がありますが、特許関連で問題があり、普及には至っていないようです。

他にもWebMに用いられるロイヤリティフリーのVP8,VP9や、次世代のコーデックとして期待されているAV1があります。

オーディオコーデック

音楽プレイヤーではmp3、aacなどのコーデックが主に利用されています。

これらの形式は特許で守られているため、それに代わる形式としてVorbisが開発され、ゲーム開発ではよく利用されていました。(よくOgg Vorbisと呼びますが、OggがコンテナでVorbisがコーデックです)

なおMP3のライセンスは2017年4月23日に終了しているため、現在では自由に利用することが出来ます。

Unityでは、標準の音声フォーマットとしてOgg Vorbisが採用されています。

 

ライセンスについて

基本的に圧縮アルゴリズムは特許で守られていることが多いため、利用には注意する必要があります。

例えばH.264の場合

参考1:MPEG LA、H.264の共同ライセンス体系を発表

参考2:H.264のライセンス料、無料ネット動画は恒久的に不要に - ITmedia エンタープライズ

参考3:楓 software: OS機能を利用してH.264を再生する場合のライセンスを確認する

合計12分以上のH.264動画をパッケージに含めるにはライセンスが必要そうです。また12分以下の場合にもOSの機能を呼び出して再生する分には大丈夫のようにも思えますが、確証が持てません。

MPEG LAにライセンスについて問い合わせるか、問題を避けたければコンテナはWebMでビデオにはVP8、オーディオにはMP3またはVorbisを使うのが無難だと思います。

 

Unityでの利用

Video Player コンポーネント - Unity マニュアル

描画先と音声の出力先を指定すれば、簡単に動画を再生できるコンポーネントがUnity5.6で追加されています。

具体的には次回説明いたします。

【Unity】【9/19 3:00まで】Humble Unity Bundleでアセットが非常にお買い得

今朝3:00に、Humble BundleにてUnityのアセットが含まれるバンドルの販売が開始されました。非常に破格な内容となっております。

www.humblebundle.com

 

Humble Bundleとは

ゲームやアプリケーション、電子書籍などのデジタルコンテンツのダウンロード販売を行っているサイトです。

www.humblebundle.com

バンドルは1~2週間の期間限定で販売され、売上の一部がチャリティー団体に寄付されます。ユーザーはバンドルに支払う金額を最低1ドルから決めることができ、一定額以上を支払うことで段階的にコンテンツを入手出来る仕組みです。

たまに所謂「おま国」で日本では貰えない物があったりします。日本産ゲームの大部分がそれに該当します。困ったものです。

電子書籍epubやpdfのファイルがDRMフリーでダウンロードできます。(基本的に全て英語です。)アプリケーションはシリアルキーが提供されます。特にゲームはSteamキーで提供されることが多いです。稀にネットサービスの利用権なども並びます。Unityのアセットが並ぶのは珍しいと思います。もちろん正当に提供されている正規品なので安心して利用できます。 

 

今回のHumble Unity Bundleでは、15ドルを支払うと、バンドル内のコンテンツを全て入手できます。期間限定ですので注意!


今回紹介するバンドル以外にも、時折セールを行っているStoreでの単品販売や、毎月コンテンツが貰えるHumble Monthlyといったお得なコースもあります。

PCゲームで遊ぶ人や、技術書を買う人はチェックすべきサイトです。

 

内容

購入額は任意の額を指定できますが、必要な金額は他のバンドルと同様に3段階です。

$1/BTA(全購入者の平均額)/$15となっています。BTAは常時変動しますが、そのアクセス時点での金額を支払えば大丈夫です。

括弧内はSteam及びUnity Asset Storeなどで販売されている定価です。

セールでこれより安く入手した方が多いと思いますが、参考までに。

特に講座は9割引が当たり前の世界ですし

 

$1 

[ゲーム] Oxenfree (税込¥1,980)

[ゲーム] AER Memories of Old (税込¥1,880)

[アセット] Inventory Pro (税別 $55)

[アセット] UFPS: Ultimate FPS (税別 $75)

[アセット] FlowCanvas (税別 $70)

 

BTA(平均値) 

[ゲーム] Wasteland 2: Director's Cut (税込¥3,090)

[ゲーム] The Final Station (税込¥1,480)

[ゲーム] Wasteland 2: Director's Cut (税込¥1,980)

[アセット] Realistic Effects Pack 4 (税別 $35)

[アセット] Ultimate Game Music Collection (税別 $55)

[アセット] GameFlow (税別 $50)

 

$15

[ゲーム] Torment: Tides of Numenera (税込¥4,580)

[ゲーム] Shadow Tactics: Blades of the Shogun (税込¥ 4,480)

[講座] Discover Unity Game Development - From Zero to 12 Games (税別 $600)

[アセット] uMMORPG (税別 $80)

[アセット] Heroic Fantasy Creatures Full Pack Volume 1 (税別 $349)

[アセット] Universal Sound FX (税別 $40)

[アセット] Gaia (税別 $67)

 

繰り返しになりますが、$15支払った場合、これらを全て入手できます!

 

おすすめ

$1にもビジュアルスクリプティングのFlowCanvasが含まれ、$15には地形生成アセットのGaiaなど大変有用なアセットがあります。

BTAは記事作成時点で$11.70となっているので、せっかくだから$15出すべきです。

どれか1つでも欲しいものがあった場合、迷わず買うべき破格なバンドルだと思います。

ゲームの方は結構過去のバンドルに含まれていたりセールされてたりするので、既にお持ちの方も多いと思いますが

f:id:chirotec:20180905214902p:plain

 

追記 9/8】

汗人柱様の記事にて、アセットの内容をとても詳しく解説されております。

ご紹介いただき、本当にありがとうございます!

www.asset-sale.net

Unityの3D空間上のフォント

UnityでUIを作るには、Canvasを作り、その下に各種オブジェクトを配置します。

普通はスクリーン上にそのまま映るようにしますが、これがVRだったとすると画面にそのまま張り付くと非常に目が疲れます。

3D空間上に文字を配置する場合、まずCanvasを配置し、RenderModeをWorld Spaceにします。

f:id:chirotec:20180903085120p:plain

下にTextコンポーネントを配置すると、以下のように3D上に文字を浮かべることが出来ます。(色などを変更しています)

f:id:chirotec:20180903084824p:plain

 

問題

ただ、使っているうちに問題が発生しました。

・フォントのサイズを指定しても、反映されないことがある

・Textの"Best Fit"を有効にしていると、カメラを動かしているうちにエラーが発生して文字が表示できなくなる(おそらく文字のサイズが目まぐるしく変わるためテクスチャがうまく作れていない)

 

原因は調査中ですが、前者は設置するときにTextコンポーネントのオブジェクトのscaleを変更することで、とりあえず対応しました。

後者は表示する前にテキストの文字数を見て、scaleを変更するようにしました。

多分もっと良い方法がありそうなんですが……

【Unity】スプライトシートの読み込みとアニメの作成

前回の記事で作ったスプライトシートを、Unity上でアニメーションをさせてみます。

今回は簡易メモ的な内容です。

 

スプライトエディタ

以下が前回作成した画像です。

f:id:chirotec:20180805230249p:plain

上記の画像を

Assetsフォルダ以下のどこかに置き、Inspectorウィンドウで

Texture Typeを"Sprite(2D and UI)"

Sprite Modeを"Multiple"とします。

これでスプライトシートが読み込めるので、Sprite Editorボタンを押します。

 

Sprite Editorが立ち上がるので、上の"Slice"ボタンをクリックします。

f:id:chirotec:20180813075014p:plain

これで、各アイコンがスプライトとして使えるようになりました。

Projectビュー内のスプライトシートに▶アイコンが表示されており、その中に含まれる各画像がスプライトとして単独で使えるようになっています。

 

スプライトのアニメ作成

先ほど作成されたアイコンのスプライトをProjectビュー内で複数選択して、Sceneビュー内にドラッグアンドドロップすると、自動でアニメーションが付いた2D Spriteが作られます。(この操作はスプライトシートでない普通のSpriteでも出来ます)

作られたときには12fpsとなっているようなので、必要に応じてAnimationウィンドウで適切なfpsに変更したり、キーフレームの間隔を変更したりすると良いでしょう。

f:id:chirotec:20180813080958p:plain

【画像編集】ImageMagick 7で画像を操作してみます(後編)

昨日の記事の続きです。今回は引き続き使用例を紹介したいと思います。

convertコマンド

画像変換を行うとき、多くの場面ではこのconvertコマンドを通します。

現在のImageMagick 7では、"magick"コマンドの引数として"convert"を呼び出します。

例えば

magick convert a.png b.jpg

と入力すると、PNGの"a.png"ファイルの画像をそのままJPEGの"p.jpg"ファイルに出力します。ファイル形式は拡張子を見て自動で変換されます。

例えばここで-resizeオプションと-qualityオプションを追加して

magick convert a.png -resize x200 -quality 70 b.jpg

とすると、画像のアスペクト比を保ったまま横幅を200にリサイズし、品質70でJPEGファイルが圧縮されて保存します。このように、非常に多彩なオプションが存在し、色々な操作を行うことが出来ます。

以下が公式の説明ページです。

www.imagemagick.org

あまりに多すぎてとても把握しきれませんが、やりたいことをGoogleなどで検索すればなんとかなるかもしれません。

 

スプライトシートとは

ゲーム制作で例えばキャラや装備などのアイコンを大量に用いるとき、または2Dキャラクターをパラパラアニメの要領でアニメーションさせるときなどは、大量の画像が必要になります。1枚1枚ロードしても良いですが、ローディング時や描画時にパフォーマンスが問題となる場合があります。

こういう場合は、1枚の大きな画像ファイルに小さな画像を大量に配置して利用することが多いです。特にUnityの場合、複数のアイコン画像を一画面に同時に描画する場合にはドローコールバッチングが働き、描画負荷を大幅に減らせる可能性が高いです。

同じサイズの小さな画像を等間隔のマス目上に配置したものをスプライトシート、任意の異なるサイズの画像をパズルのように配置したものをテクスチャアトラスと呼ぶことが多いようです。

 

例えば、Adobe Animate(旧:Adobe Flash)では以下のように作成します。

helpx.adobe.com

 

スプライトシートを作ってみる

ImageMagickで、スプライトシートを作ってみます。

仮素材の作成

本来は素材となる画像ファイルを用意するのですが、仮画像の作成もImageMagickで行ってみます。

Windowsを例として説明すると、"makeicons.bat"などというファイルを作り、そのフォルダの下に"tmpimg"という空のフォルダを作り、バッチファイルを実行すると、仮のアイコン画像が作成されます。

@echo off
REM 連番の呼び出し
setlocal enabledelayedexpansion
for /l %%i in (1,1,80) do (
  set num=00%%i
  set num=!num:~-3,3!
  call :makeicon !num!
)
endlocal

REM アイコンの作成
:makeicon
magick convert -size 100x100 xc:none ^
 -fill "#CC0000" -draw "roundrectangle 0,0 99,99 20,20" ^
 -fill "#FFFFFF" -draw "roundrectangle 3,3 96,96 20,20" ^
 -fill "#990000"  -font "M+-1m-medium" -pointsize 60 -gravity center -annotate +0+0 %1 ^
 tmpimg/icon%1.png
exit /b

上記のバッチファイルを実行すると、icon001~080.pngと連番の付いたアイコンファイルが作成されます。

Macなど他のOSならシェルスクリプトを書けば良いのかな? そもそもWindowsでもbash等使えますし

f:id:chirotec:20180805223246p:plain

画像の結合

素材を用意したので、次はその画像を結合します。

今回は1024x1024のサイズにするため、10x10の配置に並べます。

magick montage tmpimg/*.png -tile 10x10 -geometry +0+0 -background transparent icons1.png

上記のコマンドを実行すると、tmpimgフォルダの画像が全て連結され、一枚の画像が作成されます。隙間なく並べるために-geometryオプションを使っています。

f:id:chirotec:20180805225913p:plain

しかし上記の画像のサイズは1000x800です。上記のままでも読み込めますが、互換性やパフォーマンスを考えると、1024x1024のサイズにしておきたいです。

もしかするとこのままでも、設定次第でUnityでのImport、Build時に調整されるのかな?

 

そこで、続けて以下のコマンドを実行します。

magick convert icons1.png -gravity northwest -extent 1024x1024 icons.png

f:id:chirotec:20180805230249p:plain

左上(northwest)に画像が寄った状態で、画像サイズを1024に変更出来ました。