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

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

【M5Stack】M5Stackの環境構築方法

 最近Blenderばかりだったのでかなり久々のマイコン関係の記事です。
 今年に入ってぐらいからM5Stackというマイコンをネット上で目にするようになりました。

 気になって購入してはいたのですが、なかなか触れずにいたので今回触ってみた次第です。

 私が購入したのは以下の「M5Stack Fire」というモデルです。
www.switch-science.com

 この他にもBasicやGrayといった別のモデルも存在します。
 今回はこのM5Stackの環境構築方法を説明していきます。
 MacOSでの環境構築になります。

 基本的には以前紹介したESP32の環境構築方法にライブラリを加えるだけです。

 また詳細な手順は以下の公式のGithubのページを参照してください。

 では始めます。


1:Arduino IDEをインストールする
 以下のページからOSに合ったArduino IDEをダウンロードしてインストールします。


2:Pythonをインストールする(Windows以外のOSの場合に必要)
 途中でpythonのファイルを実行する場面があるので、以下のページからダウンロードしてPythonをインストールします。
www.python.org


3:必要なファイルをダウンロードして適切な場所に配置する
 すでに記述した手順のArduino IDEpythonに加えてgitもインストールされている場合は、ターミナルを開いて以下のコマンドを1行ずつコピペして実行するだけでOKです。

mkdir -p ~/Documents/Arduino/hardware/espressif
cd ~/Documents/Arduino/hardware/espressif
git clone https://github.com/espressif/arduino-esp32.git esp32
cd esp32
git submodule update --init --recursive
cd tools
python get.py


4:M5Stackのライブラリをインストールし書き込める状態にする
 3までできたらArduino IDEを起動させメニューの「スケッチ」→「ライブラリをインクルード」→「ライブラリを管理」を選択します。
f:id:rikoubou:20180910142120p:plain

 ライブラリマネージャが開くので検索ボックスに「m5stack」と入力して出てきた中の「M5Stack by M5Stack」と書かれているライブラリのインストールボタンをクリックしてインストールします。
f:id:rikoubou:20180910142418p:plain

 インストールが完了したらメニューの「ツール」→「ボード」→「M5Stack-Fire」を選択します。(今回はM5Stack Fireを使用しているのでこちらを選択しています。BasicやGrayの場合は「M5Stack-Core-ESP32」を選択してください)
f:id:rikoubou:20180910143440p:plain

 Upload Speedを「115200」にします。
f:id:rikoubou:20180910144624p:plain

 この状態でM5Stack FireとPCをUSBケーブルで接続しM5Stack Fireのポートを選択します。
f:id:rikoubou:20180910144815p:plain

 これでスケッチを書き込む準備ができました。


5:M5Stackにサンプルスケッチを書き込んでみる
 今回はDisplayというサンプルを書き込んでみます。
 メニューの「ファイル」→「スケッチ例」→「M5Stack」→「Basics」→「Display」を選択してスケッチを開きます。
f:id:rikoubou:20180910145016p:plain

 スケッチが開くので矢印のボタンをクリックしてスケッチを書き込みます。
f:id:rikoubou:20180910145424p:plain

 書き込みが終了すると以下のようにサンプルが起動して様々な色の三角形が画面に表示されます。


 以上がM5Stackの環境構築方法です。
 とりあえずサンプルが動いたのでM5Stackを使って何か作ってみたいです。


・参考資料

【Blender】Blamアドオンによる写真に合わせたレンズの設定方法

 お久しぶりです。かなりサボってしまい約一ヶ月ぶりの更新となってしまいました。すみません。(でもいい夏休みになりました)

 今回はタイトルにある通り「Blam」というアドオンの導入とそれを使って写真からレンズの設定を行うというのをやっていきます。

 それでは始めます。


1:Blamアドオンを使えるようにする
 まずはBlamの紹介です。以下の動画でBlamの使い方などが紹介されています。
www.youtube.com

 続いてアドオンの入手方法ですが、この動画の概要欄にある「Download」のリンクをクリックします。
f:id:rikoubou:20180906161647p:plain

 するとGithubのページに飛ぶので「Clone or download」ボタンを押して「Download ZIP」をクリックします。
