BAB IV IMPLEMENTASI DAN ANALISA

(1)

commit to user

23 BAB IV

IMPLEMENTASI DAN ANALISA 4.1 Pembuatan Aplikasi

4.1.1 Pembuatan Marker

Untuk membuat aplikasi augmented reality diperlukan sebuah marker untuk

memunculkan suatu objek. Di dalam augmented reality terdapat beberapa marker. Marker yang digunakan untuk aplikasi ini berjenis markerless. Markerless merupakan sebuah marker yang tidak menggunakan gambar hitam dan putih untuk memunculkan objek. Karena aplikasi ini menggunakan objek benda purbakala yang ada di Museum Sangiran sebagai marker-nya, jadi kita hanya perlu mengambil foto benda purbakala yang ingin dipakai kemudian foto tersebut

diupload ke alamat web www.develop.vuforia.com, seperti gambar di bawah ini:

Gambar 4.1 Halaman Web Vuforia

Setelah login Langkah pertama adalah membuat database baru seperti Gambar 4.2 di bawah ini :

(2)

commit to user

1. Pembuatan marker Stegodon Bawah

Untuk menambahkan gambar stegodon bawah sebagai marker, klik Add Target di pojok kanan, maka akan muncul form Gambar 4.3 untuk meng-upload gambar sebagai marker. Kemudian pilih gambar yang akan di upload dan klik button add.

Gambar 4.3 Form upload marker

Hasil marker stegodon bawah dapat di lihat pada Gambar 4.4. berikut ini :

(3)

commit to user

2. Pembuatan marker Sangiran 17

Untuk menambahkan gambar Sangiran 17 sebagai marker, klik Add Target di pojok kanan, maka akan muncul form Gambar 4.5 untuk meng-upload gambar sebagai marker. Kemudian pilih gambar yang akan di upload dan klik button add.

Hasil marker Sangiran 17 dapat di lihat pada Gambar 4.6. berikut ini :

(4)

commit to user

Untuk menambahkan gambar Sangiran 8 sebagai marker, klik Add Target di pojok kanan, maka akan muncul form Gambar 4.7 untuk meng-upload gambar sebagai marker. Kemudian pilih gambar yang akan di upload dan klik button add.

(5)

commit to user

Untuk menambahkan gambar Sangiran 4 sebagai marker, klik Add Target di pojok kanan, maka akan muncul form Gambar 4.9 untuk meng-upload gambar sebagai marker. Kemudian pilih gambar yang akan di upload dan klik button add.

(6)

commit to user

5. Pembuatan marker Buaya Sungai

Untuk menambahkan gambar Buaya Sungai sebagai marker, klik Add Target di pojok kanan, maka akan muncul form Gambar 4.11 untuk meng-upload gambar sebagai marker. Kemudian pilih gambar yang akan di upload dan klik button add.

Gambar 4.11Form upload marker

Hasil marker Buaya Sungai dapat di lihat pada Gambar 4.12. berikut ini :

(7)

commit to user

6. Pembuatan marker Kerbau Purba

Untuk menambahkan gambar Kerbau Purba sebagai marker, klik Add Target di pojok kanan, maka akan muncul form Gambar 4.13 untuk meng-upload gambar sebagai marker. Kemudian pilih gambar yang akan di upload dan klik button add.

Hasil marker Kerbau Purba dapat di lihat pada Gambar 4.14. berikut ini :

(8)

commit to user

Gambar 4.14Hasil marker Kerbau Purba

7. Pembuatan marker Buaya Muara

Untuk menambahkan gambar Buaya Muara sebagai marker, klik Add Target di pojok kanan, maka akan muncul form Gambar 4.15 untuk meng-upload gambar sebagai marker. Kemudian pilih gambar yang akan di upload dan klik button add.

Hasil marker Buaya Muara dapat di lihat pada Gambar 4.16. berikut ini :

(9)

commit to user

8. Pembuatan marker Sangiran

Untuk menambahkan gambar Sangiran sebagai marker, klik Add Target di pojok kanan, maka akan muncul form Gambar 4.17 untuk meng-upload gambar sebagai marker. Kemudian pilih gambar yang akan di upload dan klik button add.

Hasil marker Sangiran dapat di lihat pada Gambar 4.18. berikut ini :

(10)

commit to user

Setelah menambahkan gambar yang digunakan untuk media marker seperti Gambar 4.19. Kemudian data gambar di download dengan cara klik button download selected targets pada pojok kiri website fuvoria:

Gambar 4.19Gambar yang digunakan untuk marker

Tunggu hingga muncul form download selected targets seperti gambar 4.20, kemudian pilih format Unity Editor karena kita akan menggunakan software unity 3D, kemudian download dengan caraklik button create:

(11)

(12)

commit to user

objek yang di inginkan. Dan disimpan dalam bentuk .3ds yang nantinya di masukan dalam folder asset 3D di unity dengan nama buayamuara.3ds. Gambar pembuatan buaya muara menggunakan sphere di lihat pada gambar 4.22.

Gambar 4.22Pembentukan sphere sesuai bentuk buaya muara.

2. Pembuatan 3D buaya sungai

Untuk pembuatan model 3 dimensi benda purba kala buaya sungai cukup mudah, kita hanya memakai objek sphere dengan menggunakan modif list memakai edit poly setelah itu tarik objek titik titik vertex untuk membentuk objek yang di inginkan. Dan disimpan dalam bentuk .3ds yang nantinya di masukan dalam folder asset 3D di unity dengan nama buayasungai.3ds Gambar pembuatan buaya sungai menggunakan sphere di lihat pada gambar 4.23.

(13)

commit to user

Gambar 4.23Pembentukan sphere sesuai bentuk buaya sungai.

3. Pembuatan 3D kerbau purba

Untuk pembuatan model 3 dimensi benda purba kala kerbau purba cukup mudah, kita hanya memakai objek sphere dengan menggunakan modif list memakai edit poly setelah itu tarik objek titik titik vertex untuk membentuk objek yang di inginkan. Dan disimpan dalam bentuk .3ds yang nantinya di masukan dalam folder asset 3D di unity dengan nama kerbaupurba.3ds. Gambar pembuatan kerbau purba menggunakan sphere di lihat pada gambar 4.24.

