Digimon Companion
A delightful VS Code extension that brings your favorite Digimon companions right into your sidebar.
Features
- Dynamic Sprite Loading: Support for PNG sprite sheets and GIF animations.
- Folder Navigation: Browse your Digimon library through subfolders (e.g., Child, Adult, Perfect, Mega).
- Customizable Themes: Set a background theme for your companion with parallax-inspired depth.
- Interactive Pets:
- Spawn specific Digimon or a random one.
- Give your pets custom names.
- Pets move side-to-side, flip directions, and take random pauses.
- Title Bar Controls: Icon-only buttons (
+, −, shuffle, trash, layers) for quick actions.
- Background Themes: Switch between forest, space, steampunk, and tundra themes with parallax depth illusion.
- Persistence: Your spawned pets and their names are saved across sessions.
Installation
- Install the extension from the VS Code Marketplace.
- Open the Explorer view.
- Locate the Digimon section.
How to Add Your Own Digimon
PNG Sprite Sheets
Place your PNGs in media/sprites/. You can organize them into subfolders.
The extension expects a grid-based sprite sheet. You can adjust the pngDefaults in digimon.config.json to match your sheet's frame size.
GIF Animations
Place your GIFs in media/DigimonWorldChampionshipSprites/.
The extension groups GIFs by character name (e.g., all files containing agumon are treated as one pet).
Configuration
Adjust the following in digimon.config.json:
fps: Animation speed.speed: Walking speed.pauseDuration: How long a pet stops during its walk.directionChangeChance: Probability of flipping direction upon resuming movement.directionFlipFrequency: How often a pet flips direction while paused.
VS Code Settings
Configure the extension via Settings → Extensions → Digimon Companion:
| Setting |
Default |
Description |
digimonCompanion.theme |
none |
Background theme folder name in media/backgrounds/ |
digimonCompanion.foregroundHeight |
30% |
Height of the foreground gradient overlay |
digimonCompanion.foregroundColor |
rgba(0, 185, 37, 0.382) |
Color of the foreground gradient overlay |
Themes change live — no restart required.
Available Themes
none — transparent (default)forest — dark forest with parallax depthspace — cosmic backdropsteampunk — industrial gears and brasstundra — frozen landscape
Development
Packaging
npm install -g @vscode/vsce
vsce package
The .vscodeignore excludes .agents/, node_modules/, .md files (except README), and other non-essential files from the VSIX.
Known Limitations
- Marketplace icon (
icon.png) must be 128x128 PNG — current icon is 16x16
- No
repository field in package.json — add before publishing
- Extension ships unbundled (~39MB) — consider webpack/esbuild for smaller packages
Planned Features
- Interactive Color Picker: Integrated visual palette for real-time foreground color adjustment.
- Advanced Configuration UI: Migration of core animation and movement defaults to the VS Code Settings menu for seamless tuning.
- Individual Pet Customization: Ability to define unique speed, scale, and animation properties for each spawned Digimon.
- Enhanced Depth Layers: Support for customizable foreground assets (e.g., transparent PNGs) to create a more immersive 3D parallax effect.
- Expanded Environment Library: A wider variety of themed parallax backgrounds and preset environment combinations.
- Productivity-Based Evolution: A digivolution system where pets evolve based on coding activity, time elapsed, or project milestones.
- Life Cycle Management: Implementation of a life-span system where pets may expire or reset after a certain duration.
- Combat System: A basic battle mechanic allowing Digimon to interact or compete within the sidebar.
License
This project is licensed under the MIT License.