f:id:rikoubou:20180906161859p:plain

 ダウンロードしたzipファイルを解凍してできたフォルダの中にある「src」フォルダの「blam.py」が該当のアドオンになります。
f:id:rikoubou:20180906162215p:plain

 あとは以下の記事と同じ手順で「blam.py」のアドオンをBlenderに読み込んで有効化すれば使えるようになります。
rikoubou.hatenablog.com


2:背景画像と色の準備
 Blamの導入ができたのでここからは使い方を説明していきます。

 いつものようにBlenderのデフォルトキューブを削除します。
f:id:rikoubou:20180906162944p:plain

 画面を「Movie Clip Editor」に切り替えます。
f:id:rikoubou:20180906163545p:plain

 Movie Clip Editor画面に切り替えると以下ような画面になります。
f:id:rikoubou:20180906164348p:plain

 次に背景として設定したい画像ファイルをドラッグ&ドロップします。

 今回使用した画像はダウンロードリンクからダウンロードできるので自由に使ってください。

 画像をドラッグ&ドロップすると以下のようになります。(画像が大きい場合は拡大されているのでマウスホイールで調節してください)
f:id:rikoubou:20180906164234p:plain

 画像を読み込ませたら「N」キーを押して右側のメニューを表示させます。
f:id:rikoubou:20180906164702p:plain

 表示させた右側メニューの一番下にある「Grease Pencil Layers」の「New Layer」を左クリックします。
f:id:rikoubou:20180906164952p:plain

 するとGrease Pencilのレイヤーが追加されます。
f:id:rikoubou:20180906165134p:plain

 レイヤーを追加したら「x軸(横方向)の線としたい色」と「z軸(縦方向)の線としたい色」を準備します。
 今回は「x軸を青色」「z軸を赤色」とします。

 まずはx軸とする青色の準備です。
 以下のようにレイヤー名を左ダブルクリックで「x」と名前を変更して「Factor」の値を1にしてカラーパレットから青色を選択します。
f:id:rikoubou:20180906165505g:plain

 次にz軸とする赤色の準備です。
 レイヤー名の横にある「+」のボタンを左クリックしてレイヤーを追加します。
f:id:rikoubou:20180906165843p:plain
f:id:rikoubou:20180906170014p:plain

 あとは同じ方法でレイヤー名をzに変更して「Factor」の値を1にしてカラーパレットから赤色を選択します。
f:id:rikoubou:20180906170150p:plain

 これで背景と色の準備ができました。


3:直線を引きBlamを使ってカメラを設定する
 x軸、z軸それぞれの色を使って直線を引いていきます。

 左側のメニューにある「Continuous Drawing」にチェックを入れ、右側メニューにあるx軸の色を左クリックで選択します。そして左側メニューにある「Line」を左クリックするとペイントソフトのように直線が引けるようになります。
f:id:rikoubou:20180906170916p:plain

 青色のx軸は横方向なので、写真の横方向に沿って以下のように直線を引いていきます。
f:id:rikoubou:20180906171348p:plain

 次に同じ方法で写真に沿ってz軸の縦方向に直線を引いていき、最終的には以下のようにします。
f:id:rikoubou:20180906171708p:plain

 直線を引き終えたら左側メニューの「Misc」タブを左クリックします。
f:id:rikoubou:20180906171915p:plain

「Line set 1」はグリースペンシルのレイヤーにある最初の色のことを指しているので「x axis」というx軸のままでOKです。

「Line set 2」はz軸としているため、以下のように左クリックしてプルダウンから「z axis」を選択して変更します。
f:id:rikoubou:20180906172011p:plain

 ここまでできたら「Calibrate active camera」ボタンを左クリックします。
f:id:rikoubou:20180906172229p:plain

 エラーがなければBlenderの上部のところにメッセージが表示されます。(エラーの場合は赤く表示されるので、その場合は直線の数を減らしたりするなどしてもう一度やってみてください)
f:id:rikoubou:20180906172350p:plain

 エラーなくカメラの設定ができたら、3D Viewに切り替えます。
f:id:rikoubou:20180906172805p:plain

 するとカメラのレンズや位置が直線で引いた角度に合うように設定されています。
