たつぷりの調査報告書

博士後期課程(理学)の学生が趣味でUnityやBlenderで遊ぶブログです。素人が独学で勉強した際の忘備録です。

UnityでMidiデータのテンポに合わせてオブジェクトの生成速度を制御する

どうもこんにちは、たつぷりです。今回は以下の投稿の続きです。

tatsupuri.hatenablog.com

前の投稿の範囲で作成したプロトタイプでは曲のテンポはこちらで指定していました。つまり曲のテンポが一定の曲しか扱うことができなかったのですが、Midiはメタイベント内にテンポの情報が格納されているらしいということを知ったので、Midiデータを読み込む際テンポの情報を取り込んで自動で曲の速さを制御できるようにすることを今回の目標にしたいと思います。

テンポの制御

練習用データ

テストとして次の楽譜をMuse Scoreで作成した。 f:id:Tatsupuri:20201017201252p:plain

つまり4小節の間テンポが80 [四分音符/分]で、その後テンポが速くなり、100 [四分音符/分]になる。まずは簡単のためこれを再現できることを目標にした。完成品は以下の動画。

youtu.be

やったこと

前回に引き続き、SMFを読み取る部分のプログラムは

github.com

を参考にした。Keijiroさんに感謝。ただこのプロジェクトにおいてMidiからデータを取得するMidiFileDeserializer.csスクリプトではテンポは手で与えていてファイルから読み取っていなかったので、その部分を自分で書くことにした。

メタイベント

テンポの情報はメタイベントとして表現されている。今回は自分でテストデータを作って信号を分析したのと同時に

www.hikari-ongaku.com

を参考にした。

結局、テンポ情報のメタデータFF 51 03 xxxxxx というように表現されている。FFメタデータを表す。51がテンポの情報であることを示す。03がデータの長さを指定しており、続く実際のテンポの値が3バイトで表現されることを表している。xxxxxxが3バイトのテンポ情報で単位は[μs/四分音符]である。

したがって通常のテンポの単位である [四分音符/分]に変換するには

tempo = 60000000/xxxxxx

を計算すれば良いことになる。

以上のことから実際にやることは、

  1. FFを検出したら、続く1バイトの情報からテンポ情報かどうかを判定する

  2. テンポ情報の場合は続くデータ長の情報を飛ばして(3バイトということはあらかじめわかっているので)、3バイトのテンポ情報を取得する

  3. メタイベントがテンポ情報でなければ続くデータ長の情報を読み取り、その長さの分飛ばす

  4. 得られたテンポ情報を用いてノートの生成スピードを制御する

の流れである。

メタデータの取得

メタデータの取得に関しては、今回参考にさせてもらっているMidiFileDeserializer.csにおいてはReadTrack メソッドにおいてStatus byteをstat変数に格納している。つまりstat == 0xffu が真のとき、そこから続くデータ列がメタデータであることを表している。

もとのプログラムではメタデータは使用しないためその分のデータを飛ばすプログラムが書かれているのでそこを書き換えて必要な情報を得ることにする。以下のスクリプトは元のプログラムMidiFileDeserializer.csに含まれるif文の中身を書き換えている。

if (stat == 0xffu)//メタイベントを表す。以下が元プログラムの書き換え
{ 
    var meta = reader.ReadByte(); 
    if (meta == 0x51u)//テンポ情報
    { 
         var dataLengh = reader.ReadMultiByteValue();
        //データ長の情報。ここでは03が入るはず。(テンポの情報は3バイトであらわされる) 

         var data = reader.ReadBEUInt24();
        //テンポのデータ。単位は[ms/qn]。通常表記のテンポ[qn/min]に直すには、逆数に60000000をかければ良い。 
         var tmp = Math.Round(60000000 / (float)data); 
        //ここで用いている定義だと出力するとき小数の情報が落ちてしまうので四捨五入しておく。
         events.Add(new MidiEvent 
         { 
             time = ticks, 
             status = stat, 
             data1 = meta, 
             data2 = (byte)tmp 
          }); 
    } 
    else 
    { 
         reader.Advance(reader.ReadMultiByteValue());
         //reader.ReadMultiByteValue()で続くデータ長さを取得。その分Advanceで送っている。 
     } 
 }

ただしこのスクリプト内で用いたreader.ReadBEUInt24() メソッドは元のプログラムでは存在していない。テンポを表す3バイトのデータを読み取るためにそれ用のメソッドを新しく用意した。

MidiDataStreamReader クラスに以下のようにしてこのメソッドを追加した。

public uint ReadBEUInt24()  
        { 
            uint b1 = ReadByte(); 
            uint b2 = ReadByte(); 
            uint b3 = ReadByte(); 
            return b3 + (b2 << 8) + (b1 << 16); 
        }

以上のように書き換えたことで、テンポの変更指示があったときは、その時の時間 [ticks]におけるテンポ[四分音符/分]を得ることができるようになった。

テンポの自動制御

