6.5 KiB
6.5 KiB
🖼️ 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:
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.yamlsudah update dengan asset paths- Run
flutter pub getsetelah 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:
- Crop ke 16:9 aspect ratio
- Resize ke 1920x1080
- Compress dengan JPEG quality 80-85
- Final size target: 200-300KB
Batch Processing:
# 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:
- Open model di Blender
- File → Export As → glTF Binary (.glb)
- Settings:
- Format: glTF Binary
- Include: All data
- Draco: Enable compression
- 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:
Container(
color: Color(0xFF1F8F5F),
child: Icon(
Icons.landscape,
color: Colors.white,
size: 100,
),
)
Model Placeholder:
Text('Model: assets/models/gunung_semeru.glb')
📱 Testing dengan Placeholder
Sebelum asset final, test dengan:
- Gradient Background sebagai gambar
- Icon landscape sebagai fallback
- Text string untuk model path
- 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
- Gunakan CDN atau cloud storage untuk model besar
- Implement lazy loading untuk images
- Cache gambar locally setelah first load
- Monitor bundle size di APK/AAB
- 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