#前回のおさらい
- iPadやiPhoneで使える璃奈ちゃんボードを作った！
- 「Rina-chan Board Viewer」の導入から初期設定までを解説！とりあえず「ツナガルコネクト」が再生できた！
#今回のテーマ
- プログラムの仕組みが知りたい
- 「Rina-chan Board Viewer」を使って自分でスクリプトを書きたい
- プリセットに新しい顔を追加したい
- 璃奈ちゃんボードをもっと自分好みに改造したい
こんな方にオススメです。
#システムの解説
#####ファイル構成のおさらい
最低限必要なファイルは次の3つです。
- 音楽、セリフ等の音源(.mp3,.wav,.aiff等、大体再生出来る)
- 顔を表示するためのスクリプト(.csv)
- 顔データのプリセット(.csv筆者自作のプリセットが同梱済み)
音源やスクリプトファイルが増えた時に分かりにくくなるので、新しくフォルダを作り、音源は「music」、**スクリプトは「script」**という名前のフォルダの中にまとめようと思います。
#スクリプトについて
音楽やセリフに合わせて顔を動かすためには、「どんな顔を何秒間表示するか」といった情報を指定するスクリプトファイルが必要ですよね。
今回は、csvファイルを使ってスクリプトを書きます。(編集時はテキストファイル(.txt)で行い、実行する前にcsvに拡張子を変更するのも可。)
1行で1フレーム(つまり1つの顔)を表しています。
書き方はある程度決まっているので、まずは写真をご覧ください。
##スクリプトの書き方
例として一番上の行を見てみましょう。
0,Reye2//Leye2//mouth3,intro,3.2
3つの, によって4つの領域に分かれています。それぞれの領域にはこんな意味があります。
-
1つ目:特に意味はない！！(
前言撤回)順番調整にでも使ってください。必ず整数値を入れてください。(入れないとエラー吐きます) -
2つ目:表示する顔のパーツを記入します。予め読み込んであるプリセット(後述)の名前を記入します。
//で区切ることで複数パーツを追加出来て、順番は不問です。例の場合、Reye2,Leye2,mouth3の3つのパーツが合成されます。
-
3つ目:そのフレーム(顔)に名前をつけることができます。あとで見返した時に分かり易い名前にしましょう。必ず英語、数学のみで記入してください。(日本語で書くとエラー吐きます。記号も控えましょう。)
-
4つ目:その顔の表示時間です。単位は秒で小数値でもokです。プログラムの特性上、60fpsより大きいのものは表示出来ないので、0.02秒より小さい値にするのは控えましょう。
まとめるとこんな感じ。
整数値,プリセット名//プリセット名,名前(英数字),表示時間(秒)
スクリプトの間に区切りをつけたり、コメントを入れる時は< を使います。
空白の行があるとエラーになるので必ず〈を補ってください。
#プリセット
スクリプトに色のつくマスを1マスずつ記入することもできますが、非常に見づらくなってしまいますよね。そこで、よく使うパーツを登録しておき、その名前をいくつか書くことでパーツを合成して、短い文章量でスクリプトが書けるようにしました。
配布しているファイルの中には、**筆者が自作したプリセットが既に入っています。**アニメ版、アプリ版のライブシーンの中で登場した顔を全て収録しています。
(口パーツ11種、目のパーツ10種、頬のパーツ2種)(Ver2.8現在)
**用意したプリセットの一覧表はこちら**
//で区切ることで複数パーツを追加出来て、順番は不問です。
以下の例では、Reye2、Leye2、mouth3の3つのプリセットを組み合わせたものです。
0,Reye2//Leye2//mouth3,intro,3.2
↑Boardのスペルミスは許して……
#アニメーションの仕組み
アニメーションのプログラムは以下のような構造になってます。
例えば、再生開始後既に10秒経過した後で、「画面A」を3.2秒間表示、その後「画面B」に切り替えるまでの動きです。
アニメーションの仕組み
「画面A」が表示される瞬間に始めからの合計時間が計算(加算)されます(10+3.2)。
毎秒60回自動で実行されるupdate()の中で、実際の経過時刻を取得し、「経過時間」が「合計時間」を上回っているかをチェックします。下回る時(False)は何も実行せず、画面はそのままです。
つまり再生開始後10〜13.2秒の間、「画面A」が表示され続けるということになります。
〈例〉
合計時間<=経過時間
13.2<=10(False)
13.2<=10.1 (False)
13.2<=10.2 (False)
……
……
13.2<=12.9(False)
13.2<=13.0 (False)
13.2<=13.1 (False)
13.2<=13.2 (**True！!**次の画面へ進む)
もし経過時間が13.2秒を過ぎたら、次の画面に進みます。次の画面が表示される瞬間に、また合計時間が加算され(13.2+1.4)、「画面B」は開始後13.2〜14.6秒の間表示されます。
これをずっと繰り返すことでアニメーションが実現します。
また、上図赤字「誤差」を設定することで、表示タイミングの微調整ができます。次の画面に進む時の表示遅延は端末の能力に左右されるので(筆者の環境では0.02秒)、同じスクリプトを他の端末で使いたい時に便利です。
〈例〉誤差補正を0.2秒と設定した時
合計時間<=経過時間
13.2-0.2<=10(False)
13.2-0.2<=10.1 (False)
13.2-0.2<=10.2 (False)
……
……
13.2-0.2<=12.9(False)
13.2-0.2<=13.0 (True!!画面遷移開始)
13.2+1.4-0.2<=13.1 (False、画面遷移中……計算式は画面Bの時間(1.4秒)が足されています。)
13.2+1.4-0.2<=13.2 (False、このあたりで画面遷移が完了して欲しい)
常に始めからの時間を計算することで、万が一途中で遅延しても後に響かず、次のフレームで回復できることがわかります。