EDGEを活用して自作ゲーのタイトルロゴをいい感じにする

本記事は、『裏ドット絵 Advent Calendar 2021』の21日目の記事です。


裏ドット絵 Advent Calendar 2021 - Adventar
https://adventar.org/calendars/6409



普段ゲーム制作などをしているbunaguchiと申します。
本記事の趣旨はタイトル通り。


ゲーム制作において、私はタイトルロゴもEDGEで自作しているので、
本記事ではその時に使う小技なんかをいくつか紹介します。

半分くらいはEDGEの機能紹介なので、熟練EDGE使用者の方は
「そんなんもう知ってるよ!」と言いたくなることうけあい。
ゲーム制作者向け、EDGE使用者向け、あとたぶん初心者向け?
という当たり判定の狭い記事になっております。


あとそもそも、EDGEで作るとはいえ「タイトルロゴ」ってドット絵か?
という疑問も脳裏をよぎりますが、
普通のドット絵に応用できる部分もあると思いますのでご安心下さい(?)


ということで、まずはドット絵の友、
高機能ドット絵エディタ『EDGE』の公式にリンクを張ってから始めましょう。


高機能ドット絵エディタ EDGE | TAKABO SOFT
https://takabosoft.com/edge


ロゴを準備

念のため断っておくと、「ロゴデザインのやり方!」みたいな話はここではしません。
というか私自身、解説できるほどの技術もないので……。
それっぽいロゴを頑張って描きます。既存のフォントでもいいでしょう。


f:id:bunaguchi:20211220120237p:plain


↑私がかれこれ10年以上前に公開したフリゲ『GUILTES』のタイトルロゴ。赤一色。
今回はこれを元に、いい感じにする小技を書いていきます。


縁取り関連の機能を使う


だいぶ前にこんなツイートをしました。


この機能は意外と知られていないような気がしていて、
解説記事みたいなものを書こうかなと頭の片隅でずっと思っており、
それが本記事を書くことにしたきっかけです。


領域選択で「背景色は選択しない」にチェック入れてロゴだけ選択したら、


f:id:bunaguchi:20211220193118p:plain:w300


↑上のメニューから、「選択範囲」→「縁取り」を選ぶと、
縁の部分だけ選択状態になります。これがかなり便利。


ひとまず選択された部分を、四角形ツールなどでガーッと白に塗ります。


f:id:bunaguchi:20211220193415p:plain


↑縁だけきれいに白く塗れました。
これだけでも元の赤一色よりはマシなロゴになった気がしますが、
縁と中身の間に黒とか暗い色を挟むと、さらにいい感じになります。


もう一度ロゴ全体を選択して、今度は「選択範囲」→「縁縮小」を選択。
これを使うと選択範囲が1ドット分内側に縮小されます。
つまり、縁を除いた赤部分だけが選択状態になるので、
さらに「縁取り」をしてやることで、白部分と赤部分の境界部分だけを選択できます。
そのまま黒で塗り潰すなりDeleteで切り取るなりすると、


f:id:bunaguchi:20211220193550p:plain


↑こうなります。いい感じ。


一方、「縁拡張」は、縁に沿って逆に外側に選択範囲を広げる機能ですが、
これもなかなか便利です。いったんロゴから離れますが、


f:id:bunaguchi:20211220193702p:plain


↑このドット絵を選択し「縁拡張」→「縁取り」すると、
絵を覆うように1ドット外側が選択状態になるので、それを適当な色で塗ると、


f:id:bunaguchi:20211220193730p:plain


↑このように、何か軽いオーラを纏っているような感じにできます。
ゲーム向けの表現でしょうか。無敵時間の表現とかにいいかもしれません。


グラデーションで塗る


話をタイトルロゴに戻します。
EDGEをお使いの皆様、カラーパレットウィンドウは活用されてますでしょうか。


f:id:bunaguchi:20211220194024p:plain


↑赤と白と黒しか使ってないので殺風景ですが、
ここで、赤から右に適当な数の色を選択。


f:id:bunaguchi:20211220200033p:plain:w300


↑そうしたら、「パレット」→「グラデーション作成」を選択。すると、


f:id:bunaguchi:20211220200053p:plain


↑選択した色が赤から黒へのグラデーションになりました。
この状態で、塗りつぶしツールを選択。


f:id:bunaguchi:20211220200237p:plain


↑オプションバーの「グラデーション」を「線形(↓)」にして、
パレットの一番左の赤で各文字を塗れば、


f:id:bunaguchi:20211220200336p:plain


↑おお!いい感じになった!


パレットのグラデーション作成機能は、複数選択した色の、
先頭と最後尾の色を元に、その間の中間色を生成してくれるようです。
なので、


f:id:bunaguchi:20211220200514p:plain


↑右端を黒じゃなくて青にして「グラデーション作成」すれば、


f:id:bunaguchi:20211220200600p:plain


↑赤から青までのグラデーションになります。


塗りつぶしツールのグラデーション機能は、
描画色から背景色へ変化するグラデーションで塗ってくれるので、
このパレットで描画色を赤、背景色を青にしてから塗ると、
(背景色はパレット右クリックで選択。個人的に忘れがちなので一応)


f:id:bunaguchi:20211220200644p:plain


↑これまたいい感じだ! ちょっとミステリアスな雰囲気。


ちなみに塗りつぶしツールのオプションで「相対グラデーション」のチェックを外すと、
グラデーションの範囲が選択範囲全体(あるいは画像全体)に対して設定されるので、
ロゴ全体の色の分布?が均一に?なります。(説明が難しいけど実際やれば分かるはず)
その辺、よりこだわる場合はお試しを。


陰影をつけて立体感を出す


「陰影をつけて立体感を出す」という表現で
合ってるのか分からないので先に結果を示します。
最初の赤一色のロゴに対してやると、


f:id:bunaguchi:20211220201248p:plain


↑こんな感じで、輪郭の左上部分に明るい色、右下部分に暗い色を乗せて
陰影で立体感があるような感じにします。

縁取りと違ってEDGEの機能一発でできるわけではないのですが、
比較的簡単にできるのでご紹介。


やり方は、まずロゴ全体を選択して、Ctrl+C→Ctrl+Vで貼り付け。
元のロゴにぴったり重なった位置から、
矢印キーをチョンチョン押して右下に少しずらし……

f:id:bunaguchi:20211220201919p:plain:w460
数ドット右下にずらした位置に重ねる


↑この状態でCtrl+X。すると、下のロゴが
上に重ねた部分の形で切り取られ、ロゴの左上側の輪郭だけ残ります。


f:id:bunaguchi:20211220202208p:plain


↑こうなる。


同様の手順で、元のロゴを今度は左上にずらして切り取り、
右下側の輪郭も切り出します。


f:id:bunaguchi:20211220202252p:plain


あとはもうお分かりかもしれませんが、
左上輪郭を明るい色で塗り、右下輪郭を暗い色で塗って、
元のロゴに重ねます。


f:id:bunaguchi:20211220202330p:plain


明るい部分と暗い部分が一部重なりますが、不自然なようなら、
重なる部分をさらに切り取ってその部分は元の色のままにしておくと、
よりいい感じになるかも。


最後に


最後にちょっと補足。
縁取り機能に関して、単色の領域の縁を別の色にするだけなら、
塗りつぶしツールのオプションの「スタイル」でも簡単にできることに
この記事書いてる途中で気付いた(知らなかった)のですが、
面倒なので当初の予定通りに「選択範囲」からやる方で書きました。
まだまだEDGEは奥が深い。
まあ選択範囲からの縁取りの方がいろいろ応用できると思うので、ご容赦を……。


それから、この記事は私が普段使ってるフリーソフトの無印EDGEで解説しましたが、
ためしにEDGE2も落としてちょっと使ってみたところ、
EDGE2では「選択範囲」→「範囲の変更」の中にある、
「境界線を抽出」「範囲を拡張」「範囲を縮小」が、
それぞれ「縁取り」「縁拡張」「縁縮小」にあたる機能のようです。たぶん。
実際やってみるとEDGE1とは微妙に結果が異なるようなので、お好みで。


というわけで、ここまでお読みいただきありがとうございました。

f:id:bunaguchi:20211220202730p:plain
上に書いたような小技を駆使して作ったタイトルロゴ