アニメ作りに挑戦: 2019

2019年12月30日月曜日

クリップスタジオペイントでアニメを作ろう・ワイプで場面を切り替える

●ワイプとは

　ある場面を、ふきとるようにして次の場面に切り替える方法が、アニメでよく使われていますよね。この切り替え方は「ワイプ」と呼ばれています。

　編集ソフトについていることの多い機能ですが、今回は、このワイプを、クリップスタジオペイント（CLIP STUDIO PAINT、クリスタ）を使って表現してみます。

●クリップスタジオペイントでワイプを作る

■準備

ファイルを新規作成します。
　わかりやすくするため、作画サイズの幅を二倍にしておきます。
　アニメーションフォルダにキャラクターの動画とその背景画を２場面分、用意します。

　一方の動画とその背景画を、フォルダに入れておきます。

■ワイプに使う画像を用意する

　次の場面に切りかえるのに使いたい形を考えて、新しいレイヤーに描きます。
　今回は、わかりやすいように、波線にしてみました。

　新規レイヤーを作成し、上から下まで届くように波線を引きます。

■マスクにする画像を作成する

ワイプに使う画像を、マスクに使えるようにします。
　前回作成したレイヤーの、波線の右側を黒く塗りつぶします。

■２Ｄカメラフォルダーを作成する

上部メニューの［アニメーション］－［アニメーション用新規レイヤー］－［２Ｄカメラフォルダー］を選択して、カメラフォルダー（カメラ１）を作成します。

■２Ｄカメラフォルダーに入れる

　２Ｄカメラフォルダー：カメラ１の中に、マスクにする画像を入れます。

■並べ替える

　一方の動画とその背景が入っているフォルダー
　カメラ１（マスクにする画像が入っている）
　もう一方の動画
　もう一方の背景

　という順番になるように、フォルダーやレイヤーを並べ替えます。

■ワイプに使う画像のレイヤーを下のレイヤーにクリッピングする

レイヤー１を右クリックして、［レイヤー設定］－［下のレイヤーでクリッピング］を選択し、動画とその背景の入っているフォルダにクリッピングします。

　クリッピングされると、レイヤーの左のほうに、赤い線がつきます。

■２Ｄカメラのキーフレームを設定する

　２Ｄカメラフォルダー：カメラ１を選択し、左のツールバーから、［操作］を選択すると、２Ｄカメラフォルダー操作用の青い枠線が出ます。

［タイムライン］パレットで、ワイプをはじめたいフレームに移動します。

［タイムライン］パレットのメニューの、［キーフレーム補間］－［作成するキーフレーム：滑らか］を選択します。（［作成するキーフレーム：等速］でもかまいません）

　２Ｄカメラフォルダー操作の青い枠線を右に移動し、始点のキーフレームを設定します。

［タイムライン］パレットで、ワイプを終了したいフレームに移動します。

　２Ｄカメラフォルダー操作の青い枠線を左に移動し、終点のキーフレームを設定します。

■完成

　こんなアニメができあがりました。

2019年11月8日金曜日

自主制作アニメ作りました

　数分の作品でいいから、作りあげたいとずっと考え続けて何年か、何十年か。

　ようやく、自主制作アニメを作りました。
　使用しているのは、CLIP STUDIO PAINT EX です。
　音楽も自作しています。

　のんびりとした作品で、声はなしで音楽だけ。
　いろいろと拙いところは多いでしょうが、よろしくお願いします。

　CLIP STUDIO PAINTのカメラ機能の実装で、一気に夢が近づきました。
　以前だったらかなりな手間だった、背景の絵に動画をのせることも、それにズームなどのカメラワークをつけることも、すべて実装されていて、CLIP STUDIO PAINT は、2Dの自主制作アニメを作ろうと考えたときに、夢のような出来のソフトになっています。

　アニメを作るのは、本当に楽しいですね。

　ゆるゆる見て楽しんでいただければ幸いです。

　ラインスタンプも発売開始しました。
　よろしくお願いします。

はねぺんスタンプ - LINE スタンプ | LINE STORE

2019年10月25日金曜日

クリップスタジオペイントでアニメを作ろう・動画をアニメの背景にする

●写真動画からアニメの背景を作る

