Portofolio UI/UX · Game Sandbox Android

Blok Dunia
Bangun dunia balok dari genggaman.

Aplikasi game sandbox 3D bergaya voxel yang berjalan sepenuhnya offline. Antarmuka dirancang satu layar tanpa menu bertingkat, sehingga pemain bisa langsung membangun dalam hitungan detik setelah aplikasi dibuka.

Android APK · Flutter 100% Offline Ukuran 550 KB 14 Jenis blok Target sentuh 58 dp
09.41
Layar utama permainan Blok Dunia
01 — Layar Aplikasi

Lima layar utama, tanpa menu bertingkat

Seluruh interaksi terjadi di satu layar permainan. Panel tambahan hanya muncul sebagai lapisan sementara, lalu menutup sendiri setelah pemain memilih.

09.41
Layar pembuka berisi panduan kontrol
1. OnboardingPanduan kontrol tampil sekali saat aplikasi dibuka, ditutup dengan satu tombol besar.
09.41
Layar utama permainan
2. Layar UtamaDunia terlihat penuh. Kontrol diletakkan di tepi layar agar tidak menutupi area bermain.
09.41
Palet pemilihan blok
3. Palet Blok14 blok dalam satu lapisan mengambang, menutup otomatis begitu satu blok dipilih.
09.41
Mode gali dengan penanda blok
4. Mode GaliTombol mode berganti ikon dan warna, memberi umpan balik jelas aksi apa yang sedang aktif.
09.41
Mode terbang, pandangan dari udara
5. Mode TerbangTombol naik/turun berganti fungsi, sehingga jumlah tombol di layar tetap sama.
02 — Anatomi HUD

Delapan kontrol, semuanya dalam jangkauan ibu jari

Tata letak dibagi tiga zona: aksi di kiri atas, pengaturan di kanan atas, dan navigasi di bagian bawah layar tempat ibu jari beristirahat.

09.41
Anatomi tata letak HUD 1 2 3 4 5 6 7 8
  • 1
    Tombol Mode — Pasang / GaliSatu tombol dua keadaan. Biru berarti memasang blok, abu berarti menggali. Ikon ikut berubah agar tidak perlu membaca teks.
  • 2
    Mode TerbangMenyala biru ketika aktif. Dipakai untuk meninjau bangunan dari udara.
  • 3
    Palet BlokMembuka lapisan pemilihan blok di tengah layar, jauh dari tepi supaya mudah dijangkau.
  • 4
    Dunia BaruMembuat ulang dunia. Selalu meminta konfirmasi karena bersifat merusak.
  • 5
    Info / BantuanMemanggil kembali layar panduan kontrol kapan saja.
  • 6
    CrosshairTitik bidik tetap di tengah layar. Blok yang dibidik diberi garis tepi hitam sebagai umpan balik.
  • 7
    Joystick GerakBerada di kiri bawah, area alami ibu jari kiri. Knob mengikuti sentuhan dan kembali ke tengah saat dilepas.
  • 8
    Naik / TurunLompat dan jalan pelan saat di darat; naik dan turun saat terbang. Warna emas membedakannya dari aksi utama.
03 — Sistem Desain

Aturan visual yang dipakai ulang di seluruh layar

Warna, bentuk, dan ukuran dijaga konsisten supaya antarmuka terasa satu kesatuan.

Palet Warna

Aksi utama / aktif #2F7FF5
Aksi sekunder #D6A417
Kontrol netral #10121A
Langit #8EC7EA
Rumput #6AAA50

Komponen Tombol

PASANG
GALI
  • Tombol persegi 58 × 58 dp
  • Tombol bulat 56 dp
  • Sudut membulat 15 dp / 50%

Ukuran & Tipografi

  • Minimum target sentuh 58 dp
    (Material: 48 dp)
  • Jarak antar tombol 10 dp
  • Label tombol 9–10 px, tebal, huruf besar
  • Jarak huruf label 0,4 px
  • Keluarga huruf Sistem (Roboto)
  • Ikon Emoji sistem, tanpa berkas aset

Prinsip Interaksi

  • Umpan balik tekan Skala 0,94×
  • Pesan singkat Toast 0,9 detik
  • Aksi merusak Selalu konfirmasi
  • Lapisan sementara Menutup otomatis
  • Orientasi Potret & lanskap
04 — Alur Pengguna

Dari membuka aplikasi sampai membangun: empat langkah

Tanpa layar muat, tanpa pendaftaran akun, tanpa koneksi internet.

Langkah 1 Buka aplikasi

Dunia dibuat langsung di perangkat. Tidak ada unduhan tambahan.

