AREA

創作とおえかきと手芸、たまにプログラミング。

ボカロ曲用手書きアニメーションPVを作る②

こちらの前回の記事の続きです。
hkarea.hatenablog.jp


f:id:hkarea:20171115035749p:plain

今回はタイトルとスクロールする背景、歩く人のアニメーション(簡易版)を作っていきます。


4. タイトルロゴを作る

タイトルはAviUtlを使って作ります。
音楽に合わせて、水たまりに雨の波紋が広がるように文字が浮き出るようにしていきます。



※音に合わせて作っていますが、この動画は音無しです


5. スクロールする背景を作る

上で説明に使った動画と時系列が前後してしまいますが、
背景の作り方を説明します。

背景はスクロールしつつも模様が動かないようにすると決めました。
横長の背景線画を、キーイングで抜きやすい色で塗りつぶした素材を描きます。
f:id:hkarea:20171111021953p:plain


これをファイナルカットでキーイングした後、模様の素材を後ろに重ねます。
f:id:hkarea:20171111022557p:plain


背景素材の開始位置と終了位置を指定すると、こんな感じになります。

出来たものを見てみると建物と奥行きが足りない気がします。
一旦書き出した今の映像をキーイングして
後ろにも先程のビル群を縮小したものを色を変えて配置します。

ちなみに、遠くの景色は見え方として移動速度が遅いので、
縮小しても左右に背景を描き足さずに済みますよ!


6. 歩く人のアニメーションを作る

歩くアニメーションは、一連の動作を描いてしまえば使いまわせる点は良いですが
自然に見せるのにかなり苦労しそうです。
時間もないので今回は手を抜いて、簡易的にそれっぽく見えるものを作っていこうと思います。

ちなみに、高校生のときに作った違和感てんこ盛りのアニメーションはこちら

久しぶりに見てみたら意外と絵が上手だったのでむかつきますね。
この話はやめましょう。(一人相撲)


では、今回はどのようにそれっぽくするかというとずばり
「足元をフレームアウトさせて上下動で歩く動作を表現」します。
人形劇みたいな感じです。

あと、調べたところ宣伝した場合のみトレース可の分かりやすい記事がありました。
aniduku.com

トレースはしませんでしたが、頭の高さはこれを参考にしたのでリンクしておきました。
これにより、腕が塞がっているポーズにすれば
1枚絵(髪など揺れそうなキャラデザの場合3枚)で済むという超コスパ設計になりました。

完成したのがこちら。



2番も似たように作っていくので説明したところは割愛して、
次回の記事でざっくりと大枠の完成を目処にしたいと思います…!

ボカロ曲用手書きアニメーションPVを作る①

友人の制作したボカロ曲のPVを作ることになったので、
流れをざっくりまとめながら作っていこうと思います。

f:id:hkarea:20171110014050p:plain


☆今回使うもの☆

  • Aviutl

今回使う中で唯一無料のソフト。Windows用です。
ボカロ用の動画制作では定番(たぶん)。

通称クリスタと呼ばれているお絵かきソフトです。
EXではアニメーションも作ることができます。

  • Final Cut Pro

Mac用有料動画制作ソフト。
有料だけあってUIやら書き出し時間やらクロマキーの精度やらが良いので、
手抜きするために積極的に使っていこうと思います。

  • 画力

無料で使えます!!


私はWindowsのBootされたMacを使っているのでこんなことになっていますが、
ここまで用意しなくても動画は作れます。
では作っていきます。



1. 全体の構成を考える

ここは曲を作った友人と、イメージをすり合わせながら相談して色々決めました。
お互いのイメージに似た作品を持ち寄ると話が進みやすいです。
以下は決めたことの例:

  • 絵柄(アニメ風・イラスト風)
  • 登場キャラごとの雰囲気やテーマカラー
  • フォントの雰囲気


また、曲の構成と場面を考えて用意すべき画像素材などを決めます。
全部書くと長いので途中まで表にしました。

場面 要るもの 使用ソフト
前奏 手描きアニメーション クリスタ
間奏1 歩くアニメーション、背景、雨、タイトル クリスタ、Aviutl
1番:Aメロ 歩くアニメーション、背景、雨 クリスタ、Aviutl


2. 歌詞を入れる

フォントは温かみのある映像にするために
漢字も使える手書き風フォントをお借りしました。
(ちなみに残念ながら弱ペダは知りません…)
booth.pm

また、暫定でファイナルカットのタイムライン上に適当な動きをつけて歌詞を置いておきます。

ここで、お借りしたフォントだと4つぐらい漢字が足りないことが判明したため
フォント作成ソフトをDLしたりして寄り道し始めます。
(フォント作成奮闘記は別でまとめるかもしれません…)
f:id:hkarea:20171110013706p:plain
※追記:フォントが足りない部分は、フレーズのまとまり毎に足りない文字も書いた画像を作って貼り付け、ごまかすことにしました。
手書き風フォント作るの難しいですね

また、完成のイメージをつかむために、
拾ってきた適当な素材を仮でおいて雰囲気を確かめます。
後で差し替えるので作業画像は割愛。


3. 前奏のアニメーションを作る

次に絵を描いていきます。
今回、主人公と「君」のイメージカラーは青とオレンジなので、
どちらにも使えて雰囲気の合いそうなフリー素材を探してお借りします。
www.pixiv.net

クリスタで手書きアニメーションを1フレーズ分作ります。


これをファイナルカットに持ってきて速さを調整したりします。
f:id:hkarea:20171110013911p:plain

うーん先が長い。


とりあえず今回はここまでです。
読んでくれてありがとうございました。
次回は背景と歩くアニメーションを作ります。

【Blender入門】うちの子モデリング①

