ソースに絡まるエスカルゴ

貧弱プログラマの外部記憶装置です。

【Blender】Blender2.8のシェーダーエディタ（旧ノードエディタ）で画像を合成する

Blender Blender2.8

　最近Blender2.8のシェーダーエディタ（旧ノードエディタ）を触ってみています。

　今回はタイトルにある通りシェーダーエディタで画像を合成する方法です。

　では始めます。


１：合成する画像を用意する
　今回は以下の3つの画像を合成していきます。画像それぞれをダウンロードして名前を付けて保存してください。

・logo.png
f:id:rikoubou:20190723142321p:plain

・grid.png
f:id:rikoubou:20190729172211p:plain

・map.png
f:id:rikoubou:20190729172201p:plain


２：Blender2.8でシェーダーエディタに画像を読み込む
　画像の準備ができたのでBlenderでノードを組んでいきます。

　Blenderを起動させて出てくるデフォルトキューブを削除し、Planeを追加します。
f:id:rikoubou:20190729175232p:plain

　追加したPlaneを選択した状態で「Shading」タブを選択します。
f:id:rikoubou:20190729175423p:plain

　Shading画面になるので「New」ボタンをクリックしてPlaneにMaterialを追加します。
f:id:rikoubou:20190729175544p:plain

　ノードが追加されるので「Principled BSDF」をクリックで選択して「X」キーを押して削除します。

f:id:rikoubou:20190729175912p:plainf:id:rikoubou:20190729180030p:plain

　シェーダーエディタ上で「Shift + Aキー」から「Texture」→「Image Texture」を選択して追加します。
f:id:rikoubou:20190729180234p:plain

「Image Texture」のノードが追加されるので「Open」ボタンをクリックして画像を読み込みます。
f:id:rikoubou:20190729180519p:plain

　画像を読み込むと以下のようになります。
f:id:rikoubou:20190729180610p:plain
　
　同様にして他の画像についても「Image Texture」を追加して「Open」ボタンから画像を読み込みます。
f:id:rikoubou:20190729180902p:plain

　ちなみにこの状態で「Material Output」の「Surface」にそれぞれのノードの「Color」を繋げてやるとPlaneに画像が表示されます。
f:id:rikoubou:20190729181319g:plain

　これで画像の準備ができました。


３：Blender2.8のシェーダーエディタで画像を合成する
　ではこれらの画像をノードを使って合成していきます。

　シェーダーエディタ上で「Shift＋Aキー」を押して「Color」→「MixRGB」を選択して追加します。
f:id:rikoubou:20190729181539p:plain

「Mix」のノードが追加されます。
f:id:rikoubou:20190729181749p:plain

「map.pngのColorをMixのColor1」に「grid.pngのColorをMixのColor2」に「grid.pngのAlphaをMixのFac」にそれぞれ繋ぎます。
f:id:rikoubou:20190729182012p:plain

　この状態で「Material Output」の「Surface」にMixの出力を繋ぐと以下のようにmap.pngの上にgrid.pngが合成された画像になります。
f:id:rikoubou:20190729182314p:plain

　さらにこの結果にlogo.pngも合成する場合も「MixRGB」ノードを追加して「Mixの結果を新たなMixのColor1」に「logo.pngのColorをMixのColor2」に「logo.pngのAlphaをMixのFac」に繋げばOKです。
f:id:rikoubou:20190729182831p:plain

　ちなみにすべてのノードの「AlphaとFac」を繋がない場合だと、以下のようにそれぞれの画像を不透明にした状態で混ざったような形になります。
f:id:rikoubou:20190729183105p:plain


　以上がシェーダーエディタで画像を合成する方法です。

　ノードをどう繋いだらどうなるというのが中々想像できないので難しい印象はありますが、ちょっとずつノードを理解できるようになりたいです。


・参考資料

【映画鑑賞】天気の子の感想（ネタバレあり）

ネタバレ 映画 天気の子

www.youtube.com

「君の名は。」で一躍有名になった新海誠監督最新作の「天気の子」を鑑賞しました（記事執筆時点で2回鑑賞しています）。様々なところですでに色々と語れてている本作ですが、自分なりの感想もまとめておこうと思った次第です。

　基本的に「ネタバレを気にしない」方向でいくので注意してください。

　では始めていきます。



