Skip to content

Instantly share code, notes, and snippets.

@lost-nd-xxx
Last active January 9, 2024 21:17
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lost-nd-xxx/73778e4cb352324f5cbff488bda34ccc to your computer and use it in GitHub Desktop.
Save lost-nd-xxx/73778e4cb352324f5cbff488bda34ccc to your computer and use it in GitHub Desktop.
BalloonMakerと写真でバルーンを作ってみる + もう少し凝ってみたい時の覚え書き

あるいは 軽率にバルーン作り隊の隊員用メモ

文責はろすえん ( lost_nd_xxx )にあります


目次


リンク

参考資料


作成支援ツール

  • BalloonMaker

    • SSPへインストールして使う、バルーンを作成できるプラグインです
  • Feathery Instrument

    • 「道具箱」頁にReadMe.txt、descript.txt、install.txtの作成支援ツールがあります

アップローダー


入門編(一日目)

事前に用意するもの

  • BalloonMaker
  • ベースとなる写真/イラスト/etc
  • レイヤ機能のある画像エディタ(ここではAzPainter2を使っています
    • 違うソフトでももちろん大丈夫です

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

001

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


ベースを作る

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

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

002

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

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

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

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


画像編集

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

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

レイヤを複製し、上から2番目のレイヤを「乗算」に。

※背景色が白以外/枠線なしの場合この手順は要りません

004

一番上にあるレイヤで、透過に使われている色(この場合緑)を右クリックでスポイトし、 「フィルタ」→「色操作」→「描画色以外を透明に」。

003

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

005

するとこうなります。

006

画像を上書き保存し(画像エディタはまだ閉じない)、バルーンを切り替えます(再読み込み)。

Ctrl+Sで何か適当な文章を表示させてみましょう。

007

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

008

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

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


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

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

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

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


仕上げ(配布する場合)

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

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

009

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

これで完成です。


成果物


もう少し凝ってみたい(二日目)

day2目次

  1. 四角以外のかたちにする
  2. SSTPマーカー
  3. オンラインマーカー
  4. スクロール可能なときの矢印的なもの
  5. 各種入力ボックス
  6. \0と\1用で色や形、大きさが極端に違う
  7. ネットワーク更新
  8. サムネイル画像
  9. SSTPマーカー等が色合い的に埋もれる場合

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

010


四角以外のかたちにする

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

011

逆に言えば、そこ以外はどんな形状にでもできます。透明、半透明も。

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

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

011-2


SSTPマーカー

012

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

013

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

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


2022年1月時点ではSSP専用の仕様ですが、以下のような方法も使えます。

  • sstp_new.png」「sstp_newk.png」(\1/2人目/相方側)「sstp_newp*def.png」(*に半角数字、2で3人目)というファイル名の画像を用意するとSSTP受信時専用になる
  • marker.png」「markers.png」(\0/本体用)「markerk.png」(\1/2人目/相方側)「markerp*def.png」(*に半角数字、2で3人目)というファイル名の画像を用意するとバルーン内のマーカー専用になる

markers.pngについては「旧バージョン対応のためにmarkerで代用を推奨」だそうです


ここでもpnaなどでの透過情報が使えます

そうでなければ左上1pxが透過色になります。


オンラインマーカー

014

online*.png」というファイル名の画像が*の半角数字の昇順(小さい数字から大きい数字への順番)で繰り返されます。

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


はみ出して描画したい

オンラインマーカーをバルーン土台の外側に描画したい、というのはSSP 2.5.54以降で可能です。

descript.txtに「overlay_outside_balloon,1」という行を作ってください。

balloons*s.txtまたはballoonk*s.txtでの個別指定(オーバーライド)は__できません__。


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

ここでもpnaなどでの透過情報が使えます

そうでなければ左上1pxが透過色になります。

これまでの項目と同様に、descript.txtに「use_self_alpha,1」という行を作る(※SSPのみ対応)と、PNGの透過情報がそのまま使えます。

arrows*.png」「arrowk*.png」「arrowp*def.png

*の数字に0が上向き、1が下向きです。

arrowsが本体用(旧バージョン対応のためにarrowで代用を推奨)、arrowkが相方用、arrowp2def以降が\p[2]以降用です。


各種入力ボックス

015

SSP 2.5.37(2021年10月18日付)から入力ボックス類へも半透明が使えるようになりました(土台のみ)

descript.txtに「use_input_alpha,1」という行を作ってください。

OK、キャンセル、モード切替ボタンは従来通り左上1pxが透過色です。


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

016

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

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

ボタンの大きさは入力領域の大きさに合わせて自動的に設定されるようです。

ボタン画像を作る前にCtrl+Sなどで入力ボックスを出してみて、大きさを測ってみるといいかもしれません。

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


mode_down.png / mode_up.png

017

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

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

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

ボタンの大きさは入力領域の大きさに合わせて自動的に設定されるようです。

ボタン画像を作る前にCtrl+Sなどで入力ボックスを出してみて、大きさを測ってみるといいかもしれません。

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


\0と\1用で色や形、大きさが極端に違う

文字色を変えないと読めないほど各バルーンの色が違ったり、デザインの違いに応じて部品の位置を変えたい場合もありますね。

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

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

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

「オーバーライドはできない」とされている項目については、個別設定できません。


ネットワーク更新

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


サムネイル画像

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

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

拡張子がjpgまたはpngの場合、透過されません。


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

以下はSSP 2.5.51(2021-12-17)以前の情報です。 それ以降のSSPでは個別に定義できます。

materiaやcrowにも対応したい場合は引き続き以下の小技が使えます。


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

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

018

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

AzPainter2なら、一度透明領域の色を透明にしておいてから、「フィルタ」→「縁取り」で縁取りできます。

縁取り対象がキャンバスの端に接している場合は、先にキャンバスサイズを拡げておくことにも注意してください。

019

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment