Modul Ajar Grafika Komputer Pada PC (Emulator) + ...

7 downloads 391316 Views 17MB Size Report
Mar 1, 2010 - Visual Studio (Milik Microsoft), atau bahkan Xcode (Milik Apple). “The. Eclipse Foundation” yang meliputi Google, telah mencoba lebih dari.
Judul

BELAJAR CEPAT DAN PRAKTIS TENTANG GRAFIKA KOMPUTER (Teori & Aplikasi) “Untuk Pengembangan Aplikasi Mobile Dengan Menggunakan Eclipse Bundle Android, Android Studio Dan OpenGL ES”

Oleh : Imam Cholissodin Maya Kurniawati, dkk.

PENGANTAR Modul ini disusun untuk memberikan pemahaman konsep dasar dan detail pengembangan Grafika Komputer berbasis aplikasi Mobile. Materi yang tersedia selain memudahkan para developer, juga untuk mendukung perkuliahan yang membantu pengayaan mahasiswa. Imam Cholissodin S.Si., M.Kom Dosen Pengampu MK Grafika Komputer FILKOM UB

2014-2016

Kata Pengantar

Alhamdulillahhi robbil alamin, puji syukur kehadirat Allah SWT atas segala rahmat dan karunia-Nya dengan terselesaikannya penulisan modul ini dengan judul “Belajar Cepat & Praktis Tentang Grafika Komputer (Teori & Aplikasi) Untuk Pengembangan Aplikasi Mobile Dengan Menggunakan Eclipse Bundle Android Dan OpenGL”. Buku ini merupakan uraian dari pemahaman konsep dasar dalam grafika komputer dan penerapannya, dengan mengedepankan keterampilan dalam pembuatan dan menampilkan grafik komputer serta berbagai algoritmanya, untuk mengaplikasikan grafika komputer pada pemodelan agar memudahkan dalam pembuatan visualisasi informasi menjadi bentuk geometri, serta mengembangkan teori geometri pada pembuatan grafik komputer untuk tingkat lanjut yang lebih kompleks. Grafika komputer telah banyak diaplikasikan pada beberapa perangkat lunak dengan bahasa pemrograman yang populer seperti C/C++, Java, dan lainnya. Namun aplikasi grafika komputer pada perangkat Mobile (Smartphone) masih jarang ditemukan (sangat langka), terutama dalam bentuk buku yang berbahasa Indonesia. Dan teknologi Mobile saat ini memang sedang naik daun, baik dimata pengembang Aplikasi (Developer) maupun dikalangan pengguna (End User). Hal inilah yang mendasari penulis untuk menyusun catatan-catatan kecil untuk dibuat sebuah naskah tulisan yang mudah untuk dipahami. Dan penulis mengucapkan terimakasih yang sebesarbesarnya kepada beberapa pihak terkait yang telah membantu dalam penyelesaian buku ini : 1. Para penulis artikel tentang grafika komputer di forum, web, blog dan buku yang menjadi referensi buku ini, dan memberi masukan yang sangat berharga untuk perbaikan dan penyelesaian buku ini. 2. Mbak Maya Kurniawati, yang telah banyak membantu penulisan buku ini. Dan beberapa mahasiswa terbaik saya lainnya (M. Abyan Safitra, M. Fatqur Rohman, Abdul Khoir, Faisol Andi Sefihara, Faisal Akbar, Pasca Immanuddin, Dani Devito, dkk.). Semoga kontribusi kalian menjadi ilmu yang barokah dan bermanfaat. Amiin. :) Buku ini masih jauh dari sempurna, begitulah kata yang tepat terkait dengan buku ini. Maka penulis mohon kritik dan saran untuk perbaikan dan penyempurnaan buku ini. Selamat membaca buku ini dan semoga bermanfaat.

Malang, 19 Agustus 2014

Penulis ii

Daftar Isi

Judul ...................................................................................................... i Kata Pengantar ..................................................................................... ii Daftar Isi ...............................................................................................iii Daftar Tabel .........................................................................................vii Daftar Gambar .................................................................................... viii Daftar Source Code ........................................................................... xxii BAB 1

Introduction to OpenGL.................................................... 1 1.1

Pengertian Grafika Komputer .......................................... 1

1.2

Persiapan di Eclipse (ADT) .............................................. 1

1.3

BAB 2

1.2.1

Fast Emulator With Intel (HAXM) ......................... 1

1.2.2

Konfigurasi "Eclipse + Bluestacks" ...................... 7

1.2.3

Konfigurasi "Eclipse + Genymotion" .................. 14

1.2.4

Konfigurasi pada Smartphone Android .............. 35

1.2.5

Solusi Error/Problem/Bug .................................. 38

1.2.6

Membuat Project Baru ....................................... 42

1.2.7

Siklus Hidup Kode Program ............................... 45

Persiapan di Android Studio (AS) .................................. 46 1.3.1

Installasi Android Studio .................................... 46

1.3.2

View SDK Android Studio .................................. 61

1.3.3

Solusi Error/ Problem Android Studio ................ 64

1.3.4

Compare Eclipse dengan Android Studio .......... 92

1.3.5

Membuat AVD baru dari AVD Manager............. 93

1.3.6

Import Project Eclipse ke Android Studio ........ 102

1.3.7

Konfigurasi pada Smartphone Android ............ 120

1.3.8

Konfigurasi "AS + Genymotion" ....................... 121

1.3.9

Membuat Project Baru di AS............................ 155

1.3.10

Membuat Module Baru di Project AS............. 164

Primitives Object .......................................................... 169 2.1

Pengertian Primitives Object........................................ 169

iii

2.2

Membuat Titik............................................................... 170

2.3

Membuat Garis dengan Titik ........................................ 182

2.4

Membuat Segitiga & Segiempat .................................. 198

2.5

Membuat Polygon/Segibanyak .................................... 232

2.6

Membuat Lingkaran ..................................................... 247

2.7

Membuat Polar Object ................................................. 279

BAB 3

Transformations ........................................................... 286 3.1

Pengertian Transformasi.............................................. 286

3.2

Matematika & Proses Transformasi ............................. 286

3.3

Urutan Transformasi .................................................... 290

3.4

Membuat Kincir Angin .................................................. 290

BAB 4

Viewing / Camera ......................................................... 300 4.1

Pengertian Viewing / Camera ...................................... 300 4.1.1

Proyeksi Paralel ............................................... 300

4.1.2

Syntax Proyeksi Paralel ................................... 300

4.1.3

Proyeksi Perspektif .......................................... 301

4.1.4

Syntax Proyeksi Perspektif .............................. 301

4.2

Matematika Synthetic Camera ..................................... 303

4.3

Membuat Multiple View Object .................................... 307

BAB 5

Texture Mapping .......................................................... 317 5.1

Pengertian Texture Mapping........................................ 317

5.2

Representasi Texture Mapping .................................... 318

5.3

Parameter Texture Mapping ........................................ 319

5.4

Texture Mapping Pada Segitiga................................... 321

5.5

Texture Mapping Pada Lingkaran ................................ 339

5.6

Texture Mapping Pada Kubus ..................................... 359

5.7

Texture Mapping Pada Bola ........................................ 367

BAB 6

Blending ....................................................................... 378 6.1

Pengertian Blending ..................................................... 378

6.2

Source and Destination Factor Pada Blending ............ 379

6.3

Matematika Blending ................................................... 379

iv

6.4

Blending Dua Segitiga ................................................. 381

6.5

Blending Pada Kubus .................................................. 400

6.6

Blending Pada Bola ..................................................... 411

BAB 7

Lighting & Shading ....................................................... 422 7.1

Pengertian Lighting & Shading .................................... 422

7.2

Proses dan Fungsi Pada Lighting ................................ 423

7.3

Normal Vektor Pada Lighting ....................................... 424

7.4

Lighting Pada Interior ................................................... 425

BAB 8

Model Loading & Curve ............................................... 542 8.1

Pengertian Model Loading & Curve ............................. 542

8.2

Model Creator .............................................................. 543

8.3

Model Loading ............................................................. 544

8.4

Fractal Curve................................................................ 551

BAB 9

Project Pilihan .............................................................. 558 9.1

9.2

9.3

9.4

Random Maze .............................................................. 558 9.1.1

Konsep ............................................................. 558

9.1.2

Tampilan Implementasi .................................... 558

9.1.3

Source Code .................................................... 560

Smart Flappy ................................................................ 723 9.2.1

Konsep ............................................................. 723

9.2.2

Tampilan Implementasi .................................... 723

9.2.3

Source Code .................................................... 725

Chicken Hero ............................................................... 760 9.3.1

Konsep ............................................................. 760

9.3.2

Fungsi Dasar Pembentuk Objek ...................... 761

9.3.3

Tampilan Implementasi .................................... 762

9.3.4

Source Code .................................................... 763

Ayo Nyoblos ................................................................. 854 9.4.1

Konsep ............................................................. 854

9.4.2

Fitur/Menu ........................................................ 855

9.4.3

Tampilan Implementasi .................................... 855

v

9.4.4 9.5

9.6

9.7

9.8

Source Code .................................................... 857

Touch Your Coin .......................................................... 918 9.5.1

Konsep ............................................................. 918

9.5.2

Fungsi Dasar Pembentuk Objek ...................... 920

9.5.3

Tampilan Implementasi .................................... 921

9.5.4

Source Code .................................................... 923

Zoo Photo Attack ....................................................... 1064 9.6.1

Konsep ........................................................... 1064

9.6.2

Nilai-Nilai Edukasi .......................................... 1064

9.6.3

Fitur Yang Digunakan .................................... 1065

9.6.4

Tampilan Implementasi .................................. 1065

9.6.5

Source Code .................................................. 1066

Ular Tangga ............................................................... 1118 9.7.1

Konsep ........................................................... 1118

9.7.2

Peraturan Permainan ..................................... 1119

9.7.3

Nilai-Nilai Edukasi .......................................... 1120

9.7.4

Fitur Yang Digunakan .................................... 1121

9.7.5

Fungsi Dasar Pembentuk Objek .................... 1121

9.7.6

Tampilan Implementasi .................................. 1124

9.7.7

Source Code .................................................. 1127

Math Snail .................................................................. 1158 9.8.1

Konsep ........................................................... 1158

9.8.2

Fungsi Dasar Pembentuk Objek .................... 1159

9.8.3

Tampilan Implementasi .................................. 1175

9.8.4

Source Code .................................................. 1177

Daftar Pustaka ................................................................................ 1311 Biografi Penulis ............................................................................... 1312

vi

Daftar Tabel

Tabel 1.1 Log “Run adb.exe by cmd as Administrator” ...................... 75 Tabel 1.2 Concepts Map : Eclipse Vs Android Studio ........................ 92 Tabel 9.1 Fungsi Dasar Pembentuk Objek ...................................... 761 Tabel 9.2 Fungsi Dasar Pembentuk Objek ...................................... 920 Tabel 9.3 Fungsi Dasar Pembentuk Objek .................................... 1122 Tabel 9.4 Fungsi Dasar Pembentuk Objek .................................... 1159

vii

Daftar Gambar

Gambar 1.1 Android SDK Manager Sebelum Klik Deselect All ........... 2 Gambar 1.2 Klik Intel x86 Atom System Image.................................... 2 Gambar 1.3 Beri tanda cek Intel x86 Emulator Accelerator (HAXM) ... 3 Gambar 1.4 Klik Install 2 packages ...................................................... 3 Gambar 1.5 Klik Android SDK License lalu klik Accept Lisense .......... 4 Gambar 1.6 Klik Intel Android Extra License lalu klik Accept Lisense . 4 Gambar 1.7 Proses Download ............................................................. 4 Gambar 1.8 Tampilan setelah download dan instalasiselesai ............. 5 Gambar 1.9 Membuat Android Virtual Device (AVD) baru................... 6 Gambar 1.10 Klik AVD pada list lalu klik Start ..................................... 6 Gambar 1.11 Intel HAXM ..................................................................... 7 Gambar 1.12 Tampilan AVD ................................................................ 7 Gambar 1.13 Download SDK ADT Bundle Eclipse .............................. 8 Gambar 1.14 Download Bluestacks ..................................................... 8 Gambar 1.15 ADW Launcher ............................................................... 9 Gambar 1.16 Interface Bluestacks ....................................................... 9 Gambar 1.17 Pesan “Failed to create the Java Virtual Machine” ........ 9 Gambar 1.18 Advanced system settings............................................ 10 Gambar 1.19 Click Path ..................................................................... 11 Gambar 1.20 Edit System Variables .................................................. 11 Gambar 1.21 Menjalankan cmd ......................................................... 12 Gambar 1.22 Command masuk ke folder BlueStacks ....................... 12 Gambar 1.23 HD-Adb.exe start-server............................................... 12 Gambar 1.24 Setelah HD-Adb.exe start-server dijalankan ................ 13 Gambar 1.25 Klik"Window ->"Show view"->“Other” ........................... 13 Gambar 1.26 Tampilan device pada Bluestacks emulator................. 14 Gambar 1.27 Android Device Chooser .............................................. 14 Gambar 1.28 Main Window Genymotion ........................................... 15 Gambar 1.29 Pop-up Menambah Virtual Device ............................... 15

viii

Gambar 1.30 Klik OK.......................................................................... 15 Gambar 1.31 Isi Username/Password ,Connect ................................ 16 Gambar 1.32 Pilih Virtual Device ....................................................... 16 Gambar 1.33 Beri Nama Virtual Device ............................................. 17 Gambar 1.34 Virtual Device Terdownload & Terdeploy ..................... 17 Gambar 1.35 Deployment window Finish........................................... 18 Gambar 1.36 Play............................................................................... 18 Gambar 1.37 File .ova ........................................................................ 19 Gambar 1.38 Deploying virtual device.. ............................................. 19 Gambar 1.39 Virtual device Finish ..................................................... 20 Gambar 1.40 Virtual device is Ready ................................................. 20 Gambar 1.41 Import Virtual Devices (*.ova) di Virtual Box ................ 21 Gambar 1.42 Virtual device is Ready Pada Virtual Box ..................... 22 Gambar 1.43 Virtual device is Ready Pada Genymotion ................... 22 Gambar 1.44 Set Letak Android SDK di Genymotion ........................ 23 Gambar 1.45 Add Repository, lalu klik OK ......................................... 23 Gambar 1.46 There are not categorized items................................... 24 Gambar 1.47 Uncheck “Group items by category” ............................. 24 Gambar 1.48 Cek "Genymotion Eclipse Tools".................................. 25 Gambar 1.49 "Genymotion Eclipse Tools", Klik Finish ...................... 25 Gambar 1.50 plugin is unsigned, klik OK saja.................................... 25 Gambar 1.51 Software Updates, restart to take effect ....................... 26 Gambar 1.52 Set directory Genymotion ............................................. 26 Gambar 1.53 Icon Genymotion di Eclipse .......................................... 26 Gambar 1.54 Start Virtual Device ....................................................... 27 Gambar 1.55 Loading Virtual Device ................................................. 27 Gambar 1.56 Tampilan Virtual Samsung Galaxy S2 - 4.1.1 - API 16 480x800 .............................................................................................. 28 Gambar 1.57 Error unable to start the virtual device ......................... 28 Gambar 1.58 Kosongkan Host-only Networks ................................... 29 Gambar 1.59 Auto Create VirtualBox Host-Only Ethernet Adapter ... 29 Gambar 1.60 Network Connections ................................................... 30 ix

Gambar 1.61 VirtualBox Host-Only Network ...................................... 30 Gambar 1.62 klik “Edits selected” ...................................................... 31 Gambar 1.63 Adapter & DHCP VB Host-Only Ethernet Adapter ....... 32 Gambar 1.64 Adapter & DHCP VB Host-Only Ethernet Adapter #2 .. 32 Gambar 1.65 Pilih Android Applicaton atau Run Configuration.. ....... 33 Gambar 1.66 Target, pilih “Always prompt to pick device”................. 33 Gambar 1.67 Genymotion– samsung_galaxy_s2.. ............................ 34 Gambar 1.68 Segitiga, Etc. ................................................................ 34 Gambar 1.69 USB Debugging Pada Smartphone Samsung ............. 35 Gambar 1.70 adt-bundle-windows-x86-20131030_sdk_platform-tools ............................................................................................................ 35 Gambar 1.71 Setelah mengetikkan drive lokasi sdk .......................... 36 Gambar 1.72 adb.exe devices ........................................................... 36 Gambar 1.73 Setelah adb.exe devices dijalankan ............................. 36 Gambar 1.74 Setelah adb.exe devices dijalankan pada Eclipse ....... 37 Gambar 1.75 Muncul smartphone Samsung pada Android devices chooser ............................................................................................... 37 Gambar 1.76 adb.exe kill-server dan start-server .............................. 38 Gambar 1.77 R cannot be resolved to a variable ............................... 38 Gambar 1.78 Error pada MainActivity.java......................................... 39 Gambar 1.79 Ubah package pada AndroidManifest.xml ................... 39 Gambar 1.80 c.

Pilih “com.example.mygl” ................................... 40

Gambar 1.81 Package pada AndroidManifest.xml telah diubah ....... 40 Gambar 1.82 d.

Save file “AndroidManifest.xml” .......................... 41

Gambar 1.83 Fix pada MainActivity.java ............................................ 41 Gambar 1.84 New Android Application Project .................................. 42 Gambar 1.85 Configure Project .......................................................... 42 Gambar 1.86 Configure the attributes of the icon set ........................ 43 Gambar 1.87 Pilih “Blank Activity” ...................................................... 43 Gambar 1.88 Create “Blank Activity” .................................................. 44 Gambar 1.89 Tampilan Project .......................................................... 44 Gambar 1.90 Tampilan Project Membuat Titik ................................... 45 x

Gambar 1.91 main() vs activity ........................................................... 45 Gambar 1.93 Android Studio (Hero)................................................... 46 Gambar 1.94 Mater Android Studio .................................................... 47 Gambar 1.95 Please Wait Setup is Loading ...................................... 47 Gambar 1.96 Android Studio Setup ................................................... 48 Gambar 1.97 Pilih Komponen ............................................................ 48 Gambar 1.98 License Agreement ...................................................... 49 Gambar 1.99 Configuration Setting .................................................... 49 Gambar 1.100 Choose Start Menu Folder ......................................... 50 Gambar 1.101 Proses Installing Android Studio ................................ 50 Gambar 1.102 Extracting Android SDK.............................................. 51 Gambar 1.103 Installation MVC++ 2010 x86 Redistributable Setup . 51 Gambar 1.104 MVC++ Installation Is Complete ................................. 52 Gambar 1.105 Setup Was Successfully ............................................. 52 Gambar 1.106 Completing the Android Studio Setup ........................ 53 Gambar 1.107 Error launching Android Studio .................................. 53 Gambar 1.108 Advanced system settings.......................................... 54 Gambar 1.109 Click Path ................................................................... 54 Gambar 1.110 Edit System Variables ................................................ 54 Gambar 1.111 Studio64.exe – System Error ..................................... 55 Gambar 1.112 MVC++ 2010 x86 Redistributable Package ............... 55 Gambar 1.113 Start Android Studio ................................................... 55 Gambar 1.114 Import Previous Version Of Android Studio ............... 56 Gambar 1.115 Android Studio Powered by the IntelliJ Paltform ........ 56 Gambar 1.116 Fetching Android SDK component information .......... 56 Gambar 1.117 Checking for updated SDK component ...................... 57 Gambar 1.118 The following SDK … : build-tools-21.1.1 .................. 57 Gambar 1.119 Setup Wizard - Downloading Components ................ 58 Gambar 1.120 Start Android Studio dari Apps Search ...................... 58 Gambar 1.121 Setup Wizard (Klik Retry) ........................................... 59 Gambar 1.122 Downloading Android SDK Build-tools, revision 21.1.1 ............................................................................................................ 59 xi