１：初鑑賞の衝撃と戸惑い
　初鑑賞時は初日の初回でした。映画館への道のりは小雨だったのに、鑑賞後に映画館を出ると青空が見えるほど晴れていて「これが100%の晴れ女か」などと思ったことを覚えています。

　蒸し暑い帰り道の中で天気の子の感想を考えていて、まず率直に浮かんだのが「道徳的、倫理的にこの作品はどうなの？」という疑問でした。
　主人公である帆高が拳銃という暴力を使ったり、線路を走ったり、廃墟への無断立ち入り等々、違法行為を重ねていくことに対し、個人的にあまり気分の良いものではありませんでした。やっていること全てが自分勝手のように見えてしまっていました。そして最後には「天気なんか狂ったままでいい」という選択をして東京を水没させます。帆高がそこまでの惨事になると想像した上での選択かどうかはわかりませんが、結果としてヒロインの陽菜一人を救うために東京を水没させたというのが作品内での事実です。私は「できる限り最大多数の最大幸福を目指すべき」という考え方をしているため、このラストが衝撃的であると共になかなか受け入れ難いものでした。「一人の青年がセカイに対して想いを貫き通した」という物語はとても好きなのですが、違法行為の数々や東京を犠牲にしてでも一人を守るということに対して正当化するような印象を受けてしまい、好きなのか嫌いなのかよくわからないという状態になっていました。

　しかし、この作品が伝えたかったことを考えていくうちに「自分の見方が一方的なものに過ぎない」ことに気づいてからは一気に好きな作品になりました。


２：常識(マジョリティ)と非常識(マイノリティ)
　この作品のメインとなるキャラクターは家出少年、親のいない子供達、オカルト記事のライターなど特殊な環境、まさにマイノリティ側の人たちばかりです。物語の後半はそんな彼らに警察という常識がどんどん介入していきます。帆高を逮捕してパトカーで輸送している時に警察側がイライラして舌打ちをする描写もありました。
　初回の鑑賞時に感じたモヤモヤは、まさにこの「警察側、常識(マジョリティ)側の見方をしていた」ことによるものだったと思います。警察側は法に則って行動しているだけであり、帆高たちの言動は理解できるものではありません。「最大多数の最大幸福」を考えるのであれば、警察側と同じように受け入れ難く感じると思います。私もそのように感じていました。

　しかし視点をメインのキャラクター、マイノリティ側に移してみると帆高は拳銃をたまたま手に入れてしまったために、陽菜は親が亡くなってしまったのとたまたま天気の巫女になってしまったために、須賀は事故で妻を亡くしてしまったために、それぞれマイノリティ側にならざるをえなかったという背景もあります。「世界なんて元々狂ってるんだからさ」という須賀のセリフにあるように、外的要因によって狂わされた人たちがメインのキャラクターになっているということです。
　そんな彼らの背景を知らないマジョリティ側からすればどうしても苛立ちや拒否感を持ってしまうのだと思います。マイノリティ側とマジョリティ側が対峙する時の溝の表現として拳銃を向けあったり押さえつけたりなど、暴力でしか繋がりを持てないという悲しさも描かれています。これをより拡大して解釈すると、この作品は「マジョリティである大人」と「マイノリティである若者」の対立の話も描いているのではないかと思っています。

　少子高齢化と呼ばれて久しく現代の日本は人口比で見ても若者がマイノリティになっています。その若者が「マジョリティであるセカイを敵に回しても、たった一つの想いを貫き通す」という内容は、マイノリティ側にとってとても力強いエールになっているのではないかと思います。


３：ラストシーンで描かれる希望
　何より救われたと感じたのは、東京が沈んだ後に須賀が言った「お前のせいじゃない。自惚れるな」というセリフです。須賀が天気の巫女の話を信じていてもいなくても、その一言で帆高の気持ちは多少なり楽になったと思います。そしてそれを言える「大人の立場」の須賀という存在自体がマジョリティとマイノリティを繋ぐ希望の象徴のようにも感じられました。

　世界が変わってしまった後の帆高と陽菜が再会してからの最後の言葉「大丈夫だ」というのも非常に力強く勇気を与えてくれます。というのも、帆高は陽菜と再会したことで「世界を変えてしまった」ことを確信しその上で「大丈夫」と言ってる、つまりは「変えてしまった世界」に対する責任を意識しているからこそ出た言葉だと思います。今のセカイを受け入れて「大丈夫」だと、明るい未来へと進んでいこうとしている希望のある終わり方だと思います。