久しぶりの投稿です。

こまめにまとめておかないと制作過程を忘れて更新が止まってしまうので、
今回から細かく分けて更新していこうと思います。


さて、ここからがBlenderの話です。

今回モデリングする創作っ子はこちら。
f:id:hkarea:20171018013515p:plain
北千住千洋(きたせんじゅちひろ)ちゃん。
Abyssというアイドルユニットでアイドルをやっています。
見ての通りメンヘラです。

では、以下でこのパンチの有るアイドル概念を具現化させていこうと思います。


0. 道具を準備する

  • Blenderをインストールする

Blenderは無料で使えるモデリングツールです。
以下でダウンロード出来ます。
www.blender.org


  • 参考書を買う

課金は基本なので、とりあえず私は以下の本を買いました。
blender.u5kun.com

少し値段しますが、この記事が分かりにいと思ったら
素人のブログなんか読んでないでこれを買ってしまったほうが良いと思います。

Blenderで忘れがちなボタンの位置などがスクリーンショット付きで載っているので
ショートカットを覚えていない私にはかなり親切に感じました。


1. 制作の準備をする

  • (ノートPCの場合)テンキーを割り当てる

通常であればテンキーで視点変更ができるのですが、
ノートPCの場合は数字キーにテンキーを割り当てて
数字キーから視点変更が出来ます。

参考記事
www.cho-design-lab.com

ショートカットを覚えいなくともこれだけはかなり使うので、
設定していじってみて慣れたほうが良いかもしれません。

  • 下絵を用意する

絵が描けないよ〜!!という人も、最低限正面からの図と横からの図は
何かしら用意しないと、以下の私のようにヨッシー風の何かが出来ます。

先程の参考書のサイトでは下絵もダウンロードできるので、
バランスや概形の参考程度でいいので何か下絵を準備することをおすすめします。

  • 画面を四分割する

Blenderはデフォルトで画面が分割されていないので
(元から分割しているソフトもあるらしい)
Ctr+Alt+Qキーで画面を4方向からの視点に分割します。



今回の記事はここまで。

千洋ちゃん含むアイドルユニットのイメソンを友人が作ってくれるそうなので、
作詞奮闘記なんかも載せられたら良いなと思います。
それではまた次回。

おまけ
f:id:hkarea:20171021194357p:plain

【HTML・CSS】ヘッダーを作る

現在、創作物語のアニメ風サイトを作っています。
ひとまずページのヘッダー(グローバルナビ)ができました。

こんな感じです
f:id:hkarea:20170715024944p:plain

ここまでで苦労した点と分かった事を自分用メモを兼ねて残しておきます。
最後にソースコードも載せておきました。

メイン

  • テキスト部分だけでなく、ボタン全体をクリックできるようにする

display:block

  • リンクの下線を非表示にする

text-decoration: none

  • 周りの余白をなくす

margin: 0
padding: 0


ドロップダウンリスト関連

  • 表示・非表示

visibility: hiddenは表示領域を確保して隠す
display: noneは表示領域も無くす

  • 子要素を縦並びにする

display: grid
(なかなか子要素のみが縦並びにならず虱潰しに試しました。
もっといい方法もあるかもしれません…)

HTMLはこちら

CSSはこちら

今回とてもお世話になったサイトです。
theorthodoxworks.com

Unityちゃん探索ゲーム

2017.7.13追記 紹介動画のツイートを埋め込みました。
ツイッターって埋め込みリンクを作成したり、ウィジェットを作ったりと色々できるんですね。


ちょっと前に作った、Unityちゃんが舞台を探索して脱出するゲームを紹介します。
ゲームの大枠のみをざっくりまとめました。

f:id:hkarea:20170530152203p:plain
タイトル画面です。
Enterキーで画面遷移します。

f:id:hkarea:20170530152136p:plain
演劇部員の大鳥こはく(Unityちゃん)が忘れ物を探しに、一人で舞台を散策します。
途中、落ちている台本の内容が手がかりになります。

f:id:hkarea:20170530152131p:plain
うさぎを追いかけてステージへ。

f:id:hkarea:20170530152128p:plain
f:id:hkarea:20170530152124p:plain
ビンやキノコに衝突するとUnityちゃんのサイズが変わって、今まで行けなかった場所に行けるようになっています。


このとき、最初のシーンの机の下に元はなかったパーティクルが出現しており、小さくなったUnityちゃんが机の下に潜るとゲームクリアになります。
今回できたのはここまでですが、とりあえずゲームとしてはざっくり完成しています。

改善したい点
  • トーリーを場面ごとに分けて、台本を読む度に内容が変わるようにしたい
  • カメラ切り替えを、見えないCollisionにぶつかることで実装しているので、ぶつかった瞬間にプレイヤーが方向転換するとカメラが追従しなくなる

他にも、最初はパースを意図的に狂わせて絵本みたいな表現にしたかったのですが、シェーダーなどもいじらないといけなくなるので今回は諦めました。
また、場面が移り変わる毎に景色や雰囲気が変わって不思議な世界に迷い込んだ感じになったらよかったなと思います。

これからも何か作れば記録していきたいです。


2017.7.15追記
当初はアイテム欄を実装する予定だったのですが、世界観を壊すのと、
キーボードでプレイヤーを動かしてマウスでアイテムを選ぶのは操作性が悪そうなことから見送りました…



ざっくり作成したUnityちゃんのアリスカラーテクスチャを配布します。
私は髪色も変えてしまいましたが、よく見るとうまく作れていないので入れていません(._.)
アリスなので髪は元の色でもいいかなぁと思います。
www.dropbox.com

ユニティちゃんライセンス

この作品はユニティちゃんライセンス条項の元に提供されています