縁取り文字の表現方法

PICO-8の作品でよく使われている縁取り文字。

どうやって表現しているのか、既存の作品「BOULDER RUN」から解析してみました。

BOULDER RUN

画面を見ると、文字表示にあたり、1ピクセル分 黒色で縁取られていて背景と混ざらず、とても見やすくなっていますね。

まずは、文字列表示のPRINT命令の文字列を検索すると、「PRINTC」なる命令を発見しました。

printc("press ❎ to start",50+sin(title_counter*3)*3,7,false,0,-2,true)
 
 printc("controls",70,10,false,0,0,true)
 printc("❎ dig without moving",79,7,false,0,-2,true)
 printc("🅾️ give up",88,7,false,0,-2,true)

ということで、「PRINTC」の定義を検索すると、ありました。

function printc(s,y,c,bg,bgc,offx,shad)
 local x=64-#s*2
 if (offx!=nil) x+=offx
 if shad then
  for y1=-1,1 do
   for x1=-1,1 do
    ? s,x+x1,y+y1,0
   end
  end
 end
	if (bg) rectfill(x-1,y-1,#s*4+x-1,y+5,bgc)
	? s,x,y,c
end

写経しながら、解析します。

縁取り文字の表示プログラムを解析

PRINTCは7つもの引数を受け取り、文字列を縁取りか矩形で、指定した色で描画する機能を持っていることがわかりました。

「controls」の文字列なら、

  • 黒色の縁取り
  • 文字は黄色
  • Y座標は70

という風になります。

そして縁取りの方法ですが、

縁取りの色で、文字列を上下左右に1ピクセルずらして描画し、中央に文字列を描画することで、縁取りを実現しているのです。

これをX Y座標をfor文の二重ループで実現しています。

一つ関数として定義しておけば、度々使うので勝手が良いですね。

私もスネークゲームで取り入れてみます。

もう既に取り入れている人も多いと思いますが、まだの人に参考になればと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください