PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

MODUL 3 - Inventory GUI

A. TUJUAN
- Mahasiswa dapat menggunakan inventory GUI sebagai pengolah nilai variable dinamis
menggunakan Unity
- Mahasiswa dapat menggunakan asset yang telah disediakan untuk membuat game di
Unity
- Mahasiswa dapat membuat game sederhana untuk mengambil satu object dan
menampilkan nilainya dalam bentuk teks maupun single icon
- Mahasiswa dapat mengambil satu object beberapa kali dan menampilkan hasilnya
dalam bentuk total teks maupun multiple status icon

B. PETUNJUK
1. Awali setiap kegiatan praktikum dengan berdoa
2. Baca dan pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik
3. Kerjakan tugas-tugas praktikum dengan baik, sabar dan jujur
4. Tanyakan kepada dosen apabila ada hal-hal yang kurang jelas

C. ALOKASI WAKTU: 6 jam pelajaran

D. DASAR TEORI
Pada hampir semua game development, hampir tidak bias terlepas dari nilai-nilai inventory
dinamis yang merupakan hasil koleksi item item tertentu. Beberapa contohnya antara lain
mendapatkan kunci untuk membuka pintu, mengumpulkan peluru untuk senjata, koin dan bintang
untuk score, item hati atau medical kit untuk life atau health.

Modul ini akan mengajarkan pada mahasiswa solusi untuk menampilkan pada player apakah
karakter sudah mendapatkan item yang telah diambil atau disentuh, dan berapa banyak item
yang mereka miliki.

Terdapat dua bagian design perangkat lunak untuk mengimplementasikan inventory. Pertama,
bagaimana kita memilih untuk merepresentasikan data dari item inventory (tipe dan struktur data).
Kedua, bagaimana kita memilih untuk menampilkan informasi tentang inventory pada player (User
Interface).

Langkah awal yang perlu diketahui adalah beberapa sifat dasar dari item inventory pada game:

1. Single items:
Contoh: satu-satunya kunci untuk naik level dan pakaian sihir.
Tipe data : Boolean (True / False)
UI : tidak ditampilkan (jika False) atau text/image (True). Dapat juga dituliskan no key
/ key, atau dua gambar dimana gambar pertama menampilkan saat False dan gambar
kedua saat True.
 PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi
