Atomをファミコン風(？)のレガシーおしゃれエディタにしてみた！

Atomをファミコン風(？)エディタにしてみました。レガシーでオシャレな感じを目指しました。

エディタ部はこんな感じにしていきます。

エディタだけでなくUI部もフォントを変えて統一感を持たせてます。
 

テーマ

pico8-syntax

atom.io

PICO-8という昔ながらのドット絵ゲームを作るゲーム開発環境があるのですが、そのエディタを参考に作られたテーマです。今回、こんなエディタの見た目にしようと思ったきっかけになりました。

 UIもpico8-uiというものが用意されていますが若干Atomとの相性は良くないので無難にatom-material-uiがおすすめです。

フォント

PixelMplus10 / PixelMplus12

itouhiro.hatenablog.com

見た目と実用性を兼ね備えているのはこのフォントでしょうか。10×10ピクセルフォントと12×12ピクセルフォントの2種類がありますが、前者の方がおすすめです。12×12だと少しレガシー感が薄くなっちゃう感じがします。漢字も使えるのが便利です。

PixelMplus10

PixelMplus12

美咲フォント

www.geocities.jp

8×8ピクセルで一番ファミコン感は出るかもしれませんが、アルファベット中心のソースコードにおいてはやはり見づらさがぬぐえないです。漢字も使えるのですが、コメントに漢字を打とうものならそのコメントの価値は半減するかもしれません。

美咲ゴシック

PICO-8フォント

www.lexaloffle.com

PICO-8本家のフォントです。大文字と小文字が識別できるものと、大文字も小文字もすべて大文字になるものの二つがあります。後者の大文字統一バージョンが見た目的にはおすすめですが、小文字と大文字の区別がつかなくなってしまう不便さは大きいでしょうか。PICO-8感を出すには一番ですが、漢字は使えないのでPixelMplusなどと併用しましょう。

PICO-8 mono upper(大文字統一)

PICO-8 mono(大文字小文字)

※日本語はすべてPixelMplus10を使用

 

UIのフォント設定方法

テキストエディタのフォントが変更できてもUIがそのままだと味気ないですよね。

デフォルトの場合

せっかくならUIのフォントをも変更したいですよね。

UIにもPixelMplus10を使用

File/Stylesheetを選択してAtomのスタイルシートを開きます。

開いたスタイルシートに以下のコードを貼り付けてセーブします。

atom-workspace{
    font-family: "PixelMplus10";
    font-size: 18px;
}

font-familyとsizeは好きな感じに編集してみてください。

設定画面全体に反映されるのがいいですね。