４：まとめ
　ある程度の年齢を重ねてしまっているために、最初の感想として「受け入れ難い」という大人な視点で鑑賞してしまっていました。それ自体が色眼鏡であり、若者の言葉に耳を傾けない古く凝り固まった考え方であったように思います。

　古いしがらみに対して「ぶっ壊してもいい、若者に未来を切り開いてほしい」という純粋な想いが込められている作品だとそう感じました。それに気づいた時、途端に好きな作品になりました。

　若者に対する希望とエールを伝えてくれるこの作品は、ずっと心に残るものになるという予感がしています。
　好きだと言える、そんな「天気の子」という作品に出会えて本当によかったです。
　

・参考資料

【Blender】Blender2.8で宇宙っぽいものをノードだけで作成する

Blender Blender2.8 シミュレーション

　Twitterに流れてきた上記のノードを写経してノードだけで宇宙っぽいものを作ってみました。
f:id:rikoubou:20190724173729p:plain

　実際に作成してレンダリングしてみると以下のようになりました。
f:id:rikoubou:20190724173607p:plain

　注意点としてはWorldの背景を黒にする必要があるのとMaterialを適応させたオブジェクトをある程度大きくしないといけないぐらいで、ノードを写経すればいけました。

　一応今回作成したファイルを公開しておきます。


・参考資料

【Blender】Blender2.8のノードについての個人的な備忘録

Blender Blender2.8

　時々TwitterなどでBlenderのシェーダーエディタ(旧ノードエディタ)の画像が流れてくることがあります。

　しかし全く知識のない自分がそのシェーダーエディタを再現しようとすると「これってどのノードを追加すればいいの？」ということが多々ありました。というか今でもわかっていません。

　なので今回は自分がシェーダーエディタで混乱した部分についての備忘録となります。

　自分が調べたり検証したりしたものなので、間違っている可能性もあります。その場合は指摘していただけると助かります。

　では、始めます。


１：ノードの色について
　Blender2.8のノードには、以下のように各ノードの種類によって色分けされています。
f:id:rikoubou:20190724144805p:plain

　この色分けはシェーダーエディタで「Shift+Aキー」を押して追加できるノードの種類ごとに以下のように決められています。
f:id:rikoubou:20190724150437p:plain

　Inputなら赤、Shaderなら明るい緑など、色からどの種類のノードかを推測することができます。


２：紛らわしいノードについて
　シェーダーエディタのキャプチャ画像からそれを再現しようとした場合、多くの人が躓くだろう紛らわしいノードは以下のものだと思います。
f:id:rikoubou:20190724152113p:plain

　これらのノードは「プルダウンで選択したものがノードの名前になる」ので、「Shift + Aキー」からの「Search」で検索しても出てこないので注意が必要です。
f:id:rikoubou:20190724151424p:plain

・青色の２つのノードについて
　上２つの青色のAddとなっているノードは違う種類のノードで左側が「Math」、右側が「Vector Math」になります。

　見分けるコツとしては以下の画像で示した部分になります。

注目点 Math Vector Math
Vectorの出力 無 有
Clampチェックボックス 有 無
設定項目 Value Vector

f:id:rikoubou:20190724152657p:plain

　またそれぞれのプルダウンで設定できる種類も違っています。

f:id:rikoubou:20190724153415p:plainf:id:rikoubou:20190724153530p:plain

・黄色のノードについて
　黄色のDivideも検索して出てこず、プルダウンによって名前が変わるこのノードは「Mix RGB」というノードです。

　プルダウンで出てくる種類がかなり多いので、探すときには注意が必要です。
f:id:rikoubou:20190724154120p:plain


３：ノード間の線をRerouteを追加して見やすくする
　ノードが多くなったり繋ぎ方が複雑になって見難くなる場合があります。
f:id:rikoubou:20190724154635p:plain

　その場合はRerouteという点を追加して折れ線のようにして見やすくすることができます。

　ノード間の線を「Shift + 右ドラッグ」で線を切るように動かすと、そこにRerouteという点が打たれます。また選択状態で「G」キーを押すとRerouteの位置をマウスで動かして左クリックで確定することができます。
f:id:rikoubou:20190724154920g:plain