自分のプロジェクトでは入力されたテンポに応じてノートの生成速度を変えている。これはどのように実装しているかというと、詳しくは以前の投稿にまとめてあるが、以下のようにする。 四分音符一の長さに相当するTick数であるticksPerQuarterNoteと今取得したテンポの情報tempo があれば、ゲーム内で経過した時間(ここではrealTime [秒]とする)を以下の計算でtick単位に変換することができた。

realTime[秒] * ticksPerQuarterNote[ticks/四分音符] * tempo[四分音符/分] / 60[秒/分] = realTimeInTicks[ticks]

つまりUpdate関数内でTime.deltaTimeを足していきrealTime[秒]を求め、上の計算によって単位をticks 変換した上でmidiEvent.timeを超えたかどうかでそのイベントを見るかどうか決めれば良いのである。 基本的には以上の方針で実装できるが、基本的なことだが以下の注意をしておく。自分は最初これを見落としていて曲が数小節ずれる現象に遭遇した。

分解能の問題

最初自分はTime.deltaTimeを足していってrealTime[秒]を計算して、この値をticks単位に変換して用いていた。しかし少し考えればわかることであるが、このrealTime[秒]は徐々に大きくなってきてくるのでテンポが変わった際に変換の結果がTickの分解能よりも大きくなってしまっていくつかの複数の異なる時間のイベントを同時とみなしてしまう現象が生じる。

これを避けるために時間のカウントを秒でカウントするのではなく、tickでカウントすることにする。つまり、各Time.deltaTime[s]を[ticks]に変換して1フレーム間に経過するtick数を計算してこれを足し上げていき、この値を各イベントが起こった時間[ticks]と比較することでノートのオブジェクトを生成するタイミングを決める。

このように すると上の分解能の問題を回避できる。

以上の方針で実装すると、Muse Scoreで作成した楽譜通りの曲のテンポに合わせてノートオブジェクトの生成速度を自動で制御できるようになった。

実際の曲で試す

テンポの変化が何度かある実際の曲で上のプログラムを試してみた結果を以下に示す。

youtu.be

画面のInspector ViewでNote GeneratorのTempo を見ると、テンポを取得している様子を見ることができる。また実際それに合わせてノートの生成速度が制御されていることが確認できる。

Muse Scoreで標準MIDIファイルを作成する

どうもたつぷりです。こんにちは。この記事は補足記事です。

位置づけとしては前のMIDIをUnityに取り込んで音ゲーを作るという言った趣旨の投稿で、Muse Scoreでテスト用のMIDIを作成すると書いた部分の補足説明です。この内容まで前の記事に入れてしまうととても長くなってしまいそうだったのでMuse Scoreに関する部分だけ分離させて補足記事にすることにしました。

メインの記事はこちらです。 tatsupuri.hatenablog.com

この記事では全くの素人がテスト用にちょっとMIDIのデータを作りたいというモチベーションで触った、非常に限定的かつ初歩的な解説になっていますのでMuse Score詳しい使い方を書いているわけではありません。アプリケーションを起動して、音符を並べてSMF(標準MIDIファイル)で出力するまでの一連の流れをまとめているだけです。

なぜ私はMuse Scoreを選択したか

SMFのデータを得たいだけなら、様々な選択しがあったはずだがなぜ私がどのようなMuse Scoreを選んだのか一応説明しておく(選択肢を網羅的に調べたわけではないことは断っておく)。これは以下のような理由である。

まず一つは、Muse Scoreは楽譜のデータベースが用意されているからである。今回最終的な目標が音ゲーを作ることであった。そのために「楽譜」->「SMF」->「Unityで対応したリズムパターンを生成」の一連の流れを実現したかったのだが、「楽譜」->「SMF」が充実している方が良いと判断したからである。

次に、Muse Scoreは無料で使える点である。そもそも有料のものは最初から選択肢にない。

このように特に深く考えて選んだわけではないが、このような理由でMuse Scoreを選択した。特に一つ目の理由が大きいと思う。

Muse ScoreでMIDIデータを作成する

ここではUnityでSMFを扱うテストデータを作成するモチベーションでMuse Scoreの超初歩的な使い方をまとめておく。今回はピアノとドラムセットでテストデータを作成して解析を行った。

Muse Scoreの使い方(最低限)

今回必要な範囲でのみ、Muse Scoreの使い方をまとめておく。Muse Scoreは以下からダウンロードする。

musescore.com

Muse Scoreは初めて触ったところなので、以下の解説は正しくはあってもスマートでない可能性が非常に高い。

譜面の初期設定

まずMuse Scoreを起動すると以下のようなウィンドウが現れる。ここでは新しいスコアの作成を選択する。 f:id:Tatsupuri:20201015044253p:plain

次に曲の基本情報を入力することになるが、今回はテスト用なので特に気にせずに進む。 f:id:Tatsupuri:20201015044257p:plain

次にテンプレートを選択するように言われる。今回は、「一般 」>「 楽器を選択してください」を選択して次に進む。 f:id:Tatsupuri:20201015044301p:plain

すると楽器の一覧が表示されるので好きな楽器を選んで、「追加」を押す。ここではピアノを選択した。 f:id:Tatsupuri:20201015044304p:plain

