BalloonMakerと写真でバルーンを作ってみる

オンラインマーカーの項で未検証情報(間違い)が混ざっていたので消しました。

二日目を全体的に加筆修正しました。

目次


リンク

参考資料

作成支援ツール

Feathery Instrument
「伺か」>「ツール」頁にReadMe.txtなどの作成支援ツールがあります

アップローダー

成果物


入門編

事前に用意するもの

  • BalloonMaker
  • ベースとなる写真/イラスト/etc
  • レイヤ機能のある画像エディタ(ここではAzPainter2を使います)

この例では以下の写真を使います。

眼鏡の下にコピー用紙を敷いて適当に写真を取りました。

ベースを作る

背景色と文字色を何にするかぼんやり考えます。

今回は白背景+黒文字にします。

BalloonMakerで文字色などを指定します。

出来たらそのバルーンを作成、インストールします。

インストールしたら、そのバルーンのディレクトリを開いておいてください。

画像の縮小表示が崩れていることもありますが(※WinXPでの情報)、Windows付属のペイント以外なら問題なく開けます。(PixiaとAzPainter2で開けることを確認)

画像編集

とりあえずballoons0.pngと写真をあわせて様子を見てみましょう。

balloons0.pngを画像エディタで開きます。

レイヤを複製し、上から2番目のレイヤを「乗算」に。(※背景色が白以外/枠線なしの場合この手順は要りません

一番上にあるレイヤで、透過に使われている色(この場合緑)を右クリックでスポイトし、

「フィルタ」→「色操作」→「描画色以外を透明に」。

写真を新しいレイヤに追加します。重ね順は一番下に。

するとこうなります。

画像を上書き保存し(画像エディタはまだ閉じない)、バルーンを切り替えます(再読み込み)。Ctrl+Sで何か適当な文章を表示させてみましょう。

……読みづらいですね。調整しましょう。

写真を小さくし、色を薄くしました。

他の画像も同じ要領でやってしまいましょう。

ふちがガビガビしている場合

写真と背景色の組み合わせによっては、SSTPマーカーなどのふちがガビガビになったりします。

そういう場合は、BalloonMakerのBGcolorを写真のベースカラーに合わせておくと、軽減されます。

SSTPマーカーの場合、BalloonMakerでの15番以降はくっきり透過されているので、どのような背景でも問題が起こりません。

仕上げ(配布する場合)

descript.txtのcraftmanの欄とreadme.txtを書き換えます。

特定のゴースト専用にする場合は、install.txtのacceptも記述してください。

できたら、エクスプローラからバルーンを選び、右クリック→「NAR作成」。

これで完成です。


もう少し凝ってみたい

  1. 四角以外のかたちにする
  2. SSTPマーカー
  3. オンラインマーカー
  4. スクロール可能なときの矢印的なもの
  5. 各種入力ボックス
  6. \0と\1用で色が極端に違う
  7. ネットワーク更新
  8. サムネイル画像
  9. 入力ボックスのOK・キャンセルボタン
  10. mode_down.png / mode_up.png
  11. marker.png
  12. sstp_new.png
  13. 補遺:SSTPマーカー等が色合い的に埋もれる場合

こんな感じです(画像は拙作「ホワイトスコア」)

四角以外のかたちにする

と言っても、以下のように、文字が表示される領域のかたちは四角以外にはなりません。

逆に言えば、文字が読めるなら、どんな形状だっていいわけです。半透明でもいい。

シェルと同様に、pnaファイルをアルファチャンネル定義として使えます。

もしくは、descript.txtで、「use_self_alpha,1」と記述する(※SSPのみ対応)と、PNGの透過情報がそのまま使えます。

SSTPマーカー

これはこのように、SSTP受信中に表示されるものですが、

こんな風に、文中で使われることがあります。

なので、汎用性を高めたい場合や、想定しているゴーストでこのようにマーカーが使われている場合、文字サイズと揃えておくといいです。

ここでもpnaなどでの透過情報が使えます。そうでなければ左上1pxが透過色になります。

オンラインマーカー

「online*.png」というファイル名の画像が*の番号順に繰り返されます。

右下である義務はどこにもないのです。バルーン全体に収まるサイズであれば。

レイヤー順的には、バルーンの画像よりは手前、文字よりは奥になるようです。

はみ出して描画したい……

ベースの透過領域を多くとってオンラインマーカーのみ外側に描画したい、というのは(私の検証では)できません。

下地で透明な箇所はオンラインマーカーも透明になるので、オンラインマーカーを描画したい箇所の奥にある下地も不透明である必要があります。

スクロール可能なときの矢印的なもの

ここでもpnaなどでの透過情報が使えます。そうでなければ左上1pxが透過色になります。

トークの文章中に使われることはありません。

各種入力ボックス

これらは半透明が使えない(左上1pxの色だけが透過される)ので、ご注意を。

\0と\1用で色が極端に違う

文字色を変えないと読めないほど各バルーンの色が違う場合。

balloons*s.txt/balloonk*s.txt(各バルーン画像と*の数字が対応)というファイルで個別に文字色等を設定することができます。

各バルーンの大きさや形が違う場合も、文字の位置などを設定しましょう。

書式や設定できる内容はdescript.txtに準じます。

ネットワーク更新

descript.txtにhomeurlを記述すれば、あとはゴーストなどと同じようにネットワーク更新することができます。(※SSPのみ対応

サムネイル画像

thumbnail.png(もしくは~.jpg、~.pnr)を用意すれば、メニューにてバルーンの選択時に表示されます。

pngをpnrにリネームすると、画像左上1pxと同色が透過されます。

jpgか、pngのままだと、透過されません。

入力ボックスのOK・キャンセルボタン

※SSPのみ対応)半透明が使えません。左上1pxの色だけが透過されます。

そのため、画像のような塗りつぶしは工夫の必要があります。(例は四隅1pxを透過色にしました)

ボタンの大きさは入力領域の大きさに合わせて自動的に設定されるようです。ボタン画像を作る前にCtrl+Sなどで入力ボックスを出してみて、大きさを測ってみるといいかもしれません。

画像名はupが押されていない時、downが押されている時です。

mode_down.png / mode_up.png

※SSPのみ対応 / 画像はSSPデフォルト+)アドレスバーに使われるボタンの画像です。

