268 lines
6.5 KiB
Markdown
268 lines
6.5 KiB
Markdown
# 🖼️ Asset Images & Models Checklist
|
|
|
|
## Struktur Asset yang Diperlukan
|
|
|
|
Pastikan file-file berikut sudah ada di folder yang sesuai:
|
|
|
|
```
|
|
assets/
|
|
├── images/
|
|
│ ├── gunung_lemongan.jpg
|
|
│ ├── gunung_semeru.jpg
|
|
│ ├── pantai_watu_godeg.jpg
|
|
│ ├── pantai_watu_pecak.jpg
|
|
│ ├── puncak_b29.jpg
|
|
│ ├── ranu_kumbolo.jpg
|
|
│ ├── ranu_pani.jpg
|
|
│ └── ranu_regulo.jpg
|
|
│
|
|
└── models/
|
|
├── gunung_lemongan.glb
|
|
├── gunung_semeru.glb
|
|
├── pantai_watu_godeg.glb
|
|
├── pantai_watu_pecak.glb
|
|
├── puncak_b29.glb
|
|
├── ranu_kumbolo.glb
|
|
├── ranu_pani.glb
|
|
└── ranu_regulo.glb
|
|
```
|
|
|
|
---
|
|
|
|
## 📸 Spesifikasi Gambar
|
|
|
|
### Rekomendasi Format Gambar
|
|
- **Format**: JPEG atau PNG
|
|
- **Ukuran**: 1920x1080px (landscape)
|
|
- **Aspect Ratio**: 16:9 atau 4:3
|
|
- **Kompresi**: Optimized (< 500KB per file)
|
|
- **Color Space**: sRGB
|
|
|
|
### Daftar Gambar yang Dibutuhkan
|
|
|
|
| No | Nama File | Destinasi | Ukuran Disarankan |
|
|
|----|-----------|-----------|-------------------|
|
|
| 1 | gunung_lemongan.jpg | Gunung Lemongan | 1920x1080 |
|
|
| 2 | gunung_semeru.jpg | Gunung Semeru | 1920x1080 |
|
|
| 3 | pantai_watu_godeg.jpg | Pantai Watu Godeg | 1920x1080 |
|
|
| 4 | pantai_watu_pecak.jpg | Pantai Watu Pecak | 1920x1080 |
|
|
| 5 | puncak_b29.jpg | Puncak B29 | 1920x1080 |
|
|
| 6 | ranu_kumbolo.jpg | Ranu Kumbolo | 1920x1080 |
|
|
| 7 | ranu_pani.jpg | Ranu Pani | 1920x1080 |
|
|
| 8 | ranu_regulo.jpg | Ranu Regulo | 1920x1080 |
|
|
|
|
---
|
|
|
|
## 🎬 Model 3D (.glb files)
|
|
|
|
### Format GLB (GLTF Binary)
|
|
- **Format**: .glb (binary GLTF)
|
|
- **Ukuran**: Optimal < 10MB per file
|
|
- **Kompresi**: Gunakan Draco compression
|
|
- **Polygon Count**: Optimal < 100k triangles
|
|
|
|
### Daftar Model yang Dibutuhkan
|
|
|
|
| No | Nama File | Destinasi | Status |
|
|
|----|-----------|-----------|--------|
|
|
| 1 | gunung_lemongan.glb | Gunung Lemongan | Perlu dibuat |
|
|
| 2 | gunung_semeru.glb | Gunung Semeru | Perlu dibuat |
|
|
| 3 | pantai_watu_godeg.glb | Pantai Watu Godeg | Perlu dibuat |
|
|
| 4 | pantai_watu_pecak.glb | Pantai Watu Pecak | Perlu dibuat |
|
|
| 5 | puncak_b29.glb | Puncak B29 | Perlu dibuat |
|
|
| 6 | ranu_kumbolo.glb | Ranu Kumbolo | Perlu dibuat |
|
|
| 7 | ranu_pani.glb | Ranu Pani | Perlu dibuat |
|
|
| 8 | ranu_regulo.glb | Ranu Regulo | Perlu dibuat |
|
|
|
|
---
|
|
|
|
## 🛠️ Tools untuk Membuat Asset
|
|
|
|
### Untuk Gambar:
|
|
- **Photoshop** / **GIMP**: Edit dan compress
|
|
- **TinyPNG**: Kompresi gambar online
|
|
- **ImageOptim**: Batch optimization
|
|
- **Krita**: Design landscape images
|
|
|
|
### Untuk Model 3D:
|
|
- **Blender**: Model dan convert ke GLB
|
|
- **Maya**: Professional 3D modeling
|
|
- **SketchUp**: Modeling landscape/arsitektur
|
|
- **Sketchfab**: Download model 3D siap pakai
|
|
|
|
---
|
|
|
|
## 📝 Pubspec.yaml Configuration
|
|
|
|
Pastikan `pubspec.yaml` sudah konfigurasi assets:
|
|
|
|
```yaml
|
|
flutter:
|
|
assets:
|
|
- assets/
|
|
- assets/images/
|
|
- assets/models/
|
|
- assets/images/gunung_lemongan.jpg
|
|
- assets/images/gunung_semeru.jpg
|
|
- assets/images/pantai_watu_godeg.jpg
|
|
- assets/images/pantai_watu_pecak.jpg
|
|
- assets/images/puncak_b29.jpg
|
|
- assets/images/ranu_kumbolo.jpg
|
|
- assets/images/ranu_pani.jpg
|
|
- assets/images/ranu_regulo.jpg
|
|
- assets/models/gunung_lemongan.glb
|
|
- assets/models/gunung_semeru.glb
|
|
- assets/models/pantai_watu_godeg.glb
|
|
- assets/models/pantai_watu_pecak.glb
|
|
- assets/models/puncak_b29.glb
|
|
- assets/models/ranu_kumbolo.glb
|
|
- assets/models/ranu_pani.glb
|
|
- assets/models/ranu_regulo.glb
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Checklist Setup Assets
|
|
|
|
### Sebelum Run Aplikasi:
|
|
|
|
- [ ] Folder `assets/images/` ada dan kosong/berisi placeholder
|
|
- [ ] Folder `assets/models/` ada dan kosong/berisi placeholder
|
|
- [ ] Minimal 1 gambar test di `assets/images/`
|
|
- [ ] `pubspec.yaml` sudah update dengan asset paths
|
|
- [ ] Run `flutter pub get` setelah update pubspec
|
|
- [ ] No flutter warnings tentang missing assets
|
|
|
|
### Saat Testing Awal:
|
|
|
|
- [ ] Test dengan placeholder images (gradient)
|
|
- [ ] Verify card fallback image bekerja
|
|
- [ ] Verify error handling saat image tidak ada
|
|
- [ ] Verify model path ditampilkan di detail
|
|
|
|
### Sebelum Production:
|
|
|
|
- [ ] Semua 8 gambar sudah ada dan optimized
|
|
- [ ] Semua 8 model GLB sudah ada
|
|
- [ ] Image resolution konsisten
|
|
- [ ] File size total < 50MB
|
|
- [ ] No missing asset warnings
|
|
- [ ] Test di device fisik minimal 2 ukuran layar
|
|
|
|
---
|
|
|
|
## 📊 Image Optimization Tips
|
|
|
|
### Untuk Landscape Photos:
|
|
1. **Crop ke 16:9 aspect ratio**
|
|
2. **Resize ke 1920x1080**
|
|
3. **Compress dengan JPEG quality 80-85**
|
|
4. **Final size target: 200-300KB**
|
|
|
|
### Batch Processing:
|
|
```bash
|
|
# Menggunakan ImageMagick
|
|
mogrify -resize 1920x1080 -quality 85 *.jpg
|
|
```
|
|
|
|
### Online Compression:
|
|
- TinyPNG: https://tinypng.com/
|
|
- TinyJPG: https://tinyjpg.com/
|
|
- ImageOptim: https://imageoptim.com/
|
|
|
|
---
|
|
|
|
## 🎯 Model 3D Conversion
|
|
|
|
### Dari Blender ke GLB:
|
|
1. Open model di Blender
|
|
2. **File → Export As → glTF Binary (.glb)**
|
|
3. Settings:
|
|
- Format: glTF Binary
|
|
- Include: All data
|
|
- Draco: Enable compression
|
|
4. Save di `assets/models/`
|
|
|
|
### File Size Target:
|
|
- Gunung model: 5-8MB
|
|
- Lake model: 3-5MB
|
|
- Beach model: 4-6MB
|
|
|
|
---
|
|
|
|
## 🔄 Placeholder Strategy
|
|
|
|
Jika asset belum ready, gunakan placeholder:
|
|
|
|
### Gambar Placeholder:
|
|
```dart
|
|
Container(
|
|
color: Color(0xFF1F8F5F),
|
|
child: Icon(
|
|
Icons.landscape,
|
|
color: Colors.white,
|
|
size: 100,
|
|
),
|
|
)
|
|
```
|
|
|
|
### Model Placeholder:
|
|
```dart
|
|
Text('Model: assets/models/gunung_semeru.glb')
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 Testing dengan Placeholder
|
|
|
|
Sebelum asset final, test dengan:
|
|
|
|
1. **Gradient Background** sebagai gambar
|
|
2. **Icon landscape** sebagai fallback
|
|
3. **Text string** untuk model path
|
|
4. **Fixed data** tanpa image loading
|
|
|
|
---
|
|
|
|
## 🚀 Deployment Checklist
|
|
|
|
- [ ] Semua asset di-optimize
|
|
- [ ] File size total acceptable
|
|
- [ ] Load time < 2 detik
|
|
- [ ] No memory leaks
|
|
- [ ] Image caching working
|
|
- [ ] Model loading smooth
|
|
- [ ] Error states handled
|
|
- [ ] Device storage sufficient
|
|
|
|
---
|
|
|
|
## 💡 Pro Tips
|
|
|
|
1. **Gunakan CDN atau cloud storage** untuk model besar
|
|
2. **Implement lazy loading** untuk images
|
|
3. **Cache gambar locally** setelah first load
|
|
4. **Monitor bundle size** di APK/AAB
|
|
5. **Test pada slow network** (3G/4G)
|
|
|
|
---
|
|
|
|
## 📞 Resource Links
|
|
|
|
### Image Compression:
|
|
- TinyPNG: https://tinypng.com/
|
|
- ImageMagick: https://imagemagick.org/
|
|
|
|
### 3D Model Creation:
|
|
- Blender: https://www.blender.org/
|
|
- Sketchfab: https://sketchfab.com/
|
|
|
|
### GLB Validation:
|
|
- Babylon.js Sandbox: https://sandbox.babylonjs.com/
|
|
- Three.js Editor: https://threejs.org/editor/
|
|
|
|
---
|
|
|
|
**Status**: 📋 Checklist Ready
|
|
**Last Updated**: 2026-05-16
|