ピアノを選択すると両手分の楽譜が追加されるみたいだが、今回は必要ないので追加されたリストの中からヘ音記号の譜面を選択して消去を押して除いておく。次に進むと、調を選択することになる。今回はハ長調にする。 f:id:Tatsupuri:20201015044308p:plain

次に進むと、拍子などに関しての設定を行うことができる。アウフタクトの設定とかもあっていじると面白そうだが、今回はデフォルトのままにして、「完了」を押す。 f:id:Tatsupuri:20201015044311p:plain

以上で初期設定が完了し、譜面の編集が行えるようになる。

楽譜の作成

テスト用なので全く高尚なことはせず、「カエルの歌」を適当に打ち込んでみる。まず最初に4分音符の「ド」を打ち込む。これには「Nキー」を押して入力モードに入る。四分音符のショートカットは「5」。この上で五線譜の上にカーソルを合わせると青く音符が現れるので、音符を置きたいとこでクリックして確定する。 f:id:Tatsupuri:20201015044320p:plain

ちなみにドラムセットの時は以下の図のように、下のほうにドラムセットに含まれる音が表示される。筆者はよく理解していないが、五線譜の上では同じでも違う音色という場合があるようだ。下の一覧から音色を選択してから音符を置くとそれが適用される。 f:id:Tatsupuri:20201015044328p:plain

これを続けて、適当に「カエルの歌」っぽいものを作った。なお、筆者は音楽的才能が皆無なのでこれが本当にカエルの歌かどうかは保証しないが、再生してみたらそれっぽかったので良しとする。 f:id:Tatsupuri:20201015044315p:plain

標準MIDIファイルで出力する

次に上で作成した譜面をSMFで出力する。これには「ファイル」>「エクスポート」を選択する。保存場所を選択し、ファイルの種類を標準MIDIファイルに選択して保存する。 f:id:Tatsupuri:20201015044324p:plain

まとめ

以上の流れで、非常に簡単な範囲ではあるがMuse Scoreを用いて楽譜を作成し標準MIDIファイルで出力することができた。

MIDIって何?の状態からUnityを使って音ゲーを作ってみる

こんにちは、たつぷりです。今回の記事は少し長くなってしまいましたが、MIDI形式の音楽とUnityを使ってリズムゲームを作ってみたという話です。私はMIDIって何のことがほとんど知らない状態だったのですが、いろいろあってこれを機に少し調べてみたので、忘備録としてこの記事にまとめておくことにしました。

目標

今回目標にするのは、次の動画のようなリズムゲーム(のプロトタイプ)を作成することである。リズムゲームといってもこの動画の段階ではまだUIを作っていないのでゲームとしての体はなしていない。

youtu.be

ではここでは何をしているのかというと、以下のようなことである。

  • Muse Scoreで自作したリズムパターンをSMFで出力し、Unityで読み込む

  • SMFの情報に合わせてリズムを表すゲームオブジェクトを生成、移動させる

  • 音色(上の動画では、バスドラム、スネア、クローズドハイハット)に合わせてラインを分ける

これを曲に合わせて実行することで典型的なリズムゲーム感を出すことを目標にしている。

なぜMIDIを使ってみようと思ったのか?

これに関しては強い信念があるわけではないが、ある日Unity JapanのYouTubeチャンネルで以下のリンクの動画を見た。 www.youtube.com

これを見た筆者は、それまでMIDIって名前を聞いたことがあるくらいだったが、MIDIの音を発するタイミングや消すタイミングの情報などで音楽を表現する仕組みを面白いと感じた。その記憶があってふと音ゲーを作ってみたいなあと思った際の計画段階で、MIDIを使ってみる方針を固めた。

さらに言うならば、筆者は音楽的な才能と教養が皆無なので編曲したりましてや自分で曲を作ったりすることは不可能なので、楽譜のリソースが多いに越したことはないと思っていた。その観点で調べていた時にMuse Scoreには有志の人たちが楽譜を上げてくれていて、それをMIDI形式でダウンロードできるということを知ったのでMIDIという選択肢は固いものとなった。

今思うといろいろ突っ込みどころはあるが、このような理由でMIDIとUnityでリズムゲームを作成することにした。

Unityと標準MIDIファイル(SMF)

UnityではMIDIは標準サポートしていない。なのでMIDIから発音のタイミングなどの情報を得るためには本来は自分でImporterなどを作る必要がある。しかしこれに関しては以下のGitHubリポジトリで非常にわかりやすく実現されているので、このプロジェクトで勉強しつつ、改造して使わせていただきました。Keijiroさんに感謝。

github.com

本当は一から勉強する必要があると思うが、今回はプロトタイプを作るだけなので手早く最小限の理解を目指す。具体的に何をするかというと、(この上なく幼稚なやり方かもしれないが)Muse Scoreでテスト用の簡単な音源を作成し、上のリポジトリのプロジェクトを参考にしながらMIDIイベントの情報を出力する。そして得られた出力のパターンと自分で作ったテスト用の楽譜を照らし合わせ解析を行う。

なお、Muse Scoreの使い方に関しては補足記事に少しだけまとめた。 tatsupuri.hatenablog.com

