vscode-pets にブルーマール犬を追加する

やること / やらないこと

• やること
  • 開発環境構築
  • vscode-pets にブルーマール犬を追加
  • ペットタイプ選択の先頭を犬に変更 (動作確認しやすくするためなので任意)
  • ペットカラー選択の先頭をブルーマールに変更 (動作確認しやすくするためなので任意)
• やらないこと
  • vscode-pets 公式にプルリク
  • VScode Marketplace で公開

ブルーマール？

ブルーマールとは、「マール因子」という遺伝子を持つ犬に見られる毛色のことです。
マール因子が作用すると、独特のまだら模様のような毛色を持つ子犬が生まれます。

引用元: https://magazine.cainz.com/wanqol/articles/blue_merle

開発環境構築

必要なもの

• Node.js
• VSCode
• VSCode拡張
  • ESLint
  • Prettier
• Aseprite (有料)
  • 公式 https://www.aseprite.org/
  • Steam版 https://store.steampowered.com/app/431730/Aseprite/?l=japanese
  • ※別のソフトでも大丈夫だと思います

フォーク ～ 実行

• フォーク
  • https://github.com/tonybaloney/vscode-pets にアクセスして Fork をクリック
• クローン
  • フォークで作られた 自分の リポジトリを好きな方法でクローン
• ローカルリポジトリを VSCode で開く
• 依存パッケージのインストール
  • $ npm i
• 実行
  • ローカルリポジトリを VSCode で開いて F5

ソースコード変更

src\common\types.ts

export const enum PetColor {
  bluemerle = 'bluemerle', // ペットカラーにブルーマールを追加
  brown = 'brown',
  // ...
}

// ...

export const ALL_PETS = [
  PetType.dog, // ペットタイプ選択の先頭を犬に変更
  PetType.cat,
  // ...
];
export const ALL_COLORS = [
  PetColor.bluemerle, // ペットカラー選択の先頭をブルーマールに変更
  PetColor.black,
  // ...
];

src/extension/extension.ts

// ...
const DEFAULT_COLOR = PetColor.bluemerle; // 拡張設定の規定値をブルーマールに変更
const DEFAULT_PET_TYPE = PetType.dog; // 拡張設定の規定値を犬に変更
// ...

src/panel/pets/dog.ts

export class Dog extends BasePetType {
  // ...
  static possibleColors = [
    PetColor.bluemale, // 犬で使用できるカラーにブルーマールを追加
    PetColor.black,
    // ...
  ];
  // ...
}

gif の作成

vscode-pets の犬には 7種類 の動きが実装されているので、
Aseprite などを使って 7つの gif を作成します。

フォルダ構成は以下の通りです。

• {ローカルリポジトリ}/media/dog
  • bluemerle_idle_8fps.gif (立つ)
  • bluemerle_lie_8fps.gif (伏せる)
  • bluemerle_run_8fps.gif (走る)
  • bluemerle_swipe_8fps.gif (ひっかく or お座り) ※マウスカーソルを近づけたときの動き
  • bluemerle_walk_8fps.gif (歩く)
  • bluemerle_walk_fast_8fps.gif (速く歩く)
  • bluemerle_with_ball_8fps.gif (ボールを咥える)

VSIX の作成

$ npx vsce package