やること / やらないこと

やること
- 開発環境構築
- 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