今回の目的で必要な情報をだけを得ることに限れば、個人的にはこのように実験的に理解する方が早いのでこの方法を用いた。

Unity側の準備

上でも述べた、MidiAnimiationTrack のプロジェクトを使わせてもらう。

まずMidiFileAssetImporter.csの中身を確認してみると、ドラックアンドドロップしてきた標準MIDIファイルをMidiFileDeserializer クラスのLoadメソッドでSMFのルールに従って情報を読み取っている。

MidiFileDeserializer.LoadMidiFileAsset クラスのインスタンスを返す。これはtracks という配列を示す。これは読み込んだSMFファイルがトラックごとに分けられ、各要素にそのデータが格納されています。 各トラック(つまりtracksの各要素)は、MidiAnimationAsset  クラスである。

今回自分が必要とする情報はMidiAnimiationAssettemplate フィールドである。

具体的に今回自分が欲しい情報は、

  • track.template.duration  : 曲の長さの情報。単位はticks。

  • track.template.ticksPerQuarterNote  : 四分音符一個分の長さで経過するticks

  • track.template.events  : MIDIイベント、すなわち発音・消音、音程、音色などの情報が含まれている。

などである。これらを後でUpdate関数などから呼べるようにMidiAnimiationAsset クラスをパブリックに書き換えさせていただく。

SMFの解析

SMFについてほとんど知らないが、今回必要な範囲において使われているデータを実験的に理解することを試みる。 やったことはMuse Scoreでテスト用のMIDIデータを用意し(Muse Scoreでテスト用MIDIを作成する)、UnityのコンソールにMIDIイベントを出力し、楽譜との対応関係から必要な情報を読み出すことである。

midiEventSet = track.template.events;

 foreach (MidiEvent midiEvent in midiEventSet) 
{ 
    Debug.Log(midiEvent.time+","+ midiEvent.status + ","+ midiEvent.data1 + ","+ midiEvent.data2); 
}

上記のようにしてMIDIイベントを出力し、その数字の配列と自分が作成した楽譜を見比べて、必要な情報を読み取るのである。ここで今回の目標(音ゲーの作成)のために必要な情報を整理しておくと以下のようなものである。

  • 音色:ドラムの種類の識別に使う(スネア、クローズドハイハット、・・・など)

  • 音階:ピアノなど音階の識別

  • 発音(消音):どこで音を出す(消す)かの情報。今回はまず発音のタイミングでオブジェクトを生成するように設計するので基本には発音の情報のみで十分。

使ったテストデータは以下の二つである。 f:id:Tatsupuri:20201015052450p:plain f:id:Tatsupuri:20201015052507p:plain

以下が実際の出力から分析した結果である。

ピアノ

xx,144,yy,80  = xxの時間にyyの音(ピアノ)を出す xx,144,yy,0  = xxの時間にyyの音(ピアノ)を消す

yy = 60 がト音記号の下第一線の「ド」 この値は1増えるごとに半音上がる

つまり、ドレミファミレド =60,62,64,65,64,62,60 ということになる。

ドラム

xx,153,yy,80  = --の時間にyyの音(ドラム)を出す xx,153,**,0  = --の時間にyyの音(ドラム)を消す

36がバスドラム 42がクローズドハイハット 40が(エレクトリック)スネア

同時に複数の音を発音するときは単純に、同じ時間のデータを複数用意することで表現されている。

音ゲーにする

以上で得られた結果から実際に音ゲー風にしていく。音ゲーの構成要素を整理してみると以下のようになる。

  • 楽譜の発音のタイミングに合わせて、オブジェクトを生成する

  • 生成したオブジェクトを動かす

  • 音色などに応じて生成する位置を変える(つまりスネアのライン、ハイハットのライン、・・・などと分けていく)

  • 音源と同期させる

  • オブジェクトが溢れないようにどこかで消滅させる

音符(ゲームオブジェクト)の生成

発音のタイミングでオブジェクトを生成すること自体はそこまで難しくない。なぜなら先ほど見たようにmidiEvent.data2が80であるときに発音するので、時間発展に従って配列を読んでいって midiEvent.data2を調べてその結果に応じてInstantiateでオブジェクトを生成していけばよい。

ここで少し注意が必要なのは、時間経過に応じて処理するときはUpdateの中に処理を書いていくがUpdateで経過する時間はTime.deltaTimeである。そのため曲のテンポで指定される速さと実際の時間経過を合わせる必要があるのだ。

midiEvent.timeで取得できるのはそのイベントが何tickで起こったかという情報である。また、四分音符の長さで経過するtick数はtrack.template.ticksPerQuarterNote で取得している。ここで、曲テンポが指定されていれば一分間に四分音符が何個入るかという情報も得られる。

これらの情報を用いればゲーム内で経過した時間(ここではrealTime [秒]とする)をtick単位に変換することができる。思想は以下のような計算である。

realTime[秒] * ticksPerQuarterNote[ticks/四分音符] * tempo[四分音符/分] / 60[秒/分] = realTimeInTicks[ticks]