(14)

commit to user

4. Pembuatan 3D Sangiran 4

Untuk pembuatan model 3 dimensi benda purba kala Sangiran 4 cukup mudah, kita hanya memakai objek sphere dengan menggunakan modif list memakai edit poly setelah itu tarik objek titik titik vertex untuk membentuk objek yang di inginkan. Dan disimpan dalam bentuk .3ds yang nantinya di masukan dalam folder asset 3D di unity dengan nama s4.3ds. Gambar pembuatan Sangiran 4 menggunakan sphere di lihat pada gambar 4.25.

Gambar 4.25 Pembentukan sphere sesuai bentuk Sangiran 4

Untuk pembuatan model 3 dimensi benda purba kala Sangiran 8 cukup

mudah, kita hanya memakai objek Box dengan menggunakan modif list

memakai edit poly setelah itu tarik objek titik titik vertex untuk membentuk objek yang di inginkan. Dan disimpan dalam bentuk .3ds yang nantinya di masukan dalam folder asset 3D di unity dengan nama s8.3ds. Gambar pembuatan Sangiran 8 menggunakan Box di lihat pada gambar 4.26.

(15)

commit to user

Gambar 4.26 Pembentukan Box sesuai bentuk Sangiran 8

Untuk pembuatan model 3 dimensi benda purba kala Sangiran 17 cukup mudah, kita hanya memakai objek sphere dengan menggunakan modif list memakai edit poly setelah itu tarik objek titik titik vertex untuk membentuk objek yang di inginkan. Dan disimpan dalam bentuk .3ds yang nantinya di masukan dalam folder asset 3D di unity dengan nama s17.3ds. Gambar pembuatan Sangiran 17 menggunakan sphere di lihat pada gambar 4.27.

(16)

commit to user

7. Pembuatan 3D Stegodon Bawah

Untuk pembuatan model 3 dimensi benda purba kala Stegodon Bawah

cukup mudah, kita hanya memakai objek Box dengan menggunakan modif list

memakai edit poly setelah itu tarik objek titik titik vertex untuk membentuk objek yang di inginkan. Dan disimpan dalam bentuk .3ds yang nantinya di masukan dalam folder asset 3D di unity dengan nama stegodonbawah.3ds. Gambar pembuatan Stegodon Bawah menggunakan Box di lihat pada gambar 4.28.

Gambar 4.28Pembentukan Box sesuai bentuk Stegodon Bawah

4.1.3 Pembuatan Desain Aplikasi

Pembuatan desain dalam aplikasi ini dilakukan secara manual dengan

memanfaatkan tools yang ada pada Adobe Photoshop CS5. Ukuran desain dibuat

sesuai dengan ukuran aplikasi yang ingin di buat. Kemudian di simpan kedalam format .png.

Tools Adobe Potoshop CS5 Tabel 4.1.

Tools Fungsi

Line Tool Membuat garis lurus

(17)

commit to user

Pen Tool Membuat bentuk garis lurus yang saling

terhubung

Selection Tool Memilih obyek

Oval Tool Membuat bentu lingkaran atau oval

Rectangle Tool Membuat bentuk kotak

Free Transform

Tool

Mengatur ukuran obyek secara bebas

Paint Bucket Tool Memberi warna pada bidang obyek

Stroke Color Menentukan warna garis

Fill Color Memberikan warna dasar

Stroke Heigh Menentukan ketebalan garis

4.1.4 Pembuatan gambar splashscreen

Tahap pembuatan splash screen ini menggunakan adobe photoshop CS 5

dengan menggunakan tools gradient overlay untuk membuat effect pada

background pertama pada splash screen. Dan disimpan dalam bentuk .jpg yang nantinya di masukan dalam folder asset splashscreen di unity dengan nama

splashscreen.jpg. Disimpan dalam Gambar pembuatan background pertama dapat

(18)

commit to user Gambar 4.29Splash Screen

Tahap selanjutnya memasukan gambar dan memotongnya menggunakan tools slice tools untuk membuat potongan agar tampilan lebih menarik. Gambar hasil pemotongan dapat dilihat pada Gambar 4.30.

Gambar 4.30Splash Screen

Selanjutnya pembuatan tulisan Sangiran ―The Homeland of Java Man‖ menggunakan font Iskola Pota dengan effect Bevel and Emboss. Tampilan tulisan dapat dilihat pada Gambar 4.31 berikut ini.

(19)

commit to user

Gambar 4.31 Splash Screen

4.1.5 Pembuatan gambar tampilan menu

Untuk aplikasi ini, menu utama dibuat dengan menggunakan photoshop CS5. Gambar berupa manusia purba yang digunakan sebagai background di download

dari alamat web www.google.com. Selanjutnya memotong gambar tersebut

menggunakan slice tools dan member effect gradient di sebalah kiri untuk memberi ruang tempat button. Lalu ditambahkan tulisan e-sangiran untuk pemberian judul aplikasi menggunakan text dengan effect bevel and emboss. Dan disimpan dalam bentuk .jpg yang nantinya di masukan dalam folder asset di unity dengan nama BackMenu.jpg. Gambar tampilan menu utama dapat dilihat pada Gambar 4.32.

(20)

commit to user

Gambar 4.32 Tampilan Menu Utama

4.1.6 Pembuatan Tampilan Tentang

Untuk tampilan Tentang dibuat menggunakan photoshop CS 5 dengan menggunakan slice tool, effect bevel emboss. Buat rectangle tools lalu slice menggunakan slice tools agar member effect artistic dan isinya menggunakan text. Juga terdapat logo UNS dan logo Museum Sangiran di sebelah kanan bawah. Dan disimpan dalam bentuk .jpg yang nantinya di masukan dalam folder asset Tentang di unity dengan nama tentang.jpg Gambar tampilan menu Tentang dapat dilihat pada Gambar 4.33 berikut ini.