　選択状態で左ドラッグするとそこからさらに線を伸ばすことができます。
f:id:rikoubou:20190724155314g:plain

　このRerouteの機能を使うことで多少見やすくすることができます。


　以上がBlender2.8でのノードについて調べたことです。

　ノードの再現をやろうとすると色々大変なので何かの助けになれば幸いです。
　また間違っていたりした場合はご指摘をお願いします。


・参考資料

【Blender】Blender2.8で透過テクスチャを適応させた影を作る

Blender Blender2.8 シミュレーション

　久しぶりのBlenderネタです。

　Twitterを眺めていたらタイトルにあるような方法をやっていた方の情報が流れてきたので、それを実際にやってみた備忘録になります。

　基本的には参考資料の最初にあるページ様の内容とほぼ同じなので、詳しいことはそちらを参照してください。

　では始めます。


０：使用する透過テクスチャの画像を用意する
　今回は以下のような透過画像を作成したので必要な場合は右クリックでpng形式で保存してください。
f:id:rikoubou:20190723142321p:plain

　以降はこの画像を使って説明していきます。


１：デフォルトCubeをUV展開して透過テクスチャを貼り付ける
　今回はデフォルトCubeをそのまま使っていきます。

　Blenderを起動してすでに出来ているCubeを選択した状態で「UV Editing」を選択します。
f:id:rikoubou:20190723142802p:plain

　以下のようなUV展開用の画面になるので、左側画面の上部分にある「Open」のボタンをクリックして貼り付けたい透過画像を読み込みます。
f:id:rikoubou:20190723143810p:plain

　読み込むと画像が表示されます。画像自体をblendファイルに同梱するために「Fake User」のボタンをクリックします。
f:id:rikoubou:20190723144058p:plain

　次に右側画面の上部分にある「Face select」アイコンをクリックします。
f:id:rikoubou:20190723144422p:plain

　面選択のモードになっているので、右側画面のCubeの一つの面をクリックで選択して右側のUV画面に一つの面のみになるようにします。
f:id:rikoubou:20190723144726p:plain

　その状態で左側画面の各頂点を「A」キーで全選択し、「S」キーを押して拡大させます。
f:id:rikoubou:20190723145709p:plain

　一番左側にあるメニューの「Move」アイコンをクリックし、マウスをドラッグさせて四角と画像が同じになるように調節します。
f:id:rikoubou:20190723150116p:plain

　この動作を一通りやると以下のようになります。
f:id:rikoubou:20190723145230g:plain

　これをCubeのすべての面について行い、面とテクスチャを合わせます。


２：UV展開した結果を適用する
　すべての面についてテクスチャの合わせができたら「Layout」タブを選択します。
f:id:rikoubou:20190723150929p:plain

　Cubeを選択した状態で「Material」タブをクリックし「Base Color」の左側にある部分をクリックします。
f:id:rikoubou:20190723151311p:plain

　色々出てくるので「Image Texture」を選択します。
f:id:rikoubou:20190723151700p:plain

「Open」ボタンをクリックして、１で使用した画像と同じ透過画像ファイルを開きます。
f:id:rikoubou:20190723152230p:plain

　画像を開いた後「Viewport Shading」アイコンをクリックするとUV展開した結果が適応されます。
f:id:rikoubou:20190723152243p:plain

　しかし透過部分が黒くなっているので、次の手順で透過させていきます。


３：画像の透過を適応させる
　では、ようやく本題の透過の適応をやっていきます。

　Cubeを選択した状態で「Shading」タブを選択します。
f:id:rikoubou:20190723153715p:plain

　以下のような画面になるのでノードを設定していきます。
f:id:rikoubou:20190723153918p:plain

　ノード部分の画面で「Shift+Aキー」を押して出てくるメニューで「Shader」→「Transparent BSDF」を選択します。
f:id:rikoubou:20190723154351p:plain

「Transparent BSDF」のノードが追加されます。
f:id:rikoubou:20190723154626p:plain

　同じように「Shift+Aキー」から「Shader」→「Mix Shader」を選択します。
f:id:rikoubou:20190723154853p:plain

「Mix Shader」のノードが追加されます。
f:id:rikoubou:20190723155027p:plain