つまりUpdate関数内でTime.deltaTimeを足していきrealTime[秒]を求め、上の計算によって単位をticks 変換した上でmidiEvent.timeを超えたかどうかでそのイベントを見るかどうか決めれば良いのである。

このようにして実時間とテンポで指定される曲の速さを同期させて、オブジェクトを生成させることができる。

音色(音階)に応じた生成位置の変更

上で分析したようにドラムの音色の情報はmidiEvent.data1から読み取れるのであった。なのでこの値の違いに応じてInstantiate させる時のpositionの情報を変えればよいのである。例えば自分は次のように実装した。

void NoteSet(float time,int tone) 
    {
        if (tone == 36)//bass
        {
            Instantiate(notePrefab, new Vector3(1.5f, 0, startPoint), Quaternion.identity);
        }
        else if (tone == 40)//snare
        {
            Instantiate(notePrefab, new Vector3(0, 0, startPoint), Quaternion.identity);
        }
        else if (tone == 42) //closed high hat
        {
            Instantiate(notePrefab, new Vector3(-1.5f, 0, startPoint), Quaternion.identity);
        }
    }

音符(ゲームオブジェクト)を動かす

これもUnityの基本である。Updateごとに座標を動かしていけば良い。この時、動かすスピードをインスペクターから調整しておける等にしておくとよい。

音源と同期させる

音源と同期させることに関しては、ここではそこまで高尚なことはせずに音楽のスタート位置の調整にとどめる。これがなぜ必要なのかというと次のような理由がある。

音符のゲームオブジェクトを生成するとき画面の奥の方に生成して、徐々に手前に動いてくる。ゲームではタップする瞬間に音源と同期しないといけない。つまりゲームオブジェクト生成は音源よりも移動時間分早くないといけないのである。

後は自分の場合は音源はMuse ScoreからMP3に出力したものを使っていたので曲の初めに微妙なマージンなどがあったりしたのでその微妙な調整などもしておかないと遅延気味に感じる原因になった。

前者が本質的な調整なのでこちらを少し詳しく書いておくと、自分は次のようにした。AudioSourceを割り当てているObjectの適当なスクリプトに曲が始まっているかどうかを表すBool型の変数を適当に定義しておく。

ここで音符のゲームオブジェクトが移動してきてタップする点まで来たときに、このBool型の変数を読みに行く。その結果曲が始まっていないことが判定できたら、ここで初めてGetComponent<AudioSource>().Play()メソッドで音楽を再生されば良い。

ただしこの場合、音楽の始まりと最初のゲームオブジェクトが一致している場合を想定しているので、そうでない時は別の方法を考えないといけないかもしれない。

マージンの微妙な調整は適当にオフセットを定義して対応する。

オブジェクトの消滅

これもUnityの基本である。オブジェクトが動いてきてあるところよりも後ろに来たら、Destroyで消滅させるといったことを実装すればよい。

まとめ

今回やったのはMIDIファイルから曲の情報を読み取り、音楽と同期するようにゲームオブジェクト生成・移動させ、よくあるリズムゲームみたいなものを作った。とりあえずまだプロトタイプのプロトタイプくらいのものだが、引き続き開発し「音ゲー」に近づけていきたい。今回は長くなったのでソースを張り付けたりはしなかったが、今後プロジェクトが進行したときにまとめて公開するつもりである。

KeynoteとBlenderで魔法陣を作成する

こんにちは、たつぷりです。今回は以前の投稿の補足記事で、以下のような魔法陣をKeynoteBlenderで作成します。補足記事ですので基本的にはKeyonoteを用いて作図をするところに焦点を当てて解説をします。

f:id:Tatsupuri:20201013214550p:plain

前にBlenderのテクスチャペイントについて解説しましたが、今回はもう少し幾何学的な模様のテクスチャを作成します。もう少し凝った絵を作るならIllustratorInkscapeが必要なのかもしれないですが、筆者は本業で図を作る際Keynoteを使って作図していたのでこれで作業するのが早いだけです。

概要

基本的な手順は以下の通りである。

  1. 透過pngで魔法陣のテクスチャを作成する
  2. ShadingでEmissionとTransparencyをテクスチャのアルファ値で合成する
  3. CompositorでGlorをかける

このように非常に簡単に魔法陣を作ることができる。今回Keynoteを使うのは特に深い理由はなく、自分がいつも図を作成するときはKeynoteで作っていたからというだけである。同様のことをInkscapeなどでも行うことはできるし、そっちの方がレイヤーを分けたり細かいことができると筆者は理解している。

Keynoteでテクスチャを作成する

Keynoteを使って等価png画像を作成する。今回目標とするのは 次のような画像である。ただしここではみやすいように黒い線にしたが実際には、後で色を重ねることを見越して白い線で作成した。 f:id:Tatsupuri:20201013214600p:plain

では実際にこの図を作成していくことを考える。本質的なことではないがKeynoteを開くと、テンプレートを選ぶことができる。上述の通り今回は白い線で絵を書きたいので黒地のテンプレートを選んでおくと見やすい。 f:id:Tatsupuri:20201013214606p:plain

円の作成

