09// 1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31. //11
 

武蔵野日記帳

トレインビジョンの再現や、作り方の紹介、鉄道音の収録をしています...

トレインビジョン再現方法(作り方) 【映像編】  

この記事は【映像編】と題しまして、最近のトレインビジョンでよく見かける「出てきたり潰れたりする駅名の切り替わり表示」を再現する設定を紹介していきます。是非読みながら実践し、作ってみてください!

(AviUtlのインストール方法、基本的な使い方に関しては、こちらではあまり紹介していませんので、各自でお調べいただければと思います。ネット上に解説動画がたくさんあります)



この記事では、画像は既に製作済みであると仮定して書いているので、まだ画像を製作していない方はこちらを参考に製作してみてください。

トレインビジョン再現方法(作り方) 【導入編】 …全くの初めてという方向け。

トレインビジョン再現方法(作り方) 【トレース編】 …画像製作でオススメの方法です。

トレインビジョン再現方法(作り方) 【画像編】 …かつて製作した画像作成の記事ですが、内容が難しくなっています。




また、よく「セサミクロ」と呼ばれますが、セサミクロというのは 組込みCPU(PC用の汎用CPUよりも性能が低いCPU)で高速に描画処理を行うという"三菱電機"の技術なので「あの駅名表示=セサミクロ」というわけではなかったりします。

-------------------------------------------------------

まず、【導入編】【トレース編】を実践された方は、以下点線まで読み飛ばしてください。

では、さっそく説明に入っていきます。

以下のプラグインを一式インストールしてください。インストール方法については詳しい説明が書き記されているので、読めば理解できると思いますが、どうしても理解出来ない場合は、コレを参考にしてみてください。プラグインのインストール自体は、そんなに困らないはずです。

さつきさんのページ#script

エフェクトの開発者さつき氏と、AviUtlの開発者KENくん氏には、この場を借りて深くお礼申し上げます。


なお【画像編】や【トレース編】で製作したプロジェクトは、しっかり名前をつけて保存しておいてくださいね!!AviUtlは、標準設定では「変更を保存する」といった通知は出ませんので、保存しないままプログラムを閉じると、折角作ったプロジェクトは失われてしまいます。


【画像編】を参考に製作した方は、プラグインをインストールしましたら、AviUtlを再起動してください。そして「編集プロジェクトを開く」から、先ほど保存したプロジェクトを読み込みます。記事はこの先点線の下まで読み飛ばしてください。

ここから先しばらくは初見の方向けの記事となります。

AviUtlを起動します。
train-vision_02.png
AviUtlは、拡張編集プラグインまでインストールしてください。
この辺の説明は他所にお任せします…。。


ご自身で製作したLCD画像をD&Dしてください。
すると、このような設定画面が出ると思います。
train-vision_03.png
JR埼京線、京葉線などで採用されているトレインビジョンは、横1280×縦768(縦横比5:3)ですので、このように設定します。他の設定は変更しなくてよいでしょう。
ちなみに、多くの私鉄(メトロ、東急、西武など)で採用されている横長のトレインビジョンは、横1280×縦720(縦横比16:9)が一般的です。JR東日本では、京浜東北線のE233系1000番台のみこのタイプの液晶です。これらの路線を再現する方は、横1280×縦720と設定してください。
なお、読み込むファイルに合わせるのチェックは外してください。

※ちなみに、実物のフレームレートは60fpsだそうです。そりゃ60fpsもあればあれだけ綺麗に動くだろうなと しみじみと思います。上の設定で60fpsにすると色々と大変なことになるので30fpsにしておきましょう。


こんな感じで読み込まれればOKです。
train-vision_11.png

拡張編集画面上で右クリック→メディアオブジェクトを追加→テキストを選択
「MS UI Gothic」と書かれたところをクリックしてフォントを選び、駅名を入力。
「文字色の設定」を押して黒にしたり、場合によっては「B」を押して太字にする必要もありますね。
Windows環境でしたら、日本語フォントはメイリオ太字、英語はArial太字が良いと思います。