　以下のようにノードを繋ぎます。
f:id:rikoubou:20190723155337p:plain

　ノードをすべて繋ぎ終えた後「Material」タブをクリックしてSettingsのBlender Modeを「Alpha Blend」を選択します。すると以下のように透過が適応されます。
f:id:rikoubou:20190723155944p:plain


４：影にも透過を適応させる
　ノードの設定が終わったので「Layout」画面に切り替えます。
f:id:rikoubou:20190723160534p:plain

　画面上で「Shift + Aキー」を押してメニューの「Mesh」→「Plane」を選択して影を落とすPlaneを追加します。
f:id:rikoubou:20190723160925p:plain

　追加したPlaneを選択した状態で「S」キーを押して大きくします。
f:id:rikoubou:20190723161327p:plain

　そのままだとPlaneにCubeが埋まっているので、CubeをPlaneの上にある位置まで移動させます。
f:id:rikoubou:20190723161506p:plain

　Cubeを選択した状態で「Material」タブのSettingsのShadow Modeを「Alpha Hashed」を選択します。
f:id:rikoubou:20190723162256p:plain

　バグなのかわかりませんが、即時に適応はされないのでPlaneを選択など別の操作をすると以下のように透過部分を適応させた影ができます。
f:id:rikoubou:20190723162432p:plain


おまけ：モードによるテクスチャと影の違い
　透過テクスチャの表示のされ方は「Material」タブの「Settings」の「Blend Mode」によって変わってきます。

Blend Mode：Alpha Clip
　Alpha Clipはぼかしなどの部分がべた塗りの時と同じような状態で表示されます。
f:id:rikoubou:20190723163345p:plain

Blend Mode：Alpha Hashed
　Alpha Hashedはぼかし部分がスプレーのような感じに変換されて表示されます。
f:id:rikoubou:20190723163448p:plain

Blend Mode：Alpha Blend
　Alpha Blendは透過画像のほぼそのままの状態で表示されます。
f:id:rikoubou:20190723163203p:plain

　また透過部分の影のでき方は「Shadow Mode」によって違ってきます。

Shadow Mode：None
　Noneは影が表示されません。
f:id:rikoubou:20190723163749p:plain

Shadow Mode：Opaque
　Opaqueは透過テクスチャに関係なく元のオブジェクトそのものの影が表示されます。
f:id:rikoubou:20190723163826p:plain

Shadow Mode：Alpha Clip
　Alpha ClipはBlend Modeの時と同様にぼかしがかかっている部分をべた塗りにした時のような影が表示されます。
f:id:rikoubou:20190723163930p:plain

Shadow Mode：Alpha Hashed
　Alpha HashedはBlend Modeの時と同様にぼかし部分がスプレーのような感じに変換されて影が表示されます。
f:id:rikoubou:20190723164044p:plain


　以上がBlender2.8で透過テクスチャを適応させた影を作る方法です。

　何か色々なことに使えそうですね。

　一応今回作成したBlendファイルを公開しておきます。


・参考資料


2019/8/1追記
　他の手順は一緒でノードの繋ぎ方を以下のようにするだけでも透過テクスチャを適応できました。
f:id:rikoubou:20190801151405p:plain

　また画像の出来栄えとしてEeveeよりもCyclesの方が元の画像に近い結果が得られるようです。

・Eeveeレンダーの場合
f:id:rikoubou:20190801151606p:plain

・Cyclesレンダーの場合
f:id:rikoubou:20190801151704p:plain

【CLIP STUDIO PAINT】オーディオ機能の使い方

ClipStudioPaint アニメーション お絵描き

　CLIP STUDIO PAINTでアニメーションの作り方とカメラ機能の使い方の簡単な記事を書いてきました。

　今回は音声ファイルを扱うオーディオ機能の簡単な使い方になります。

　基本的な使い方は参考資料を参照してください。

　前回作成したこのファイルを元に説明していくので、必要な場合はダウンロードしてください。

　では始めます。


０：音声ファイルの準備
　なんでも良いのでCLIP STUDIO PAINTに読み込ませる音声ファイルを用意します。
　CLIP STUDIO PAINTで読み込めるオーディオファイルは、8bitまたは16bitで非圧縮のwav形式、MP3形式、Ogg形式です。

