Animator』でVTuberを作ろう!OBS編#22月72019だいぶ現実味が出てきましたよ。はい、そういうわけでございまして。今回はなんと前回から中1日で更新でございます。いやー、ゆとりがあるって素晴らしいわあ。......まあ、あったらあったでワタシのような人間は自堕落な生活にドップリなのですが。今回は間隔が空いておりませんので、記憶万全の状態で続きをはじめられます。ふははは、覚えているって素晴らしい。今回はここまで!こんな感じになりました!今回は最初に、ゴールをお見せしてしまいましょう。OBSを使って、コロボ君を他の画面の前に配置したら......こうなりました!https://sarudeki.com/wpf/wp-content/uploads/2019/02/20190207.mp4(動画はYouTubeのBリーグ公式チャンネルより)おおー!超それっぽい!動画が流れていて、コロボ君がその前で動いていて、おまけに枠付き。うんうん、こんな感じの配信、YouTubeで見たことありまっせ!ほっほっほ。近づいてきましたねえ。金銀財宝の足音がもうすぐそこまで......コホン。それでは、制作過程を順番に見ていくことにしましょう。Studioを開いたら、設定スタートです。Studio」の画面です。右下のゴチャっとしている部分を除けば非常にシンプルな作りに見えます。触らぬボタンに祟りなし。今回は左下の方を中心にイジってみることにしましょう。こちらが「シーン」を設定するパネルです。シーンというのは「合成後の画面」のことで、最終的にはこのシーンが配信されたり録画されたりします。複数のシーンを用意しておくことで、切り替えながら使うことができるのが特徴です。1:特定のアプリケーションの画面シーン2:配信している人を映している画面シーン3:アプリ画面の上に人の画面を合成している画面こんな感じで用意しておいて、ポチポチと配信中(録画中)に切り替えるイメージです。なってくると、ほとんどテレビの世界ですねえ。今回は最初なので、シーンはひとつだけにしておきます。シーンが用意できたら、隣の「ソース」と書かれているパネルの方に移動しましょう。こちらが「ソース」を設定するパネルです。ソースというのは、源、つまり、「元となる画面」のことで、ここでシーンを構成する画面を選択、追加します。「+」ボタンを押すと、ソースとして選ぶことができる画面の種類が表示されるのですが......いろいろありますね......。今回はこの中から、3つのソースを組み合わせることにしました。・最後に、枠を表示するための「画像」この3つです。順番に見ていきますね。その1(ウィンドウキャプチャ)まずは、土台となる動画のウィンドウを引っ張ってきましょう。そのときに使うソースは、「ウィンドウキャプチャ」です。ソースのパネルで「+」ボタンを押して、ウィンドウキャプチャを選択すると、ウィンドウキャプチャの作成画面が出てきます。「新規作成」にチェックを付けて、「OK」ボタンをポチッとな。プロパティ画面が表示されるので、ソースプルダウンリストから対象のウィンドウを選びます。今回は、事前にYouTubeのウィンドウを立ち上げておきましたので、それを選択、と。Animator上のコロボ君を引っ張ってきましょう。そのときに使うソースは、「ゲームキャプチャ-サイフォン(Syphon)」です。Animatorからコロボ君を引っ張って来ることができる便利な仕組み』くらいで覚えておきましょう)では、先ほどと同じようにソースパネルで「+」ボタンを押して、ゲームキャプチャ(サイフォン)を追加、と。Animatorの画面に移動します。Animatorの)シーン画面で、コロボ君の右下にあるこちらのアイコンを「ON」に。Animator」が表示されるようになります。「透過を許可」のチェックボックスを「ON」にしておいてください。この設定をすると、コロボ君の周囲が透過(透明)になります。ここまでできたら、OKボタンをポチッとな。おー!YouTubeの画面の上にコロボ君が乗っかりましたよ。その3(画像)最後に、枠を付けてみましょう。いうのは雰囲気が大事です。枠を付けるだけでグッと「それっぽさ」UP。枠は画像で作りますので、そのときに使うソースはそのままズバリ「画像」です。ソースパネルで「+」ボタンを押して、「画像」を選択します。枠の画像ファイルを指定しましょう。今回はあらかじめシンプルな木目調の枠を作っておきました。ちなみに画像を作る際のポイントは、こんな感じです。1080px」を設定)・動画が表示される部分を切り抜いて、透過ファイルとして保存(PNGファイルにしました)これで、OKです。配置したソースを調整しようここまでで一応「基本の設定」はできたのですが、シーンをより美しくするために、もう少しだけ調整します。「ソースの並び順調整」を。ソースは、ソースパネル上で「一番上にあるものが一番前」「一番下にあるものが一番奥」という並びになっています。「コロボ君」を「枠」の前に持ってきたい場合は、こんな感じに並び順を修正します。次に、それぞれの「ソースのサイズ&位置調整」を。ソースは、プレビュー画面でサイズの調整と位置の調整が可能です。選択しているソースには「赤い枠線」が表示されますので、端っこを掴んでグイッと調整してください。基本的に縦横比はロックされているのですが、「Shift」キーを押しながらドラッグすると縦横比も変えられます。サイズ調整モノでもうひとつ。「Alt」キーを押しながらドラッグすることで、クロップ(切り抜き)をすることができます。「緑の枠線」になっているときは、クロップモードです。ソース内に不要な部分がある場合は、この機能を使って見えないようにしてしまいましょう。はい!これですべての調整が完了しました!プレビュー画面の最終的な形はこんな感じになりましたよー。最後に、右下にある「録画開始ボタン」を押して撮影したのが、最初に見ていただいた動画です。(YouTubeの画面でっせ、をわかりやすくするために、向こうはウィンドウのメニューバーを表示しています)今回はここまで!なるほど。こんな感じで、VTuberのみなさまは配信しているのですね。FaceRigを使う場合も、基本的な考え方は同じようなものではないかと。......気になることがありますよね。この動画、超カクカクしているのです。YouTubeの動画を再生しながら→コロボ君を合成しながら→録画しているので、ある程度は仕方がないとは思いますが、それにしたってこれでは落ち着いて見ていられません。......え?もしかして、要るの?スーパースペックのパソコン。滑らかな動画撮影ができるのかどうかを試してみようと思います。背景には知られざる店主の苦労が』(Yahoo!生活系ニュースランキングより)1月11日(土)週の後半、東京を往復しておりました。旅のお供に買ったのが「3月のライオン」で、そこには作者である羽海野チカさんの愛猫「ブンちゃん」とのお別れについて書かれていました。いつも一緒にいてくれて、机の上に鎮座し、作品作りを助けてくれたブンちゃんとの別れ。ワタシもウチにいる2匹の猫たちのことを思い出して、飛行機の中でアワアワしていました。いつかこの子達も天国へ旅立っていくのかと思うと、もっと可愛がってあげないとなーと思います。現在マウスを持つ右手をガッチリホールドしていますが、まあ仕方がないよね、と思うことにしましょう。できれば少しだけ位置を変えてくれまいか。それと、暇つぶしに噛み付くのも控えていただけると助かるのだが。今日もさるできに遊びに来てくれてありがとうございます。Agent』を120%使い倒す方法2019年6月21日Search:仕事机の上にて絶賛兄弟喧嘩中。このWebサイトについて「さるにもできるアレコレ」、略して『さるでき』と言います。10年位前にiPhoneアプリの作り方を書き始めて、以降書いたり休んだりを繰り返して、Webサイトの場所も転々として、のんびり今日も運営をしております。最先端の技術は、見ているだけでワクワクします。「ただ見ているより使ったほうが」「ただ使うより作ったほうが」、もっともっとワクワクすると思うのですが、そこは流石に最先端の技術、専門家でもないワタシにとっては「ムズカシイ」の千本ノックでした。下手でも良いから、さる真似でも良いから、最先端の世界をみんなで一緒に楽しめるようにしたい。そんな想いではじめたのが、この『さるでき』です。する技術を、「なるべくわかりやすく」「なるべく面白く」、実際に使って作って、失敗したり成功したりの一部始終をお届けしています。「サルでき」と「さるでき」が混在していますが、どちらも正解です。平仮名の方が柔らかくて好き、くらいの気持ちです。ありがたいことに、多くの方に読んでいただいて、本にまでなりました。「さるでき流」が目印です。書いている人についてカワサキタカシと言います。株式会社マイウェイ」を営んでおります。い、猫の世話、その他諸々。業務に関わることは(あまり関わらないことでも)なんでも行う、所謂『なんでも屋』です。起業8年目にして『沖縄移住』の夢を叶えました。海を見ながら、バスケを観ながら、のほほんと沖縄スローライフを満喫する...予定でしたが、むしろ東京に住んでいた時よりもバタバタしている気がするサー。