f:id:rikoubou:20180906172952p:plain

 と言ってもこれだけではわからないので、背景画像を設定します。

 3D View上にマウスカーソルがある状態で「N」キーを押して右側メニューを表示させて「Background Images」にチェックを入れて「Add Image」ボタンを左クリックします。
f:id:rikoubou:20180906173347p:plain

「open」ボタンを左クリックして同じ画像を選択し、読み込ませます。
f:id:rikoubou:20180906173547p:plain

 読み込ませたらファイル名のところの「F」ボタンを左クリックし、またSourceのところにあるファイルパスの左側にある箱のようなアイコンを左クリックします。これでBlenderファイル内に画像が保存されるので、元画像を削除しても大丈夫になります。
f:id:rikoubou:20180906173830p:plain

 この状態で「Shift+Aキー」から「Mesh」→「UV Sphere」を左クリックで選択して追加します。
f:id:rikoubou:20180906174307p:plain

 追加したSphereのScaleを調節し、をカメラが映る位置まで移動させます。
f:id:rikoubou:20180906174536p:plain

 ここまでできたら3D View上でテンキーの「0」キーを押してカメラ視点にします。すると背景画像も表示されており、追加したSphereも表示されます。
f:id:rikoubou:20180906174632p:plain

 この状態でSphereの座標を変更させてみましょう。写真内の空間に大体合っているように動いていると思います。
f:id:rikoubou:20180906175027g:plain


 以上がBlamの導入から使い方までの説明になります。

 少し手順が多いですが、これができれば写真に合わせたアニメーションというのもできるようになるので色々使えると思います。

 今回の記事で作成したblendファイルも一応以下のリンクで公開しておきます。


・参考資料

【Blender】簡易ミサイルアニメーションを作る

 タイトル通りにBlenderを使ってミサイルのアニメーション的なのを作っていきます。我流なのでこれよりもっと良い作り方や見栄えがよくなる方法があるかと思いますが、備忘録として残しておきます。
 またちょっとしたパーティクルの練習にもなるかと思います。

 では始めます。


1:ミサイルの軌道を作成する
 いつものようにBlenderを起動して出て来たデフォルトのCubeを選択して「X」キーを押して「Delete」を左クリックして削除します。
f:id:rikoubou:20180807150549p:plain

 次に3D View上で「Shift+Aキー」を押して出て来たメニューから「Curve」→「Path」を左クリックで選択します。
f:id:rikoubou:20180807150820p:plain

「NurbsPath」を追加したら3D Viewの下のところから「Edit Mode」に切り替えます。
f:id:rikoubou:20180807150942p:plain

 Edit Mode(編集モード)に切り替えると以下のように頂点が表示されるので、これらを右クリックで選択して移動させて軌道を作成します。
f:id:rikoubou:20180807151436p:plain

 頂点数を増やしたい時は2点以上の頂点を「Shift+右クリック」なので選択した状態で「W」キーを押して「Subdivide」を選択すると頂点を増やすことができます。
f:id:rikoubou:20180807151632p:plain

 自分は以下のような軌道にしました。
f:id:rikoubou:20180807152053p:plain

 軌道ができたら「Object Mode」を選択してオブジェクトモードに戻ります。
f:id:rikoubou:20180807152158p:plain


2:ミサイルを軌道に沿って動かす
 次は軌道に沿って動くミサイル部分を作っていきます。

 オブジェクトモードでの3D View上で「Shift+Aキー」を押して出て来たメニューから「Mesh」→「Cylinder」を選択します。
f:id:rikoubou:20180807152501p:plain

 このままだと大きすぎるので「S」キーを押してサイズを調節します。
f:id:rikoubou:20180807152637p:plain

 サイズを調節した「Cylinder」を選択した状態で、「Shift+Dキー」を押してCylinderを複製し右クリックで確定させます。
f:id:rikoubou:20180807153718p:plain

 複製した「Cylinder」のサイズを小さくして元のCylinderの下あたりにくるよう移動させます(この小さいCylinderから煙を出します)。
f:id:rikoubou:20180807153923p:plain

 複製したCylinderを右クリックで選択し、その状態で「Shift+右クリック」で元のCylinderを選択します。両方が選択された状態で「Ctrl+Pキー」を押して出て来たメニューから「Object」を左クリックして親子関係にします。