こんな感じで文字が出ていればOKです。
train-vision_12.png
「次は」はおまけで付けただけなので、なくても構いません。


---------------------------------------------------------------------------------------

このテキストオブジェクトに効果をつけていきます!

「出てきたり潰れたりする表示」を適応させる駅名表示(上の例なら「与野本町」です)のオブジェクトをダブルクリックして、オブジェクトの設定画面を開きます。
右上の+ボタンを押す または右クリックして、アニメーション効果を選択します(だいぶ下の方にあります)。
train-vision_13.png

これで、駅名表示が震えるようになりました\(^o^)/
train-vision_14.png
…それが目的ではないですね(笑)

「震える」と書かれたところから、「各辺を縮小させる@ANM1」を選択します。
train-vision_15.png
この設定をいじるのですが、その前に、駅名が出てくるエフェクトと、駅名が潰れるエフェクトで、設定する値が異なるため、オブジェクトを分割します。

オブジェクトの真ん中あたりで、右クリック→分割を選択
train-vision_16.png

続いて、分割して出来た2つのオブジェクトそれぞれに中間点を追加してください(画像参照)。
train-vision_17.png
三角が、中間点を表します。

事前準備が整いました。いよいよエフェクトをかけます!

左のオブジェクトの左側をダブルクリックし、設定画面を開きます(設定画面が出てる状態でダブルクリックすると消えてしまうので、その場合はもう一度ダブルクリックします)。
そして、アニメーション効果エフェクト内部の設定ボタンを押します。
train-vision_18.png
ここで、
上辺中心:100
左辺中心:-50
下辺中心:100
右辺中心:-50
を入れてください。「OK」を押して閉じます。

続いて、エフェクト内の「左辺[%]」ボタンを押して「直線移動」を選択。同様に「右辺[%]」ボタンを押して「直線移動」を選択します。
しましたら、画像の通り、値を変更してください。
train-vision_19.png


同じ要領で、右のオブジェクトの右側をダブルクリックし、設定画面を開きます。
設定ボタンを押し、次の値を入れてください。
上辺中心:100
左辺中心:50
下辺中心:100
右辺中心:50
入力が終わりましたら「OK」を押して閉じます。
また、エフェクト内の「左辺中心」ボタンを押して「直線移動」を選択。同様に「右辺中心」ボタンを押して「直線移動」を選択します。
しましたら、画像の通り、値を変更してください。
train-vision_20.png

これで、試しに再生してみてください。
綺麗にアニメーションされるはずです!

英字の場合は、左辺中心、右辺中心の値を40や60など、適当な値に変更して、もっとも綺麗な切り替わりをする値を探してみてください。そのとき、左辺、右辺とも同じ値にしてください(違うと文字が歪みます)。


最後に、これらをコピーして、こんな感じにオブジェクトの始点・終点と中間点を揃えてみると…
train-vision_21.png
結果は、是非ご自身の目でお確かめください!!

これらのオブジェクトは、グループ化すると便利です。グループ化したものをコピーして増殖していきます。
…この辺はAviUtlの基本的な機能ですので、わからなかった場合は解説動画などをネット上で検索することとお勧めします。

---------------------------------------------------------------------------
2014/3/12 23:10 ひとつ書き忘れていたエフェクトがありました!
切り替わる際にフェード効果を付けてください!

まず、左のオブジェクトの設定画面を開き、右上の「+」をクリックして「フェード」を選びます。
選びましたら「イン」を0.5程度の数値に、「アウト」を0にしてください。
train-vision_30.png


同様に、右のオブジェクトにもフェード効果を追加します。
選びましたら「イン」を0に、「アウト」を0.5程度の数値にしてください。
train-vision_31.png

いい感じになります♪

ちなみに、、
切り替わりを0.5秒にしつつ、駅名の切り替わり自体を0.4秒にするにすると、リアリティが増しますよ!
train-vision_32.png
中間点の位置:基点から0.4秒
フェード効果:0.4