　準備が面倒な場合は、今回の記事で使うmp3ファイルを公開しておくのでダウンロードしてください。


１：オーディオファイルを読み込む
　オーディオ機能について説明していきます。

　clipファイルを開き、タイムラインウインドウにある音声ファイルの再生を始めたいフレームを選択します。
f:id:rikoubou:20190711163924p:plain

　メニューから「ファイル」→「読み込み」→「オーディオ」を選択します。
f:id:rikoubou:20190711164247p:plain

　オーディオファイルを読み込むと、オーディオのレイヤーが追加されます。
f:id:rikoubou:20190711164944p:plain


２：オーディオの設定をする
　タイムラインにあるオーディオレイヤーを選択するとカメラの時のようにキーフレームを打つことができるので、等速のキーフレームを1フレーム目に打ちます（他の「滑らか」や「一定値」もカメラと同じようにキーフレームを打つことができます）。
f:id:rikoubou:20190711170022p:plain

　真ん中と最後にもキーフレームを打ちます。
f:id:rikoubou:20190711170626p:plain

　キーフレームを打ったフレームを選択した状態で、ツールウインドウの「操作」アイコンを選択しサブツールウインドウの「オブジェクト」をクリックします。
f:id:rikoubou:20190711170833p:plain

　ツールプロパティウインドウにオーディオの音量などを調節する画面が表示されます。
f:id:rikoubou:20190711171035p:plain

　1フレーム目の音量を10にします。
f:id:rikoubou:20190711171150p:plain

　同じようにして真ん中のキーフレームの音量を50、最後のキーフレームの音量を10に設定します。
f:id:rikoubou:20190711171442p:plain

　この状態でアニメーションを再生すると、最初の方は音量が小さく、真ん中あたりで大きくなり、最後にまた小さくなるような感じになっていることが確認できます。

　オーディオの設定が済んだら「ファイル」→「アニメーション書き出し」→「ムービー」を選択します。
f:id:rikoubou:20190711171701p:plain

「オーディオの設定」のプルダウンから音質を選択して「OK」ボタンをクリックします。
f:id:rikoubou:20190711172140p:plain

　実際に書き出すと以下のように音声も合わさって出力されます。
drive.google.com


　以上がCLIP STUDIO PAINTのオーディオ機能の簡単な使い方です。

　ステレオ的に左右に音声を振ったりなどの機能はまだ内容ですが、とりあえず音声と合わせてアニメーションを出力させるみたいなことはできそうです。

　MVのようなものを作成するならこの機能だけで十分いけそうですね。


・参考資料


・関連記事

【CLIP STUDIO PAINT】カメラ機能の使い方

ClipStudioPaint アニメーション お絵描き

　前回の記事でCLIP STUDIO PAINTを使ったアニメーションの作り方を簡単にですが説明しました。

　今回はタイトルにある通りカメラ機能を使って簡単なカメラワークをつけていこうかと思います。

　では始めます。


０：準備
　今回はあらかじめ以下のようなアニメーションを作成したファイルを使って説明していきます。
f:id:rikoubou:20190709143513g:plain

　ちなみにこれは24fpsで4枚をそれぞれ3フレーム分ずつ表示させている、いわゆる4枚をそれぞれ3コマ打ちしているアニメーションです。
f:id:rikoubou:20190709143823g:plain

　特に必要な訳ではありませんが、このアニメーションのclipファイルを使いたい場合は以下のリンクからダウンロードしてください。

　このファイルの中身は以下のようになっています。
f:id:rikoubou:20190709144335p:plain


１：2Dカメラフォルダーの追加
　カメラ機能を使うには2Dカメラフォルダーを追加する必要があります。

　メニューの「アニメーション」→「アニメーション用新規レイヤー」→「2Dカメラレイヤー」を選択します。
f:id:rikoubou:20190709144703p:plain

　すると以下の赤枠で囲っているように「カメラ１」フォルダが追加され、タイムラインにも「カメラ１」が追加されます。
f:id:rikoubou:20190709145037p:plain

　次にこのカメラフォルダの中にカメラワークを追加したい素材を全て入れます。今回は歩いている棒人間にカメラワークを追加するので「カメラ１」のフォルダの中に棒人間のアニメーションである「アニメーションフォルダー」をドラッグして入れます。

