練習のレベルで姿が変わる、マスコットの Friko が生まれました

Metronome.fm にマスコットキャラクターができました。名前は Friko（フリコ）です。メトロノームの振り子（ふりこ）から名付けました。

Friko について

Friko はドット絵のキャラクターです。体はメトロノームをもとにした台形で、頭から振り子が出ています。音楽を聴くのが好きなので、いつもヘッドホンを着けています。

頭の振り子は、アプリのテンポとは関係なく、いつも 120 BPM で左右に揺れます。端末の設定で動きを減らしている場合は、揺れずに止まっています。

体の色は、アプリのアクセントカラーに合わせて変わります。表示設定でアクセントカラーを変えると、Friko も同じ色になります。

統計のレベルの欄にいます

統計には、練習を続けると上がる「練習のレベル」があります。いま Friko がいるのは、このレベルを出している欄です。統計の「1 年」のタブを開くと、レベルの数字の左に立っています。

レベルは経験値で上がります。経験値は、練習した時間に応じて増えるほか、統計の「今週のクエスト」を達成したときにももらえます。Friko は、このレベルが上がるにつれて姿を変えていきます。

どんな姿になるかは秘密です

冒頭の動画の Friko も、レベルが上がって変わったあとの姿の 1 つです。ほかにどんな姿になるのか、何回変わるのかは、ここには書きません。練習を続けてレベルを上げて、確かめてみてください。

姿の決め方とドット絵の描き方

最初は、メトロノームそのもの・八分音符・スネアドラム・カセットテープ・砂時計など、見た目の違う候補を 16 体描いて並べました。その中から、メトロノームの形の候補と、振り子のおもりの形の候補の 2 体をもとに、12 体のバリエーションを作りました。最後に選んだのが、ヘッドホンを着けた今の Friko です。

絵は 1 文字を 1 ドットにした文字列で描いています。揺れる動きは、1 拍ごとに絵を左右に反転して出しています。体は左右対称に描いてあるので、反転しても体の形は変わらず、頭の振り子だけが左右に揺れているように見えます。

// # は体（アクセントの色）、o は目、k は線、. は透明
const BEGINNER = [
  ".......k............",
  "........k...........",
  "........k...........",
  ".......kkkkk........",
  "......k.###.k.......",
  ".....kk#####kk......",
  ".....kk#o#o#kk......",
  "......#######.......",
  "......#######.......",
  ".......#...#........",
];

// 拍の裏（beat が奇数）では、x = 9 を軸に左右を反転する
const x = beat % 2 === 1 ? FRIKO_SIZE - 2 - col : col;

これから

Friko には、統計のほかにもいろいろな機能に出てきてもらう予定です。どこに現れるかも楽しみにしていてください。