(21)

commit to user

4.1.7 Pembuatan Tampilan Petunjuk

Proses pembuatan gambar petunjuk menggunakan Photoshop CS5. Gambar petunjuk di buat menggunakan penggabungan beberapa gambar sehingga menjadi satu objek gambar. Dengan menggunakan tool selection untuk menghapus gambar yang tidak diperlukan. Petunjuk disini menggunaka animasi ada anak panah yang nantinya menunjukan tombol panah yang harus di klik. Tampilan petunjuk pertama mengenai pemakaian menu utama aplikasi. Dan disimpan dalam bentuk .jpg yang nantinya di masukan dalam folder asset petunjuk di unity dengan nama petunjuk1.jpg dan petunjuk2.jpg . Gambar tampilan petunjuk pertama dilihat pada Gambar 4.34 berikut ini :

(22)

commit to user

Tampilan gambar petunjuk 2 dapat dilihat pada Gambar 4.35 berikut ini.

Gambar 4.35Tampilan Petunjuk 2

4.1.8 Pembuatan Button atau tombol.

Untuk membuat button atau tombol pada aplikasi ini menggunakan software adobe photoshop CS5. Kemudian tombol diberi keterangan berupa tulisan yang di buat dari photoshop menggunakan text tool. Dan disimpan dalam bentuk .png yang nantinya di masukan dalam folder asset button di unity. Tampilan button keluar dapat dilihat pada Gambar 4.36 berikut ini.

(23)

commit to user

Tampilan button kembali dapat dilihat pada Gambar 4.37 berikut ini.

Gambar 4.37 Button Kembali

Tampilan button tracking dapat dilihat pada Gambar 4.38 berikut ini.

Gambar 4.38Button Tracking

Tampilan button lokasi dapat dilihat pada Gambar 4.39 berikut ini.

(24)

commit to user

Tampilan button petunjuk dapat dilihat pada Gambar 4.40 berikut ini.

Gambar 4.40 Button Petunjuk

Tampilan button tentang dapat dilihat pada Gambar 4.41 berikut ini.

Gambar 4.41Button Tentang

Tampilan button visit dapat dilihat pada Gambar 4.42 berikut ini.

(25)

commit to user

Tampilan button Tour dapat dilihat pada Gambar 4.43 berikut ini.

Gambar 4.43 Button Tour

4.2Pembuatan Aplikasi

Langkah awal dalam pembuatan project adalah pilih file lalu pilih new project, kemudian secara otomatis masuk ke windows scene. Langkah selanjutnya adalah memberikan objek dan segala kebutuhan yang diperlukan untuk pembuatan scene tersebut. Untuk memasukkan objek pada Unity, pada kolom Asset klik kanan kemudian pilih new asset dan pilih objek yang akan digunakan, asset yang telah dimasukkan kedalam Unity maka secara otomatis akan menjadi game object, untuk mengatur settingan dapat dilakukan pada kolom inspector. Dalam object inspector tersebut digunakan untuk memberikan settingan seperti texture type, sprite mode, filter mode, max size, compressed dan sebagainya. Untuk objek lainnya, untuk mengimport ke dalam Unity melakukan dengan cara yang sama. Setelah pengaturan game object selesai maka langkah selanjutnya adalah memasukkan game object tersebut ke dalam scene game ke dalam kolom hierarchy maka game object tersebut akan muncul ke dalam scene. Aset aset yang akan digunakan secara menerus maupun yang akan dipanggil pada scene lain, sebaiknya disimpan didalam asset list.

Untuk membuat script didalam unity, langkahnya dengan klik kanan pada asset pilih create pilih C# kemudian beri nama pada script tersebut, double click script tersebut maka secara otomatis Mono-Develop Unity akan

(26)

commit to user

dijalankan. Mono-Develop Unity merupakan bundle dari Unity yang digunakan sebagai pengolah script. Maka secara otomatis akan masuk pada script tersebut, dimana telah terdapat class dengan nama yang sesuai dengan nama script yang diberikan. Berikut merupakan tabel yang berisi daftar file yang digunakan dalam pembuatan aplikasi augmented reality ini, yang tersimpan dalam folder asset pada Unity 3D.

List Asset di Unity Tabel 4.2.

N o

Folder Asset

Nama File Keterangan

1 3D buayamuara

.3ds

File 3D buayamuara yang digunakan untuk objek 3D Buaya Muara.

buayasungai .3ds

File 3D buayasubgai yang digunakan untuk objek 3D Buaya Sungai.

kerbau.3ds File 3D kerbau yang

digunakan untuk objek 3D Kerbau Purba.

s4.3ds File 3D s4 yang digunakan

untuk objek 3D Sangiran 4.

untuk objek 3D Sangiran 8.

untuk objek 3D Sangiran 17. stegodonba

wah.3ds

File 3D stegodonbawah yang

digunakan untuk objek 3D

Stegodon Bawah.

2 Backso

und

Backsound.. mp3

File mp3 backsound yang digunakan untuk backsound pada menu utama.

(27)

commit to user

Klik.mp3 File mp3 Klik yang digunakan

untuk backsound pada semua tombol.

Museum Sangiran.mp3

File mp3 Museum Sangiran yang digunakan untuk backsound pada informasi Museum Sangiran. Petunjuk1.m

p3

File mp3 petunjuk1 yang digunakan untuk backsound pada menu petunjuk tampilan 1.

Petunjuk2.m p3

Petunjuk3.m p3

Stegodon SP.mp3

File mp3 stegodon SP yang digunakan untuk backsound pada informasi benda Stegodon Bawah. Tengkorak

fosil buaya

muara.mp3

File mp3 Tengkorak fosil buaya muara yang digunakan untuk backsound pada informasi benda Buaya Muara.

Tengkorak

fosil buaya

sungai.mp3

File mp3 Tengkorak fosil buaya sungai yang digunakan untuk backsound pada informasi benda Buaya Sungai.

