cocos2dx3.2@吹き出しの作り方

・縦横比の大きい吹き出しでも角が等間隔になるよう変更
・角の高さや幅をランダムに変更

吹き出しの縁の装飾部分って何て言うのだろ?
人物方向に一つだけ付く三角形は「尻尾」というらしい。英語でも「Speech balloon」の「Tail」。
ならば「耳」か「角(ツノ)」あたりが妥当だろうと思う(パンの耳みたいな)のだけど、
しかし耳が10も20も付くというのはいささか気持ちが悪いので角ということにした。
変数名がビシッと決まらないと実装作業の速度が落ちる気がする。
以下、こんな感じで吹き出し作りましたよ、というメモ。

■まず楕円を作る
文字列の各行の文字の最大長と行数から長方形の高さと幅を出しておく。
文字列の長方形に外接する楕円の幅と高さはそれぞれにsqrt(2)を掛ければ出る。
あとは吹き出し用のテクスチャを1ピクセルごとにsin、cosで楕円の内か外かを判定、
内側なら塗りつぶしていくだけでOK。

■楕円の円周を(だいたい)等間隔で分割する
吹き出しに角を付けるにあたって、一つの角あたりの角度を出す必要があるのだけど、
単純に2πを任意の角数で分割すると、縦横比が大きいときに角の幅に偏りがでる。
例えば横に長い場合は上下の角が横に広がって左右の角が縦に詰まる。
なので楕円の円周の長さを出して、それを等分割する、ということをやる。
参考にしたのは以下。
http://d.hatena.ne.jp/cocoatomo/20110120/1295543488

↑ではcircumference()が円周の長さ、それを任意の数DIVISIONで割っておいて、
angles()内のmath.sqrt((a * math.sin(phi))**2 + (b * math.cos(phi))**2)は
三平方の定理で細かい直線の長さを出して、それを曲線に当てて近似させてる。
そうするとDIVISIONより若干多い分割数と、phiに各角度が入るので、
これで円周上に描画したときに(だいたい)等間隔になる角度群が得られる。

■等分割した角度をランダムにまとめる
ほしい角の数丁度に円周を分けるのではなくて、ある程度多目に分割しておいて、
ランダムに角度をまとめる。同時に角の高さもランダムに決めたりしておく。
等間隔の角でいいやという場合はここの処理はいらない。

■楕円上に角を付ける
角ごとの角度が出てるので、あとは楕円の内か外かを判定する際に、
例えば一つの角の角度の区間を0〜πとして見立てたsinの値を上乗せして
塗りつぶせば雲型吹き出しになる(楕円の円周上にsin波の絶対値を足すイメージ)。
sinやcosやfabsやexpあたりをアレコレしていくと面白げな形になったりする。

角だけではなく楕円自体にもランダム要素入れるともうちょっと
手書きっぽい吹き出しになるかもしれないので課題とする。
あとアンチック体に関して、GL-アンチックPlusという良さ気なフォントがあった。
http://gutenberg.sourceforge.jp/ja/license.html