この画像を前述の方法で透過にしようとすると、
元々は「TeamFortressClassic」（以下TFC）と言うFPSゲームの「スプレー」を作る請負所でした。
当時は専門のソフトが必要だったり環境によってうまく作れなかったりしたので、それならば
私が代わりに作ろうと言う事で仮設したのが始まりです。
しかし製作した時期があまりにも遅く（ほとんどゲームとしては終末に近かった、スレもすぐに終了してしまった）、
あまり振るわないままサイトは放置されていましたが、続編の「TeamFortress2」（以下TF2）が出た事により
管理人のFPS狂いがムキムキと頭をもたげ、せっかくだからスプレー受託を再開しようと言う事で仕様をTF2向けに変更して
掲示板を再スタートさせたのですが…現在は知識があれば誰でも簡単にスプレーが作れる上に
単純に製作者のセンスが問われる時代になった為、ここのような受託所は必要なくなってしまったようです。
と言う事で、ここは作り方を教授するに留め、あとのネタとかは自分で考えてくださいと言うだけのサイトにします。
掲示板は一応残しておきますので、それでもうまくいかない、それすらも面倒くさいと言う人は製作依頼をして構いません。
但し管理人の腕前は「あまりうまくない」なので、それでもいいと言う人のみどうぞ。
少しずつ加筆していっている為に、文体がちぐはぐだったり、画像が全然無いと思ったら急に画像ばかりになったりしてますが、
その辺に関してはお察しください。そのうちまとめて作り直します。
新しくTFC用スプレーの作り方も執筆しました。参考にして下さい。
「お前のやり方はは回りくどい」とか、「ここが間違ってるからどうにかしろ」とかいったムキムキ感が湧き上がってきた人は
からどうぞ。このドメイン内のページへの要望は全てこちらへ。
HALF-LIFE系のゲームにある、「壁に落書きを出来る機能」です。
その名の通り普通はスプレー缶で書いたような落書きが表示されますが、設定元となるファイルを書き換える事により好きな画像を貼り付ける事が出来ます。
この書き換える作業がいわゆる「スプレーを作る」と言う作業になります。
ここからは原則的にTF2でのスプレーを作る作業を解説します。CS:SとかDoD:SとかL4Dとかの他のSourceエンジンのMODでも多分使えると思いますが…。
前提としてある程度画像製作の技術を持っている人を対象に話を進めるので、もし分からない単語があったりしたら適当に検索して調べて下さいね。
それと基本的にスプレーを作る目的での最低限のところしか触らないので、他に目的がある人は各種解説サイトやソフトのヘルプを見るなりして何とかしてください。
画像を拡大縮小するソフト
何でもいいです。画質にこだわらないのであればWindowsに最初から付いてくる「ペイント」でもいいです。
もし「それじゃイヤだけどせめてもうちょっとマシなのがいい」と言うのであれば、後述の「GIMP」と共用でいいでしょう。
ちなみに管理人は「OPTPiX WebDesigner」を使っています。非常に高性能な拡縮・減色性能を持ち、サイトの各種画像製作に最適です。
でもシェアウェアな上に減色が必須だったTFCと違いTF2では減色はあまり必要無いので今回は使わなくていいと思います。
画像を加工するソフト
画像に文字を入れたいとか、複数の画像を組み合わせて１コママンガみたいなスプレーを作りたいと言う人は
各種ドローツール（お絵かきソフト）を用意して下さい。面倒だと言う人は上の拡大縮小するソフトと共用でも構いません。
GIFアニメを作る訳ではないので、「D-Pixed」や「EDGE」等の256色専用ソフトは必要ありません。
また、本気で絵を描くと言う訳ではないので、「Photoshop」や「Illustrator」等の高いソフトは必要ないと思います。
適当にフリーソフトを拾ってきて下さい。「Pixia」あたりがお手軽で色々出来ていいと思います。
画像を背景透過するソフト
「GIMP」を使います。背景透過をしないのであれば、必要ありません。が、色々作っていくうちに必ず作ってみたくなると思うので
一応入手しておいて損は無いと思います。また、もし「TGA」形式のファイルを生成出来るソフトで
使い慣れているソフトがあればそちらを使っても構いません。但し、アルファチャンネルを設定出来る事が条件です。
「どうしてもGIMPは嫌だ」という場合は、「透過PNG」形式でも作れるようです。
うまい事アルファチャンネルを扱える知識のある人であれば、半透明のスプレーを作る事も可能です。
TF2に設定出来る形式のファイルに変換するソフト
「VTFEdit」を使います。本来はTF2単体で画像ファイルを設定出来るはずなのですが、
どう言う訳か大体失敗するらしいのでこのソフトを使います。
2008/07/29前後のアップデートで改良され、うまくいくようになったので通常では不要になりました。
アニメーションスプレーなど、難しいスプレーを作りたい場合に必要になります。
GIMPのインストール
ここからダウンロードして下さい。細かい手順も解説されているのでそちらを参考に。
外国で作られたソフトですが、日本語対応です。翻訳はいい加減だったり訳されてないとこがあったりましますが。
VTFEditのインストール
ここの一番上の「VTFEdit v1.2.5 Full - Nem ＞ Download: ＞ Installer (833 KB) 」からダウンロードして下さい。
用意する画像は基本的に何でもいいですが、加工の際に次の条件を満たすようにしましょう。
画像サイズの縦および横のサイズが２の累乗（256、128、64、32、16、8、4、2、および1）のいずれかになるようにすること
512でもいいようですが、サイズオーバー（後述）になりがちなのでおすすめしません。
もし片方のサイズ条件を満たした場合もう片方が条件から外れると言う場合は、
トリミングで削ったり余白を透過色にして埋めたりすれば大丈夫です（これも後述）。
現在、縦と横の比率が同じでない場合アスペクト比が維持されずに正方形に潰れてしまうようです。
512x256等のサイズにした場合変な具合に表示されてしまいますので、同じ数値同士になるようにしましょう。
最終的な画像サイズが120キロバイト未満になるようにする事
これはVTFEditに載せた段階での数値ですが、アニメーションスプレーを作るとか言うのでない限りは
通常の256x256で作る場合ではほとんど問題ないと思います。
ちなみにこれはCS:Sでの制限で、L4D等の新しいエンジンでは128キロバイトまで行ける、らしい…です。
まず練習として、何でもいいので画像を用意します。GIMPで画像を作ってみましょう。
この項目は非常に退屈な文章なので、経験者の方は飛ばす事をおすすめします。
まず、インストールしたGIMPを起動します。
「今日の技」とか言うウィンドウはどうでもいいので、「次回 GIMP 起動時も技を見せる」のチェックを外しましょう。もう出てきません。
メインウィンドウの「ファイル(F)」メニューをクリックし、一番上の「新規(N)」をクリックします。
「新規画像を作成」ウィンドウが出てきますので、「画像のサイズ」から「幅(W)」を「256」、「高さ(E)」を「256」と入力し、「OK(O)」をクリックします。
すると「名称未設定〜うんたらかんたら〜256x256」と言うウィンドウが新しく出来ます。ここでは編集は必要ないので、そのまま保存します。
「ファイル(F)」メニューをクリックし、「別名で保存(A)」をクリックします。
ここで一つ上の「保存(S)」を選択すると、上書きで保存されてしまいやり直しが利かなくなり非常に面倒な事になりかねないので
特にたくさんのファイルを使って編集している場合面倒でも出来るだけ「別名で保存(A)」を選択しましょう。
「名前(N)」欄に適当な名前を半角英数字で入れます。
ゲーム中は日本語で表示されるので忘れがちですが一応TF2は英語で出来ているソフトなので、
英数字でファイル名を作らないと予期せぬエラーを吐く恐れがある為ここは必ず半角英数字で入力して下さい。これはファイルをいじる時の基本です。
「フォルダの中に保存(F)」を「デスクトップ」にします。
どこで編集しているかきちんと把握していると言う人は他のフォルダでも構いません。
「ファイルタイプの選択(拡張子で判別) (T)」をクリックし、出たウィンドウから「Windos BMP 画像(bmp)」または「TarGA 画像(tga)」をクリックします。
今はどちらでも構いませんが、背景透過画像にしない場合は「bmp」、する場合は「tga」と覚えるといいでしょう。
「保存(S)」をクリックします。「RLE 圧縮」等のウィンドウが出ますが、これはそのままにして「保存(S)」をクリックします。
これで、画像が完成しました。「VTFファイルを作る」に進んで下さい。
普通の一枚絵の画像ファイルを作る・基本編
スプレーにしたい画像を適当に用意します。
スタンダードな形式が256x256の正方形なので、馬鹿正直に縮小すると縦や横が余ったり足りなかったりすると思います。
そこで、それを削ったり埋めたりして256に近づけましょう。
まず、正方形に近い画像の場合は短い方のサイズを、正方形から遠い形の画像は長い方のサイズを256に縮小、または拡大します。
ここで、正方形に近い形でももし画像を削りたくない、全体を収めたい、と言う場合は長い方のサイズを256に拡大、縮小して下さい。
もし、画像全体のサイズが256x256より小さい画像の場合（特にドット絵やお絵かき掲示板で拾ってきた画像）は、無理に拡大する必要はありません。
後述の「画像の余白を透過色で埋める場合」を参照し、キャンバスサイズを256x256にして下さい。
もし選択出来るようであれば、128x128等のより小さいサイズにする事を検討して下さい（ゲーム中で表示される大きさは同じです）。
画像を削る場合(GIMPで編集)
画像を開き、「画像」タブから「キャンバスサイズ」を選択し、「幅」と「高さ」のウィンドウの右にあるチェインのマークをクリックして下さい
（これをしないと、アスペクト比(縦と横の比率)を維持すると言う設定になり、うまくいきません）。
「幅」と「高さ」のうち256でない方を「256」に変更し、Enterキーを押します。
下に出ている画像を真ん中の枠に入るように動かします
（枠の中に入った部分だけが切り取られるので、うまく設定して下さい）。
うまくいったら「サイズ変更」をクリックすると、画像が切り取られるので、BMPかTGA形式で保存します。
画像が完成しました。「VTFファイルを作る」に進んで下さい。
画像の余白を透過色で埋める場合(GIMPで編集)
画像を開き、「画像」タブから「キャンバスサイズ」を選択し、「幅」と「高さ」のウィンドウの右にあるチェインのマークをクリックして下さい。
「幅」と「高さ」のうち256でない方を「256」に変更し、Enterキーを押します。
下に出ている画像を外枠の真ん中に来るように動かします
（やらなくてもいいですが、スプレーが上や左に寄ったりするので、真ん中にしておく事をおすすめします）。
ここで増えた面積の部分は自動的に透過色になります。
「サイズ変更」をクリックすると、キャンバスサイズが変更されるので、TGA形式で保存します（BMP形式で保存すると余白が透過されません）。
ここで「以下の理由のため TGA 形式として保存する前に画像のエクスポートを行う必要があります」と出た場合、「エクスポート」をクリックします。
画像が完成しました。「VTFファイルを作る」に進んで下さい。
背景透過の一枚絵の画像ファイルを作る
スプレーにしたい画像を用意し、上の項目を参照して256x256のサイズにしておきます。
フォーマットは必ずフルカラーにして下さい。256色以下で編集するとアルファチャンネルが無視されます。
背景が１色、または非常に濃淡の差の少ない色である場合(GIMPで編集)
まず画像を開き、画像ウィンドウのメニューから「レイヤー」を選択し、「透明部分」の「アルファチャンネルを追加」をクリックします。
次に、GIMPメインウィンドウのアイコンウィンドウから、左上の左から４番目のアイコン（棒状のもの）を選択して下さい。
「あいまい選択ツール」に切り替わりますので、背景透過にしたい色をクリックすると、その色と大体近い色がまとめて選択されます。
メインウィンドウの下部にある「閾値」のバーを左右させる事によってどれくらいあいまいに選択するかを設定出来ます。
背景色が複数の領域に分かれている場合は、Shiftキーを押しながらクリックすると複数選択出来ます。
背景色を完全に１色にしてある場合は、編集中のウィンドウの「選択」タブから「色で」を選ぶと、いっぺんに選択できて楽です。
選択が終わったら、画像ウィンドウのメニューから「編集」を選択し、「消去」をクリックすると選択領域が透過色になります。
画像をTGA形式で保存して、「VTFファイルを作る」に進んで下さい。
画像が普通の写真などで、単純なあいまい選択では塗りつぶせない場合
これはGIMPなどではフォローしきれないので、他のドローツールを使って背景を塗りつぶしてからGIMPで透過して下さい。
塗りつぶす色としては「BLUE（R0,G0,B255）」が一般的に使われているようです
（TFC時代に画像のパレットの一番最後の色をBLUEにする事によって特殊な画像として認識させていた名残だと思います）。
もちろん画像に使われている色と混ざらないのであれば、他の色でも全く構いません。
普通の一枚絵の画像ファイルを作る・応用編
半透明のスプレーを作る(GIMPで編集)
この項目は、さらに深い画像編集に対する知識が求められます。慣れてしまえばどうって事は無いレベルですが…。
正直ここまでやるのは結構面倒くさい上に恩恵も薄いので、余程の自信作とかじゃないなら単純な背景透過で済ませた方がいいです。
半透明と言うと、全体がスケスケになっている画像と言うイメージを持つかも知れませんが、
うまく使えば主要な部分は不透明で、背景が透明、境界線が濃さに応じて半透明に、と言う事も出来ます。
例えば、（画像はイメージです）
この画像を前述の方法で透過にしようとすると、
このようにに文字が潰れてしまいます。
しかし、半透明を使いこなせば、
こんな風に、TFC時代の１色スプレーのような作風を再現する事も出来ます。
例としてこの画像に、
こんなアルファチャンネルを適用した場合、
こんな感じに出来ます。
GIMPで半透明を設定する、具体的な方法としては…
こんな絵を、背景透過でやるとします。
単純な背景透過で作るとすれば、こんな感じになります。
実際にはこのように貼り付けられます。境界線が汚くなってしまってますね。特に曲線での切り抜きの場合顕著に出ます。
普通のスプレーであれば全く問題ないレベルですが、手をかければ見違える程綺麗に仕上げる事が出来ます。
ただ、ここまで来るとほとんど仕事か趣味人の領域なので、ストイックな気質の方にだけおすすめしておきます
（私のような「境界線の白い部分をドット単位で手作業修正にかかる」くらいのストイックなタイプだった場合、
逆にこっちのやり方の方が早く終わるケースもあったりしますので、一概には言えませんが…）
まず、前もってアルファチャンネル用にこんな感じでモノクロの画像を作っておきます。
白が不透明、黒が透明な部分で、どちらかの色に近付くほど透明度が変化します。
これの場合はキャラの境界線にかけて半透明を集中してあります。
そしてこの画像を、GIMPで開きます。
画像ウィンドウの「編集」タブから「コピー」を選択し、画像をクリップボードにコピーします
（この作業は他の画像編集ツールで行っても構いません）。
そして、一旦画像を閉じます。
次に、こんな風に一番最初の画像の背景を黒く塗り潰した画像を用意します。
この作業は必須ではありませんが、背景が白いままだと境界線の外側が白くなってしまうので、
境界線の色に合わせた色で塗り潰しておくと綺麗に仕上がります。
特にアルファチャンネル用の画像がいい加減に出来てしまっていると背景色がはみ出しやすいので、
何は無くともとりあえずやっておく事をお勧めします。
そしてこの画像をGIMPで開きます。
画像ウィンドウの「レイヤー」タブから「透明部分」→「アルファチャンネルを追加」をクリックします。
次に、メインウィンドウの「ファイル」タブから「ダイアログ」→「レイヤー」をクリックします。
すると、新しく「レイヤー」のウィンドウが出来ます。
開いている画像のサムネイルが出ていて、右に「背景」と出ている事を確認して下さい。
そこを右クリックし、「レイヤーマスクの追加」をクリックします。
「黒(完全透明)」を選択して、「追加」をクリックします。
メインウィンドウの「編集」タブから「貼り付け」をクリックします。
レイヤーウィンドウに「フローティング選択領域」と言う名前の新しいサムネイルが追加されている事を確認します。
下部に６つ並んでいるボタンのうち、右から２番目にある錨のマークのボタンをクリックします。
２つのサムネイルが一つの欄にまとめられた事を確認したら、画像ウィンドウからTGA形式で保存します。
綺麗に出来ました。実によく背景に馴染んでいます。
「境界線の外側が白くなる」と言うのを図解すると、
こんなのを透過にして作るとした場合、
こうやって作ってしまうと、
こんな感じに出力されてしまう、と言う事です。
これは、アルファチャンネルの不透明部分の範囲が白いところにまでかかる事が原因です。
なのでアルファチャンネルを一回り程痩せさせる等の工夫をする事で回避出来ますが…
ほとんどの人は原画の方をフィルタリングするとかして作っていると思うので、
その場合アルファチャンネルの方を調整するのはかなり遠回りで面倒くさいです。
と言う事で単純に、原画を加工する事で何とかすると、かなりの手抜きが出来る…と言う事なんですね。
このように設定してやれば、
このように綺麗に出力されます。
この辺は好みの問題なので、臨機応変に対応して下さい。
逆に言えば、これを逆手に取れば、もっと幅広い表現が出来るようになります。
一枚絵の場合
まず、インストールしたVTFEditを起動します。
「File」タブから「Import」を選択し、保存しておいたBMPかTGAファイルを開いて下さい。
「VTF Option」ウィンドウが開きますので、左下の枠の「Resize」のチェックと右上の枠の「Generate Mipmaps」のチェックを外して下さい
（やらなくても出来ますが、ファイルのサイズが増え、表示がボケます）。
あとの項目は触らなくて大丈夫です。「OK」をクリックします。
「File」タブから「Save」をクリックし、適当な名前をつけて保存します。
アニメーションスプレーの場合
まず、あらかじめ設定したい画像を用意し、動かしたい順番になるようにファイル名をつけます（1.tga 2.tga 3.tga等が単純でよいでしょう）。
インストールしたVTFEditを起動します。
「File」タブから「Import」を選択し、用意したファイルを「まとめて全部」選択して開きます
（分からない人はここでは解説しませんので適当に検索して調べて下さい）。
「VTF Option」ウィンドウが開きますので、左下の枠の「Resize」のチェックと右上の枠の「Generate Mipmaps」のチェックを外し、
左上の枠の「Texture Type」を「Animated Texture」にします（また一枚絵のスプレーを作りたい場合は、「Environment Map」に戻します）。
「OK」をクリックし、左のウィンドウの「Resouces」タブを選択し、「Image（下のやつ）」の「Size」が 120,000B 未満になっている事を確認します
（上回っている場合でもファイルの作成は出来ますが、ゲーム中ではスプレーが表示されず、失敗となります）。
なお、スプレーの動き方を設定する事は出来ません（単純なスライドショーしか出来ない）。
「File」タブから「Save」をクリックし、適当な名前をつけて保存します。
サイズオーバーでうまくアニメーションスプレーが作れない場合
枚数を減らす
可能ならば、いらないモーションを省く事でサイズの軽減が可能です。
ゲーム内でのスプレーの動きはVTFEditでのプレビューよりかなり遅くなるので思い切って間引きしてみるのも手です。
キャンバスサイズを小さくする
128x128、64x64等の小さいキャンバスサイズにすると、劇的にサイズを小さく出来ます。
アニメーションの時間とスプレーの画質のどちらをとるか、さじ加減が大切です。
画像形式をフルカラーのTGAではなくインデックスカラー(256色)のBMPにする
GIFアニメ用に減色が出来る、及びBMPの仕様を細かく設定出来るソフトが必要です。
この場合背景透過は出来なくなりますが、かなりサイズを軽減する事が出来ます。
圧縮フォーマットをいじる
画像をVTFファイルにする際に色の保存方法が指定されています(「Texture Format」の上２つの項目)。
RGBAやDXTなどたくさんの種類がありますが、基本的にはきれいになる形式ほどサイズも大きくなります。
色々いじってみて、最適な組み合わせを探してみるのもいいでしょう。
通常インストールした場合、「C:/Program Files/Steam/steamapps/(アカウント名)/team fortress 2/tf/materials/VGUI/logos」
と言うフォルダにVTFファイルを移し、TF2を起動します。無ければフォルダを新しく作って下さい。フォルダの作り方くらいは、みんな知ってるね。
この際そのフォルダの中に「UI」と言うフォルダも作って下さい。作らなくてもインポートは出来ますが、設定画面のプレビューが表示されなくなってしまいます。
「設定」を選択し、「マルチプレイヤー」タブから「ファイルをインポート」ボタンをクリックし、先程移したVTFファイルを選択します。
「OK」をクリックすると、プレビュー画面にスプレーが映し出されます。以降はワンタッチで複数のスプレーを切り替える事が出来ます。
ゲームを開始し、壁に向かって「T」キーを押してスプレーが表示されたら成功です。
サーバーの設定によってはスプレーを禁止している所もあるので、テストは「サーバー作成」でLANモードを走らせながらやると確実です。
もし失敗した場合は、もう一度根気よくやり直してみましょう。
↓一応残しておきます。資料として参照して下さい。
うｐろだにスプレーにしたい画像をageて下さい。
画像の縮小や補正などはこちらでやるのでそのままでいいです。
それと同時にどのように作って欲しいかも忘れずに書いて下さい。
（透過の有り無し、サイズ比率、特定のエリア・人物指定、文字の挿入、特殊効果など）
↓例。
↓以下は過去の遺物です。TFCの資料ですので、TF2とは関係ありません。
…モナ板の残党達は、今どこでどうしているのやら…。