f:id:rikoubou:20180807154222p:plain
f:id:rikoubou:20180807154346p:plain

 次にミサイル部分を選択した状態で「Shift+右クリック」で軌道のパスを選択します。両方が選択された状態で「Ctrl+Pキー」を押して出て来たメニューから「Follow Path」を左クリックで選択します。
f:id:rikoubou:20180807154804p:plain

 すると以下のように、ミサイル部分がNurbsPathの始点と点線で繋がれます。
f:id:rikoubou:20180807155010p:plain

 ミサイルを軌道の始点や向きと合うように移動、回転させます。
f:id:rikoubou:20180807155242p:plain

 位置合わせができたら「NurbsPath」を右クリックで選択し「Data」アイコンを左クリックし「Path Animation」の「Frames」を50に変更します。
f:id:rikoubou:20180807155613p:plain

 再生してみると以下のようになります。速度を調節したい場合は「Path Animation」の「Frames」の値を調節してください。
f:id:rikoubou:20180807155910g:plain


3:煙部分を作成する
 煙になる部分を作成していきます。
 まず煙の元となるオブジェクトであるSphereを作成します。

 3D View上で「Shift+Aキー」を押して出て来たメニューから「Mesh」→「UV Sphere」を左クリックで選択します。
f:id:rikoubou:20180807160454p:plain

 追加された「Sphere」を選択した状態で「S」キーを押してサイズを調節します。
f:id:rikoubou:20180807160915p:plain

 煙を出す「Cylinder」を選択し「Particles」アイコンを左クリックして「New」ボタンを左クリックします。
f:id:rikoubou:20180807161038p:plain

 するとParticleが追加されるので色々設定していきます。
f:id:rikoubou:20180807161449p:plain

「Velocity」項目の「Normal」を「0.1」に変更します(ここがパーティクルが出る速度になります)。
f:id:rikoubou:20180807161852p:plain

 次に「Render」項目のタブを「Object」に切り替えます。「Dupli Object」の項目に「Sphere」を設定して「Size」と「Random Size」をそれぞれ「0.8」、「0.5」に設定します。
f:id:rikoubou:20180807162130p:plain

 続いて「Children」項目のタブを「Simple」に切り替えます。「Size」と「Random Size」をそれぞれ「1.0」、「0.3」に設定します。
f:id:rikoubou:20180807162410p:plain

 最後に「Field Weights」項目の「Gravity」の値を「0」に設定します。
f:id:rikoubou:20180807162533p:plain

 これで設定したオブジェクトからSphereが複数個出現するという設定ができました。

 この状態でアニメーションを再生させると以下のようになります。
f:id:rikoubou:20180807162854g:plain

 あとはマテリアルの設定などで色をつけたり照明を調節したりカメラを調節すれば完成です。
 また、煙の元となるSphereはカメラ外に移動させておく必要もあります。


4:完成
 照明やカメラ、色などを調節して完成したものが以下になります。一応はミサイルが煙を出しながら動いているように見える、はず。


 以上が簡易ミサイルアニメーションの作り方です。

 パーティクルについてはほとんど知識がなく、適当に設定値を設定しているだけでよくわかっていないのでコメントなどで解説の動画やページを教えていただきたいです。

 煙をSphereそのままではなく変形させたり、別のオブジェクトにしたりすると面白いかもしれません。

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


・参考資料

【Blender】グリースペンシル(Grease Pencil)を使ってみる

 Blenderには「グリースペンシル(Grease Pencil)」というお絵かき機能があります。
 本気を出せばBlenderで手書きアニメを作成することも可能です。

 そんなグリースペンシルの簡単な使い方の紹介をしつつ、スザンヌがまばたきするアニメーションを作っていきます。


1:スザンヌを追加する
 Blenderを起動させたら、いつものように「X」キーを押してデフォルトのCubeを削除します。
f:id:rikoubou:20180801154746p:plain

 Cubeを削除したら「Shift+Aキー」でメニューを表示させ、「Mesh」→「Monkey」を選択してスザンヌを追加します。
f:id:rikoubou:20180801155155p:plain

 次にスザンヌに色をつけます。

 スザンヌを選択した状態で「Material」アイコンの「New」ボタンを左クリックします。
f:id:rikoubou:20180801155413p:plain

 Materialを追加したら適当に色をつけます。今回は黄色っぽい色にしました。
f:id:rikoubou:20180801155737p:plain


2:グリースペンシルの準備をする
 スザンヌの準備ができたら、左側の「Grease Pencil」タブを左クリックして開きます。

 Grease Pencilタブの「Continuous Drawing」にチェックを入れ「Data Source」を「Object」にします。
f:id:rikoubou:20180802145310p:plain
 
 また3D View上で「N」キーを押して各種設定部分も表示させます。
f:id:rikoubou:20180802145349p:plain

 次に左下にある表示を「Dope Sheet」に切り替えます。
f:id:rikoubou:20180802144714p:plain

 Dope Sheetを表示させたらModeを「Grease Pencil」に切り替えます。
f:id:rikoubou:20180802144902p:plain

 以下のような状態になっていればグリースペンシルの準備が完了です。
f:id:rikoubou:20180802145516p:plain


3:グリースペンシルで目を描いていく
 グリースペンシルの準備ができたら右側のところにある「Grease Pencil Layers」の「New Layer」ボタンを左クリックします。
f:id:rikoubou:20180802145828p:plain

 すると以下のようにレイヤーとその設定項目が追加されます。
f:id:rikoubou:20180802150337p:plain

 その状態で左側の「Draw」ボタンを左クリックしてオンにします。
f:id:rikoubou:20180802150413p:plain

 これで他のペイントツールと同じように左クリックをしている間、線を引くことができます。
f:id:rikoubou:20180802150649g:plain

「Continuous Drawing」にチェックを入れているので連続して線を引くことができます。

 線を引くのをやめたい場合は、3D View以外の部分で左クリックをするかもう一度「Draw」ボタンを押して解除します。

 初めてグリースペンシルで線を引くと、以下のように色情報である「Grease Pencil Colors」が追加され、またキーフレームにも登録されます。
f:id:rikoubou:20180802151240p:plain

 Grease Pencil ColorsのFillの値を「1」に変更すると、線の内側を自動的にFillの色で塗りつぶしすることができます。
f:id:rikoubou:20180802151523p:plain

 Stroke、Fill両方において、パレットから色を変更することもできます。
f:id:rikoubou:20180802151831p:plain

 線の色を追加する場合は、以下のように「+」ボタンを押して追加します。青くなっている部分が現在選択されている色になります。
f:id:rikoubou:20180802152024p:plain

 追加した色で黒目部分を描きます。
f:id:rikoubou:20180802152240p:plain

 同じ方法でもう片方の目も描きます。
f:id:rikoubou:20180802152416p:plain

 これで1枚分の目が描けました。

 
4:差分を描いていく
 パラパラマンガ風にしたいので、次は差分を描いていきます。

「Grease Pencil Layers」の「Onion Skinning」にチェックを入れてオニオンスキンを有効にします。
f:id:rikoubou:20180802152738p:plain

 次にDobe Sheetのキーフレームを「4」まで移動させます。
f:id:rikoubou:20180802152912p:plain

 この状態で「Draw」ボタンを左クリックすると、新たにキーフレームが追加され、一つ前のグリースペンシルでの記述がオニオンスキンの機能で薄っすらと表示されます。
f:id:rikoubou:20180802153205p:plain

 オニオンスキンを参考に半目ぐらいになる差分を描いていきます。
f:id:rikoubou:20180802153504p:plain

 同じ方法で「7」のキーフレームに閉じた差分を描いていきます。
f:id:rikoubou:20180802153651p:plain

 ここまでできたら「Alt+Aキー」を押してアニメーションを再生してみます。以下のようにパラパラマンガのように瞬きします。
f:id:rikoubou:20180802153936g:plain

 あとは適当にキーフレームをコピーしたりタイミングを調節したりして出力するだけです。


5:グリースペンシルの出力方法
 4までできたのでカメラワークなどを調節して以下のようにしました。
f:id:rikoubou:20180802160809g:plain

 これを動画として書き出したいのですが、「Animation」ボタンを押して通常の方法でレンダリングをしてもグリースペンシルを含めてのレンダリングはしてくれません。
f:id:rikoubou:20180802161115p:plain

 なので「Open GL」のレンダリングボタンを押して出力します。
