Move sprite images to images/ folder
- Create images/ folder for all sprite assets - Move aircraft sprites: smallProp, regionalJet, narrowBody, wideBody, heavy, helicopter - Move weather sprites: happycloud, raincloud - Move celestial sprites: sun, moon_6_phases - Update pixel-view.js to load from images/ path - Update CONFIG.md to document new file locations - Update screenshot Cleaner root directory structure with images organized in dedicated folder. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
22
CONFIG.md
@@ -191,25 +191,25 @@ Sky should always be transparent (#00000000) to allow the dynamic sky gradient t
|
||||
|
||||
## Other Sprite Assets
|
||||
|
||||
These are optional to customize:
|
||||
All sprite images are located in the `images/` folder. These are optional to customize:
|
||||
|
||||
| File | Size | Description |
|
||||
|------|------|-------------|
|
||||
| `sun.png` | 64x64 | Sun sprite |
|
||||
| `moon_6_phases.png` | 192x128 | Moon phases (3x2 grid) |
|
||||
| `happycloud.png` | 96x64 | Clear weather cloud |
|
||||
| `raincloud.png` | 96x64 | Rain/storm cloud |
|
||||
| `images/sun.png` | 64x64 | Sun sprite |
|
||||
| `images/moon_6_phases.png` | 192x128 | Moon phases (3x2 grid) |
|
||||
| `images/happycloud.png` | 96x64 | Clear weather cloud |
|
||||
| `images/raincloud.png` | 96x64 | Rain/storm cloud |
|
||||
|
||||
### Aircraft Sprites
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `smallProp.png` | Small propeller aircraft (Cessna) |
|
||||
| `regionalJet.png` | Regional jets (CRJ, ERJ) |
|
||||
| `narrowBody.png` | Narrow body jets (737, A320) |
|
||||
| `wideBody.png` | Wide body jets (777, 787) |
|
||||
| `heavy.png` | Heavy/jumbo jets (747, A380) |
|
||||
| `helicopter.png` | Helicopters |
|
||||
| `images/smallProp.png` | Small propeller aircraft (Cessna) |
|
||||
| `images/regionalJet.png` | Regional jets (CRJ, ERJ) |
|
||||
| `images/narrowBody.png` | Narrow body jets (737, A320) |
|
||||
| `images/wideBody.png` | Wide body jets (777, 787) |
|
||||
| `images/heavy.png` | Heavy/jumbo jets (747, A380) |
|
||||
| `images/helicopter.png` | Helicopters |
|
||||
|
||||
All aircraft sprites should face **right (east)** - the code flips them automatically for westbound flights.
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
@@ -108,7 +108,7 @@ class PixelADSB {
|
||||
this.aircraftImages[type].onerror = () => {
|
||||
console.warn(`Failed to load ${type} sprite`);
|
||||
};
|
||||
this.aircraftImages[type].src = `${type}.png?v=24`;
|
||||
this.aircraftImages[type].src = `images/${type}.png?v=24`;
|
||||
});
|
||||
|
||||
// Load environment images (directional backgrounds, base, sun, clouds)
|
||||
@@ -129,7 +129,7 @@ class PixelADSB {
|
||||
this.sunImage.onerror = () => {
|
||||
console.warn('Failed to load sun.png');
|
||||
};
|
||||
this.sunImage.src = 'sun.png?v=24';
|
||||
this.sunImage.src = 'images/sun.png?v=24';
|
||||
|
||||
this.happyCloudImage = new Image();
|
||||
this.happyCloudImage.onload = () => {
|
||||
@@ -139,7 +139,7 @@ class PixelADSB {
|
||||
this.happyCloudImage.onerror = () => {
|
||||
console.warn('Failed to load happycloud.png');
|
||||
};
|
||||
this.happyCloudImage.src = 'happycloud.png?v=24';
|
||||
this.happyCloudImage.src = 'images/happycloud.png?v=24';
|
||||
|
||||
this.rainCloudImage = new Image();
|
||||
this.rainCloudImage.onload = () => {
|
||||
@@ -149,7 +149,7 @@ class PixelADSB {
|
||||
this.rainCloudImage.onerror = () => {
|
||||
console.warn('Failed to load raincloud.png');
|
||||
};
|
||||
this.rainCloudImage.src = 'raincloud.png?v=24';
|
||||
this.rainCloudImage.src = 'images/raincloud.png?v=24';
|
||||
|
||||
this.moonSprite = new Image();
|
||||
this.moonSprite.onload = () => {
|
||||
@@ -159,7 +159,7 @@ class PixelADSB {
|
||||
this.moonSprite.onerror = () => {
|
||||
console.warn('Failed to load moon_6_phases.png');
|
||||
};
|
||||
this.moonSprite.src = 'moon_6_phases.png?v=32';
|
||||
this.moonSprite.src = 'images/moon_6_phases.png?v=32';
|
||||
|
||||
// Track which environment images have loaded
|
||||
this.sunImageLoaded = false;
|
||||
|
||||
|
Before Width: | Height: | Size: 262 KiB After Width: | Height: | Size: 262 KiB |