タイプライターアニメ使用時に綺麗に自動改行(ワードラップ)する機能を実装しました

PAXWESTのUNTIESさんブースにジラフとアンニカ展示が決まり、
それにあわせてデモ版をローカライズすることになりました
元々、ローカライズを想定してコミックシーンやUI等の実装を進めていたため
比較的スムーズに進んだのですが、一つだけ問題が残っていました
 

f:id:kamipallet:20180910230710p:plain

これまで右端まで文字が表示された時に、
ウイジェットのワードラップ機能で改行させていました
その際、タイプライターアニメをさせていた場合、
瞬ワードラップ前の部分が消えるため、不自然な表示になってしまします

・・と言葉で説明してもわかりにくいため、動画用意しました。

f:id:kamipallet:20180910222215g:plain

最初の行のnap の部分が右端で改行する際に消えています
 
実は今まで日本語でも一文字分消える感じで改行表示されていました・・
英語だと一気に消える文字数が多いためとても気になります
そこで文字を表示し始める前に、自動改行済みのテキストをあらかじめ生成して、
それから表示を始める方法を考えました 

f:id:kamipallet:20180910233551p:plain
自動改行済みのテキスト生成のBP(右クリック保存で拡大してみれます)


f:id:kamipallet:20180910222915p:plain

まず、テキストボックスは空にして最小の幅にしておきます


f:id:kamipallet:20180910223259p:plain

最初にParse Into Arrayいうノードで
スペースで単語ごとにわけて配列に格納します
 


f:id:kamipallet:20180910223645p:plain
そのあとテキストBOXに文字を、単語ごとに徐々に追加していきます
テキストBOXの幅をチェックしてウインドウ枠からはみ出る数値になったら・・
 

f:id:kamipallet:20180910224103p:plain

はみ出た単語を一度削除して、改行を入れ、もう一度単語を追加して続けます。
これを最後までやって、改行つきテキストを生成します
 

f:id:kamipallet:20180910233555j:plain
自動改行入りのテキストができたら、タイプライターアニメを再生します
英語と日本語で速度を調整できるようにしています


タイプライターアニメついてはmkさんのこちらのブログを参考に作成しました

mklearning.blogspot.com

 
結果・・・
綺麗に表示出来ました!

f:id:kamipallet:20180910225739g:plain

 
・・・ただこのままだと日本語ののようにスペース区切りがない言語ですと、
改行が入らないので、はみでてしまいます
こんな感じ・・・
 

f:id:kamipallet:20180910230106g:plain

これを回避するため、テキストが日本語の場合は一文字ずつ配列に格納するようにします
はみ出る数値になったあとはお尻一文字消してから改行するようにします
 
出来上がったBPはこちらです

f:id:kamipallet:20180910233558j:plain

青い部分が日本語用の処理です(右クリック保存で拡大してみれます)


これでうまくいきました!
 
この方法を実装するのにみつまめ杏仁さんの
ブログとツイッターを参考にさせて頂きました!
UI関係を実装する時いつも見ています!感謝です!

limesode.hatenablog.com