円を書くだけなら、円を作成して中を塗りつぶさないように設定すればそれで良いのだが、今後より複雑な図形にも対応するためにペンツールを用いた作図方法を紹介する。

円を書く際のガイドとなる正方形を最初に作成する。 f:id:Tatsupuri:20201013214611p:plain

ペンツールを用いて実際に円を書いていく。 f:id:Tatsupuri:20201013214616p:plain

ペンツールを選択した上でガイドの正方形の各頂点を選択していく。例えば下の図のように1〜5の順番に頂点を選択する。するとガイドの正方形と同じ形の、中が埋まっていない正方形を得ることができる。 f:id:Tatsupuri:20201013214619p:plain

次に今作成した辺だけの正方形の各頂点をダブルクリックしていく。始め頂点は四角形で表されているが、ダブルクリックすると円で表現される。円で表された頂点と結ばれる点は f:id:Tatsupuri:20201013214623p:plain

ガイドの正方形を削除すると円が得られる。 f:id:Tatsupuri:20201013214628p:plain

Ctrl+Dで複製し、大きさをや位置を調節して魔法陣らしい形に整えていく。同様にペンツールを用いて正方形を作ったりすることができる。すでに述べたように正方形くらいなら、既にあるものを組み合わせて作ることが簡単いできる。

例えば以下のような図形(みる人が見ればわかると思うがオレイカルコスの結界)を作図する際もペンツールを使うと効率よく作図することができる。実際ペンツールだけで大概のものは作図できると筆者は考えている。

f:id:Tatsupuri:20201013214632p:plain

図が完成したら、各パーツを一つにまとめる。図を構成する全てのパーツを選択しAlt+Command+G、あるいは下の図に示したアイコンをクリックすることでグループ化することができる。グループ化した上で適当に画像を保存する。例えば筆者ならToy Viewer f:id:Tatsupuri:20201014003033p:plainを用いて直接保存している。

この後の作業に関して

この記事だけで完結しなくて申し訳ないが、魔法陣を作成する上でこれ以降の作業は過去の投稿と大幅な重複があるため、この記事はあくまでKeynoteでの作図法にフォーカスすることにする。ここからは以下の投稿を参照していただきたい。 tatsupuri.hatenablog.com

特に魔法陣はよく文字が書き込まれているが、それをまだ書き込んでいなかった。文字の書き込みは上のリンクで紹介するテクスチャペイントとして行う。 筆者は手元が不器用なので魔法陣の文字を書き込む際マウスで書き込むのに時間がかかったので、iPadを用いて書き込む方法などに関しても以下のリンクの記事で紹介した。

tatsupuri.hatenablog.com

EvernoteとHatena Blogでブログを書く

 
どうもたつぷりです。こんにちは。私はいつもEvernoteにメモを書き溜めてそれをはてなブログにインポートしてブログを更新しています。
最近EvernoteのアップデートがあったのでこれをきっかけにEvernoteはてなブログと連携してブログを書く方法を(自分用の)忘備録としてまとめておくことにした。もしかしたら誰かの役に立つ可能性もあるのでブログ記事にしました。
 
既に最新版Evernoteに関してのレビュー記事はたくさんありますが、本稿ではEvernoteでブログを書く際に気になったことなども指摘しています。
またこの記事は網羅的な情報は書いておらず、最低限のことしか書いていません。
 
 
今回の記事はEvernoteで作ったノートをそのままインポートして作成しました。

Evernoteでノートを作る

本稿を書くために用いたEvernoteのバージョンは10.0.10である。また、Mac,Windows版いずれも使用した。
 
すでに話題になっているように、この間のアップデートでアプリ版でもノートに見出しを付けられるようになった。これまでもブラウザ版ではできていたが、アプリ版でも今回導入されたということになる。
 
ショートカットはMarkdown記法と同じで「#」記号を使うことで、見出しを作ることができる。つまり
# hoge1
## hoge2
### hoge3
と入力すると、以下のようにされる。

hoge1

hoge2

hoge3

 
これまでのEvernoteではこのように見出しを簡単につけられなかったので、#マークを明示的に書いておいて、Markdown形式ではてなブログにインポートすることで見出しをつけていた。下でも改めて注意するが、はてなブログにインポートする際に見出しを引き継ごうとすると、WYSIWYG(What You See Is What You Get)モードで記事を作成しておく必要があるようだ。
 
他にも箇条書きや、番号付きリストもMarkdownと同じ記法で使うことができる。すなわち「*」を入力することで箇条書きに、「1.」と入力することで番号付きリストを作成できる。
また、詳細は省くがコードの埋め込みなどもEvernote上ではMarkdownと同じ方法で使うことができたが、はてなブログにインポートする際、その構造は「WYSIWYG」モードでは保たれなかったので改めてはてなブログのエディタ上で編集する必要があるようだ(行内コードはWYSIWYGでも保たれた)。

はてなブログにノートをインポートする

ここではEvernoteの記事をはてなブログに取り込む方法をまとめておく。まず、はてなブログで新しい記事を作成する。

まだEditor サイドバーにEvernoteを追加していない場合は以下の図のように「+」マークで一覧を表示し、Evernoteをオンにする。するとログインを促されるので用いるアカウントでログインする。