　アニメを作ろうとしたときに、背景で困ったことはありませんか？
　私は絵が下手なので、とても困っています。
　クリップスタジオペイント（CLIP STUDIO PAINT、クリスタ）には、写真をイラスト風にする機能があるので、それで写真を一枚の背景にすることもできます。
　さらに、クリップスタジオペイントでは、写真動画をアニメの背景にすることもできます。

■準備

　アニメーションの動画を用意します。
　それとともに、アニメーションの背景にしたい動画を用意します。保存形式は、mp4にしておくとスムーズです。

■動画を読み込む

　アニメの動画を用意した状態にします。

　上部のメニューから、［ファイル］－［読み込み］－［ムービー］を選択します。

　背景にしたい動画を選択し、［開く］で開いて、読み込みます。

　クリップスタジオペイントから注意のウインドウが開いても気にせず［ＯＫ］で先に進みます。

　アニメの背景にしたい写真動画が読み込まれました。
　同時に、ツールが、［操作］－［オブジェクト］になります。

　読み込まれた動画には、［拡大・縮小・回転］のできる青い枠とハンドルがついていますので、目的のアニメに合わせた大きさに調整します。

◎縦横の比率をそのままにしたい時は、［Shift］を押しながら拡大・縮小します。

■確認

　再生してみます。

　動画がアニメの背景になっているのが確認できました。

　音は消えてしまいます。

●写真の動画をイラスト調の動画にしてアニメの背景にする

　動画をアニメの背景にすることができました。
　次は、クリップスタジオペイント（CLIP STUDIO PAINT、クリスタ）の機能を使って、動画をイラスト調に変えて、アニメの背景にしてみます。

■ 連番画像を書き出す

　アニメの入っているアニメーションフォルダーを非表示にします。
　読み込んだ写真動画だけになります。

　上部メニューから、［ファイル］－［アニメーション書き出し］－［連番画像］で、パソコンの中の適当な場所に、連番画像を書き出します。

◎今回は、1秒を24フレームにして、3フレームで1枚、1秒間で8枚の絵を表示させる設定ですので、一番下の「フレームレート」が8になっています。

　たくさんのjpg画像になって保存されます。

■連番画像を読み込む

　新規アニメーションフォルダーを作成します。

　上部メニューから、［ファイル］－［読み込み］－［画像］で、さきほど保存されたすべての画像を一括選択して読み込みます。

　新しく作ったアニメーションフォルダー「フォルダー1」の中に、たくさんの画像が読み込まれました。

◎画像の番号が小さい数字から順番になっているかを確認し、順番がおかしかったらレイヤーを動かして正しい順番になるように並び替えて直しておきます。
（大きい数字から小さい数字への順番でもOK）

■連番画像をセルに指定する

［タイムライン］パレットで、一番最初のフレームに移動します。

　フォルダー1に、読み込んだ連番画像をセルとして順番に指定します。一括指定が便利です。

　上部メニューから［アニメーション］－［トラック編集］－［セルを一括指定］を選択します。

　出てきたウインドウから、「既存のアニメーション名から指定」を選択し、番号の小さいものを開始セルに、番号が最大のものを終了セルに指定します。

◎今回は、1秒を24フレームにして、3フレームずつ、1秒間で8枚の絵を動かす設定にしていますので、フレーム数は「3」です。

［OK］で読み込みます。

→タイムラインに画像がセルとして読み込まれました。

　もとの噴水の動画を非表示にします。

　再生してみると、もとの動画よりもややガタガタした動きになっています。

■連番画像をイラスト風にする

　フォルダー1に入っている画像をひとつ選択します。

　右クリックで出てくるウインドウから「ラスタライズ」を選択します。

　画像がラスタライズされました。

　上部メニューから［フィルター］－［効果］－［イラスト調］を選択します。

　出てきた［イラスト調］ウインドウで適当な数値にし、［OK］で確定します。

◎今回は、初期数値から、ぼかし範囲85　色の階調数30　に変更しました。

　同じように、すべての画像をラスタライズし、イラスト調にします。

◎数が多いので、オートアクションを作って使っても便利かもしれません。
・オートアクションの例

　すべての画像がイラスト調になりました。

　再び、最初に用意したアニメーションの動画の入っているアニメーションフォルダを表示します。

■確認

　イラスト調の動画を背景にしたアニメーションができあがりました。

2019年10月11日金曜日

クリップスタジオペイントでアニメを作ろう・カメラワーク３　背景を切り替える