Tengkorak Kerbau

Purba.mp3

File mp3 Tengkorak Kerbau Purba yang digunakan untuk backsound pada informasi benda Kerbau Purba.

(28)

commit to user

Tengkorak Sangiran 4.mp3

File mp3 Tengkorak Sangiran

4 yang digunakan untuk

backsound pada informasi benda Tengkorak Sangiran 4.

3 Button

Informasi

Button Informasi.png

File PNG Button Informasi yang digunakan untuk tampilan button informasi

Button Informasi Hover.png

File PNG Button Informasi

hover yang digunakan untuk

memberi effect pada saat button informasi ditekan.

4 Button

Keluar

Button keluar.png

File PNG Button keluar yang digunakan untuk tampilan button keluar.

Button keluar hover.png

File PNG Button keluar

memberi effect pada saat button keluar ditekan.

5 Button

Kembali

Button kembali.png

File PNG Button kembali yang digunakan untuk tampilan button kembali.

(29)

commit to user

kembali hover.png

memberi effect pada saat button kembali ditekan.

6 Button

Tracking

Button Tracking.png

File PNG Button Button Tracking yang digunakan untuk tampilan button Button Tracking. Button

Tracking Hover.png

File PNG Button Tracking Hover yang digunakan untuk memberi effect pada saat button Button Tracking ditekan.

7 Button

Lokasi

Button Lokasi.png

File PNG Button Lokasi yang digunakan untuk tampilan Button Tracking.

Button Lokasi hover.png

File PNG Button Lokasi

memberi effect pada saat button Button Lokasi ditekan

8 Button

mute sound

Button mute sound.png

File PNG button mute sound yang digunakan untuk tampilan button mute sound.

9 Button

Petunjuk

Button Petunjuk.png

File PNG Button Petunjuk yang digunakan untuk tampilan Button Petunjuk.

Button Petunjuk hover.png

File PNG Button Petunjuk

memberi effect pada saat button Button Petunjuk ditekan

1 0 Button Sound Button Sound.png

File PNG Button Sound yang digunakan untuk tampilan Button Sound.

(30)

commit to user

Button Sound Hover.png

File PNG Button Sound Hover yang digunakan untuk memberi effect pada saat button Button Sound ditekan

1 1 Button Tentang Button Tentang.png

File PNG Button Tentang yang digunakan untuk tampilan Button Tentang.

Button Tentang hover.png

File PNG Button Tentang

memberi effect pada saat button Button Tentang ditekan

1 2 Button Tour Button wisatawan.png

File PNG Button wisatawan yang digunakan untuk tampilan Button Sound.

Button wisatawan hover.png

File PNG Button wisatawan

memberi effect pada saat Button wisatawan ditekan 1 3 Button Visit Button Visit.png

File PNG Button Visit yang digunakan untuk tampilan Button Visit.

Button Visitr.png

File PNG Button Visitr yang digunakan untuk memberi effect pada saat Button Visit ditekan 1

4

Button panah

Panah.png File PNG Panah yang

digunakan untuk tampilan Panah. Panah

hover.png

File PNG Panah hover yang digunakan untuk memberi effect pada saat Panah ditekan

(31)

commit to user

5 si benda .png digunakan untuk tampilan

informasi pada objek atau benda purbakala buaya muara.

Buayasunga i .png

File PNG buaya sungai

digunakan untuk tampilan

informasi pada objek atau benda purbakala buaya sungai.

Kerbau purba.png

File PNG Kerbau purba

informasi pada objek atau benda purbakala Kerbau purba

Rahang bawah.png

File PNG Rahang bawah

informasi pada objek atau benda purbakala Stegodon Bawah

Sangiran.pn g

File PNG Sangiran digunakan untuk tampilan informasi pada objek patung depan Museum Sangiran

Sangiran 4.png

File PNG Sangiran 4

informasi pada objek atau benda purbakala Tengkorak Sangiran 4. Sangiran

8.png

File PNG Sangiran 8

informasi pada objek atau benda purbakala Tengkorak Sangiran 8. Sangiran

17.png

File PNG Sangiran 17

(32)

commit to user

purbakala Tengkorak Sangiran 17. 1

6

Scene TA

Ars.unity Scene digunakan untuk

mengatur semua tampilan yang ada di splash screen ARS.

coba.unity Scene yang digunakan untuk

mengatur tampilan augmented

reality 3D dengan marker foto Menu

utama.unity

Scene yang digunakan untuk mengatur tampilan yang ada pada menu utama

Scene.unity Scene yang digunakan untuk

mengatur tampilan yang ada pada splash screen

Scene Petunjuk.unity

Scene yang digunakan untuk mengatur tampilan yang ada pada menu petunjuk.

Scene Tentang.unity

Scene yang digunakan untuk mengatur tampilan yang ada pada menu tentang.

visit.unity Scene yang digunakan untuk

mengatur tampilan augmented

reality 2D dengan marker benda nyata

1 7

Script TA

ARS.cs Script yang digunakan untuk

mengatur splashscreen MenuUtama

.cs

Script yang digunakan untuk mengatur menu utama

ScreenSplas h.cs

Script yang digunakan untuk mengatur splashscreen

(33)

commit to user

entang.cs mengatur tampilan tentang

SciptSceneP etunjuk.cs

Script yang digunakan untuk mengatur tampilan petunjuk

4.2.1 Pembuatan Scene Splash Screen

Pembuatan tampilan awal saat aplikasi di jalankan adalah scene splash screen. Tampilan splash screen dapat dilihat pada Gambar 4.44 berikut ini.

Gambar 4.44Splash Screen

Didalam scene splash screen terdapat gameobject yaitu Main Camera. Main camera di gunakan untuk camera utama. Pada scene splash screen terdapat 1 buah script C# yang mengatur gameobject splash screen yaitu ScreenSplash.cs .

SceneSplash.cs digunakan untuk menampilkan gambar splash screen dan

mengatur durasi gambar yang akan di tampilkan.