f:id:rikoubou:20180802161251p:plain

 するとちゃんとグリースペンシルを含めてレンダリングされます。


 以上がグリースペンシルの簡単な使い方の紹介です。

 正直、設定項目なども多いのでどうやるのが一番良いかはわかりませんが、これでとりあえずパラパラマンガみたいなのは作れることがわかりました。

 実際アニメーターのりょーちもさんがBlenderを使ってアニメのOPを作成したりもしているので、無料で試せるデジタル作画ツールとしても使おうと思えば使えるようです。


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


・参考資料

【Blender】Curve(カーブ)に合わせて形状を作成する方法

 最近ネタがなかったので記事の更新が滞っていました。今回はCurveに合わせて色々作る方法を紹介します。

 以下のような感じのものを作っていきます。
f:id:rikoubou:20180731183056p:plain


1:軌道となるCurveを作成する
 Blenderを起動させ、「X」キーを押してデフォルトで出てくるCubeを削除します。
f:id:rikoubou:20180731174244p:plain

 Cubeを削除したら「Shift+Aキー」を押してメニューを表示させ「Curve」→「Path」を選択します。
f:id:rikoubou:20180731174434p:plain

 Pathを追加したら下の部分から「Edit Mode」を選択して「編集モード」に切り替えます。
f:id:rikoubou:20180731175044p:plain

 編集モードに切り替えたらPathの各頂点を適当に動かして軌道を作成します。
f:id:rikoubou:20180731175951p:plain

 頂点数が足りない場合は複数の頂点を選択した状態で「W」キーを押して「Subdivide」を選択すれば頂点を増やすことができます。
f:id:rikoubou:20180731180218p:plain

 軌道ができたら再び「Object Mode」に切り替えます。
f:id:rikoubou:20180731180423p:plain


2:押し出す形状のCurveを作成する
 オブジェクトモードの状態で「Shift+Aキー」を押してメニューを表示させ「Curve」→「Nurbs Circle」を選択します。
f:id:rikoubou:20180731180634p:plain

 追加したNurbs Circleを選択した状態で「Edit Mode」を選択して「編集モード」に切り替えます。
f:id:rikoubou:20180731180840p:plain

 編集モードに切り替えたら「Shift+右クリック」で以下のように4つの頂点を選択します。
f:id:rikoubou:20180731181219p:plain

 その状態で「S」キーを押してマウスを移動させて、以下のような形になったら「左クリック」で確定させます。
f:id:rikoubou:20180731181332p:plain

 押し出す形状ができたら再び「Object Mode」に切り替えます。
f:id:rikoubou:20180731181442p:plain


3:軌道に沿って押し出す
 オブジェクトモードに切り替えたら軌道となるCurveを選択した状態で「Dataアイコン」を左クリックし「Geometry」の「Bevel Object」を左クリックします。
f:id:rikoubou:20180731181723p:plain

 押し出し形状にしたいCurveを選択します。
f:id:rikoubou:20180731182026p:plain

 すると以下のように軌道のCurveに沿って押し出す形状のCurveが表示されます。
f:id:rikoubou:20180731182055p:plain

 押し出す形状のCurveのサイズを調節することもできます。
f:id:rikoubou:20180731182326p:plain


4:メッシュ化する
 メッシュとして扱いたい場合は軌道となるCurveを選択した状態で、3D Viewの下側にある「Object」→「Convert to」→「Mesh from Curve/Meta/Surf/Text」を選択します。
f:id:rikoubou:20180731182557p:plain

 するとメッシュに変換され、メッシュとして扱えるようになります。
f:id:rikoubou:20180731182836p:plain


 以上がCurveに合わせて形状を作成する方法です。

 パイプやケーブルなどを作成する時などに使えると思います。


・参考資料

【映画鑑賞】未来のミライの感想(ネタバレあり)

www.youtube.com

 リズと青い鳥の記事を書いた時には多分もうやらないとは思っていたのですが、細田監督作品の「未来のミライ」を鑑賞して非常に好みな作品だったので感想みたいなことを書いてみます。

 どういう作品なのかはパンフレットのインタビューを読めばぶっちゃけ全部わかるので特段この記事を読む必要はないかと思いますが、一応文章化しておきたいと思った次第です。

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

 また記事中に出てくる画像は全てPVからキャプチャしたものです。


 では始めます。