正常にリンクされると、サイドバーからEvernote選択するとリンクされた自身のEvernoteアカウントからノートの一覧が表示される。検索バーからノートを検索するなどしてインポートしたいノートを選択し、下の「Insert selected items」を押すとノートの内容がブログの編集画面に取り込まれる。この際編集モードを「WYSIWYG」モードにしておくことで、Evernoteの見出しなどの構造を保ったままノートを取り込むことができる。

 

気になった点

更新の際のエラー

筆者の家の通信環境の問題かもしれないが、アップデートしてからというもの以下のようなエラーが頻繁に出るようになった。これはWindows版、Mac版どちらでも確認された。今までのバージョンでも同様の通信環境でやっていたがこのようなことはなかった。通信状況が悪くても時間がかかってもちゃんと同期していた。今回なぜこのようなエラーが出ているのかまだよく理解していないので引き続き調査を続けたい。

 

画像編集のツールが毎回リセットされる

単純に筆者がまだ順応できておらず、設定の仕方を知らないだけかもしれないが次のような不便も感じた。筆者はスクリーンショットEvernoteに貼り付けて、Evernote内で編集している。この際よく使う色があるのだが、それが毎回デフォルトの色に戻っているので少し煩わしいと思っている。
 

まとめ

基本的に今回のアップデートでこれまで以上にEvernoteを用いてブログを書きやすくなったと個人的には感じている。その主な理由はノート内で見出しを付けられるようになったからである。Evernoteのより良い使い方は引き続き調査し、このブログで報告していきたい。
 
個人的にはやはりWYSIWYGは苦手なので、結局すぐMarkdownに戻ってしまうかもしれない。
 

Terrain Partyで地形をBlenderに反映させる方法

どうもこんにちは、たつぷりです。私は最近Blenderをはじめて小物をモデリングしたり、VFXのようなものを作ったりしてきました。しかしちゃんと背景があって、いろいろが物などが配置されているといった絵っぽい絵を作ってこなかったので、(Worldの設定とかではなく)背景になるような地形を作ってみたいと思いました。実際、Sculptingを使ったりして簡単に作ることもできるのですが、今回は実際の地形の情報からBlenderで地形を生成する方法をまとめることにします。

これによって「ありそうな」地形を比較的簡単に得ることができます

例えば、練習として詳細は気にせずに作ったので粗削りですが即席で以下のような地形を作ることができました。

f:id:Tatsupuri:20201012010838p:plain

特に今回はTerrian Partyというサービスを用いてBlenderに実在の地形の情報を取り込む方法をまとめました。

Terrain Party

実際の地形の情報を取り込むためには、水平からの高さの情報のマップであるHeight Mapが必要である。このような高さの情報は公開されており、今回は以下のTerrain Partyを用いることにする。

terrain.party

筆者の不勉強で、その歴史的な経緯や仕組みなどは理解していないが、terrain partyはCities:Skylinesに実在する地形を取り込むためのサービスの一種であるらしい。

とりあえず上記のURLにアクセスしてみると以下のような操作画面であった(表示位置は筆者が適用に選んだ)。

f:id:Tatsupuri:20201012010850p:plain

ダウンロードボタンを押すと、ファイルの名前を入力することになる。今回は「test」とした。するとZIPファイルがダウンロードされ、それを展開すると以下のような一連のファイルが得られた。 f:id:Tatsupuri:20201012010833p:plain

Terrian PartyではHeightマップのデータは

をもとに作成されており、これらを合わせて用いた「Merged」というデータも用意されている。

Blenderでの操作

Blenderでは、Textureに沿ってMeshを変形させるDisplacement Modifierが用意されている。そこで基本的にはPlaneを作成しDisplacement Modifierを用いて変形させればよい。しかしメッシュの変形は当然ながらその細かさに依存する。つまりSubdivision Surface Modifierなどを用いてある程度メッシュを細かくしておかないとDisplacement Modifierを適用しても変形が荒くなるので注意する。

Modifierを以下のように適用した。Subdivision Surface Modifierでは「Simple」のオプションにしておくと、平面の四角い形を変更するせずにその内部の分割数を上げることができる。Displacement ModifierではTexture CoordinateをUVにしておく。 f:id:Tatsupuri:20201012010856p:plain

Displacement Modifierで指定するテクスチャはTextureプロパティから設定する。Image>Settingsから先ほどダウンロードした画像を選択する。複数あるHeight マップの違いは以下で少し説明する。

f:id:Tatsupuri:20201012010900p:plain

Height Mapの比較

参考のために以下にそれぞれのHeight Mapに対してDisplacement Modifierを適用してみた結果を貼る。これらはいずれもDisplacement Modifierをデフォルトのパラメーターで使用した。SRTM30 Plus以外はそんなに大差がないように思える。

test_terrian Height Map (SRTM30 Plus) f:id:Tatsupuri:20201012010808p:plain

test_terrian Height Map (Merged) f:id:Tatsupuri:20201012010821p:plain

test_terrian Height Map (SRTM3 v4.1) f:id:Tatsupuri:20201012010827p:plain