2. Continues items:
Contoh: Waktu tersisa, health / life, kekuatan shield
Tipe data: Float (0,00.1,00) atau integer skala (0% .. 100%)
UI: nilai angka atau progress bar/ chart pie.
3. Dua atau lebih item yang sama
Contoh: lives / nyawa tersisa, jumlah anak panah atau peluru yang tersisa
Tipe data: integer
UI : nilai angka atau gambar
4. Kumpulan dari item yang saling terkait
Contoh: kunci yang berbeda-beda warna untuk membuka pintu dengan warna yang
sesuai, ramuan untuk kemampuan tertentu.
Struktur data: struct atau class dari tipe umum item (contoh, class
Key(color/cost/doorOpenTagString), disimpan sebagai array atau List.
UI : list teks atau grid list
5. Kumpulan dari item yang berbeda
Contoh: kunci, koin, hati, bintang, ramuan, senjata, tool semua yang jadi satu
kesatuan system inventory.
Struktur Data: List<> atau Dictionary<> atau array object, yang merupakan instances
dari class yang berbeda untuk tiap tipe item.

E. LATIHAN PRAKTIKUM
1. Menyiapkan Scene / Environment
Membuat Aplikasi Mini-Game sederhana 2D SpaceGirl
Mempersiapkan environment game
Untuk membuat game ini, anda membutuhkan beberapa gambar pada folder
1362_02_01/Sprites.

Berikut adalah beberapa langkah untuk mempersiapkan environment game:

1. Buat new 2D project kosong.
2. Import folder Sprites kedalam project anda.
PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

3. Set ukuran layar player menjadi 800 x 600. Edit -> Project Settings -> Player, pada opsi
Resolution and Presentation, uncheck Default is Full Screen.

4. Pilih panel Game, pilih Standalone (800 x 600)

5. Tampilkan Tags & Layers dengan cara pilih Edit -> Project Settings -> Tags and Layers.
Pada bagian Inspector, expand Sorting Layers. Gunakan tanda + pada Sorting Layers
dan tambahkan dua layer baru dengan nama Background dan Foreground.
PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

6. Drag background-blue dari panel project kedalam Game atau Hierarchy untuk
membuat gameObject.
7. Set Sorting Layer dari GameObject background-blue menjadi Background (pada
komponen Sprite Renderer)

8. Drag Gambar Star ke GameObject. Tambahkan Tag Star pada Inspector Tags & layers.
Set Tag dari Star Object menjadi Star.
PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

9. Tambahkan Box Collider 2D pada gameObject Star (Add Component -> Physics 2D ->
Box Collider 2D) dan check pada Is Trigger.

10. Tambahkan girl1 ke dalam gameObject, rename menjadi Player SpaceGirl. Sorting
layer ubah menjadi Foreground. Tambahkan Box Collider 2D. Tambahkan Rigidbody
2D (Add Component -> Physics 2D -> RigidBody 2D). Set Gravity Scale menjadi 0 agar
tidak jatuh kebawah layar karena simulasi gravitasi.
PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

11. Buat Folder baru untuk menyimpan script dan beri nama Script.
12. Buat C# Script PlayerMove (dalam folder Script) dan tambahkan dalam GameObject
Player SpaceGirl:
using UnityEngine;
using System.Collections;
public class PlayerMove : MonoBehaviour
{
public float speed = 10;
private Rigidbody2D rigidBody2D;
void Awake()
{
rigidBody2D = GetComponent<Rigidbody2D>();
}
void FixedUpdate()
{
float xMove = Input.GetAxis("Horizontal");
float yMove = Input.GetAxis("Vertical");
float xSpeed = xMove * speed;
float ySpeed = yMove * speed;
Vector2 newVelocity = new Vector2(xSpeed, ySpeed);
rigidBody2D.velocity = newVelocity;
}
}
PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

13. Simpan Scene dengan nama Main Scene ke dalam folder Scenes. Coba jalankan
program dengan menekan tombol play dibagian tengah atas. Jika anda dapat
menggerakkan player menggunakan tombol panah atau WASD, maka package telah
siap dipakai. Tidak akan terjadi apa-apa saat Player menyentuh bintang karena belum
ada action yang dilakukan saat terjadi tumbukan dengan bintang. Pelajari Script
PlayerMove baik-baik.

14. Karena akan membuat 4 skenario mini game seperti yang telah dituliskan pada dasar
teori, maka export package scene yang telah dibuat dan beri nama sembarang (Asset -
> Export Package.
 PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

2. Tampilkan pengambilan objek tunggal dengan teks membawa atau tidak membawa
1. Buat New Project 2D kosong. Import Package dari Scene yang telah dibuat
sebelumnya (Asset -> Import Package -> Custom Package). Set Ukuran layar 800 x
600. Set Game aspect ratio juga di 800 x 600. Pilih Scene utama. Jangan lupa buat
sorting layer Background dan Foreground, dan set sorting layer tiap gameObject
sesuai layernya (star disorting layer foreground, dsb).

2. Tambahkan UI Object Text (Create -> UI -> Text). Ubah namanya menjadi Text-bawa-
bintang. Kemudian ubah isi textnya menjadi Bawa Bintang : Tidak.

3. Import Font dari folder 1362_02_02 kedalam project. Set font dari Text-bawa-bintang
menjadi Xolonium-Bold, warna kuning, ukuran 32, tinggi 50.
PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

4. Pada Anchor Presets, pilih pivot dan posisi (Shift+Alt) top-stretch.

5. Buat Script Player kedalam game object Text-bawa-bintang.

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class Player : MonoBehaviour
{
public Text starText;
private bool carryingStar = false;
void Start()
{
UpdateStarText();
}
void OnTriggerEnter2D(Collider2D hit)
{
if (hit.CompareTag("Star"))
{
carryingStar = true;
UpdateStarText();
Destroy(hit.gameObject);
}
}
private void UpdateStarText()
{
string starMessage = "Tidak Bawa Bintang :-(";
if (carryingStar) starMessage = "Bawa Bintang :-)";
starText.text = starMessage;
}
}

6. Pada Inspector Player dalam GameObject Player SpaceGirl, pilih Star Text dan tunjuk
Text-bawa-bintang
PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

7. Jalankan scene-nya, jika anda melihat hasil seperti screenshot berikut maka anda
telah berhasil. Pelajari Script Player dengan baik.

8. Pola desain game (pendekatan praktis terbaik) dinamakan pola MVC (Model-View-
Controller) adalah memisahkan script yang meng-update UI dengan script yang
mengubah player dan variable game seperti score dan daftar inventory. Hal ini
dilakukan agar arsitektur game yang dibuat terstruktur dengan baik dan mudah
diperbaiki. Untuk melakukan pemisahan pola View, berikut adalah beberapa langkah
yang dipakai:
1. Buat Script PlayerInventoryDisplay untuk gameObject Player-SpaceGirl. Set
StarText menjadi : Text-bawa-bintang
 PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class PlayerInventoryDisplay : MonoBehaviour

{
public Text starText;
public void OnChangeCarryingStar(bool carryingStar)
{
string starMessage = "Tidak Bawa Bintang :-(";
if (carryingStar) starMessage = "Bawa Bintang :-)";
starText.text = starMessage;
}
}

2. Hapus component Player dari gameobject Player-SpaceGirl dan ganti dengan

script baru PlayerInventory.
using UnityEngine;
using System.Collections;

public class PlayerInventory : MonoBehaviour

{
private PlayerInventoryDisplay playerInventoryDisplay;
private bool carryingStar = false;
void Start()
{
playerInventoryDisplay = GetComponent <
PlayerInventoryDisplay > ();
playerInventoryDisplay.OnChangeCarryingStar(carryingStar);
}
void OnTriggerEnter2D(Collider2D hit)
{
if (hit.CompareTag("Star"))
{
carryingStar = true;

playerInventoryDisplay.OnChangeCarryingStar(carryingStar);
Destroy(hit.gameObject);
}
}
}

3. Tampilan Single Pickup menggunakan Icon

Terkadang untuk menampilkan Pickup object tidak harus menggunakan teks, tetapi
menggunakan icon. Pada beberapa kasus, icon lebih jelas (tidak perlu membaca dan berpikir) dan
juga berukuran lebih kecil daripada pesan teks untuk menunjukkan status pemain dan inventory.

1. Buat New Project 2D kosong. Import Package dari Scene yang telah dibuat
sebelumnya di E.1. (Asset -> Import Package -> Custom Package). Set Ukuran layar
800 x 600. Set Game aspect ratio juga di 800 x 600. Pilih Scene utama. Jangan lupa
buat sorting layer Background dan Foreground, dan set sorting layer tiap gameObject
sesuai layernya (star disorting layer foreground, dsb).
2. Pada Panel Hierarchy, tambahkan UI Image, ubah namanya menjadi Image-star-icon.
PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

3. Drag sprite icon_no_star_100 (di folder sprites) ke source image dari object Image-
star-icon.
4. Klik tombok Set Native Size pada component image.

5. Posisikan icon di kiri atas.

6. Tambahkan script Player pada gameObject Player SpaceGirl.
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class Player : MonoBehaviour
{
public Image starImage;
public Sprite iconStar;
public Sprite iconNoStar;
private bool carryingStar = false;
void OnTriggerEnter2D(Collider2D hit)
{
if (hit.CompareTag("Star"))
{
carryingStar = true;
UpdateStarImage();
Destroy(hit.gameObject);
}
}
private void UpdateStarImage()
{
if (carryingStar)
starImage.sprite = iconStar;
else
starImage.sprite = iconNoStar;
}
}

7. Pada Player Component dari Player-SpaceGirl, isikan object image-no-star pada Star Image
field. Pada field Icon Star isikan dengan icon_star_100 dari folder Sprites, pada field Icon No
Star isikan dengan icon_no_star_100 dari folder sprites.
 PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

4. Tampilkan Multiple Pickups dengan total teks

Praktek berikut akan menunjukkan bagaimana menampilkan total item yang diambil dan
ditampilkan dalam bentuk teks jumlah total.

1. Buat New Project 2D kosong. Import Package dari Scene yang telah dibuat
sebelumnya di E.1. (Asset -> Import Package -> Custom Package). Set Ukuran layar
800 x 600. Set Game aspect ratio juga di 800 x 600. Pilih Scene utama. Jangan lupa
buat sorting layer Background dan Foreground, dan set sorting layer tiap gameObject
sesuai layernya (star disorting layer foreground, dsb).
2. Tambahkan UI teks baru. Ubah namanya menjadi Text-bawa-bintang. Ubah teksnya
menjadi Bintang = 0
3. Tambahkan font yang sama digunakan pada E.2 ke dalam project ini, set font Text-
bawa-bintang menjadi Xolonium Bold, ukuran 32, alignment vertical center,
horizontal center, posisikan rect transform Top-stretch, dengan height 50.
PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

4. Buat script Player, tambahkan kedalam component Player-SpaceGirl.

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class Player : MonoBehaviour
{
public Text starText;
private int totalStars = 0;
void Start()
{
UpdateStarText();
}
void OnTriggerEnter2D(Collider2D hit)
{
if (hit.CompareTag("Star"))
{
totalStars++;
UpdateStarText();
Destroy(hit.gameObject);
}
}
private void UpdateStarText()
{
string starMessage = "stars = " + totalStars;
starText.text = starMessage;
}
}

5. Pada field Star text di component Player pada gameObject Player-SpaceGirl, isikan Text-
bawa-bintang.

6. Duplicate gameObject sebanyak 3 kali dan tempatkan sesuai keinginan anda.

 PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

5. Tampilan Multiple Pickups dengan Multiple Status Icon

Jika item yang akan diambil sudah terbatas dan tidak terlalu banyak, menggunakan icon akan
lebih baik daripada menggunakan teks. Sangat disarankan menggunakan teks hanya jika memang
itemnya berjumlah banyak. Pada praktikum kali ini akan digunakan icon bintang kuning utk
menunjukkan jumlah bintang terkumpul dan abu-abu untuk menunjukkan bintang yang belum
didapat. Pada praktikum kali ini akan diterapkan MVC seperti yang sudah ditunjukkan pada subbab
E.2.8.

Berikut adalah langkah-langkahnya:

1. Buat New Project 2D kosong. Import Package dari Scene yang telah dibuat
sebelumnya di E.1. (Asset -> Import Package -> Custom Package). Set Ukuran layar
800 x 600. Set Game aspect ratio juga di 800 x 600. Pilih Scene utama. Jangan lupa
buat sorting layer Background dan Foreground, dan set sorting layer tiap gameObject
sesuai layernya (star disorting layer foreground, dsb).
2. Tambahkan script player pada gameObject Player-SpaceGirl. Berikut scriptnya:
PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class Player : MonoBehaviour
{
private PlayerInventoryDisplay playerInventoryDisplay;
private int totalStars = 0;
void Start()
{
playerInventoryDisplay = GetComponent < PlayerInventoryDisplay >
();
}
void OnTriggerEnter2D(Collider2D hit)
{
if (hit.CompareTag("Star"))
{
totalStars++;
playerInventoryDisplay.OnChangeStarTotal(totalStars);
Destroy(hit.gameObject);
}
}
}

3. Buat duplikat gameObject star sebanyak 3 dan tempatkan seseuai keinginan anda.

4. Buat script PlayerInventoryDisplay pada gameObject Player-SpaceGirl. Berikut scriptnya:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class PlayerInventoryDisplay : MonoBehaviour
{
public Image[] starPlaceholders;
public Sprite iconStarYellow;
public Sprite iconStarGrey;
public void OnChangeStarTotal(int starTotal)
{
for (int i = 0; i < starPlaceholders.Length; ++i)
{
if (i < starTotal)
starPlaceholders[i].sprite = iconStarYellow;
else
starPlaceholders[i].sprite = iconStarGrey;
}
}
}

5. Buat UI image baru dan beri nama Image-star0. Pilih Image-star0 dari gamObject, pada field
source image drag sprite icon_star_grey_100 dari sprite folder. Klik Set Native Set. Set posisi
pada kotak Top-Left.
 PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

6. Duplicate Image-star0 menjadi tiga image lagi dengan nama Image-star1, Image-star2, dan
Image-star3. Posisikan bersebelahan.

7. Pilih gameObject Player-SpaceGirl. Akses komponen Player Inventory Display dan set
property size pada Star Placeholders menjadi 4. Isikan elemen 1, 2, 3, dan 4 dengan UI
image Image-star0,1,2, dan 3. Set icon Star Yellow dgn icon_star_100, dan icon Star Grey
dengan icon_star_grey_100.

8. Jalankan scene yang sudah dibuat.

A. TUGAS PRAKTIKUM
Buat game yang berisi single object A pickup ditampilkan dalam icon, multiple object B
pickup ditampilkan dalam bentuk teks total object dan multiple object C pickup ditampilkan
dalam bentuk multiple status icon (3 object yang berbeda). Cari Sprite 2D png file gratis dari
internet. Contoh web free sprites:
a. http://opengameart.org/content/complete-art-kits
PRAKTIKUM MULTIMEDIA TERAPAN Jurusan Teknologi Informasi

b. http://kenney.nl/assets
c. http://www.gameart2d.com/freebies.html

--- SELAMAT BELAJAR ---