Pada class SceneSplash dideklarasikan variable public Texture BackMen digunakan untuk mengatur gambar texture yang akan ditampilkan pada posisi fix layar kamera. Berikut potongan script ScreenSplash

void OnGUI (){

(34)

commit to user

Penjelasan script diatas newRectl adalah membuat sebuah bangun baru. Lalu untuk pengaturan ukuran x , y bernilai 0,0 dan Screen.width dan Screen.height adalah untuk mengatur posisi landscape.

4.2.2 Pembuatan Scene Tentang

Pembuatan tampilan scene Tentang yang di dalamnya berisi tentang aplikasi ini dibuat. Tampilan Scene Tentang dapat dilihat pada Gambar 4.45 berikut ini.

Gambar 4.45 Tampilan Tentang

Dalam Scene Tentang terdapat gameobject Main Camera. Main Camera digunakan sebagai camera utama. Pada scene SceneTentang terdapat 1 buah script C# yang mengatur gameobject SceneTentang yaitu ScriptSceneTentang.cs. ScriptSceneTentang.cs digunakan untuk menampilkan gambar

Pada class ScriptScenetentang dideklarasikan variable public Texture BackTentang digunakan untuk mengatur gambar texture yang akan ditampilkan pada posisi fix layar kamera. Berikut potongan script ScriptSceneTentang

void OnGUI (){

GUI.DrawTexture(newRect(0,0,Screen.width,Screen.height),BackTentan);

if (GUI.Button(new Rect(Screen.height * possxBackMU, Screen.width * possyBackMU, Screen.height * .075f , Screen.width * .040f), "",BackMU)){

(35)

commit to user

Application.LoadLevel("MenuUtama"); }

Penjelasan script diatas newRectl adalah membuat sebuah bangun baru. dan Screen.width * possxBackMU dan Screen.height * possyBackMU adalah untuk mengatur posisi landscape.

4.2.3 Pembuatan Scene Petunjuk

Pembuatan tampilan scene Petunjuk yang di dalamnya berisi tentang bagaimana penggunaan atau cara pemakaian aplikasi ini. Tampilan Scene Petunjuk halaman pertama dapat dilihat pada Gambar 4.46 berikut ini.

Gambar 4.46Tampilan Pertama petunjuk

Dalam scene Petunjuk tedapat gameobject yang berisi cube untuk pemberian

background object, serta panah sebelah kanan dengan script

ScriptScenePetunjuk.cs ini adalah potongan script dari pembutan button panah sbelah kanan dengan dideklarasikan variable public GUIStyle BackMU digunakan untuk mengatur gambar texture yang akan ditampilkan pada posisi fix layar kamera.

(36)

commit to user void OnGUI(){

if (GUI.Button(new Rect(Screen.height * possxBackMU, Screen.width * possyBackMU, Screen.width * .3f , Screen.height * .4f),"",BackMU))

Dan animasi panah bergerak menggunakan script jajal.cs. Jajal.cs digunakan untuk menggerakan animasi panah bergerak pada tampilan pertama dan kedua. Tampilan Scene Petunjuk halaman kedua dapat dilihat pada Gambar 4.47 berikut ini.

Gambar 4.47Tampilan Kedua petunjuk

Dalam scene Petunjuk tampilan kedua tedapat gameobject yang berisi cube untuk pemberian background object, gambar marker animasi panah bergerak

menggunakan script jajal.cs dan ScriptScenePetunjuk.cs. Jajal.cs dan

ScriptScenePetunjuk.cs digunakan untuk menggerakan animasi panah bergerak. Potongan script jajal.cs dapat dilihat berikut ini.

using UnityEngine; using System.Collections;

public class jajal : MonoBehaviour {

public Vector2 kece; public Vector2 direc;

(37)

commit to user

public float x1,x2;

// Use this for initialization void Start () {

kece.x = 10; kece.y = 0; }

// Update is called once per frame void Update () {

Vector3 move = new Vector3 (kece.x * direc.x,kece.y * direc.y,0); move *= Time.deltaTime;

transform.Translate(move);

if(transform.position.x>x1 && x1!=80f){ //klo x1 != 80 direc.x = -3; } if(transform.position.x<x2 && x1!=80f){ direc.x = 3; } //=============================================== ======== if(transform.position.x<x1 && x1==80f){ direc.x = 3; } if(transform.position.x>x2 && x1==80f){ direc.x = -3; } //=============================================== ========= if(ScriptScenePetunjuk.indek==1 && x1!= 80f){

(38)

commit to user

transform.position = new Vector3(131, -52.65188f, -1.072327f); x1 = 80f; x2 = 130f; } } }

Selanjutnya potongan script ScriptScenePetunjuk.cs dapat dilihat sebagai berikut ini.

public class ScriptScenePetunjuk : MonoBehaviour { //public Texture BackPetunjuk,background;

public GUIStyle BackMU;

GameObject kepala,kepalamini,kembali,informasi; public float possxBackMU;

public float possyBackMU;

public GameObject[] objek; public static int indek;

// Use this for initialization void Start () { indek = 0; kepala = GameObject.Find("kepala").gameObject; kepalamini = GameObject.Find("kepala mini").gameObject; kembali = GameObject.Find("kembali").gameObject; informasi = GameObject.Find("informasi").gameObject; kepala.renderer.enabled = false; kepalamini.renderer.enabled = false; kembali.renderer.enabled = false;

(39)

commit to user

informasi.renderer.enabled = false; }

// Update is called once per frame void Update () {

} void OnGUI(){

//GUI.DrawTexture(new

Rect(0,0,Screen.width,Screen.height),BackPetunjuk);