Gambar 1.123 Download Android SDK Build-tools was successfully 60 Gambar 1.124 Welcome to Android Studio ........................................ 60 Gambar 1.125 Masuk di path “C:\Users\[Nama Komputer]” .............. 61 Gambar 1.126 Klik "Options" .............................................................. 61 Gambar 1.127 Folder Options ............................................................ 62 Gambar 1.128 Klik “Show hidden files, folders, and drivers” ............. 62 Gambar 1.129 “AppData” sudah terlihat ............................................ 63 Gambar 1.130 Lokasi SDK Android Studio ........................................ 63 Gambar 1.131 Run “MainActivity” ...................................................... 64 Gambar 1.132 Edit System Variables JDK 1.8 .................................. 64 Gambar 1.133 Launch Emulator (Launch emulator) .......................... 65 Gambar 1.134 Launch Emulator (running device) ............................. 65 Gambar 1.135 Unexpected Error (Local path doesn't exist) Sync.. ... 66 Gambar 1.136 Local path doesn't exist (Event Log) .......................... 66 Gambar 1.137 Jalankan perintah “gradlew clean packageDebug” .... 66 Gambar 1.138 Klik “Setting” di Android Studio .................................. 66 Gambar 1.139 isi “Gradle VM options:” dengan “-Xmx256m” ............ 67 Gambar 1.140 Check “Edit Configurations….” ................................... 67 Gambar 1.141 Android Application (app) ........................................... 68 Gambar 1.142 Android Application (MainActivity) .............................. 68 Gambar 1.143 Failed to complete Gradle execution .......................... 69 Gambar 1.144 ERROR: This AVD's is missing a kernel file .............. 69 Gambar 1.145 Failed to complete Gradle execution .......................... 70 Gambar 1.146 ERROR: requires hardware acceleration ................... 70 Gambar 1.147 Cannot launch AVD in emulator ................................. 70 Gambar 1.148 intelhaxm-android.exe ................................................ 71 Gambar 1.149 Install HAXM 1.1.1 ...................................................... 71 Gambar 1.150 Error launching Android Studio .................................. 72 Gambar 1.151 Delete “JAVA_HOME” dari “Environment Variables” . 72 Gambar 1.152 After Delete “JAVA_HOME” ....................................... 73 Gambar 1.153 Error launching Android Studio .................................. 73

xii

Gambar 1.154 Menganti variable value “JAVA_HOME” .................... 73 Gambar 1.155 Menghubungkan Android Studio + Bluestack I .......... 74 Gambar 1.156 Menghubungkan Android Studio + Bluestack II ......... 74 Gambar 1.157 Run cmd.exe as Administrator ................................... 75 Gambar 1.158 Run adb.exe by cmd as Administrator ....................... 75 Gambar 1.159 Klik “Android Device Monitor” ..................................... 82 Gambar 1.160 Bluestack telah aktif di Android Studio ....................... 82 Gambar 1.161 Success run App (Android Studio + Bluestack) ......... 83 Gambar 1.162 Lokasi file *.apk hasil running ..................................... 83 Gambar 1.163 INSTALL FAILED OLDER SDK ................................. 84 Gambar 1.164 Klik “build.gradle(Module:app)” .................................. 84 Gambar 1.165 Ubah compileSdkVersion 19 ...................................... 84 Gambar 1.166 Ubah minSdkVersion & targetSdkVersion ................. 85 Gambar 1.167 Klik "Sync Now" .......................................................... 85 Gambar 1.168 Gradle project sync in progress... .............................. 85 Gambar 1.169 Language Level Changed .......................................... 86 Gambar 1.170 Files under the build folder are generated and should not be edited ....................................................................................... 86 Gambar 1.171 Ubah “dependencies” ................................................. 86 Gambar 1.172 File android-support-v4.jar ......................................... 87 Gambar 1.173 Klik “Sync Now” .......................................................... 87 Gambar 1.174 Setting untuk old version dari appcompat library ....... 88 Gambar 1.175 Ubah styles.xml .......................................................... 88 Gambar 1.176 Ubah file “menu_main.xml” ........................................ 88 Gambar 1.177 Content Asli "menu_main.xml” ................................... 89 Gambar 1.178 Ubah Content Asli "menu_main.xml” ......................... 89 Gambar 1.179 Solusi error “Unfortunately, [NamaProject] has stopped” .............................................................................................. 90 Gambar 1.180 Tampilan Primitive Object .......................................... 90 Gambar 1.181 Project Structure ......................................................... 91 Gambar 1.182 Remove Module ......................................................... 91 Gambar 1.183 Gradle project sync in progress.... ............................. 91 xiii

Gambar 1.184 Klik OK........................................................................ 92 Gambar 1.185 Delete directory "Nama Project..." .............................. 92 Gambar 1.186 AVD Manager ............................................................. 93 Gambar 1.187 Daftar Virtual Device .................................................. 94 Gambar 1.188 Pilih Hardware (Phone) .............................................. 94 Gambar 1.189 Pilih System Image (Lollipop) ..................................... 95 Gambar 1.190 Virtual Device Configuration ....................................... 96 Gambar 1.191 Verify Configuration .................................................... 96 Gambar 1.192 Creating/Updating AVD .............................................. 97 Gambar 1.193 AVD baru sudah terbentuk ......................................... 97 Gambar 1.194 Running AVD di Android Studio ................................. 97 Gambar 1.195 Tampilan Loading AVD di Android Studio .................. 98 Gambar 1.196 Tampilan AVD di Android Studio I .............................. 99 Gambar 1.197 Tampilan AVD di Android Studio II ........................... 100 Gambar 1.198 Tampilan AVD di Android Studio III .......................... 101 Gambar 1.199 Tampilan AVD di Android Studio IV ......................... 102 Gambar 1.200 Import Project ........................................................... 102 Gambar 1.201 Import Project ADT-Eclipse ke Android Studio ........ 103 Gambar 1.202 Memilih Tipe Import Project...................................... 103 Gambar 1.203 Tutup semua Project yang masih aktif ..................... 104 Gambar 1.204 Muncul “Welcome to Android Studio’ ....................... 104 Gambar 1.205 Klik “Import Non-Android Studio project”.................. 105 Gambar 1.206 Import Project ADT-Eclipse ke Android Studio ........ 105 Gambar 1.207 Memilih Tipe Import (.. from external model Gradle) 106 Gambar 1.208 Proses Importing ...................................................... 106 Gambar 1.209 List Project hasil Import ............................................ 107 Gambar 1.210 Error Can’t start Mercurial: hg.exe setelah Import ... 108 Gambar 1.211 Klik “Fix it” ................................................................. 108 Gambar 1.212 Memiih satu Project yang mau di-Import.................. 108 Gambar 1.213 Path tujuan untuk menyimpan hasil Import Project .. 109 Gambar 1.214 Import Destination Directory, Klik Next .................... 109

xiv

Gambar 1.215 Import per Project From ADT Eclipse ...................... 110 Gambar 1.216 Proses Importing sedang dilakukan ......................... 110 Gambar 1.217 Summary setelah proses Import .............................. 110 Gambar 1.218 Tampilan Project hasil Import ................................... 111 Gambar 1.219 Error Message “Gradle project sync failed ............... 111 Gambar 1.220 Klik “Try Again” ......................................................... 111 Gambar 1.221 Error “Project SDK is not defined” ............................ 112 Gambar 1.222 Klik “Setup SDK” ...................................................... 112 Gambar 1.223 Select Project SDK ................................................... 112 Gambar 1.224 Klik “Try Again” lagi .................................................. 113 Gambar 1.225 Masuk di “Setting”, lalu pilih “Grade” ........................ 113 Gambar 1.226 Buka “Open Module Settings” .................................. 114 Gambar 1.227 Lokasi SDK dan JDK ................................................ 115 Gambar 1.228 Project Structure ....................................................... 115 Gambar 1.229 Project Structure modules masih kosong................. 116 Gambar 1.230 Project Structure modules telah disi ......................... 116 Gambar 1.231 Klik “Try Again” ......................................................... 117 Gambar 1.232 Klik Install missing paltform(s) and sync project ...... 117 Gambar 1.233 License Agreement .................................................. 117 Gambar 1.234 Pilih Android SDK Platform 19 ................................. 118 Gambar 1.235 Installing Requested Components ........................... 118 Gambar 1.236 Installing Requested Components (Klik Finish) ....... 119 Gambar 1.237 Terlihat Android 19 sudah terinstall .......................... 119 Gambar 1.238 USB Debugging Pada Smartphone Samsung ......... 120 Gambar 1.239 Pilih Devices pada Android Studio ........................... 120 Gambar 1.240 Install Genymotion .................................................... 121 Gambar 1.241 Select Setup Language ............................................ 121 Gambar 1.242 Setup – Genymotion I............................................... 122 Gambar 1.243 Setup – Genymotion II.............................................. 122 Gambar 1.244 Setup – Genymotion III............................................. 123 Gambar 1.245 Setup – Genymotion IV ............................................ 123

xv

Gambar 1.246 Setup – Genymotion V ............................................. 124 Gambar 1.247 Proses Installing Genymotion................................... 124 Gambar 1.248 Install VirtualBox I ..................................................... 125 Gambar 1.249 Install VirtualBox II .................................................... 125 Gambar 1.250 Install VirtualBox III ................................................... 126 Gambar 1.251 Install VirtualBox IV .................................................. 126 Gambar 1.252 Install VirtualBox VI .................................................. 127 Gambar 1.253 Install VirtualBox VII ................................................. 127 Gambar 1.254 Install VirtualBox VIII ................................................ 128 Gambar 1.255 Yes, restart the computer now ................................. 128 Gambar 1.256 Ketik “Genymotion”, Klik “Install plugin” ................... 129 Gambar 1.257 Download and Install ................................................ 129 Gambar 1.258 Download Plugins ..................................................... 130 Gambar 1.259 Klik “Close” ............................................................... 130 Gambar 1.260 Plugin Changed ........................................................ 130 Gambar 1.261 Android Studio, Klik File > Settings. ......................... 131 Gambar 1.262 Klik Genymotion ....................................................... 131 Gambar 1.263 Klik “Kotak Kecil” disebelah kanan text field ............ 132 Gambar 1.264 Browse lokasi menginstall Genymotion ................... 132 Gambar 1.265 Content Select the path to the Genymotion folder ... 133 Gambar 1.266 Logo Genymotion di Android Studio ........................ 133 Gambar 1.267 Genymotion Device Manager ................................... 133 Gambar 1.268 Pilih salah satu virtual device ................................... 134 Gambar 1.269 Klik Start (Run Virtual Device) .................................. 134 Gambar 1.270 Initializing virtual device............................................ 134 Gambar 1.271 Loading Android di virtual device ............................. 135 Gambar 1.272 Virtual device Genymotion I ..................................... 136 Gambar 1.273 Virtual device Genymotion II .................................... 137 Gambar 1.274 Virtual device Genymotion III ................................... 138 Gambar 1.275 Virtual device Genymotion IV ................................... 139 Gambar 1.276 MainActivity.java ....................................................... 140

xvi

Gambar 1.277 Point_n_Lines_with_Points_Object.java .................. 140 Gambar 1.278 ESRender.java ......................................................... 141 Gambar 1.279 Run 'app'................................................................... 152 Gambar 1.280 Gradle: Executing Tasks [:app:assembleDebug] ..... 152 Gambar 1.281 Pilih running device .................................................. 152 Gambar 1.282 Gradle build finished................................................. 153 Gambar 1.283 Tampilah aplikasi OpenGL ....................................... 153 Gambar 1.284 “Log.v” di kode program ........................................... 154 Gambar 1.285 Tracking log.v ........................................................... 154 Gambar 1.290 Klik “Start a new Android Studio project” ................. 155 Gambar 1.291 Android Studio, Klik File > New Project…. ............... 155 Gambar 1.292 Berikan nama aplikasi yang anda buat .................... 156 Gambar 1.293 Pilih “Phone and Tablet” dan “API 8:.. (Froyo)” ........ 156 Gambar 1.294 API Level:Froyo sampai Lollipop .............................. 157 Gambar 1.295 APIs Level:Froyo for OpenGL ES 2.0 ...................... 157 Gambar 1.296 APIs Level:Gingerbread ........................................... 158 Gambar 1.297 APIs Level:Ice Cream Sandwicth ............................. 158 Gambar 1.298 APIs Level:Jelly Bean 16.......................................... 159 Gambar 1.299 APIs Level:Jelly Bean 17.......................................... 159 Gambar 1.300 APIs Level:Jelly Bean 18.......................................... 160 Gambar 1.301 APIs Level:Kit Kat 19 ................................................ 160 Gambar 1.302 APIs Level:Lollipop 21 .............................................. 161 Gambar 1.303 Pilih “Blank Activity” .................................................. 161 Gambar 1.304 Choose options for your new file .............................. 162 Gambar 1.305 Building PrimitiveObjectES....................................... 162 Gambar 1.306 Initializing Rendering Library .................................... 162 Gambar 1.307 Missing styles. Is the correct theme chosen ............ 163 Gambar 1.308 “java -> com.example.imacho.primitiveobjectes” ..... 163 Gambar 1.309 Siapkan file-file project ............................................. 164 Gambar 1.310 module default "app" ................................................ 164 Gambar 1.311 Android Studio, Klik File > New Module…. .............. 165

xvii

Gambar 1.312 Pilih “Phone and Tablet Application” ........................ 165 Gambar 1.313 Berikan nama Aplikasi/Library name ........................ 166 Gambar 1.314 Pilih “Blank Activity” .................................................. 166 Gambar 1.315 Default isi dari “Choose options for your new file”.... 167 Gambar 1.316 Tunggu beberapa saat “Gradle in progress...” ......... 167 Gambar 1.317 Module siap dikoding................................................ 167 Gambar 1.318 Module “app” dan “createpoint” ................................ 168 Gambar 2.1 GL_POINTS & GL_[LINES/LINE_STRIP/LINE_LOOP] .......................................................................................................... 169 Gambar 2.2 GL_[TRIANGLES/TRIANGLE_STRIP/TRIANGLE_FAN] .......................................................................................................... 170 Gambar 2.3 Titik manual dan generate ............................................ 171 Gambar 2.4 Membuat Titik Sederhana ............................................ 182 Gambar 2.5 Membuat garis dengan GL_POINTS ........................... 184 Gambar 2.6 Log.v("value Math.abs((.. ............................................. 184 Gambar 2.7 Tracking log.v (logcat) .................................................. 184 Gambar 2.8 Membuat Garis dan Titik .............................................. 198 Gambar 2.9 Membuat Segiempat dengan 2 Segitiga ...................... 199 Gambar 2.10 Segitiga dan segiempat .............................................. 200 Gambar 2.11 Membuat Segitiga Sederhana .................................... 220 Gambar 2.12 Membuat Segiempat .................................................. 232 Gambar 2.13 Wired-Flat-Color Segilima (Pentagon) ....................... 233 Gambar 2.14 Polygon statis dan dinamis (n-sisi) ............................. 234 Gambar 2.15 Ilustrasi membuat Lingkaran ...................................... 247 Gambar 2.16 Ilustrasi Membuat Bola ............................................... 248 Gambar 2.17 Membuat Lingkaran Flat dan Gradasi ........................ 250 Gambar 2.18 Membuat Lingkaran Flat dan Gradasi dinamis .......... 250 Gambar 2.19 Membuat Lingkaran Sederhana ................................. 278 Gambar 2.20 Sistem Koordinat Polar (r, Ө) ..................................... 279 Gambar 2.21 Membuat Polar Object................................................ 285 Gambar 3.1 Vertex Transformation Pipeline .................................... 286 Gambar 3.2 Contoh Proses Translasi .............................................. 287 xviii

Gambar 3.3 Contoh Proses Scaling ................................................. 288 Gambar 3.4 Contoh Proses Rotasi .................................................. 288 Gambar 3.5 Contoh Proses Shearing .............................................. 288 Gambar 3.6 Contoh Proses Kombinasi Transformasi ...................... 289 Gambar 3.7 Membuat Kincir Angin .................................................. 299 Gambar 4.1 Proyeksi paralel ............................................................ 300 Gambar 4.2 Proyeksi Perspektif ....................................................... 301 Gambar 4.3 gluPerspective()............................................................ 302 Gambar 4.4 glFrustum() ................................................................... 302 Gambar 4.5 Cara Kerja Kamera Sintetik .......................................... 303 Gambar 4.6 Sistem koordinat kamera sintetik ................................. 303 Gambar 4.7 Gambar synthetic camera dari vertex hasil trtasformasi perspektif (u*,v*) ............................................................................... 307 Gambar 4.8 Ilustrasi Multiple View Object ....................................... 307 Gambar 4.9 Multiple View Object ..................................................... 316 Gambar 5.1 Texture Mapping .......................................................... 317 Gambar 5.2 Ilustrasi Rasterisasi ...................................................... 318 Gambar 5.3 Bitmap Texture ............................................................. 319 Gambar 5.4 Magnification dan Minification ...................................... 319 Gambar 5.5 Repeating Texture ........................................................ 320 Gambar 5.6 Clamping Texture ......................................................... 320 Gambar 5.7 Repeating dan Clamping Texture................................. 321 Gambar 5.8 Texture Mapping Pada Segitiga ................................... 339 Gambar 5.9 Texture Mapping Pada Lingkaran ................................ 359 Gambar 5.10 Texture Mapping Pada Kubus .................................... 367 Gambar 5.11 Texture Mapping Pada Bola ....................................... 377 Gambar 6.1 Teknik blending untuk mendapatkan efek pantulan ..... 378 Gambar 6.2 Blending Dua Segitiga .................................................. 399 Gambar 6.3 Blending Pada Kubus (Blending tidak terlihat jika belum ada gerakan sentuhan ke sembarang arah pada layarnya)............. 411 Gambar 6.4 Blending Pada Bola ...................................................... 421 Gambar 7.1 Pencahayaan................................................................ 422 xix

Gambar 7.2 Normal Vector............................................................... 424 Gambar 7.3 Lighting Pada Interior .................................................. 541 Gambar 8.1 Pembuatan Model 3D ................................................... 542 Gambar 8.2 Aplikasi Blender ............................................................ 542 Gambar 8.3 Model Loading (objek belum diberi texture) ................. 550 Gambar 8.4 Garis Lurus ................................................................... 551 Gambar 8.5 Garis Lurus yang telah dibagi menjadi 3 bagian .......... 551 Gambar 8.6 Garis Lurus yang telah dibentuk segitiga di tengah bagiannya ......................................................................................... 551 Gambar 8.7 Kurva Fraktal Koch ....................................................... 552 Gambar 8.8 Kurva Fraktal LindenMayer (L System) ........................ 552 Gambar 8.9 Polinomial berderajat 2................................................. 553 Gambar 8.10 Polinomial berderajat 3............................................... 554 Gambar 8.11 Polinomial berderajat 4............................................... 554 Gambar 8.12 Polinomial berderajat 5............................................... 554 Gambar 8.13 Polinomial berderajat 6............................................... 555 Gambar 8.14 Polinomial berderajat 7............................................... 555 Gambar 8.15 Kurva Fraktal Set MandelBrot .................................... 556 Gambar 8.16 Kurva Set Julia 1 ........................................................ 556 Gambar 8.17 Kurva Set Julia 2 ........................................................ 557 Gambar 9.1 Random Maze dengan Background Hitam .................. 558 Gambar 9.2 Random Maze dengan Background Abu-Abu.............. 559 Gambar 9.3 Random Maze Background Gambar ............................ 559 Gambar 9.4 Random Maze Background Gambar, Control Objek.... 559 Gambar 9.5 file “Roboto-Regular.ttf” ................................................ 718 Gambar 9.6 File res\layout ............................................................... 718 Gambar 9.7 File Audio...................................................................... 722 Gambar 9.8 File Gambar untuk Texture Mapping ............................ 722 Gambar 9.9 Tampilan Awal Untuk Memulai Game .......................... 723 Gambar 9.10 Tampilan Menu Utama ............................................... 724 Gambar 9.11 Tampilan Soal Pada Aplikasi...................................... 724 Gambar 9.12 Tampilan skor saat game selsai dan jawaban salah . 724 xx

Gambar 9.13 Tampilan skor akhir saat game belum selesai karena objek burung menabrak tiang ........................................................... 725 Gambar 9.14 Tampilan skor saat game selsai dan jawaban benar semua ............................................................................................... 725 Gambar 9.15 Tampilan Awal Untuk Memulai Game ........................ 762 Gambar 9.16 Tampilan Game ketika di play .................................... 763 Gambar 9.17 Tampilan Score .......................................................... 763 Gambar 9.18 Menu Utama ............................................................... 855 Gambar 9.19 Tutorial Game ............................................................. 856 Gambar 9.20 Game .......................................................................... 856 Gambar 9.21 Developers ................................................................. 856 Gambar 9.22 Flowchart Touch Your Coin ........................................ 919 Gambar 9.23 Tampilan Loading ....................................................... 922 Gambar 9.24 Tampilan Menu Utama ............................................... 922 Gambar 9.25 Tampilan Help ............................................................ 922 Gambar 9.26 Tampilan About .......................................................... 923 Gambar 9.27 Tampilan Memulai Game ........................................... 923 Gambar 9.28 Tampilan Awal Untuk Memulai Game ...................... 1065 Gambar 9.29 Tampilan Bentuk Quiz .............................................. 1065 Gambar 9.30 Ular Tangga Awal ..................................................... 1119 Gambar 9.31 Tampilan Awal Untuk Memulai Game ...................... 1125 Gambar 9.32 Tampilan Menu Utama ............................................. 1125 Gambar 9.33 Tampilan Petunjuk Permainan ................................. 1126 Gambar 9.34 Tampilan Permainan Ular Tangga Sejarah .............. 1126 Gambar 9.35 Tampilan Menang ..................................................... 1127 Gambar 9.36 Menu Awal ................................................................ 1175 Gambar 9.37 Get Ready ................................................................ 1175 Gambar 9.38 Soal .......................................................................... 1176 Gambar 9.39 Finish ........................................................................ 1176

xxi

Daftar Source Code

Source Code 1.1 MainActivity.java ................................................... 141 Source Code 1.2 Point_n_Lines_with_Points_Object.java .............. 143 Source Code 1.3 ESRender.java ..................................................... 150 Source Code 2.1 Code Membuat Titik (Ukuran Dinamis) ................ 171 Source Code 2.2 Code Lain Membuat Titik Sederhana................... 176 Source Code 2.3 Code Membuat Garis dengan Titik (Solid) ........... 185 Source Code 2.4 Code Lain Membuat Garis dengan Titik............... 192 Source Code 2.5 Code Membuat Segitiga & Segiempat ................. 201 Source Code 2.6 Code Lain Membuat Segitiga Sederhana ............ 208 Source Code 2.7 Code Membuat Segiempat................................... 220 Source Code 2.8 Membuat Polygon Statis dan Dinamis ................. 234 Source Code 2.9 Code Membuat Lingkaran Gradasi & Dinamis ..... 250 Source Code 2.10 Code Lain Membuat Lingkaran Sederhana ....... 272 Source Code 2.11 Code Membuat Polar Object .............................. 279 Source Code 3.1 Code Membuat Kincir Angin................................. 290 Source Code 4.1 Code Membuat Multiple View Object ................... 308 Source Code 5.1 Code Texture Mapping Pada Segitiga ................. 321 Source Code 5.2 Code Texture Mapping Pada Lingkaran .............. 339 Source Code 5.3 Code Texture Mapping Pada Kubus .................... 359 Source Code 5.4 Code Texture Mapping Pada Bola ....................... 367 Source Code 6.1 Code Blending Dua Segitiga ................................ 381 Source Code 6.2 Code Blending Pada Kubus ................................. 400 Source Code 6.3 Code Blending Pada Bola .................................... 411 Source Code 7.1 Code Lighting Pada Interior.................................. 425 Source Code 8.1 Code Model Loading ............................................ 544 Source Code 9.1 Code Random Maze ............................................ 560 Source Code 9.2 Code Smart Flappy .............................................. 725 Source Code 9.3 Code Chicken Hero .............................................. 763 Source Code 9.4 Code Ayo Nyoblos!............................................... 857

xxii

Source Code 9.5 Code Touch Your Coin ......................................... 923 Source Code 9.6 Code Guess The Animal .................................... 1066 Source Code 9.7 Code Ular Tangga .............................................. 1127

xxiii

BAB 1 Introduction to OpenGL You can buy the books, but not knowledge.

1.1 Pengertian Grafika Komputer Grafika Komputer adalah bagian dari Ilmu Komputer yang memiliki konsep mengkorversi dari informasi menjadi objek visual secara digital, sekaligus didalamnya proses manipulasi. Konsep ini merupakan kebalikan dari computer vision. Objek visual tersebut dapat berupa 3 dimensi maupun 2 dimensi yang meliputi beberapa contoh seperti titik, garis lurus, garis lengkung, maupun objek yang komplek. Operasi yang dilakukan pada objek visual tersebut, dimulai dari setiap pixel matrik yang membentuk suatu objek tertentu dengan ukuran tertentu. Meskipun objek tertentu tersebut terlihat sangat komplek, apalagi jika sudah diberikan beberapa efek dan manipulasi yang sangat detail dan bagus, namun sebenarnya objek tersebut sebenarnya hanya disusun dari objek sederhana yaitu titik-titik yang sangat banyak, yang meliputi keseluruhan permukaan objek komplek tersebut. Selain itu, dukungan perkembangan perangkat lunak dan perangkat keras juga menjadikan Grafika Komputer memiliki perkembangan yang sangat pesat, terutama pada aplikasi mobile yang menjanjikan hasil produk grafis menjadi sangat berkulitas.

1.2 Persiapan di Eclipse (ADT) 1.2.1 Fast Emulator With Intel (HAXM) Android memiliki dukungan penuh untuk OpenGL, meskipun library-nya tidak selengkap pada C/C++ di Visual Studio (GLUT OpenGL Utility Toolkit- Library) atau di Netbean OpenGL (LWJGL Lightweight Java Game Library). Berikut ini adalah cara untuk membuat dan mengaktifkan emulator Android dengan prosesor Intel (HAXM). 1. Aktifkan “Intel VT” atau intel virtualization technology di BIOS. 2. UpdateAndroid SDK pada Android target, pada contoh ini yang diperbarui adalah “Android 4.4 – API Level 19″dengan CPU/ABI menggunakan“Intel Atom x86″. 1



Pada Tool Bar, klik “Windows” –>klik “Android SDK Manager”.

Gambar 1.1 Android SDK Manager Sebelum Klik Deselect All 

Klik “Deselect All” menghilangkan tanda cek pada item yang saat ini dipilihlalui klik pada Android target yang diinginkan, jika menggunakan “Android 4.4 – API Level 19″beri tanda cek untuk “Intel x86 Atom System Image”kemudian beri tanda cek untuk “Intel x86 Emulator Accelerator (HAXM)”.

Gambar 1.2 Klik Intel x86 Atom System Image 2

Gambar 1.3 Beri tanda cek Intel x86 Emulator Accelerator (HAXM) 

Klik “Install 2 packages”.

Gambar 1.4 Klik Install 2 packages 

Klik “Android SDK License”, kemudian klik “Accept Lisense”.

3

Gambar 1.5 Klik Android SDK License lalu klik Accept Lisense 

Klik “Intel Android Extra License”, then click “Accept Lisense”.

Gambar 1.6 Klik Intel Android Extra License lalu klik Accept Lisense 

Klik “Install”. Tunggu hingga download selesai.

Gambar 1.7 Proses Download 4



Tampilan setelah download serta instalasi “Intel x86 Atom System Image” dan “Intel x86 Emulator Accelerator (HAXM)” selesai. Lalu Close “Android SDK Manager”.

Gambar 1.8 Tampilan setelah download dan instalasiselesai  Restart Eclipse. 3. Untuk membuat AVD, klik “Android Virtual Device Manager”, pada CPU/ABI menggunakan pilihan “Intel Atom x86″lalu pada Emulation Option, beri tanda cekuntuk “Use Host GPU”. Lalu klik “OK”.

5

Gambar 1.9 Membuat Android Virtual Device (AVD) baru 4. Setelah membuat AVD lalu klik AVD pada list lalu klik Start.

Gambar 1.10 Klik AVD pada list lalu klik Start 6

5. Agar AVD atau “Android Emulator” dapat dijalankan dengan cepat. Close AVD atau “Android Emulator” yang saat ini digunakan. 6. Install HAXM pada sdk android path berikut “…/adt-bundlewindows-x8620131030\sdk\extras\intel\Hardware_Accelerated_Execution_Ma nager\IntelHaxm.exe”.

Gambar 1.11 Intel HAXM 7. Lalu jalankan kembali AVD atau “Android Emulator” (Jika ingin merotasi layar AVD, gunakan Ctrl + F11).

Gambar 1.12 Tampilan AVD 8. Selesai dan emulator Android telah dapat digunakan.

1.2.2 Konfigurasi "Eclipse + Bluestacks" Bluestack adalah aplikasi emulator Android untuk PC. Langkahlangkah untuk konfigurasi Eclipse dan Bluestack pada Android adalah sebagai berikut: 1. Download Eclipse + Android SDK (Eclipse Bundle Android) pada link (32 bit) https://goo.gl/KZwJcz (± 491.8 MB), (64 bit)

7

https://goo.gl/05lUbF (± 491.9 MB) atau Android Studio di http://developer.android.com/sdk/index.html#download.

Gambar 1.13 Download SDK ADT Bundle Eclipse 2. Setup Android Developer Tools (ADT Bundle) hingga instalasi selesai. 3. Install Bluestacks dengan installer offline pada link : a. (ver. 1.1) https://goo.gl/o6zNpH (± 108.35 MB), atau b. (ver. 1.2) https://goo.gl/CGbphW (± 128 MB), c. (ver. 2) https://goo.gl/MUUQLM (± 267.98 MB). atau online pada link http://www.bluestacks.com.

Gambar 1.14 Download Bluestacks 4. Setelah instalasi Bluestacks selesai, jalankanBluestacks, lalu install launcher seperti “ADW Launcher, LauncherPro” dari Google Play untuk memudahkan dalam menjalankan aplikasi Android pada Bluestacks.

8

Gambar 1.15 ADW Launcher

Gambar 1.16 Interface Bluestacks 5. Jalankan Eclipse, jika gagal dan muncul pesan sebagai berikut:  Failed to create the Java Virtual Machine, untuk mengatasinya:

Gambar 1.17 Pesan “Failed to create the Java Virtual Machine” 9

Buka file “..\adt-bundle-windows-x8620131030\eclipse\eclipse.ini”,kemudian edit “XX:MaxPermSize=256M” menjadi “XX:MaxPermSize=128M” atau sebaliknya. Ketikkan tanpa tanda kutip. 

Failed to run JDK (meskipun JDK sudah ter-install sebelumnya), maka untuk mengatasinya: o Copy path JDK pada komputer, misalnya “C:\Program Files\Java\jdk1.7.0_40\bin”. o Buka “Control panel”–>”System and Security”– >”System”–>”Advanced system settings”.

Gambar 1.18 Advanced system settings o

Klik “Environment Variable…”, variables” klik “path” lalu klik “Edit”.

pada

This books is only a-z,0-9, few symbol & picture. Although like this, those are irreplaceble with treasure or anything and how much money that you have spend to buy it.

10

“System

Gambar 1.19 Click Path o

Tambahkan “Variable value:” dengan “;C:\Program Files\Java\jdk1.7.0_40\bin”, kemudian klik “OK” sebanyak 3 kali.

Gambar 1.20 Edit System Variables o

Jalankan, kembali Eclipse.

11

6. Kemudian untuk mengkoneksikan Bluestack langkah-langkahnya sebagai berikut:  Jalankan cmd (Window + R), lalu klik “Ok”.

dan

Eclipse,

Gambar 1.21 Menjalankan cmd 

Ketikkan “cd c:\Program Files\BlueStacks” lalu tekan “Enter” button.

Gambar 1.22 Command masuk ke folder BlueStacks 

Ketikkan ini“HD-Adb.exe start-server”, lalu tekan “Enter”.

Gambar 1.23 HD-Adb.exe start-server 12



Tampilan setelah dikoneksikan (pada cmd) :

Gambar 1.24 Setelah HD-Adb.exe start-server dijalankan 

Tampilan setelah dikoneksikan (pada Eclipse) : Untuk menampilkan “Devices”, click “Window” –> ”Show view” –> ”Other” –> ”Android” –> ”Devices”.

Gambar 1.25 Klik"Window ->"Show view"->“Other”

13

Gambar 1.26 Tampilan device pada Bluestacks emulator

Gambar 1.27 Android Device Chooser Jika gagal dalam mengkoneksikan, ketikkan“HD-Adb.exe killserver” lalu tekan “Enter”, tunggu beberapa saat lalu ketikkan lagi“HDAdb.exe start-server” selanjutnya tekan “Enter”.

1.2.3 Konfigurasi "Eclipse + Genymotion" Langkah-langkah konfigurasi Eclipse dan Genymotion pada Android adalah sebagai berikut:

1. Download Genymotion di link : a. (Master + Virtual Devices) https://goo.gl/bNm9W7 (± 1.6 GB) b. (Master Only) https://goo.gl/WPxuP1 (± 183 MB) 2. Run Genymotion, dan buat dahulu virtual device di Genymotion. 14

3. Run Genymotion (klik icon di desktop) 4. Main window akan muncul

Gambar 1.28 Main Window Genymotion

5. Lalu akan muncul pop-up dan meminta untuk menambah virtual device.

Gambar 1.29 Pop-up Menambah Virtual Device

6. Klik ok lalu akan muncul

Gambar 1.30 Klik OK 15

7. Klik connect. Isi dengan username/email address dan password, lalu klik "Connect" .

Gambar 1.31 Isi Username/Password ,Connect

8. Setelah terkoneksi akan muncul virtual device di bawah ini.Pilih virtual device misalkan (Nexus 7 - 4.3) lalu klik "Next" .

Gambar 1.32 Pilih Virtual Device

16

9. Beri nama untuk virtual devicenya lalu klik next.

Gambar 1.33 Beri Nama Virtual Device

10. Virtual device akan terdownload dan di deploy.

Gambar 1.34 Virtual Device Terdownload & Terdeploy

17

11. Klik finish untuk mengakhiri deployment window.

Gambar 1.35 Deployment window Finish

12. Klik play untuk memulai virtual device.

Gambar 1.36 Play

18

13. Jika ingin meng-install secara offline “virtual devices”, siapkan, misal beberapa file berikut di folder “..\VirtualDevicesGenymobile\Genymobile\Genymotion\ova” :

Gambar 1.37 File .ova Copykan ke folder : “C:\Users\{ComputerName}\AppData\Local\Genymobile\Genymot ion\ova”. Klik “Add”, lalu “Next”, “Next”, dan “Finish”

Gambar 1.38 Deploying virtual device.. 19

Gambar 1.39 Virtual device Finish

Gambar 1.40 Virtual device is Ready

20

14. Atau dengan cara membuka Virtual Box, Klik FileImport Appliance.. Klik (Pilih salah satu file *.ova) pada “C:\Users\{ComputerName}\AppData\Local\Genymobile\Genymot ion\ova”. Lalu Klik “Next”, Klik “Import’.

Gambar 1.41 Import Virtual Devices (*.ova) di Virtual Box

21

15. Virtual device yang sudah di-import, dapat cek pada Virtual Box dan juga pada Genymotion dan siap untuk dijalankan.

Gambar 1.42 Virtual device is Ready Pada Virtual Box

Gambar 1.43 Virtual device is Ready Pada Genymotion

22

16. Klik “Settings”, lalu klik “ADB”, isikan dengan, misal letak folder sdk anda ada di “E:/adt-bundle-windows-x86_64-20131030/sdk”

Gambar 1.44 Set Letak Android SDK di Genymotion

17. Opsi lainnya, lakukan instalasi plugin Genymotion ke Eclipse. Caranya sebagai berikut: a. Start Eclipse b. Buka menu "HelpInstall New Software..." c. Pada window yang muncul, klik tombol "Add..." d. Isi form dengan Name: Genymobile Location: http://plugins.genymotion.com/eclipse

Gambar 1.45 Add Repository, lalu klik OK 23

Gambar 1.46 There are not categorized items e. Jika “Genymotion Eclipse Tools” tidak ada pada list, dan hanya ada “There are not categorized items”, maka solusinya uncheck “Group items by category”.

Gambar 1.47 Uncheck “Group items by category” 24

f.

Pliih opsi “Genymotion Eclipse Tools”, lalu klik "Next"

Gambar 1.48 Cek "Genymotion Eclipse Tools"

Gambar 1.49 "Genymotion Eclipse Tools", Klik Finish g. Eclipse akan mengingatkan bahwa plugin is unsigned, klik OK saja.

Gambar 1.50 plugin is unsigned, klik OK saja

25

h. Restart Eclipse

Gambar 1.51 Software Updates, restart to take effect i. j.

Setelah restart, maka akan muncul tombol di toolbar: Klik icon tersebut, jika belum diset directory Genymotionnya, pada “WindowPreferencesGenymotion”, Set directory Genymotion misal dengan “C:\Program Files\Genymobile\Genymotion”.

Gambar 1.52 Set directory Genymotion

Gambar 1.53 Icon Genymotion di Eclipse

26

18. Pada pilihan muncul beberapa nama virtual devices, pilih salah satu, lalu klik start

Gambar 1.54 Start Virtual Device Lokasi Virtual Devices : C:/Users/{ComputerName}/AppData/Local/Genymobile/Genymoti on/deployed/ 19. Akan loading seperti dibawah ini

Gambar 1.55 Loading Virtual Device

27

20. Lalu setelah loadingnya selesai akan keluar seperti ini

Gambar 1.56 Tampilan Virtual Samsung Galaxy S2 - 4.1.1 - API 16 480x800

21. Jika keluar error “unable to start the virtual device, virtualbox can't start the virtual device”

Gambar 1.57 Error unable to start the virtual device 28

a. Close Genymotion, buka Virtual Box. Klik FilePreferencesNetworkTab Host-only Network, Hapus semua “VirtualBox Host-Only Ethernet Adapter” satu per satu, dengan cara klik “Removes selected”, Klik tombol “remove” (Pastikan Host-only Networks, telah kosong), Klik OK. Close Virtual Box.

Gambar 1.58 Kosongkan Host-only Networks b. Buka Genymotion, maka secara otomatis “VirtualBox HostOnly Ethernet Adapter” pada Virtual Box akan dibuat kembali, dan pada “Your virtual devices” jangan di klik “Start” terlebih dahulu. Lakukan langkah “c”.

Gambar 1.59 Auto Create VirtualBox Host-Only Ethernet Adapter

29

c.

Kemudian, masuk ke “Control Internet\Network Connections”.

Panel\Network

and

Gambar 1.60 Network Connections d. Klik Kanan “VirtualBox Host-Only Network”, klik “Properties”, checked “VirtualBox NDIS6 Bridged Networking Driver”, lalu klik pada “Internet Protocol Version 4 (TCP/IPv4)”, lalu klik “Properties”, lakukan juga pada “VirtualBox Host-Only Network #2”, atau semua yang diawali dengan “VirtualBox Host-Only Network ..”.

Gambar 1.61 VirtualBox Host-Only Network

30

e. Pada “VirtualBox Host-Only Network” Gambar diatas, tertera “IP address: 192.168.56.2”, “Subnet mask : 255.255.255.0”. Kemudian cek pada Virtual Box, Klik FilePreferencesNetworkTab Host-only Network, lalu klik “Edits selected” untuk “VirtualBox Host-Only Ethernet Adapter” (Pastikan sama). Setelah itu, pada Genymotion “Your virtual devices”, Pilih salah satu Virtual Devices, lalu Klik “Start”.

Gambar 1.62 klik “Edits selected”

31

Gambar 1.63 Adapter & DHCP VB Host-Only Ethernet Adapter

Gambar 1.64 Adapter & DHCP VB Host-Only Ethernet Adapter #2

32

22. Buka eclipse > pada project openGL “2_2Primitives_Project_ES” klik kanan run as > Pilih Android Applicaton atau Run Configuration..

Gambar 1.65 Pilih Android Applicaton atau Run Configuration..

23. Pada Current Project, klik Target (Pilih) lalu Run

Gambar 1.66 Target, pilih “Always prompt to pick device”

33

24. Akan keluar “Android Device Chooser” seperti di bawah ini dan klik “genymotion – samsung_galaxy_s2..”, lalu klik “ok”

Gambar 1.67 Genymotion– samsung_galaxy_s2..

25. Lalu pada akhirnya akan keluar gambar seperti di bawah ini.

Gambar 1.68 Segitiga, Etc.

34

1.2.4 Konfigurasi pada Smartphone Android Jika ingin menjadikan smartphone Android sebagai emulator, maka langkah-langkah konfigurasinya adalah sebagai berikut: 1. Siapkan smartphone Android. Pada contoh ini, smartphone Android yang digunakan adalah Samsung GT-i9070 Galaxy S Advance. 2. Pada smartphone, pililh “setting”, lalu klik “Applications/Application Manager” –> ”Development” –> klik/ beri tanda cek pada “USB debugging”.

Gambar 1.69 USB Debugging Pada Smartphone Samsung

3. Pada PC, jalankan cmd (Window + R), lalu klik “OK. Ketikkan lokasi sdk pada komputer, misalnya “cd I:\Master\adt-bundle-windows-x86-20131030\sdk\platformtools” lalu tekan “Enter”.

Gambar 1.70 adt-bundle-windows-x86-20131030_sdk_platform-tools

35

4. Ketikkan “I:” sebagai drive lokasi sdk, lalu tekan “Enter”.

Gambar 1.71 Setelah mengetikkan drive lokasi sdk

5. Ketikkan “adb.exe devices”, lalu tekan “Enter”.

Gambar 1.72 adb.exe devices

Gambar 1.73 Setelah adb.exe devices dijalankan

36

Gambar 1.74 Setelah adb.exe devices dijalankan pada Eclipse 6. Cek “Devices” pada Eclipse.

Gambar 1.75 Muncul smartphone Samsung pada Android devices chooser 7. Jika gagal dalam mengkoneksikan, ketikkan“adb.exe kill-server” lalu tekan “Enter”, tunggu beberapa saat lalu ketikkan lagi“adb.exe start-server” selanjutnya tekan “Enter”.

37

Gambar 1.76 adb.exe kill-server dan start-server 8. Konfigurasi selesai.

1.2.5 Solusi Error/Problem/Bug Berikut beberapa error yang sering terjadi ketika mejalankan kode program : 1. Error “R cannot be resolved to a variable”, biasanya pada “MainActivity.java”.

Gambar 1.77 R cannot be resolved to a variable Solusi : a. Penyebabnya biasanya karena setelah me-rename nama “package” pada folder “src” (misal dari “com.example.myopengl” diubah sedikit menjadi “com.example.mygl”). Meskipun pada folder “src” sudah berhasil direname, biasanya pada folder “gen” masih ada nama “package” dengan “com.example.myopengl”.

38

Gambar 1.78 Error pada MainActivity.java b. Open File “MyIntro_OpenGL/AndroidManifest.xml”, pada tab “Manifest”, ubah Package “com.example.myopengl” dengan cara klik “Browse...”, lalu pilih

Gambar 1.79 Ubah package pada AndroidManifest.xml

39

c.

Pilih “com.example.mygl”, lalu klik “OK”

Gambar 1.80 c. Pilih “com.example.mygl”

Gambar 1.81 Package pada AndroidManifest.xml telah diubah

40

d. Save file “AndroidManifest.xml”. Lalu klik “Yes”

Gambar 1.82 d. Save file “AndroidManifest.xml”

e. Tampilan project, setelah tidak ada error

Gambar 1.83 Fix pada MainActivity.java

41

1.2.6 Membuat Project Baru Berikut beberapa langkah untuk membuat project baru aplikasi android pada eclipse : 1. Klik “FileNewAndroid Application Project”, Masukkan misal “Application Name = IntroToOpenGL”. Klik Next.

Gambar 1.84 New Android Application Project 2. Konfigurasi Project, Klik Next

Gambar 1.85 Configure Project

42

3. Konfigurasi icon, Klik Next

Gambar 1.86 Configure the attributes of the icon set 4. Pilih “Blank Activity”, Klik Next

Gambar 1.87 Pilih “Blank Activity” 43

5. Create Blank Activity, Klik Finish

Gambar 1.88 Create “Blank Activity”

6. Tampilan Project. Setelah itu, replace file “MainActivity.java” tersebut dengan contoh kode program “Primitive Object” pada sub bab 2 dan selanjutnya.

Gambar 1.89 Tampilan Project 44

7. Tampilan Project, setelah di-replace (dilengkapi) dengan file “MainActivity.java”, “Create_Points.java”, dan “ESRender.java” dari contoh kode program Bab 2 “Primitive Object”. Misal untuk “Membuat Titik”.

Gambar 1.90 Tampilan Project Membuat Titik

1.2.7 Siklus Hidup Kode Program Penjelasan ini meliputi proses siklus hidup atau lifecycle dari aplikasi android, hubungan antara kode-kode sampai pada alur jalannya kode mulai dari awal hingga akhir. Paradigma awal jalannya pemrograman umumnya menggunakan main(), pada Android berjalannya sistem diawali dengan Activity dengan menerapkan metode callback tertentu yang sesuai dengan tahapan lifecycle-nya. Terdapat metode callback untuk memulai suatu Activity dan ada juga ada callback untuk men-destroy suatu Activity.

Gambar 1.91 main() vs activity 45

1.3 Persiapan di Android Studio (AS) 1.3.1 Installasi Android Studio Master installer android-studio-bundle-135.1641136 ini merupakan versi stabil pertama dari lingkungan pengembangan Android yang terintegrasi, dan ke depan, versi ini akan menjadi platform untuk pengembangan aplikasi Android. “Google releases Android Studio, kills off Eclipse ADT plugin”, ini adalah suatu berita yang sangat besar. Bagaimana tidak, selama ini kami biasanya menggunakan “Eclipse ADT plugin” untuk development aplikasi android selama kurun waktu kurang lebih 2 tahun terakhir. Google mengumumkan pada hari Selasa 8 Desember 2014 bahwa setelah dua tahun bekerja, akhirnya siap untuk meluncurkan pengembangan terpadu berbasis IDE, yaitu IntelliJ, Android Studio, kepada dunia dengan rilis versi 1.0. Android Studio akan menawarkan pengalaman yang lebih baik bagi para pengembang Android dari pada Eclipse tradisional yang digunakan sebelumnya, "kick" artinya Google menghentian Plugin Android Developer Tools (ADT) untuk Eclipse yang mengintegrasikan sejumlah alat Android ke dalamnya.

Gambar 1.92 Android Studio (Hero)

46

"Plugin ADT untuk Eclipse tidak lagi aktif atau di-support lagi," kata situs pengembang Google. "Jika saat ini Anda menggunakannya, Anda harus bermigrasi ke Android Studio dengan sesegera mungkin." Beberapa penggemar Eclipse juga banyak yang mempertanyakan hal ini, namun beberapa kalangan pengembang berpendapat bahwa, dibandingkan dengan Eclipse, Android Studio menawarkan lingkungan pengembang dan desainer antarmuka pengguna yang lebih baik, serta efisiensi memori yang lebih baik dan meningkatkan kecepatan eksekusi kode program. Dan kemungkinan hal ini pasti banyak yang berbeda pendapat dari para pengembang. Ketika Android Studio diresmikan pada Mei tahun lalu, terdapat komentar di TechRepublic: "Eclipse dapat mencoba, tetapi tidak dapat bersaing dengan Visual Studio (Milik Microsoft), atau bahkan Xcode (Milik Apple). “The Eclipse Foundation” yang meliputi Google, telah mencoba lebih dari satu dekade untuk membuat Eclipse IDE menjadi lebih layak dan lebih baik, akan tetapi masih saja berat untuk mampu bersaing." Berikut adalah langkah-langkah instalasi Android Studio untuk pengembangan aplikasi android : 

Double klik Master Android Studio

Gambar 1.93 Mater Android Studio 

Tunggu beberapa detik

Gambar 1.94 Please Wait Setup is Loading 47



Welcome to the Android Studio Setup, Klik “Next”

Gambar 1.95 Android Studio Setup 

Pilih Komponen, Klik “Next”

Gambar 1.96 Pilih Komponen

48



License Agreement, Klik “I Agree”

Gambar 1.97 License Agreement 

Configuration Setting, Klik “Next”

Gambar 1.98 Configuration Setting

49



Choose Start Menu Folder, Klik “Install”

Gambar 1.99 Choose Start Menu Folder 

Proses Installing

Gambar 1.100 Proses Installing Android Studio

50

Gambar 1.101 Extracting Android SDK

Gambar 1.102 Installation MVC++ 2010 x86 Redistributable Setup

51

Gambar 1.103 MVC++ Installation Is Complete 

Setup Was Successfully, Klik “Next”

Gambar 1.104 Setup Was Successfully 52



Completing the Android Studio Setup

Gambar 1.105 Completing the Android Studio Setup

Ketika menjalankan Android Studio, kemungkinan anda mengalami hal-hal berikut ini : 

Error launching Android Studio, Solusi “Setting di Control Panel”

Gambar 1.106 Error launching Android Studio Detail solusinya adalah sebagai berikut : a. Copy path JDK pada komputer, misalnya “C:\Program Files\Java\jdk1.7.0_40\bin”. b. Buka “Control panel”–>”System and Security”– >”System”–>”Advanced system settings”.

53

Gambar 1.107 Advanced system settings c.

Klik “Environment Variable…”, variables” klik “path” lalu klik “Edit”.

pada

“System

Gambar 1.108 Click Path d. Tambahkan “Variable value:” dengan “;C:\Program Files\Java\jdk1.7.0_40\bin”, kemudian klik “OK” sebanyak 3 kali.

Gambar 1.109 Edit System Variables 54



studio64.exe – System Error (The program can’t start because MSVCR100.dll is missing from your computer. Try reinstalling the program to fix this problem.)

Gambar 1.110 Studio64.exe – System Error Solusi untuk “The program can’t start because MSVCR100.dll is missing from your computer. Try reinstalling the program to fix this problem” adalah dengan men-download dan install “MVC++ 2010 x86 Redistributable Package” dari web Microsoft.

Gambar 1.111 MVC++ 2010 x86 Redistributable Package 

Start Android Studio

Gambar 1.112 Start Android Studio 55

Gambar 1.113 Import Previous Version Of Android Studio

Gambar 1.114 Android Studio Powered by the IntelliJ Paltform

Gambar 1.115 Fetching Android SDK component information

56



The following SDK component was not installed: buildtools-21.1.1, jika memang tidak terkoneksi dengan internet, Klik “Cancel”

Gambar 1.116 Checking for updated SDK component

Gambar 1.117 The following SDK … : build-tools-21.1.1

57

Gambar 1.118 Setup Wizard - Downloading Components Pada Gambar 1.118, “The following SDK component was not installed: build-tools-21.1.1” akan muncul setelah klik “Cancel”. Kemudian pada Gambar 1.119, setelah klik “Finish”, jika tidak muncul Android Studio, maka sebaiknya anda install terlebih dahulu “buildtools-21.1.1”. 

Start Android Studio dari Apps Search

Gambar 1.119 Start Android Studio dari Apps Search

58



Pastikan komputer atau laptop anda internetnya sudah “connected”, lalu Klik “Retry”

Gambar 1.120 Setup Wizard (Klik Retry)

Gambar 1.121 Downloading Android SDK Build-tools, revision 21.1.1

59



Setelah selesai “Downloading Android SDK Build-tools”, Klik “Finish”

Gambar 1.122 Download Android SDK Build-tools was successfully 

Android Studio siap untuk digunakan

Gambar 1.123 Welcome to Android Studio

60

1.3.2 View SDK Android Studio Berikut ini adalah langkah-langkah untuk menampilkan folder AppData SDK dari Android yang sudah di-install dalam komputer di “C:\Users\[Nama Komputer]” anda. 

Masuk di path “C:\Users\[Nama Komputer]”, Klik “Vew”

Gambar 1.124 Masuk di path “C:\Users\[Nama Komputer]” 

Klik “Options”

Gambar 1.125 Klik "Options"

61



Klik “View” pada Folder Options

Gambar 1.126 Folder Options 

Klik “Show hidden files, folders, and drivers”, Lalu Klik “Applay” lalu Klik “OK”

Gambar 1.127 Klik “Show hidden files, folders, and drivers” 62



Tampilan path sekarang, “AppData” sudah terlihat

Gambar 1.128 “AppData” sudah terlihat 

Double Klik “AppData”, atau langsung kunjungi path ini “C:\Users\[Nama Komputer]\AppData\Local\Android\sdk”

Gambar 1.129 Lokasi SDK Android Studio

63

1.3.3 Solusi Error/ Problem Android Studio 

Run “MainActivity”

Gambar 1.130 Run “MainActivity”

Ketika anda menjalankan pertama kali, jika terdapat Error “JDK”. Maka coba cek di “Variable value:” misal ada jdk yang anda install lebih dari satu versi, dan telah diisikan juga di “Variable value:” misal  “;C:\Program Files\Java\jdk1.7.0_40\bin”, maka anda harus menggantinya dengan versi yang terbaru misal  “;C:\Program Files\Java\jdk1.8.0_31\bin”. Kemudian Klik “Try Again”. Tunggu beberapa detik.

Gambar 1.131 Edit System Variables JDK 1.8

64

Gambar 1.132 Launch Emulator (Launch emulator)

Gambar 1.133 Launch Emulator (running device) 65



Klik “OK”, jIka ada bug akan tampil seperti ini. Solusinya Klik “Sync Project with Grandle files”

Gambar 1.134 Unexpected Error (Local path doesn't exist) Sync..

Gambar 1.135 Local path doesn't exist (Event Log) Solusi awal yang dapat dilakukan untuk Error “Local path doesn’t exist” adalah download dengan memasukkan perintah pada terminal “gradlew clean packageDebug” seperti dibawah ini.

Gambar 1.136 Jalankan perintah “gradlew clean packageDebug” Lalu dengan Klik “Setting”, Klik “Gradle”, kemudian isi “Gradle VM options:” dengan “-Xmx256m”.

Gambar 1.137 Klik “Setting” di Android Studio 66

Gambar 1.138 isi “Gradle VM options:” dengan “-Xmx256m” 

Check “Edit Configurations….”

Gambar 1.139 Check “Edit Configurations….” Di dalam “Edit Configurations….””, nama form-nya “Run/Debug Configurations”. Disana terdapat Android Application “app” dan “MainActivity”. Pastikan anda juga telah men-setting seperti pada gambar di bawah ini, terdapat juga “Gradle-aware Make”.

67

Gambar 1.140 Android Application (app)

Gambar 1.141 Android Application (MainActivity) 68



Error ketika running dengan MyAVD (“C:\Users\Imacho\AppData\Local\Android\sdk\tools\emulat or.exe -avd MyAVD -netspeed full -netdelay none emulator: ERROR: This AVD's configuration is missing a kernel file!!”)

Gambar 1.142 Failed to complete Gradle execution

Gambar 1.143 ERROR: This AVD's is missing a kernel file 

Error ketika running dengan Nexus 5 API … (“C:\Users\Imacho\AppData\Local\Android\sdk\tools\emulat or.exe -avd Nexus_5_API_21_x86 -netspeed full -netdelay none emulator: ERROR: x86 emulation currently requires hardware acceleration! Please ensure Intel HAXM is properly installed and usable. CPU acceleration status: HAX kernel module is not installed!”)

69

Gambar 1.144 Failed to complete Gradle execution

Gambar 1.145 ERROR: requires hardware acceleration

Gambar 1.146 Cannot launch AVD in emulator

70

Solusinya adalah sebagai berikut : a. Install HAXM dari path “C:\Users\[Nama Komputer]\AppData\Local\Android\sdk\extras\intel\Hardware_ Accelerated_Execution_Manager”

Gambar 1.147 intelhaxm-android.exe

Gambar 1.148 Install HAXM 1.1.1 

Error ketika menjalankan kembali “Android Studio”

71

Gambar 1.149 Error launching Android Studio Solusi dengan men-delete “JAVA_HOME” dari “Environment Variables” , atau dengan menganti variable value “JAVA_HOME” menjadi “C:\Program Files\Java\jdk1.8.0_31\”, solusi ini juga digunakan untuk mengatasi “Failed to complete Gradle execution”. Langkah alternatif ini akan dilakukan pada tahapan kedua.

Gambar 1.150 Delete “JAVA_HOME” dari “Environment Variables”

72

Gambar 1.151 After Delete “JAVA_HOME”

Gambar 1.152 Error launching Android Studio Solusi dengan menganti variable value “JAVA_HOME” menjadi “C:\Program Files\Java\jdk1.8.0_31\”, solusi ini juga digunakan untuk mengatasi “Failed to complete Gradle execution”:

Gambar 1.153 Menganti variable value “JAVA_HOME”

73



Untuk mengkoneksikan Android Studio + Bluestack, yaitu dengan cara klik kanan file “adb.exe” di path “C:\Users\Imacho\AppData\Local\Android\sdk\platformtools”, pilih “run as administrator”.

Gambar 1.154 Menghubungkan Android Studio + Bluestack I

Gambar 1.155 Menghubungkan Android Studio + Bluestack II

Proses di atas berjalan sangat cepat, dan hampir tidak terlihat secara jelas oleh mata. Untuk melihatnya, kita bisa menggunakan perintah berikut : 

Menjalankan “cmd.exe” as administrator di “”, lalu menjalankan file “adb.exe” yang ada pada file “C:\Users\Imacho\AppData\Local\Android\sdk\platformtools\adb.exe”

74

Gambar 1.156 Run cmd.exe as Administrator

Gambar 1.157 Run adb.exe by cmd as Administrator

Tabel 1.1 Log “Run adb.exe by cmd as Administrator” Log ‘‘Run adb.exe by cmd as Administrator’’ Microsoft Windows [Version 6.2.9200] (c) 2012 Microsoft Corporation. All rights reserved. C:\Windows\system32>cd C:\Users\Imacho\AppData\Local\Android\sdk\platformtools C:\Users\Imacho\AppData\Local\Android\sdk\platformtools>adb.exe Android Debug Bridge version 1.0.32

75

-a on all interfaces for a c onnection -d the only connected USB devic e

- directs adb to listen

- directs command to

returns an error if more than one USB device is present. -e the only running emulator.

- directs command to returns an error if

more than one emulator is r unning. -s the device or emulator with the given

- directs command to

serial number or qualifier. Overrides ANDROID_S ERIAL environment variable. - simple product name

-p like 'sooner', or

a relative/absolute path to a product out directory like 'out/target/product/sooner'. If -p is not specified, the ANDROID_PRODUCT_OUT environment variable is used, which must be an absolute path. - Name of adb server

-H host (default: localhost) -P (default: 5037) devices [-l] devices

- Port of adb server - list all connected ('-l' will also list

device qualifiers) connect [:] via TCP/IP

- connect to a device Port 5555 is used by

default if no port number is specified. disconnect [[:]] TCP/IP device.

76

- disconnect from a

Port 5555 is used by default if no port number is specified. Using this command with no additional arguments will disconnect from all connected TCP/IP devic es. device commands: adb push [-p] - copy file/dir to device ('-p' to display the transfer progress) adb pull [-p] [-a] [] - copy file/dir from device ('-p' to display the transfer progress) ('-a' means copy timestamp and mode) adb sync [ ] - copy host->device only if changed (-l means list but don't copy) (see 'adb help all') adb shell - run remote shell interactively adb shell - run remote shell command adb emu - run emulator console command adb logcat [ ] - View device log adb forward --list - list all forward socket connections. the format is a list of lines with the followin g format: " " " " "\n" adb forward - forward socket connections forward specs are one of: tcp: localabstract:

77

localreserved: localfilesystem: dev: jdwp: (remote only) adb forward --no-rebind - same as 'adb forward ' but fail s if is already forwarded adb forward --remove - remove a specific forward socket connection adb forward --remove-all - remove all forward socket connections adb reverse --list - list all reverse socket connections from device adb reverse - reverse socket connections reverse specs are one of: tcp: localabstract: localreserved: localfilesystem: adb reverse --norebind - same as 'adb reverse ' but fail s if is already reversed. adb reverse --remove - remove a specific reversed socket connection adb reverse --remove-all - remove all reversed socket connections from dev ice adb jdwp - list PIDs of processes hosting a JDWP transport adb install [-lrtsd] adb install-multiple [-lrtsdp]

78

- push this package file to the device and instal l it (-l: forward lock application) (-r: replace existing application) (-t: allow test packages) (-s: install application on sdcard) (-d: allow version code downgrade) (-p: partial application install) adb uninstall [-k] - remove this app package from the device ('-k' means keep the data and cache directories ) adb bugreport - return all information from the device that should be included in a bug report. adb backup [-f ] [-apk|-noapk] [-obb|-noobb] [-shared|-noshared] [-all] [-system|-nosystem] [] - write an archive of the device's data to . If no -f option is supplied then the data is wr itten to "backup.ab" in the current directory. (-apk|-noapk enable/disable backup of the .apks themselves in the archive; the default is noapk.) (-obb|-noobb enable/disable backup of any insta lled apk expansion (aka .obb) files associated with each applic ation; the default is noobb.) (-shared|-noshared

79

enable/disable backup of the device's shared storage / SD card contents; the defau lt is noshared.) (-all means to back up all installed applicatio ns) (-system|-nosystem toggles whether -all automat ically includes system applications; the default is to inclu de system apps) ( is the list of applications to b e backed up. If the -all or shared flags are passed, then t he package list is optional. Applications explicitly g iven on the command line will be included even if -nosys tem would ordinarily cause them to be omitted.) adb restore tents from the backup archive

- restore device con-

adb help sage adb version

- show this help mes- show version num

scripting: adb wait-for-device online adb start-server a server running adb kill-server is running adb get-state bootloader | device adb get-serialno number> adb get-devpath

- block until device is - ensure that there is - kill the server if it - prints: offline | - prints:



Setelah run “adb.exe”, lalu lihatlah dari Android Studio apakah Bluestack sudah terkoneksi dengan Android Studio, dengan Klik “Android Device Monitor”

Gambar 1.158 Klik “Android Device Monitor” 

Tunggu beberapa saat, sampai terlihat bahwa Bluestack telah aktif

Gambar 1.159 Bluestack telah aktif di Android Studio

82

Gambar 1.160 Success run App (Android Studio + Bluestack) 

Lokasi file *.apk hasil running

Gambar 1.161 Lokasi file *.apk hasil running

83



Error lainnya ketika setelah membuat Project baru “Failure [INSTALL_FAILED_OLDER_SDK]”:

Gambar 1.162 INSTALL FAILED OLDER SDK Solusinya, Masuk ke “Gradle Scripts”, klik “build.gradle(Module:app)” ubah dibagian “compileSdkVersion 19”  ubah dibagian “minSdkVersion & targetSdkVersion”:

Gambar 1.163 Klik “build.gradle(Module:app)”

Gambar 1.164 Ubah compileSdkVersion 19

84

Gambar 1.165 Ubah minSdkVersion & targetSdkVersion

Klik pada bagian Gradle files have changed since last project sync. A project sync may be necessary for the IDE to work properly "Sync Now".

Gambar 1.166 Klik "Sync Now"

Tunggu beberapa detik, maka akan muncul tampilan seperti ini :

Gambar 1.167 Gradle project sync in progress...

Klik “Yes” di Language Level Changed.

85

Gambar 1.168 Language Level Changed Error “Files under the build folder are generated and should not be edited” atau Error “Error:(50, 21) No resource found that matches the given name: attr 'android:actionModeShareDrawable'.”

Gambar 1.169 Files under the build folder are generated and should not be edited Ubah “dependencies”.

Gambar 1.170 Ubah “dependencies” 86

Copykan file “android-support-v4.jar” “D:\ProjectAndroidStudio_2015\B_2_1Primitives_Object\app\libs”.

ke

Gambar 1.171 File android-support-v4.jar Klik “Sync Now”

Gambar 1.172 Klik “Sync Now” Atau solusi untuk error “” adalah dengan langkah berikut :

Dalam Android Studio ketika mencoba menggunakan compileSdkVersion dan targetSdkVersion of 19, dengan mengubah file “build.gradle” dari : dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompatv7:21.0.3' } Setting untuk older version dari appcompat library, menjadi : dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompatv7:19.+' }

87

Jika menggunakan “Setting untuk older version dari appcompat library”, maka anda tanpa perlu melakukan copy paste file “androidsupport-v4.jar” ke D:\ProjectAndroidStudio_2015\B_2_1Primitives_Object\app\libs”.

Gambar 1.173 Setting untuk old version dari appcompat library Ubah “”  name="AppTheme" ent="android:Theme.Holo.Light.DarkActionBar">”.

par“ ”Development” –> klik/ beri tanda cek pada “USB debugging”.

Gambar 1.237 USB Debugging Pada Smartphone Samsung 11. Pasang kabel USB smartphone dengan PC, run app, lalu cek “Devices” pada Android Studio.

Gambar 1.238 Pilih Devices pada Android Studio 12. Konfigurasi selesai. 120

1.3.8 Konfigurasi "AS + Genymotion" Langkah-langkah untuk install Genymotion Master installer genymotion-2.3.1-vbox.exe adalah sebagai berikut : 1. Install “Genymotion”

Gambar 1.239 Install Genymotion 2. Klik OK

Gambar 1.240 Select Setup Language

121

3. Setup Genymotion, Klik “Next”

Gambar 1.241 Setup – Genymotion I

Gambar 1.242 Setup – Genymotion II

122

Gambar 1.243 Setup – Genymotion III

Gambar 1.244 Setup – Genymotion IV

123

Gambar 1.245 Setup – Genymotion V

4. Proses Installing, Klik Yes To Install Virtual Box baru

Gambar 1.246 Proses Installing Genymotion

124

Gambar 1.247 Install VirtualBox I

Gambar 1.248 Install VirtualBox II

125

Gambar 1.249 Install VirtualBox III

Gambar 1.250 Install VirtualBox IV

126

Gambar 1.251 Install VirtualBox VI

Gambar 1.252 Install VirtualBox VII

127

5. Klik Finish

Gambar 1.253 Install VirtualBox VIII

Gambar 1.254 Yes, restart the computer now

128

Langkah-langkah untuk Konfigurasi Genymotion di Android Studio adalah sebagai berikut : 1. Android Studio, Klik File > Settings. 2. Pilih Plugins 3. Browse Repositories, ketik “Genymotion”, Klik “Install plugin”

Gambar 1.255 Ketik “Genymotion”, Klik “Install plugin” 4. Klik Yes

Gambar 1.256 Download and Install

129

Gambar 1.257 Download Plugins 5. Klik “Restart Android Studio”

Gambar 1.258 Klik “Close”

Gambar 1.259 Plugin Changed

130

Langkah-langkah untuk Running Project OpenGL dari Android Studio (dengan emulator Genymotion) adalah sebagai berikut : 1. Android Studio, Klik File > Settings.

Gambar 1.260 Android Studio, Klik File > Settings.

2. Klik Genymotion

Gambar 1.261 Klik Genymotion

131

3. Tekan Tombol “Shift + Enter” atau Klik “Kotak Kecil” disebelah kanan text field “Select the path to the Genymotion folder”

Gambar 1.262 Klik “Kotak Kecil” disebelah kanan text field

4. Browse lokasi dimana anda menginstall Genymotion misal di “C:\Program Files\Genymobile\Genymotion”, lalu klik OK

Gambar 1.263 Browse lokasi menginstall Genymotion

132

5. Sehingga di “” tampil seperti gambar berikut, lalu klik OK

Gambar 1.264 Content Select the path to the Genymotion folder

6. Jalankan Genymotion di Android Studio dengan klik logo Genymotion

Gambar 1.265 Logo Genymotion di Android Studio

7. Tampilan beberapa list virtual device (emulator) Android di Genymotion yang sudah anda download sebelumnya dari Genymotion yang dijalankan melalui Program Files atau double klik logo Genymotion di Desktop. Jika belum ada yang tampil di list, klik Refresh

Gambar 1.266 Genymotion Device Manager

133

8. Pilih salah satu virtual device yang ingin anda jalankan

Gambar 1.267 Pilih salah satu virtual device 9. Klik Start untuk menjalankan virtual device

Gambar 1.268 Klik Start (Run Virtual Device)

Gambar 1.269 Initializing virtual device

134

10. Loading Android di virtual device

Gambar 1.270 Loading Android di virtual device

135

11. Tampilan awal virtual device Genymotion

Gambar 1.271 Virtual device Genymotion I

136

Gambar 1.272 Virtual device Genymotion II

137

Gambar 1.273 Virtual device Genymotion III

138

Gambar 1.274 Virtual device Genymotion IV

139

12. Tampilan kode program

Gambar 1.275 MainActivity.java

Gambar 1.276 Point_n_Lines_with_Points_Object.java

140

Gambar 1.277 ESRender.java 13. Detail Sourcecode

Source Code 1.1 MainActivity.java MainActivity.java package com.introduction_to_opengl_es; import import import import import import

android.opengl.GLSurfaceView; android.os.Bundle; android.app.Activity; android.view.Menu; android.view.Window; android.view.WindowManager;

// By : Imam Cholissodin ([email protected]) public class MainActivity extends Activity { /** The OpenGL view */ private GLSurfaceView glSurfaceView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // requesting to turn the title OFF requestWindowFeature(Window.FEATURE_NO_TITLE);

141

// making it full screen getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCR EEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); // Initiate the Open GL view and create an instance with this activity glSurfaceView = new GLSurfaceView(this); // set our renderer to be the main renderer with the current activity context glSurfaceView.setRenderer(new ESRender()); setContentView(glSurfaceView); } /** * Remember to resume the glSurface */ @Override protected void onResume() { super.onResume(); glSurfaceView.onResume(); } /** * Also pause the glSurface */ @Override protected void onPause() { super.onPause(); glSurfaceView.onPause(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } }

142

Source Code 1.2 Point_n_Lines_with_Points_Object.java Point_n_Lines_with_Points_Object.java package com.introduction_to_opengl_es; import import import import

java.nio.ByteBuffer; java.nio.ByteOrder; java.nio.FloatBuffer; javax.microedition.khronos.opengles.GL10;

import android.util.Log; // By : Imam Cholissodin ([email protected]) public class Point_n_Lines_with_Points_Object { private float vertices_line_with_points[] = null; private float vertices_line_with_points_color[] = null; float x, y; float step_loop = 0.001f; float x1, y1; float x2, y2; float array_factor = 2.0f; private int loop_line, loop_line_color; public Point_n_Lines_with_Points_Object() { // ============ start to generate vertices to create line with point ========================== x1 = -1.0f; y1 = -1.0f; x2 = 1.0f; y2 = 1.0f; loop_line = 0; loop_line_color = 0; vertices_line_with_points = new float[(int)(array_factor*(x2 - x1) / step_loop) * 3]; // 3 is number of dimension x,y,z vertices_line_with_points_color = new float[(int)(array_factor*(x2 - x1) / step_loop) * 4]; // 4 is number of channel color r,g,b,a float m = (y2 - y1) / (x2 - x1); // count gradient for (x = x1; x New Project….

3. Berikan nama aplikasi, misal “Primitive Object ES”, dan project location-nya di “D:\ProjectAndroidStudio_2015\PrimitiveObjectES” lalu klik Next 155

Gambar 1.287 Berikan nama aplikasi yang anda buat 4. Pilih “Phone and Tablet” dan Minimum SDK “API 8:Android 2.2 (Froyo)”, lalu klik Next

Gambar 1.288 Pilih “Phone and Tablet” dan “API 8:.. (Froyo)”

156

Gambar 1.289 API Level:Froyo sampai Lollipop

Gambar 1.290 APIs Level:Froyo for OpenGL ES 2.0

157

Gambar 1.291 APIs Level:Gingerbread

Gambar 1.292 APIs Level:Ice Cream Sandwicth

158

Gambar 1.293 APIs Level:Jelly Bean 16

Gambar 1.294 APIs Level:Jelly Bean 17

159

Gambar 1.295 APIs Level:Jelly Bean 18

Gambar 1.296 APIs Level:Kit Kat 19

160

Gambar 1.297 APIs Level:Lollipop 21

5. Pilih “Blank Activity”, lalu klik Next

Gambar 1.298 Pilih “Blank Activity”

161

6. Biarkan saja isi dari tampilan berikut, lalu klik Finish

Gambar 1.299 Choose options for your new file 7. Tunggu beberapa saat

Gambar 1.300 Building PrimitiveObjectES

Gambar 1.301 Initializing Rendering Library 162

Jika muncul “Missing styles. Is the correct theme chosen for this layout? Use Theme combo box above the layout to choose a different layout, or fix the theme style references. Failed to find styles ‘textViewStyle’ in current theme (4 similar errors not shows) ”. Abaikan, ini tidak akan membuat error aplikasi OpenGL ES.

Gambar 1.302 Missing styles. Is the correct theme chosen 8. Klik “java  com.example.imacho.primitiveobjectes”

Gambar 1.303 “java -> com.example.imacho.primitiveobjectes”

163

9. Isikan dengan file-file project yang sudah anda siapkan, misal sebagai berikut

Gambar 1.304 Siapkan file-file project 10. Project siap dijalankan. Selesai

1.3.10 AS

Membuat Module Baru di Project

1. Setelah membuat project, maka module default yang ada hanya satu, yaitu “app”

Gambar 1.305 module default "app"

164

2. Untuk menambah module baru pada project “Primitive Object ES” di Android Studio, Klik “Android Studio, Klik File > New Module….”

Gambar 1.306 Android Studio, Klik File > New Module…. 3. Pilih “Phone and Tablet Application”, lalu Klik Next

Gambar 1.307 Pilih “Phone and Tablet Application”

165

4. Berikan nama Aplikasi/Library name, misal “Create Point”, lalu Klik Next

Gambar 1.308 Berikan nama Aplikasi/Library name 5. Pilih “Blank Activity”, lalu Klik Next

Gambar 1.309 Pilih “Blank Activity”

166

6. Biarkan secara default isi dari “Choose options for your new file”. Silahkan jika ingin mengubah Title, misal dengan ”CreatePoint”, lalu Klik Finish

Gambar 1.310 Default isi dari “Choose options for your new file” 7. Tunggu beberapa saat “Gradle project sync in progress...”

Gambar 1.311 Tunggu beberapa saat “Gradle in progress...”

8. Module siap dikoding

Gambar 1.312 Module siap dikoding 167

9. Sekarang dapat dilihat bahwa terdapat dua module, yaitu “app” dan “createpoint”

Gambar 1.313 Module “app” dan “createpoint”

10. Selesai

168

BAB 2 Primitives Object 2.1 Pengertian Primitives Object Primitive object merupakan objek dasar yang nantinya dapat dibuat untuk menghasilkan bentuk komplek tertentu yang diinginkan oleh programmer dengan menggabungkan atau mengkombinasikan bentuk-bentuk seperti titik (points), garis (lines), segiempat (quads), dan segitiga (triangles). Pada masing-masing sub bab akan dijelaskan contoh pembuatan dan cara me-render objek primitives. Berikut beberapa parameter ditanda “[..]” pada “gl.glDrawArrays(GL10.[..] , IndexAwal, BanyakData)”.

1 7

2 3

4

6 5

GL_POINTS

Gambar 2.1 GL_POINTS & GL_[LINES/LINE_STRIP/LINE_LOOP]

169

Gambar 2.2 GL_[TRIANGLES/TRIANGLE_STRIP/TRIANGLE_FAN]

2.2 Membuat Titik Dalam membuat titik, disini kita dapat menggunakan “gl.glDrawArrays(GL10.GL_POINTS, 0, 21);”, dimana “0” merupakan start index dan “21” merupakan banyaknya titik yang akan di-plot. Misalnya kita ingin membuat titik secara manual, maka kita cukup memanggil perintah “gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(new float [ ] { x1,y1,z1, // titik ke-1 x2,y2,z2, // titik ke-2 …. , x21, y21, z21 // titik ke-21 }));” Pada glVertexPointer, nilai “3” menyatakan besarnya dimensi dari titik vertex, sedangkan “0” menyatakan nilai start index. Artinya anda ingin menampilkan titik mulai dari index ke-0. GL_FLOAT, karena memang tipe data pada titik-titiknya adalah float, sedangkan “makeFloatBuffer” digunakan untuk membangun vertex buffer dari titik vertices yang sudah dimasukkan oleh user. Kemudian script untuk mengenerate titik-titik secara otomatis menggunakan persamaan garis lurus dengan ukuran titik yang bervariasi dan step_loop “0.2” dapat dilakukan dengan cara berikut. “float size_point=1; for(x=x1;x