---------------------------------------------------------------------------

…いかがでしたか?
AviUtlに使い慣れていなくて難しかったり、そもそもインストールに手こずっている人もいるかもしれません…。
AviUtlはフリーソフトである代わり、導入して使えるようにするまでが結構大変なんです。特にエンコードの設定!これは本当に面倒です(高画質保存する場合はAvi形式では重すぎるので、mp4形式でエンコードすることをお勧めします、コーデックのインストールがかなり面倒ですが…)。
また、以前にも書いたとおり、バックアップが自動保存されないので、こまめに上書き保存するのが重要です。ただ、設定がおかしくなった状態で上書き保存してしまうと、読み込む度にエラーが起きて、データが全て駄目になってしまいます。こまめにデータのバックアップを取っておくのもお勧めです。

デメリットもありますが、とにかく、このソフトは慣れてしまえば、強力なツールになります!

是非この「むさドリ式」トレインビジョン再現方法を試してみて、トレインビジョン再現の世界に足を踏み入れてみてください!!
関連記事
mixiチェック
ブログランキング・にほんブログ村へ←ランキングに参加しています。

カテゴリ: トレインビジョン

page top

コメント

こんにちは はじめまして。

動画を見させていただいたところ、感動しました(笑)
このようなものを実際に作ってみたいなと思いまして作らせていただいているのですが、aviutlでトレインビジョンの種別・行先表示が切り替わるものはどのような設定でできるのでしょうか?
初心者的なで質問すいません。

mofumofu@64 #- | URL
2013/10/15 03:53 [edit]

>>mofumofu@64さん
はじめまして。ご評価ありがとうございます。

文字オブジェクトを2つ用意して「フェード」エフェクトをつけ、それぞれフェード時間分だけ2つのオブジェクトを重ねてください。
もちろん、オブジェクトはそれぞれ1つのレイヤーを使用しますので、計2つ使うことになります。

…と説明しても分かりにくいと思いますので…
上記の記事の 『最後に、これらをコピーして、こんな感じにオブジェクトの始点・終点と中間点を揃えてみると…』 を実際に製作し、それぞれのオブジェクトの「中間点」と「アニメーション効果」を削除してみてください。
※オブジェクトをダブルクリックした際に表示される詳細設定画面で、「アニメーション効果」と書かれた部分を右クリックすることで削除の項目が出てきます。
なお、中間点削除→アニメーション効果削除の順番で行ってください。

製作、頑張ってください!

MusashinoDream #n4waDJkM | URL
2013/10/16 19:15 [edit]