if (GUI.Button(new Rect(Screen.height * possxBackMU, Screen.width * possyBackMU, Screen.width * .3f , Screen.height * .4f),"",BackMU)){

indek++;

StartCoroutine(tunggu()); // munculkan kepala dan tombol } if(Input.GetKeyDown(KeyCode.Mouse1)){ indek--; } //==================================================== ==================== if(indek == 0){ objek[0].gameObject.renderer.enabled = true; objek[1].gameObject.renderer.enabled = false; objek[2].gameObject.renderer.enabled = true;

(40)

commit to user } if(indek == 1){ // hp objek[0].gameObject.renderer.enabled = false; objek[1].gameObject.renderer.enabled = true; } if(indek==2){

objek[3].renderer.enabled = true; // info } if(indek==3){ Application.LoadLevel("MenuUtama"); // pindah scene } }

IEnumerator tunggu(){ // membuat method yg untuk

dapat memmanggil yield yg digunakan untuk waktu tunggu objek[2].gameObject.renderer.enabled = false; yield return new WaitForSeconds(3);

kepala.renderer.enabled = true; yield return new WaitForSeconds(1); kepalamini.renderer.enabled = true; yield return new WaitForSeconds(1); kembali.renderer.enabled = true; informasi.renderer.enabled = true;

objek[2].gameObject.renderer.enabled = true; }

(41)

commit to user

Selanjutnya Tampilan petunjuk ketiga yang berisi tampilan yang nantinya menampilankan informasi serta object 3D dan tombol lokasi yang nantinya mengarah ke maps di dalam petunjuk ketiga hanya terdapat tombol anak panah di sebelah kanan apabila di klik akan menuju scene menu utama. Berikut potongan script yang digunakan untuk menuju scene menu utama.

if(indek==3){

Application.LoadLevel("MenuUtama"); // pindah scene

Tampilan petunjuk ketiga dapat dilihat pada Gambar 4.48 berikut ini.

Gambar 4.48Tampilan petunjuk ketiga

4.2.4 Pembuatan Scene Tracking

Pembuatan scene coba diawali dengan langkah yang sama seperti pembuatan menu scene scene sebelumnya. Pada scene ini tidak menggunakan main camera

namun menggunkan AR Camera. Untuk menggunakan AR camera, import SDK

dari vuforia yang telah di download. Selanjtnya masukkan AR camera kedalam hierarchy, lalu hapus main camera. Kemuadia buat C# script pada project, untuk memunculkan objek pada saat kamera smartphone melakukan scanning marker. Setelah melakukan codding, maka akan muncul image target pada window hierarchy. Letakkan objek yang akan ditampilkan dan marker yang berupa SDKdari vuforia kedalam image target. Pembuatan scene tracking dapat dilihat pada Gambar 4.49 berikut ini.

(42)

commit to user

Gambar 4.49 Scene tracking

Selanjutnya merupakan potongan script yang digunakan untuk menampilkan tombol saat smartphone melakukan scanning marker.

Dan berikut ini merupakan potongan script yang di gunakan untuk

memunculkan tombol.

//Script mengaktifkan data set marker pada AR camera

if (mDataSetsToActivate.Contains(dataSetName)) { imageTracker.ActivateDataSet(dataSet);}

//Tutup script mengaktifkan data set marker pada AR camera //Script setting data gambar marker

ImageTargetType IEditorImageTargetBehaviour.ImageTargetType { get{ return mImageTargetType; }}// setting rasio

bool IEditorImageTargetBehaviour.SetAspectRatio(float aspectRatio) {if (mTrackable == null)//setting type image target

{ mAspectRatio = aspectRatio; return true; }

return false; }

bool IEditorImageTargetBehaviour.SetImageTargetType(ImageTargetType imageTargetType)// menampilkan objek augmented reality

{ if (mTrackable == null)

{mImageTargetType = imageTargetType; return true; }

(43)

commit to user

if (newStatus == TrackableBehaviour.Status.DETECTED || //saat objek marker di temukan

newStatus == TrackableBehaviour.Status.TRACKED)

{ OnTrackingFound();} else { OnTrackingLost(); }// saat objek marker tidak di temukan

private void OnTrackingFound() { // merender objek yang akan ditampilkan Renderer[] rendererComponents = GetComponentsInChildren<Renderer>(true); foreach (Renderer component in rendererComponents) {

component.enabled = true;}

private void OnTrackingFound() { // merender objek yang akan ditampilkan Renderer[] rendererComponents = GetComponentsInChildren<Renderer>(true); Foreach(Renderer component in rendererComponents) {

component.enabled = false;}

4.2.5 Pembuatan Scene Menampilkan Maps

Pembuatan tampilan scene menampilkan informasi tempat benda tersebut diteumkan. Tampilan Scene ini dapat dilihat pada Gambar 4.50 berikut ini.

Gambar 4.50 Scene Maps Buaya Muara

Di dalam terdapat script SceneMapsBuaya.cs Selanjutnya merupakan

potongan script yang digunakan untuk memunculkan informasi benda tersebut ditemukan.

(44)

commit to user

Dan berikut ini merupakan potongan script yang di gunakan untuk

memunculkan informasi benda tersebut ditemukan. using UnityEngine;

using System.Collections;

public class mapsbuayamuara : MonoBehaviour { string exampleUrl = "http://maps.googleapis.com/maps/api/staticmap?center=Gond angrejo,"+ "Central+Java,Indonesia&zoom=13&size=1200x1000&mapty pe=roadmap&markers=color:blue%7Clabel:110.834885,-7.455241"+ "&sensor=false"; string key =

"AIzaSyCnhQ-B2n-8FjmeqEjK_kJ8z8IxK4hmvkw"; //put your own API key here. void Update(){ if(Input.GetKey(KeyCode.Escape)) { Application.LoadLevel("coba"); } } void OnGUI(){ } IEnumerator Start() { WWW www = new WWW(exampleUrl+key); yield return www; renderer.material.mainTexture = www.texture; } }

(45)

commit to user 4.2.6 Pembuatan Aplikasi menjadi .apk

Setelah melakukan proses pembuatan seperti yang telah dijelaskan diatas, maka langkah selanjutnya adalah mengubah aplikasi ke dalam format .apk agar dapat di jalankan pada sistem operasi android minimal versi 2.0.1. Adapun langkah-langkahnya yang pertama, klik file lalu pilih build setting. Selanjutnya masukkan scene- scene yang telah di buat sebelumnya ke dalam window build setting sesuai dengan urutan. Klik build, tunggu sampai proses build selesai. Setelah selesai akan muncul tampilan windows yang menunjukan dimana tempat hasil build tersebut di taruh. Gambar proses mengubah aplikasi menjadi .apk dapat dilihat pada Gambar 4.51 berikut ini.

Gambar 4.51Proses mengubah project menjadi .apk

4.2.7 Installing aplikasi pada device mobile bebrbasis android

Setelah berhasil proses build dan format file telah menjadi .apk maka langkah selanjutnya adalah menginstal aplikasi ke device mobile bersistem operasi android. Proses instalasi aplikasi pada smartphone dapat dilihat pada gambar berikut ini.

(46)

commit to user

Gambar 4.52 Proses Install di Device

(47)

commit to user

Gambar 4.54 Proses Install di Device 4.3 Hasil Implementasi

4.3.1Tampilan SplashScreen

Pada tampilan ini, hanya berisi gambar sebagai tampilan awal dan sebagai proses transisi atau perpindahan ke menu utama. Tampilan splash screen dapat di lihat pada gambar 4.55.

(48)

commit to user

4.3.2 Tampilan Menu Utama

Tampilan menu utama merupakan tampilan yang berisi 4 tombol yang digunakan untuk navigasi awal di aplikasi ini. Terdapat 4 tombol yang ada di menu utama antara lain tentang,tracking,petunjuk dan keluar. Tombol tentang berisi mengenai informasi tentang aplikasi ini. Tombol tacking tombol yang digunakan untuk memulai aplikasi ini. Dan tombol keluar untuk keluar dari aplikasi ini. Menu utama dapat dilihat pada gambar berikut ini.

Gambar 4.56 Menu Utama

4.3.3 Tampilan petunjuk

Tampilan menu petunjuk digunakan untuk menunjukkan penggunaan aplikasi. Pada menu petunjuk terdapat tombol anak panah yang digunakan untuk melanjutkan ke halaman selanjutnya. Menu petunjuk dapat dilihat pada gambar berikut ini.

(49)

commit to user

Gambar 4.58Tampilan kedua petunjuk

Gambar 4.59Tampilan ketiga petunjuk 4.3.4 Tampilan menu tracking tour

Menu tracking tour merupakan menu setelah menu utama. Menu ini adalah menu utama dari aplikasi yang di dalamnya terdapat proses scanning marker benda nyata dan kemudian dapat memunculkan object tombol kembali dan tombol lokasi. Gambar menu tracking tour dapat dilihat pada gambar berikut ini.

(50)

commit to user

Gambar 4.60 Tampilan menu tracking tour

(51)

commit to user

(52)

commit to user

(53)

commit to user

Selanjutnya tampilan menu tracking visit untuk marker berupa gambar yang didalamnya ada objek 3 dimensi dari benda tersebut. Berikut tampilan menu tracking visit :

(54)

commit to user

Gambar 4.68 Tampilan menu tracking visit

(55)

commit to user

(56)

commit to user

(57)

commit to user

4.3.5 Tampilan menu tentang

Tampilan tentang berisi tentang informasi mengenai aplikasi.Tampilan menu tentang dapata dilihat pada gambar berikut ini.

Gambar 4.75Tampilan menu tentang

4.3.6Tampilan menu maps

Tampilan menu maps berisi tentang peta dimana ditemukan letak benda purbakala. Tampilan menu maps dapat dilihat pada gambar berikut.

(58)

commit to user

Gambar 4.76 Tampilan maps buaya muara

(59)

commit to user

Gambar 4.78 Tampilan maps kerbau purba

(60)

commit to user

Gambar 4.80Tampilan maps tengkorak sangiran 8

(61)

commit to user

Gambar 4.82Tampilan maps Museum Sangiran

(62)

commit to user 4.4 Pengujian

Untuk melakukan pengujian aplikasi yang telah dibuat dilakukan dengan 3 cara pengujian, pertama Play pada Unity3d, selanjutnya merubah format menjadi .apk agar dapat di jalankan pada devivce mobile android dengan berbagai device pengujian terhadap respon pengguna. Berikut ini merupakan data hasil pengujian pada beberapa perangkat bersistem operasi android.

4.4.1 Pengujian fungsional aplikasi

Pengujian fungsional aplikasi adalah pengujian yang memofukuskan pada fungsi yang telah dibuat di dalam aplikasi. Tujuan pengujian ini dimaksudkan untuk menguji semua fungsi yang telah dibuat dalam aplikasi apakah berjalan dengan lancar atau masih terdapat error. Pengujian ini dilakukan dengan cara membuat tabel checklist yang berisi daftar fungsi yang terdapat pada aplikasi yang di tes satu per satu kemudian diberikan keterangan mengenai hasil pengujian. Data hasil pengujian dapat di lihat pada Tabel berikut ini.

Pengujian Fungsional Aplikasi Tabel 4.3.

No Fungsi Jenis Test Keterangan

1 Scene Splash Screen v Splash Screen muncul,saat awal aplikasi dijalankan

Main Menu v Main menu muncul,setelah

splash screen

Petunjuk v Muncul, jika tombol Petunjuk

ditekan pada main menu

Tentang v Muncul, setelah tombol Tentang

ditekan pada menu utama

Tracking v Muncul setelah tombol tracking

ditekan di menu utama.

Informasi v Muncul informasi setelah tekan

tombol informasi

2 Button Tentang v Berfungsi, untuk menampilkan informasi tentang aplikasi ini.

(63)

commit to user

Tracking v Berfungsi, pada saat aplikasi dijalankan

Petunjuk v Berfungsi, dan untuk

menampilkan cara menggunakan aplikasi.

Keluar v Berfungsi, dan untuk keluar

aplikasi

Kembali v Berfungsi, dan untuk kembali ke

menu sebelumnya

Informasi v Berfungsi, untuk menampilkan

object 3D dan informasi benda purbakala. 3 Object 3 Dimensi Tengkorak Sangiran 4 (S.4) (replika)

v Dapat di tampilkan dengan baik

Tengkorak Sangiran 8 (S.8)

(replika)

Tengkorak Sangiran 17 (S.17)

(replika)

Fragmen fosil rahang bawah bagian kiri Stegodon Sp

(64)

commit to user rahang bawah bagian kiri Elephas namadicus Fosil tengkorak buaya muara (Crocodylus)

Fosil tengkorak buaya sungai (Gavialis Bengawanesis)

Batu karang v Dapat di tampilkan dengan baik

4 Grafis Tampilan

aplikasi

v Dapat ditampilkan dengan baik

Resolusi Layar v Dapat ditampilkan dengan baik

pada beberapa resolusi layar yang berbeda

Dari hasil pengujian fungsional diatas dapat diambil kesimpulan, bahwa aplikasi ini dapat dijalankan dengan lancar dan semua fungsi yang terdapat didalamnya dapat digunakan.

.

4.4.2 Pengujian Pada Device

Pengujian kedua yaitu pengujian pada device dilakukan dengan mengambil sample dari beberapa device dengan spesifikasi yang berbeda. Data pengujian device dapat di lihat pada tabel berikut ini

(65)

commit to user

Pengujian pada device Tabel 4.4.

No Jenis Device OS Tes Keterangan

1 Samsung Galaxy note 3 Spek : Dualcore prossecor 1.5 GHz; 1,5gb RAM; Display8 inch, resolusi800 x 1280 px, GPU A-Mail 400 Android OS, v4.2.2 (Jelly Bean)

Scene Semua scene dapat dijalankan dengan baik

Object 3 dimensi

Semua objek 3 dimensi dapat ditampilkan dengan baik dan lancar

Tombol Seluruh tombol fungsi berfungsi

dengan baik

Grafis Tampilan grafis penuh, resolusi

gambar terlihat cukup jelas. Agak ngelag saat masuk di menu tracking. 2 Samsung Galay young new. Spek : display 3,2 inc, resolusi 320 x 480 px,768mbRAM Single Core Proseccor 1Ghz,GPU Adreno 200. Android OS, v4.1.2 (Jelly Bean)

Object 3 dimensi

Semua objek 3 dimensi dapat ditampilkan dan ada sedikit lag tapi masih bisa.

dengan baik

gambar terlihat cukup jelas. Agak ngelag saat masuk di menu tracking tapi masih bisa.

3 Andormax i2. Spek : display 3,2 inc, resolusi 320 x 480 px, 1,5gb RAM; Android OS, v4.1.2 (Jelly Bean)

Object 3 dimensi

(66)

commit to user

dengan baik

4 Sony Xperia M C1905. Qualcomm Snapdragon S4 Plus MSM8227, Dual-core 1 GHz Krait, Adreno 305. 480 x 854 pixels, 4.0 inches. 1 GB RAM Android OS, v4.2.2 (Jelly Bean)

Scene Semua scene dapat dijalankan

dengan baik Object 3

dimensi

dengan baik

Dari data hasil pengujian pada beberapa device didapatkan hasil untuk spesifikasi minimum aplikasi dapat dijalankan pada minimum android versi 2.3 (Gingerbread), RAM 1Gb, CPU single core 1Ghz, resolusi 320 x 480 px.

4.4.3 Pengujian Berdasarkan Ketertarikan User

Pengujian berdasar ketertarikan user dilakukan dengan menggunakan google form. Dimana terlebih dahulu penulis membuat sebuah google form mengenai kuisioner aplikasi e-sangiran. Kuisioner terdiri dari tiga aspek yaitu aspek pembelajaran, aspek komunikatif visual, dan aspek rekayasa perangkat lunak. Kemudian penulis memberikan sebuah link untuk kuisioner tersebut, yang nantinya bisa diakses oleh responder. Selain link untuk kuisioner, penulis juga memberikan link untuk mengunduh aplikasi yang telah dibuat. Untuk kuisioner aplikasi e-sangiran pada link berikut https://docs.google.com/forms/d/1EPPlL. Penulis mendapatkan responder sejumlah 31 responder. Berikut tampilan hasil kuisioner berupa grafik dari tiap aspek yang telah dirangkum oleh penulis.

(67)

commit to user

Gambar grafik hasil kuisioner pada aspek pembelajaran.

Aspek pembelajaran meliputi hal informasi yang disampaikan berupa objek 3 dimensi dan text. Dari 31 responden dapat dikatakan 86 % setuju bahwa aplikasi e-sangiran memiliki aspek pembelajaran.

Gambar 4.84 Grafik Hasil Kuisioner Aspek Pembelajaran Gambar grafik hasil kuisioner pada aspek komunikatif visual

Aspek komunikatif visual meliputi desain, objek 3 dimensi, sound dan tombol navigasi. Dari 31 responder dapat dikatakan 84 % menyatakan setuju bahwa aplikasi e-sangiran dikatan menarik dari aspek komunikatif visual.

Gambar 4.85 Grafik Hasil Kuisioner Aspek Komunikatif Visual Gambar grafik hasil kuisioner pada aspek rekayasa perangkat lunak

26% 60% 14% 0%

Aspek Pembelajaran

Sangat Setuju Setuju Tidak Setuju Tidak Tahu 14% 70% 10% 6%

Aspek Komunikatif Visual

Sangat Setuju Setuju Tidak Setuju Tidak Tahu

(68)

commit to user

Aspek rekayasa perangkat lunak meliputi kompatibel terhadap hardware dan penggunaan space momori . Dari 31 responder dapat dikatakan 88 % menyatakan setuju bahwa aplikasi e-sangiran dikatan sudah layak dari aspek rekayasa perangkat lunak.

Gambar 4.86Grafik Hasil Kuisioner Aspek Rekayasa Perangkat Lunak 17%

71% 8%

4%

Aspek Rekayasa Perangkat Lunak

Sangat Setuju Setuju Tidak Setuju Tidak Tahu