1:未来のミライはどういう作品なのか
 パンフレットに書いてありますが、この作品の着想は「朝起きた時に子供にどんな夢を見たのかを尋ねた時に『大きくなった妹に逢った』と答えた」ところからきています。誰もが経験してきたはずなのに「子供は大人と違う反応や行動をするよくわからないもの」みたいなイメージはなんとなく多くの人が持っているかと思います。

 それはおそらく親でも同じで「子供ってなんなんだろう? 何を考えてるんだろう? どうやってできないことができるようになっていくんだろう?」という疑問に対する細田監督の回答なんだと感じました。

 細田監督の過去の作品として「おおかみこどもの雨と雪」がありますが今回の「未来のミライ」は対になる作品だと個人的には思っています。

 おおかみこどもの雨と雪は「親目線」が色濃く出ていましたが、未来のミライは「くんちゃん」という4歳が主人公ということもあって、物語もカメラも基本的には4歳児の目線に寄り添うように描かれています。「子供というのはきっとこういう風に周囲が見えていてこうやって物事を理解したりできるようになっていくんだろう」というのを子供の気持ちになって作られた作品が未来のミライなのです。
f:id:rikoubou:20180722144246p:plain

 くんちゃんの駄々をこねるところや、さっきまで怒ってたのにすぐに機嫌がよくなったりなど、アニメーションの芝居も含めて「あるある」と思わせる描写が多く記号的ではない描かれ方をしているところからも、子供目線を大事にしているというのが伝わって来ました。
f:id:rikoubou:20180722151618p:plain


2:くんちゃんが過去や未来へタイムスリップしているのは?
 こちらもパンフレットにありますが、過去やゆっこのところなどは「空想のシーン」であると書かれています。要は全てくんちゃんの「想像上の出来事」なのです。

 これでげんなりする人もいるかもしれませんが、私はこれも作品に沿った演出だと考えています。というのも、実際に子供の頃想像上の友達と会話したりなど現実と空想の区別がついていない時期というのがあります。4歳児の主観であると考えれば、急に犬が人間になって会話しだしたり未来の妹がやってきたりすることもなんらおかしくはありません。ラストの未来へタイムスリップするところも、おそらくくんちゃんの空想です。

 そうすると「4歳児だけでお雛様を片付けるのは無理」という意見が出てくると思います。自分もそこは矛盾するところだと思っています。

 しかし制作側が気づかないわけないと思うので、あえてそうしていると考えるのが妥当です。もしかしたら本当にくんちゃん一人で片付けたのかもしれないし、おとうさんが忘れているだけで実は片付けていたのかもしれない、そのあたりの細かいことは描かなくても良いという判断をしたのだと個人的には解釈しています(本筋で必要なことではないので「こまけぇことはいいんだよ!」という可能性もありますが)。

 またタイムスリップする時は大体くんちゃんの機嫌が悪い時です。怒られたり、嫌なことをやらなきゃいけない時だったり、現実逃避の先として空想の世界へ入るという構造にもなっています。自分のアイデンティティが揺るがされた時に空想の世界へ行き、そこでヒントをもらって現実での折り合いをつけていく。そうやってくんちゃんは「おにいちゃん」になっていく、そんな成長のきっかけをくれる要素としてタイムスリップが機能していると思います。
f:id:rikoubou:20180722151533p:plain

 このあたりもパンフレットの監督インタビューに書かれていますが、私はそう解釈しました。


3:演出、技術的な面について
 冒頭でも書きましたが、主人公が4歳児なのでカメラ位置が基本的に低いです。カメラ位置をくんちゃんに合わせることで、見ている人の目線もくんちゃんと同じになるので「子供から見た世界」の表現になっています。もちろん説明のための俯瞰があったり、大人だけのシーンは大人の目線になってはいるんですが、くんちゃんがメインとなっているところはカメラ位置が低いです。

 映画冒頭から圧倒される3Dを組んだ背景での空撮からの家のアップをはじめとして、3Dを使った背景の立体的カメラワークというのが多く出て来ます。最初の方のくんちゃんが階段を降りて行くところとかも途中で木で被りながらカメラを回転させている立体感が出ていてとてもよかったです。そういった意味ではかなり現実よりなカメラワークを意識している感じはあります。