(アドレスバーの出し方は、右クリック→機能→アドレスバー か、 Ctrl+Shift+Lです。)

OK・キャンセルボタンと同じく、半透明が使えません。左上1pxの色だけが透過されます。

ボタンの大きさは入力領域の大きさに合わせて自動的に設定されるようです。ボタン画像を作る前にCtrl+Sなどで入力ボックスを出してみて、大きさを測ってみるといいかもしれません。

画像名はupが押されていない時、downが押されている時です。

marker.png

※SSPのみ対応)この名前の画像があると、\![*]タグ(SSPは%*でも同様)で表示されるのは、sstp.pngではなくこちらになります。

pnaなどでの透過情報が使えます。そうでなければ左上1pxが透過色になります。

sstp_new.png

※SSPのみ対応)この名前の画像があると、SSTP受信時に送信者情報などに付くものが、sstp.pngではなくこちらになります。

pnaなどでの透過情報が使えます。そうでなければ左上1pxが透過色になります。

補遺:SSTPマーカー等が色合い的に埋もれる場合

バルーンのベース(地)は複数用意できますが、SSTPマーカーやスクロール矢印は、それぞれ1種類ずつのみしか使えません。

たとえば、紫のSSTPマーカーを設定したのに背景色が紫のバルーンを作ると、埋もれてしまい見えづらくなります。

その場合は、画像に縁取りをつけてみてはどうでしょうか。

AzPainter2なら、一度透明領域の色を透明にしておいてから、「フィルタ」→「縁取り」で縁取りできます。縁取り対象がキャンバスの端に接している場合は、先にキャンバスサイズを拡げておくことにも注意してください。

スクロール矢印や、SSTPマーカーが見えるようになりました。

画像サイズが変わった際は、表示位置の調整もお忘れなく。