はじめまして。
私もLCDを製作しているのですが、拡張編集で文字を打ち込んで、再生ボタンを押しても動画のプレビューが再生されません(;_;
jpg,png両方の画像ファイルで試したのですが、どちらもダメでした。。
どうすればよいのでしょうか?

oruk3201 #- | URL
2014/03/02 08:30 [edit]

>>oruk3201さん
はじめまして。コメントありがとうございます。
色々な可能性が考えられるので、なんとも言えないというのが本音ですが、ひとまず、00:00:01.00のところに画像を配置し、最初から再生させてみてください。その後、動画で保存してみてください。これで上手く再生、保存されていれば問題ないでしょう。
ちなみに、拡張編集左上のRootの下の点線みたいなものをいじれば、タイムラインの拡大率が変わります(Ctrl+マウスホイールでも出来ます)。

MusashinoDream #n4waDJkM | URL
2014/03/03 00:29 [edit]

ありがとうございます。無事、解決しました。
https://www.youtube.com/watch?v=TmrCreQvqAU
こちらの動画で貴方様が記載している、「フェード効果」とはどこにあるのですか?
別にダウンロードしなければならないのですか?
度々すいません。

oruk3201 #- | URL
2014/03/03 17:53 [edit]

>>oruk3201さん
エフェクトをかけたいオブジェクトをダブルクリックして、設定画面を開きます。
設定画面右上の「+」ボタンをクリックすると、この中に「フェード」というのがあります。
試してみてください。

MusashinoDream #n4waDJkM | URL
2014/03/04 01:18 [edit]

ありがとうございます!

oruk3201 #- | URL
2014/03/04 17:03 [edit]

D&Dってなんですか?

名無し #- | URL
2014/03/14 19:44 [edit]

>>名無しさん
D&D=ドラック&ドロップです。
drag-and-drop 直訳「引きずって、手離す」の通り、クリックしたあと手を離さずに引っ張って、目的のところで手を離すという、PC操作の一つです。

MusashinoDream #n4waDJkM | URL
2014/03/14 22:36 [edit]

こんばんは
途中まで作った画像でさっき試験的に動画を作成しようとしましたが、
ファイルには対応してませんというふうに出てきてしまいました。
pngじゃ出てこないんですか?
何のファイルだと出てくるんですか?

kana #OhX/IMBs | URL
2014/03/20 18:49 [edit]

>>kanaさん
PNGはAviUtlで読み込めます。
読み込めないという事態になったことがないので、詳しい返答は出来ませんが、PNGファイルに問題がないか今一度ご確認ください。
どうしても読み込めないようであれば、ファイル形式をBMP形式などに変えて読み込むのも手です。

MusashinoDream #n4waDJkM | URL
2014/03/21 18:23 [edit]

わかりました
頑張って制作してみます!

kana #r6vVPOu6 | URL
2014/03/21 18:36 [edit]

Twitterでお世話になっています。
オブジェクトの分割から中間点、エフェクトあたりが上手く行きません。どのようにすればよいかを少し追加していただくと嬉しいです。
(ちなみにトレインビジョンを作るためにAviUtlをインストールしました。

あと、他のアニメーション(ご案内.ドア開閉など)はどのように作れば良いのでしょか?



初心者なので、すみません

TAKADA PA #- | URL
2014/05/22 22:43 [edit]

>>TAKADA PAさん
ご無沙汰です。
これ以上うまく説明できないんですよね。現在トレインビジョン再現のAviUtlプラグインを開発中なので、それまでお待ちいただいてもよろしいでしょうか?

また、質問はTwitterのリプライで聞いていただいてOKですよ。

ではでは。

MusashinoDream #n4waDJkM | URL
2014/05/23 22:41 [edit]

こんばんは。KJです。質問ですが、いま公開しているトレインビジョンの駅構内図はどのようなソフトで制作しているのでしょうか?

KJ #- | URL
2014/07/25 00:42 [edit]

>>KJさん
コメントありがとうございます。
駅構内図は、AviUtlのカメラ制御というものを使用しております。
ちょっと難しいやり方になってしまうので、ブログの掲載は見送っております。
現在AviUtlのスクリプト作成をしているのですが、このスクリプト中で駅構内図を盛り込めないか検討中です。

MusashinoDream #n4waDJkM | URL
2014/07/30 10:02 [edit]

こんにちは。KJです。また質問させていただきます。AviUtlを使用していて、カーソルが0:00.00から移動できなくなっているのですが、これは設定によるものなのでしょうか?

KJ #- | URL
2014/10/04 15:37 [edit]

>>KJさん
新規プロジェクトが作成できていなかったりはしてませんでしょうか?
それか、誤って選択範囲の削除を利用してしまったか…

あとは、実際の画面を見てみないと分からないですね…>_<

MusashinoDream #n4waDJkM | URL
2014/10/05 12:39 [edit]

page top

コメントの投稿

Secret

page top

トラックバック

トラックバックURL
→http://musashinonikkityo.blog6.fc2.com/tb.php/892-97d02487
この記事にトラックバックする(FC2ブログユーザー)

page top

武蔵野日記帳へようこそ!

Twitter

WEBサイト「武蔵野の部屋」

リンク

最新記事

最新コメント

カテゴリ

検索