BELAJAR CEPAT DAN PRAKTIS TENTANG GRAFIKA KOMPUTER (Teori Aplikasi)

(1)

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.

2014-2016

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.

(2)

Kata Pengantar

Alhamdulillahhi robbil alamin, puji syukur kehadirat Allah SWT

atas segala rahmat dan karunia-Nya dengan terselesaikannya

penu-lisan 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

cata-tan-catatan kecil untuk dibuat sebuah naskah tulisan yang mudah

un-tuk dipahami. Dan penulis mengucapkan terimakasih yang

sebesar-besarnya 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

(3)

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.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

1.3 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

BAB 2

Primitives Object ... 169

(4)

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

(5)

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 Random Maze ... 558

9.1.1 Konsep ... 558

9.1.2 Tampilan Implementasi ... 558

9.1.3 Source Code ... 560

9.2 Smart Flappy ... 723

9.2.1 Konsep ... 723

9.2.2 Tampilan Implementasi ... 723

9.2.3 Source Code ... 725

9.3 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

9.4 Ayo Nyoblos ... 854

9.4.1 Konsep ... 854

9.4.2 Fitur/Menu ... 855

(6)

9.4.4 Source Code ... 857

9.5 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

9.6 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

9.7 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

9.8 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

(7)

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

(8)

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

Gamb

ar 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

(9)

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

(10)

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

(11)

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

(12)

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

(13)

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

(14)

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

(15)

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

(16)

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

(17)

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

(18)

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

(19)

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

(20)

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

(21)

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

(22)

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

(23)

Source Code 9.5 Code Touch Your Coin ... 923

Source Code 9.6 Code Guess The Animal ... 1066

(24)

BAB 1 Introduction to OpenGL

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

librarynya 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

″

.

(25)



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)”.

(26)

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



Klik

“Install 2 packages”.

Gambar 1.4 Klik Install 2 packages

(27)

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.

(28)



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.

(29)

Gambar 1.9 Membuat Android Virtual Device (AVD) baru

4. Setelah membuat AVD lalu klik AVD pada list lalu klik Start.

(30)

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-bundle-

windows-x86-20131030\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.

Langkah-langkah untuk konfigurasi Eclipse dan Bluestack pada Android adalah

sebagai berikut:

(31)

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

(32)

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:

(33)

Buka

file

“..\adt-bundle-windows-x86-20131030\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…”,

pada

“System

variables”

klik

“path”

lalu klik

“Edit”.

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

(34)

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

(35)

6. Kemudian untuk mengkoneksikan Bluestack dan Eclipse,

langkah-langkahnya sebagai berikut:



Jalankan cmd (Window + R),

lalu klik “Ok”.

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”.

(36)



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”.

(37)

Gambar 1.26 Tampilan device pada Bluestacks emulator

Gambar 1.27 Android Device Chooser

Jika gagal dalam mengkoneksikan, ketikkan

“HD

-Adb.exe

kill-server” lalu tekan “Enter”,

tunggu beberapa saat lalu ketikkan lagi

“HD

-Adb.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)

(38)

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

(39)

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" .

(40)

9. Beri nama untuk virtual devicenya lalu klik next.

Gambar 1.33 Beri Nama Virtual Device

10. Virtual device akan terdownload dan di deploy.

(41)

11. Klik finish untuk mengakhiri deployment window.

Gambar 1.35 Deployment window Finish

12. Klik play untuk memulai virtual device.

(42)

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”

(43)

Gambar 1.39 Virtual device Finish

(44)

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’.

(45)

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

(46)

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

(47)

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”.

(48)

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.

(49)

h. Restart Eclipse

Gambar 1.51 Software Updates, restart to take effect

i.

Setelah restart, maka akan muncul tombol di toolbar:

j.

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

(50)

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

(51)

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

”

(52)

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

Host-Only

Ethernet Adapter” pada Virtual Box akan dibuat

kembali, dan pada “Your virtual devices” jangan di klik “Start”

terlebih dahulu.

Lakukan langkah “c”.

(53)

c. Kemudian, masuk ke “Control

Panel\Network

and

Internet\Network Connections

”

.

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 ..”.

(54)

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”.

(55)

Gambar 1.63 Adapter & DHCP VB Host-Only Ethernet Adapter

(56)

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

(57)

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.

(58)

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

An-droid yang digunakan adalah Samsung GT-i9070 Galaxy S

Ad-vance.

2. Pada

smartphone,

pililh “setting”,

lalu

klik

“Applica-tions/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\platform-tools”

lalu tekan

“

E

nter”.

(59)

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

(60)

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

(61)

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 :

(62)

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

(63)

c.

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

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

(64)

d.

Save file “

AndroidManifest.xml

”

.

Lalu klik “Yes”

Gambar 1.82 d.

Save file “AndroidManifest.xml”

e. Tampilan project, setelah tidak ada error

(65)

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

(66)

3. Konfigurasi icon, Klik Next

Gambar 1.86 Configure the attributes of the icon set

4. Pilih “Blank Activity”, Klik Next

(67)

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.

(68)

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.

(69)

1.3 Persiapan di Android Studio (AS)

1.3.1 Installasi Android Studio

Master installer android-studio-bundle-135.1641136 ini

meru-pakan 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

be-sar. Bagaimana tidak, selama ini kami biasanya menggunakan

“

Eclipse ADT plugin

” untuk development aplikasi android selama

ku-run 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.

(70)

"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

ling-kungan pengembang dan desainer antarmuka pengguna yang lebih

baik, serta efisiensi memori yang lebih baik dan meningkatkan

ke-cepatan eksekusi kode program. Dan kemungkinan hal ini pasti

ban-yak yang berbeda pendapat dari para pengembang. Ketika Android

Studio diresmikan pada Mei tahun lalu, terdapat komentar di

TechRe-public: "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

(71)



Welcome to the Android Studio Setup, Klik “Next”

Gambar 1.95 Android Studio Setup



Pilih Komponen, Klik “Next”

(72)



License Agreement, Klik “I Agree”

Gambar 1.97 License Agreement



Configuration Setting,

Klik “Next”

(73)



Choose Start Menu Folder, Klik “Install”

Gambar 1.99 Choose Start Menu Folder



Proses Installing

(74)

Gambar 1.101 Extracting Android SDK

(75)

Gambar 1.103 MVC++ Installation Is Complete



Setup Was Successfully, Klik “Next”

(76)



Completing the Android Studio Setup

Gambar 1.105 Completing the Android Studio Setup

Ketika menjalankan Android Studio, kemungkinan anda

men-galami 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”.

(77)

Gambar 1.107 Advanced system settings

c.

Klik “Environment Variable…”, pada “System

variables” klik “path” lalu klik “Edit”.

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.

(78)



studio64.exe

–

System Error (The program can’t start

be-cause 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

(79)

Gambar 1.113 Import Previous Version Of Android Studio

Gambar 1.114 Android Studio Powered by the IntelliJ Paltform

(80)



The following SDK component was not installed:

build-tools-21.1.1, jika memang tidak terkoneksi dengan internet,

Klik “Cancel”

Gambar 1.116 Checking for updated SDK component

(81)

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

“build-tools-21.1.1

”.



Start Android Studio dari Apps Search

(82)



Pastikan komputer atau laptop anda internetnya sudah

“connected”, lalu Klik “Retry”

Gambar 1.120 Setup Wizard (Klik Retry)

(83)



Setelah selesai “Downloading

Android SDK Build-tools”,

Klik “Finish”

Gambar 1.122 Download Android SDK Build-tools was successfully



Android Studio siap untuk digunakan