f:id:rikoubou:20180722154858p:plain

 カメラ固定で長回しのカットも多かったです。細田監督は割と同ポジだったり長回しだったりを時かけのときぐらいから使ってはいたと思いますが、今回はさらに使われていた感じがあります。アニメにおいて長回しは書く人が大変になるのであまりやらないのですが、それをあえてやるというのは実写を意識していたのではないかと思います。

 また対照的にお雛様の片付けのシーンなどで印象的だったのが「人物の移動を直接見せない」という演出ですね。人物全員がフレーム外に出た後にカメラを階段上に向けるとすでにそこに人物がいるというところ(文字だけでの説明が難しい…)。

 ともすれば瞬間移動したようにも取られかねないのですが、ある意味で「空想」だと示しているカットなのかなとも思いました(空想シーン以外でも使ってた気もするけど)。

 そして何より子供の描き方がものすごくよかったです。動きも含め、親の言葉に対する子供の反応が「実際にありそう」と思わせるだけの力がありました。


4:家の階段について
 これも演出に関わってはいるのですが、舞台となるこの特殊な家における階段は重要な意味を持っています。この階段についてもパンフレットに書いてあるので深くは語りませんが、個人的な解釈としては階段の向きは「成長度合い」だと思います。

 くんちゃんは最初の頃は階段を下って空想の世界へ入っていっていました。それは「幼児退行」をしていると言えます。しかし未来へ向かう時の最後の空想は家の一番高いところにある浴室です。

 これは単純に階段を昇ることを「成長」、階段を降ることを「退行」という意味に当てはめていると解釈しました。
f:id:rikoubou:20180722154120p:plain


 以上、基本的にパンフレットに書いてあることに多少の自分の意見を混ぜただけですが、色々書き出してみました。

 あまり深く考えずに子供の気持ちになって現実も空想も全部ひっくるめてそのまま受け止める、というのが一番楽しめる見方なのかな、と思っていたりします。

 自分が観た回はあまり席が埋まってなさそうな感じだったのですが、少なくとも公開が短くなったりするのは惜しい作品ですし、細田監督作品の中でも上位に入る出来だと思うので観に行った方がいいかと思います。


・参考資料

【Blender】音付きで動画をレンダリングする方法

rikoubou.hatenablog.com

 以前の記事で「Blender上で音をつけてもレンダリング時には音が付かない」と書いていたのですが、色々設定をいじった結果「実はできる」ことが判明したので、そのやり方についての備忘録です。

 今回は簡単なアニメーションにBGMをつけるというのをやっていきます。


1:音楽ファイルを用意する
maoudamashii.jokersounds.com

 なんでも良いのですが今回はフリーで使える「魔王魂」さんの楽曲をお借りすることにします。
 以降の内容は「魔王魂」さんの「ジングル13」という楽曲を使用します。


2:Blenderで音付きのアニメーションを作成する
rikoubou.hatenablog.com
 作り方は以前の記事と同じように作成します。

 今回作ったものは以下のようなものです(実際にはビデオシーケンスエディタに追加した音も流れています)。
f:id:rikoubou:20180717180014g:plain


3:音付きでレンダリングする
 ここが本題です。やり方を説明していきます。

 はじめに「Renderアイコン」の「Output」の項目にある「PNG」となっているプルダウンから「FFmpeg video」を選択します。
f:id:rikoubou:20180717180248p:plain

 次に「Encoding」の項目にある「Presets」プルダウンから「h264 in MP4」を選択します。
f:id:rikoubou:20180717180534p:plain

 このままレンダリングボタンを押せば普通の動画出力と同じですが、ビデオシーケンスエディタに追加した音も一緒に出力する場合はもう一つの項目の設定も行います。

「Encoding」の項目にある「Audio Codec:」の「None」となっているプルダウンから「AAC」を選択します。
f:id:rikoubou:20180717180709p:plain

 すると以下のように設定されます。
f:id:rikoubou:20180717180846p:plain

 この状態で「Animation」ボタンを押します。
f:id:rikoubou:20180717181004p:plain

 すると以下のように音付きで動画が出力されます。


 以上がBlenderで音付きで動画をレンダリングする方法です。

 単に設定をいじればよかったというただそれだけでした。