f:id:rikoubou:20190709145531p:plainf:id:rikoubou:20190709145542p:plain

　これでカメラワークをつける準備ができました。


２：カメラワークをつける
　タイムラインにあるカメラワークをつけたいカメラフォルダをクリックして選択します。
f:id:rikoubou:20190709150700p:plain

　カメラのキーフレームを打つボタンが有効になるので、隣のプルダウンから「作成するキーフレーム：等速」を選択します。
f:id:rikoubou:20190709151101p:plain

　緑色のひし形のマークになっていれば「等速」になっています。
f:id:rikoubou:20190709151238p:plain

　ドラッグで現在の表示フレームを1フレーム目にします。
f:id:rikoubou:20190709152011p:plain

　この状態でツールウインドウの「操作」アイコンを選択し、サブツールウインドウに出てきた「オブジェクト」をクリックします。
f:id:rikoubou:20190709151347p:plain

　するとキャンバス上の青枠部分に合わせて以下のような操作できる枠が出てきます。
f:id:rikoubou:20190709151821g:plain

　次にツールプロパティウインドウ「2Dカメラ」の「表示方法」ところを「範囲を枠で表示」のアイコンの方を選択します。
f:id:rikoubou:20190709152230p:plain

　ここまでできたら実際にカメラワークをつけていきます。

　キャンバスに表示された枠を左側に移動させます。すると以下のようにカメラフォルダのところにカメラ位置のキーフレームが追加されます。
f:id:rikoubou:20190709152553p:plain

　続いてドラッグして最後のフレームを選択します。
f:id:rikoubou:20190709152855p:plain

　その状態で今度はキャンバスに表示された枠を右側に移動させ、キーフレームを追加します。
f:id:rikoubou:20190709161654p:plain

　ここまでできたらアニメーションを再生してみます。以下のようにカメラが映している範囲（青枠）が動いているのがわかると思います。
f:id:rikoubou:20190709153344g:plain

　カメラから見た状態を確認したい場合は「2Dカメラ」の「表示方法」で「範囲内の画像を表示」の方のアイコンを選択します。
f:id:rikoubou:20190709153614p:plain

　この状態でアニメーションを再生すると、以下のようにカメラから見た状態を確認できます。
f:id:rikoubou:20190709153825g:plain

　もちろんgifアニメーションなどで書き出しをしてもちゃんと設定したカメラワークは適応されています。
f:id:rikoubou:20190709154157g:plain

　ちなみにカメラフォルダ外に背景などのレイヤーを追加した場合は「カメラフォルダの外にあるのでカメラワークの影響は受けない」ことになります。
f:id:rikoubou:20190709154413p:plain

　この状態でアニメーションの書き出しを行うと以下のように背景は動かず、カメラフォルダーの中に入れたものしかカメラワークが適用されないことがわかります。
f:id:rikoubou:20190709154632g:plain


３：カメラキーフレームの種類
　今回の例として使ったカメラのキーフレームは「等速」でしたが、他にも「滑らか」と「一定値」があるのでそれぞれについて説明していきます。

・等速
　等速は今回の例として上げた通りキーフレームの間を等速で移動させます。
f:id:rikoubou:20190709160217p:plain

　実際に設定すると以下のようになります。
f:id:rikoubou:20190709161506p:plain
f:id:rikoubou:20190709161014g:plain

・滑らか
　滑らかは最初はどんどん加速して中間あたりで最高速度になった後、終点になるに連れて徐々に遅くなるような動きです。
f:id:rikoubou:20190709160617p:plain

　実際に設定すると以下のようになります。
f:id:rikoubou:20190709161410p:plain
f:id:rikoubou:20190709161135g:plain

・一定値
　一定値は2つのキーフレームの間の補間が一切ない動きになります。
f:id:rikoubou:20190709160906p:plain

　実際に設定すると以下のようになります。
f:id:rikoubou:20190709161327p:plain
f:id:rikoubou:20190709161249g:plain

　以上がCLIP STUDIO PAINTのカメラ機能の簡単な使い方です。

　自分自身そこまで使いこなせている訳ではないので、より詳しく知りたい方は各自で調べるようお願いします（むしろ自分が教わりたい…）。

　また今回作成したclipファイルも一応公開しておきます。


・参考資料


・関連記事