　クリップスタジオペイントの２Ｄカメラを使えば、不透明度を変化させることもできます。
　今回は、２Ｄカメラを使って、背景を切り替えてみます。

・準備

　ファイルを新規作成し、アニメーションフォルダにキャラクターの動画、他に２枚の背景画を用意します。

■２Ｄカメラフォルダーを２つ作成する

上部メニューの［アニメーション］－［アニメーション用新規レイヤー］－［２Ｄカメラフォルダー］を選択すると、カメラフォルダー（カメラ１）が作成されます。

　今回は、２枚の背景それぞれにカメラワークをつけるので、カメラフォルダーをもうひとつ作成します。

　上部メニューの［アニメーション］－［アニメーション用新規レイヤー］－［２Ｄカメラフォルダー］を選択し、カメラフォルダー（カメラ２）を作成します。

■背景にカメラワークがつけられるようにする

　２Ｄカメラフォルダー（カメラ１）の中に、背景を描いたレイヤー（背景１）を入れます。
　もうひとつの２Ｄカメラフォルダー（カメラ２）の中に、もう一枚の背景を描いたレイヤー（背景２）を入れます。

　背景ですので、位置は、アニメーションフォルダーよりも下にしておきます。

１枚目の背景の不透明度の変更

■２Ｄカメラを使って１枚目の背景の不透明度を変更する

［タイムライン］パレットの最初のフレームに移動します。
　カメラ１の左側の［＋］ボタンをクリックすると、下に折りたたまれていた「不透明度」と「トラックラベル」という要素が出てきます。

　今回は、「不透明度」を変えますので、「不透明度」のところをクリックして選択します。

■ファンクションカーブ変更モードにする

［タイムライン］パレットの左上にある［ファンクションカーブ変更モード］ボタンをクリックします。

　ファンクションカーブ変更モードになります。

・表示をもとにもどしたいときは、もう一度、［ファンクションカーブ変更モード］ボタンをクリックします。

■始点のキーフレームを追加する

［タイムライン］パレットのカメラワークをつけはじめたい位置（今回は最初のフレーム）で、不透明度を選択した上で、［タイムライン］パレットの上部ボタンで［キーフレームを追加］します。

　始点のキーフレームが追加されました。
　オレンジの◆がキーフレームが設定された位置になります。左右に小さなオレンジのものがついています。

◇キーフレームの補間方法には、いくつか種類がありますが、今回は「滑らか」にしておきます。

■終点のキーフレームを追加する

［タイムライン］パレットのカメラワークをつけ終わりたい位置で、不透明度を選択した上で、［タイムライン］パレットの上部ボタンで［キーフレームを追加］します。

→終点のキーフレームが追加されました。

■キーフレームを移動する

　わかりやすいように、カメラ２は非表示にしておきます。

　今回は不透明度の変更ですから、だいたい１００（完全に不透明）から０（透明）の間で動かすことにします。

　キーフレームの印であるオレンジの◆をクリックして選択します。

→オレンジの◆が、青の◆になります。

　青の◆をドラッグして上下に動かします。
　左についている目盛りの０（ゼロ）のところまで動かしてみましょう。

　始点と終点のキーフレームを結んでいたオレンジの細い線も、キーフレームに従って移動します。「滑らか」な曲線になっています。

　キャンバスのほうは、何も変化がないように思えます。

■確認する

　アニメーションを再生してみます。

　背景が滑らかに消えていくのが確認できます。

　ＧＩＦで書き出してみると、こうなります。

◎再生せずに確認したい場合は、［ツールプロパティ］パネルの［表示方法］で、「範囲内の画像を表示」にすれば、現在画像にしたときに表示される状態が、キャンバスに反映されます。

２枚目の背景の不透明度の変更

■２Ｄカメラを使って２枚目の背景の不透明度を変更する

　次は、２枚目の背景の不透明度を、２Ｄカメラを使って変更します。

　わかりやすいように、カメラ１は非表示にしておきます。

①［レイヤー］パレットで［カメラ２］のフォルダーをクリックして選択します。

②［タイムライン］パレットで、カメラ２の左側の［＋］ボタンをクリックすると、下に折りたたまれていた「不透明度」と「トラックラベル」という要素が出てきます。

　「不透明度」を変えますので、「不透明度」のところをクリックして選択します。