test_terrian Height Map (ASTER 30m) f:id:Tatsupuri:20201012010814p:plain

調整

なお冒頭の完成品の図は、test_terrian Height Map (Merged)で変形させたものを用いている。Displacement Modifierで、Strengthを変更することで変形の大きさを変更することができる。 f:id:Tatsupuri:20201012010904p:plain

Mapの繰り返しによる、不連続な変形が気になる場合は適宜UVを編集して対応する。 f:id:Tatsupuri:20201012010910p:plain

後は適宜、マテリアルの設定など調整を行って冒頭の図を作成した。 f:id:Tatsupuri:20201012010916p:plain

Easy CanvasでiPadをペンタブのように使う

どうもこんにちは。前回の投稿https://tatsupuri.hatenablog.com/entry/2020/10/09/200740で、Blenderでテクスチャペイントをする方法に関して簡単にまとめました。

tatsupuri.hatenablog.com

その時はBlenderで用意されているテクスチャでマスクをして塗っていただけなのでそんになに気になりませんでしたが、その後で個人的にもう少し細かい模様などの書き込みをする必要があった際、不器用な私にはマウスでブラシを制御するのが大変でした。

やっぱりペンで書くように書けたらいいなと思い、アマゾンでペンタブとかを調べてみたら自分が思ったより高くて躊躇してしまいました。まったくの素人なので違いもよくわからないし、そもそも趣味で使う程度なのでまずは何かお試しはできないかと調べていたところ、「easy canvas」というiOSのアプリを知りました。

そこで今回はeasy canvasの無料お試しでiPadWindowsを接続し、Apple PencileをBlenderの作業に用いる方法とその感想をまとめました。

セットアップ

今回はWindows10とiPad Air(第3世代,iPadOS13)の組み合わせで試した。なお本稿執筆時点で筆者が用いたのは2週間の無料トライアルである。2週間たつと1480円(2020/10/6時点)払う必要がある。

さて、実際に接続までの手順をまとめるが、WindowsiPadともに設定は非常に簡単である。

Windows側の設定

以下のURLでWindows向けのプログラムをダウンロード、インストールする。その後このアプリケーションを起動するだけである。

www.easynlight.com

iPad側の設定

iPad側でも先ほど同様に、基本的に必要となるのはアプリをダウンロードするだけである。以下のURLからiPadにアプリを導入する。

EasyCanvas

EasyCanvas

  • DEVGURU Co., Ltd.
  • 仕事効率化
  • 無料
apps.apple.com

アプリ起動時に購入か、フリートライアルかを選択することになる。上述のとおり今回は2週間のフリートライアルを選択した。

接続

以下のようにして接続を行う。

まずWindows側でツールバーに下のようにeasy canvasが起動していることを確認する。 f:id:Tatsupuri:20201006204309p:plain

次にiPadでeasy canvasを起動する。すると以下のような接続待ち画面が表示される。 f:id:Tatsupuri:20201006204302p:plain

次にiPadとPCをUSBで接続する。 するとすぐにiPadにPCの画面がミラーリングされた。以下はiPadの画面のスクリーンショットである。iPadの画面に現れる3本線はメニューを表示させるボタンである。 f:id:Tatsupuri:20201006204320p:plain

実際にBlenderでテクスチャペイントの画面を開いてみた。またApple Pencileを使いたい場合はメニューを表示させて、「Apple」を選択する。

f:id:Tatsupuri:20201006204331p:plain

次にiPadに表示させたい画面範囲を変更する。そのためにはメニューバーから「Expand」を選択し、その状態で画面をピンチ・スクロールなどで表示したい位置を調整することができる。位置が決まったら再び「Expand」ボタンを押すことで固定することができる。デフォルトの表示位置に戻したいときは「Reset screen」を押す。 f:id:Tatsupuri:20201006204337p:plain

試しにテクスチャにiPadで文字を書いてみたのが以下である。Radius・Strengthの右にあるアイコンが青くなっているときはスタイラスペンの筆圧を感知する。この時は以下のようにおなじStrengthで書いているにも関わらず、筆圧に応じて濃さが変わっている。 f:id:Tatsupuri:20201006204345p:plain

次に筆圧完治をオフにして書いた文字が一番下の文字である。こちらはStrength=1で一様に書くことができた。 f:id:Tatsupuri:20201006204314p:plain

また、iPad側のメニューで、Undo・RedoはそのままUndo・Redoとして機能した。

f:id:Tatsupuri:20201006204400p:plain

そのほかのボタンに関しては、Eraserのみ機能した。ただ、表示されるのはStroke Methodであった。 f:id:Tatsupuri:20201006204352p:plain

まとめ

以上のようにeasy canvasを用いることで簡単にPCとiPadを接続し、ペンタブレットのようにしてBlenderで用いることが確認できた。今回試した範囲ではテクスチャペイントをiPadから行っただけであるが、これはスカルプチャーなどにも同様に使える。使い勝手に関しては今のところ問題なく使えているが、本物のペンタブを使ったことがないので比較できない。しかし自分が必要とする範囲においては十分機能している。