Langkah 2 Baca panduan

Ringkasan kontrol tampil sekali, ditutup dengan satu ketukan.

Langkah 3 Pilih blok

Palet 14 blok terbuka dari tombol BLOK, lalu menutup sendiri.

Langkah 4 Bangun & jelajahi

Ketuk untuk memasang atau menggali, joystick untuk berjalan, FLY untuk meninjau.

05 — Fitur

Yang bisa dilakukan pemain

🧱
Bangun & hancurkan blok

Inti permainan sandbox. Ketuk layar untuk memasang atau menggali blok yang sedang dibidik crosshair.

🎨
14 jenis blok

Rumput, tanah, batu, kayu, papan, daun, sakura, bata, pasir, kaca, dan lainnya dalam satu palet.

🚶
Karakter orang ketiga

Karakter balok dengan animasi jalan, lompat, dan melayang, terlihat penuh dari belakang.

🗽
Mode terbang

Melayang bebas untuk meninjau bangunan besar dari udara tanpa terhalang gravitasi.

🌎
Dunia 96 × 96

Dataran rumput dengan pohon dan pohon sakura, dapat dibuat ulang kapan saja lewat tombol DUNIA.

Sepenuhnya offline

Tekstur dibuat lewat kode, bukan berkas gambar. Tidak ada permintaan jaringan sama sekali.

06 — Spesifikasi Teknis

Ringan, satu berkas, tanpa ketergantungan luar

PlatformAndroid (APK) & Desktop (peramban)
Teknologi gameHTML5, JavaScript, WebGL (Three.js)
Pembungkus AndroidFlutter 3.19+ dengan webview_flutter
Ukuran aplikasi550 KB — seluruh kode, pustaka, dan tekstur
OrientasiPotret dan lanskap, tata letak menyesuaikan
KontrolLayar sentuh (joystick + ketuk) dan keyboard + tetikus
Ukuran dunia96 × 96 × 40 blok
Teknik renderChunked voxel meshing, ambient occlusion, texture atlas prosedural
Koneksi internetTidak diperlukan
07 — Coba Langsung

Jalankan aplikasinya di dalam bingkai ini

Berkas yang sama persis dengan yang nantinya dibungkus menjadi aplikasi Android.

Bingkai di samping memuat berkas permainan yang asli. Gunakan joystick di kiri bawah untuk berjalan, geser layar untuk melihat sekeliling, dan ketuk untuk memasang blok.

Bila bingkai di samping tampil kosong, peramban sedang memblokir pemuatan berkas lokal di dalam bingkai. Gunakan tombol Buka layar penuh — permainannya tetap berjalan normal.

08 — Rilis Android

Dari halaman web menjadi APK, dibungkus dengan Flutter

Rilis akhir untuk klien berbentuk APK Android. Flutter berperan sebagai cangkang aplikasi: ia membuat aplikasi Android asli, lalu menampilkan berkas permainan di dalam WebView layar penuh. Berkas dibaca dari dalam APK, bukan dari internet.

Tahap 1 Build game

npm run build menghasilkan dist/index.html berukuran 550 KB.

Tahap 2 Masuk ke aset

Berkas disalin otomatis ke flutter/assets/game.html.

Tahap 3 Dimuat WebView

Flutter memanggil loadFlutterAsset() — tanpa jaringan sama sekali.

Tahap 4 Jadi APK

flutter build apk --release menghasilkan berkas siap install.

Kenapa WebView, bukan ditulis ulang?

Flutter + WebView Ditulis ulang di Flutter
Waktu pengerjaanBeberapa jamBeberapa minggu
Kode gameDipakai ulang 100%Dibuat dari nol
Renderer 3DWebGL, sudah jalanPerlu pustaka tambahan
Versi web & AndroidIdentik, satu sumberTerpisah
PerformaSedikit di bawah nativeLebih tinggi

Perkiraan Hasil APK

  • Nama paket com.tugasakhir
    .blok_dunia
  • Ukuran APK ± 8 – 12 MB
  • Dengan split per-ABI ± 6 – 8 MB
  • Android minimum API 21 (5.0)
  • Izin diminta Tidak ada — termasuk tanpa izin INTERNET
  • Orientasi Potret & lanskap

Status saat ini: APK belum dibangun. Berkas template Flutter (pubspec.yaml, lib/main.dart, dan aset game) sudah siap pakai di folder flutter/, tetapi proses build memerlukan Flutter SDK dan Android SDK yang belum terpasang di komputer pengembangan. Panduan langkah demi langkah tersedia di flutter/PANDUAN-APK.md.