Anda di halaman 1dari 42

Senin, 9 Nopember 2020

MAGANG + PELATIHAN GURU

MEMBANGUN GAME EDUKASI

MASPION IT
ICON IT INDONESIA
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

Magang + Pelatihan Guru

Membangun Game Edukasi via Unity

Pada kesempatan kali ini kita akan belajar membuat sebuah game edukasi sederhana
tentang belajar abjad. Pembuatan game edukasi ini dibuat menggunakan software
Unity. Sebelum kita mulai, anda perlu mengunduh file berikut untuk digunakan dalam
pelatihan ini terlebih dahulu :
https://drive.google.com/drive/folders/1wLD34fam2tB2dOUXfKNLI3u8ufnS-
pu8?usp=sharing

1. Selanjutnya kita akan buat projek baru. Caranya buka aplikasi Unity Hub.
Kemudian pilih tombol “New”.

2. Selanjutnya anda harus mengisi nama projek / game yang akan anda buat,
tentukan pula lokasi untuk menyimpan projek tersebut. Pada bagian “Templates”
pilih 2D. Jika sudah semua maka pilih “Next”.

1 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

3. Tunggu hingga projek baru selesai dibuat.

4. Berikut adalah tampilan dari projek baru di dalam Unity yang telah dibuat.

5. Pertama kita perlu mengatur ukuran game yang akan kita buat terlebih dahulu
yang nantinya digunakan sebagai acuan pembuatan game tersebut. Caranya pilih
tab “Game”, kemudian tekan bagian “Free Aspect”. Selanjutnya pilih tombol plus
untuk menambahkan ukuran baru.

2 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

6. Karena kita akan membuat game untuk platform mobile, maka buat ukuran baru
dengan nilai width 1280 dan height 720. Anda dapat mengisi nama label ukuran
tersebut sesuai dengan keinginan anda. Jika sudah maka pilih “OK”.

7. Kita berpindah pada tab “Project”, tab ini berisi file-file pendukung yang kita
gunakan untuk membuat game. Anda juga dapat menambahkan atau membuat
file baru di dalam tab “Project” ini. Buka folder Scenes dengan cara menekan
folder sebanyak 2 kali.

3 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

8. Selanjutnya pilih file “SampleScene” yang ada dan ganti namanya menjadi
“MainMenu”. Cara mengganti namanya bisa menggunakan klik kanan pada file
kemudian pilih “rename” ataupun tekan “F2” pada keyboard. Scene ini fungsinya
untuk menyusun tampilan serta segala macam perintah yang ada di dalam game.

9. Untuk membuka / meng-edit scene, anda dapat melakukannya dengan cara


menekan 2 kali pada scene tersebut.
10. Selanjutnya kita akan menambahkan asset yang akan kita gunakan ke dalam Unity.
Caranya extract file yang telah anda download sebelumnya dengan cara klik kanan
pada file tersebut kemudian pilih “Extract to”.

11. Untuk menambahkan file ke dalam Unity, anda dapat melakukannya dengan cara
menarik file tersebut ke dalam tab “Project” Unity.

4 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

12. Tunggu hingga prosesnya selesai dan anda dapat melihat file yang telah anda
tambahkan ke dalam Unity.

13. Selanjutnya kita akan menambahkan background di dalam scene “MainMenu”


dengan cara klik kanan pada bagian dalam tab “Hiearchy” kemudian pilih UI >
Image.

14. Atau bisa juga dengan cara pilih GameObject > UI > Image.

5 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

15. Selanjutnya pilih “Image” yang telah kita buat pada tab “Hierarcy”, ubah namanya
menjadi “Background” untuk memudahkan kita dalam mengenali GameObject
yang telah kita buat di dalam scene tersebut.

16. Masih dalam kondisi “Background” terseleksi, lihat tab “Inspector” dan ubah
“Anchor Presets”-nya sehingga width dan height-nya bernilai stretch. Ketika akan
memilih stretch, tekan tombol “Alt” pada keyboard agar posisi GameObject
tersebut mengikuti ukuran layar device. Pengaturan ini berguna untuk membuat
gambar atau background bersifat responsive ukurannya.

17. Kemudian lihat component “Image”. Pada bagian “source image”, pilih titik kecil
yang ada di samping kolom “source image”. Selanjutnya akan muncul jendela
berisi gambar-gambar yang dapat kita tambahkan ke dalamnya. Pilih gambar
background dan tutup jendela tersebut untuk melihat perubahan yang ada pada
GameObject “Background”.

6 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

18. Pada tahap ini kita akan menambahkan button / tombol di dalam game agar dapat
kita isi dengan sebuah perintah nantinya. Caranya buat sebuah “Image” seperti
yang telah kita lakukan sebelumnya dan beri nama “Play Button”.

19. Lihat tab “Inspector”, pada bagian “Rect Transform” atur Pos X bernilai 0, Pos Y
bernilai -180, width bernilai 220, dan height bernilai 220. Sedangkan pada bagian
“Image” tambahkan gambar “play button” ke dalam “source image”.

7 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

20. Masih di dalam tab “Inspector” GameObject “Play Button”, scroll ke bawah pada
tab tersebut. Anda akan menemui tombol “Add Component”. Pilih tombol
tersebut dan ketikkan “Button”, maka akan muncul component “Button”, pilih
component “Button” seperti pada contoh dengan cara menekan component
tersebut.

21. Maka sebuah component baru berupa “Button” akan tertambahkan ke dalam
GameObject tersebut.

8 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

22. Tambahkan button baru yang akan kita gunakan sebagai tombol aktif dan non
aktif musik, beri nama “Music Button On”. Caranya sama dengan langkah
sebelumnya. Namun pada bagian “Rect Transform” atur “Anchor Presets”
menjadi width bernilai “right” sedangkan height bernilai “top”. Selanjutnya nilai
“Pos X” menjadi -90, “Pos Y” -90, “Width” 90 dan “Height” 90.

23. Tambahkan sebuah “Image” baru yang akan kita gunakan untuk tampilan judul
game, beri nama “Game Title”.
24. Atur nilai “Rect Transform” dan “Image” sesuai dengan gambar.

9 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

25. Tampilan game yang kita miliki saat ini seperti berikut.

26. Nah kita sudah berhasil membuat tampilan game untuk bagian Main Menu.
Tahap selanjutnya kita akan membuat sebuah script yang nantinya akan kita
tambahkan ke dalam fungsi button yang telah kita buat. Sehingga button tersebut
akan merespon ketika ditekan.
27. Pilih folder Assets yang ada pada tab “Projects”. Setelah buat folder baru dengan
cara klik kanan pada bagian dalam tab “Projects”, pilih Create > Folder. Beri nama
“Scripts” pada folder tersebut.

28. Buka folder dan klik kanan pada bagian dalam tab “Projects”, pilih Create > C#
Script untuk membuat script baru, beri nama “GoToScene”. Script ini akan kita
gunakan untuk berpindah-pindah scene.

10 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

29. Tekan 2 kali pada script tersebut untuk membuka dan meng-edit script
menggunakan editor yang telah anda install sebelumnya.
30. Samakan isi script tersebut seperti berikut.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class GoToScene : MonoBehaviour


{
public void LoadScene(string sceneName){
SceneManager.LoadScene(sceneName);
}
}

31. Jika sudah maka simpan script tersebut dengan menekan tombol “Ctrl+S”.
Kemudian buka kembali jendela Unity yang anda miliki.
32. Selanjutnya pilih GameObject “Play Button” yang ada di dalam tab “Hierarchy”.
Kemudian Tarik script GoToScene ke dalam tab “Inspector” GameObject tersebut
dan lepaskan. Maka component script tersebut akan tertambahkan ke dalam
GameObject. Pastikan ketika anda melepaskan script, posisi mouse berada di atas
component “Default UI Material”.

11 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

33. Masih di dalam tab “Inspector” GameObject “Play Button”. Pada bagian OnClick()
component “Button”, tekan tanda plus (+) untuk menambahkan sebuah fungsi
baru yang akan dijalankan ketika tombol tersebut ditekan.

34. Kemudian tarik GameObject tersebut dan lepaskan ke dalam kolom GameObject
yang ada di dalam OnClick().

12 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

35. Tekan pada bagian “No Function”, kemdian pilih GoToScene > LoadScene(string).
Kemudian akan muncul kolom baru, kolom ini dapat kita isikan sesuai dengan
nama scene yang ingin kita tuju. Karena kita nantinya akan membuat scene baru
bernama “Bermain” maka isikan “Bermain” di dalam kolom tersebut.

36. Selanjutnya kita akan menambahkan musik di dalam game dan mengatur musik
tersebut. Caranya buat script baru dengan nama “Music”. Jika sudah, buka script
tersebut. Samakan isi script tersebut seperti berikut.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Music : MonoBehaviour


{
public static Music instance;
public bool isOn = true;

void Awake(){
if(instance == null){
instance = this;
DontDestroyOnLoad(instance);
}else{
GameObject.Destroy(this.gameObject);
}
}
}

37. Buat script baru dengan nama “MusicController”. Jika sudah, buka script tersebut.

13 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

38. Samakan isi script tersebut seperti berikut.


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

public class MusicController : MonoBehaviour


{
public AudioSource music;
public Image musicImage;
public Sprite[] musicSprite;

public void SetMusic(){


if(Music.instance.isOn){
music.mute = true;
Music.instance.isOn = false;
musicImage.sprite = musicSprite[1];
}else{
music.mute = false;
Music.instance.isOn = true;
musicImage.sprite = musicSprite[0];
}
}
}

39. Selanjutnya buka kembali Unity, buat GameObject baru berupa AudioSource
dengan cara pilih GameObject > Audio > Audio Source.

14 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

40. Selanjutnya pada tab “Inspector”, pada bagian “AudioClip” component “Audio
Source”, tekan tombol titik yang ada di samping kolom. Kemudian pilih musik
yang sudah kita siapkan sebelumnya. Jika sudah maka tutup jendela “AudioClip”
tersebut.

41. Scroll ke bawah pada tab “Inspector”. Setelah itu pilih “Add Component”,
ketikkan “Music” dan tambahkan script “Music” yang sudah kita buat sebelumnya
ke dalam GameObject tersebut.

15 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

42. Kemudian buat Empty GameObject dengan cara pilih GameObject > Create
Empty dan beri nama “MusicController”. Selanjutnya tambahkan component
“MusicController” ke dalam GameObject tersebut.

43. Atur nilai component script “MusicController” seperti pada gambar. Caranya
sama seperti sebelumnya yaitu menekan titik yang ada di sebelah kolom
kemudian anda cari nama yang sesuai untuk setiap kolom yang ada seperti pada
gambar berikut.

44. Setelah itu seleksi GameObject “Music Button” di dalam tab “Hierarchy”, lihat
tab “Inspector” dan tambahkan list baru pada bagian OnClick() component
“Button”. Lalu tarik GameObject yang memiliki script “MusicController” ke dalam
kolom GameObject OnClick() tersebut. Pilih MusicController > SetMusic.

16 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

45. Agar tampilan dari game tersebut dapat responsive jika dibuka di berbagai ukuran
device. Maka kita harus mengatur nilai “Canvas Scaler” pada bagian “Canvas” juga.
Atur nilainya seperti pada gambar.

46. Untuk melihat hasil dari game yang telah anda buat, anda dapat melakukannya
dengan menekan tombol play yang ada di bagian atas Unity.

47. Jangan lupa untuk menyimpan scene yang telah anda kerjakan terlebih dahulu
dengan cara menekan tombol “Ctrl+S” pada keyboard.

17 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

48. Buat scene baru dengan nama “Bermain”.

49. Buka scene baru tersebut dengan cara klik 2 kali pada scene tersebut.
50. Selanjutnya buat “Image” baru untuk menambahkan background pada scene
tersebut. Lakukan seperti pada langkah nomor 13-17 yang telah kita lakukan
sebelumnya.
51. Lalu pada bagian “Canvas” atur nilai “Canvas Scaler” seperti pada langkah nomor
45 yang telah kita lakukan sebelumnya.
52. Buat Button baru dengan nama “Back Button” dan atur nilainya seperti pada
gambar berikut.

53. Buat Image baru dan beri nama “Timer Panel”, atur nilainya seperti pada gambar
berikut ini.

18 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

54. Selanjutnya tambahkan GameObject Text di dalam child “Timer Panel”, dengan
cara klik kanan pada GameObject “Timer Panel” lalu pilih UI > Text.

55. Atur nilai pada bagian “Rect Transform” seperti pada gambar.

56. Atur nilai pada bagian “Text” seperti pada gambar berikut.

19 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

57. Buat “Image” baru dengan nama “Alphabet Line” dan atur nilainya seperti pada
gambar berikut.

58. Buat “Image” baru dengan nama “Alphabet 1” dan atur nilainya seperti pada
gambar berikut.

20 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

59. Buat “Image” baru dengan nama “Alphabet 2” dan atur nilainya seperti pada
gambar berikut.

60. Buat “Image” baru dengan nama “Alphabet 3” dan atur nilainya seperti pada
gambar berikut.

21 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

61. Buat script baru dengan nama “GameController”, buat Gameobject baru dengan
nama “GameController” juga dan tambahkan script tersebut ke dalam
GameObject yang telah kamu buat.

62. Selanjutnya buka script tersebut dan sesuaikan dengan script berikut.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class GameController : MonoBehaviour


{
public GameObject alphabetLine;
public GameObject alphabet1;
public GameObject alphabet2;

22 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

public GameObject alphabet3;


public GameObject panelHasilBermain;

public Text timerText;


public Text scoreText;
public float Timer = 60f;

public Sprite[] spriteQuestion;


public Sprite[] spriteAnswer;

public Image image_Question_Container;


public Image image_Answer_1_Container;
public Image image_Answer_2_Container;
public Image image_Answer_3_Container;

public Image[] starHasilBermain;

private Vector2 alphabet1Pos;


private Vector2 alphabet2Pos;
private Vector2 alphabet3Pos;
private string minute;
private string second;
public int maxSoal;
private int counterSoal = 0;
private bool countdown = false;
private int benar = 0;
private int score = 0;
private bool isAnswerTrue = false;
private int randomNumber = 0;
private int answerId;
private int questionId;

// Start is called before the first frame update


void Start()
{
panelHasilBermain.SetActive(false);

minute = Mathf.Floor(Timer / 60).ToString("00");


second = (Timer % 60).ToString("00");
timerText.text = " " + minute + " : " + second;

alphabet1Pos = alphabet1.transform.localPosition;
alphabet2Pos = alphabet2.transform.localPosition;
alphabet3Pos = alphabet3.transform.localPosition;

countdown = true;
}

23 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

// Update is called once per frame


void Update()
{
scoreText.text = score.ToString();

if(countdown == true){
Timer -= 1 * Time.deltaTime;
minute = Mathf.Floor(Timer / 60).ToString("00");
second = (Timer % 60).ToString("00");
timerText.text = " " + minute + " : " + second;

if (Timer <= 0)
{
countdown = false;

Timer -= 0 * Time.deltaTime;
timerText.text = "00 : 00";

StartCoroutine(TimesUp());
}

if(counterSoal == maxSoal){
countdown = false;

Timer -= 0 * Time.deltaTime;

StartCoroutine(TimesUp());
}
}else{
Timer -= 0 * Time.deltaTime;
timerText.text = " " + minute + " : " + second;
}
}

private IEnumerator TimesUp ()


{
StartCoroutine(CalculateScore());

yield return new WaitForSeconds(0.5f);

panelHasilBermain.SetActive(true);
}

private IEnumerator CalculateScore(){


yield return new WaitForSeconds(0.1f);

24 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

if(score <=50){
starHasilBermain[0].gameObject.SetActive(false);
starHasilBermain[1].gameObject.SetActive(false);
starHasilBermain[2].gameObject.SetActive(false);
}else if(score >= 60 && score < 80){
starHasilBermain[0].gameObject.SetActive(true);
starHasilBermain[1].gameObject.SetActive(false);
starHasilBermain[2].gameObject.SetActive(false);
}else if(score >= 80 && score < 100){
starHasilBermain[0].gameObject.SetActive(true);
starHasilBermain[1].gameObject.SetActive(true);
starHasilBermain[2].gameObject.SetActive(false);
}else if(score == 100){
starHasilBermain[0].gameObject.SetActive(true);
starHasilBermain[1].gameObject.SetActive(true);
starHasilBermain[2].gameObject.SetActive(true);
}
}

public void BackToMenu(){


SceneManager.LoadScene("MainMenu");
}

public void ReplayScene(){


SceneManager.LoadScene(SceneManager.GetActiveScene().name);
}

public void DragAlphabet1 ()


{
if (isAnswerTrue == false)
{
alphabet1.transform.position = Input.mousePosition;
}
}

public void DragAlphabet2 ()


{
if (isAnswerTrue == false)
{
alphabet2.transform.position = Input.mousePosition;
}
}

public void DragAlphabet3 ()


{
if (isAnswerTrue == false)
{

25 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

alphabet3.transform.position = Input.mousePosition;
}
}

public void DropAlphabet1 ()


{
float Distance = Vector3.Distance(alphabet1.transform.position,
alphabetLine.transform.position);

if(Distance < 100 && isAnswerTrue == false)


{
alphabet1.transform.position = new
Vector2(alphabetLine.transform.position.x,alphabetLine.transform.position.y
);
isAnswerTrue = true;
answerId = 1;
}
else if (Distance > 100 && isAnswerTrue == false)
{
alphabet1.transform.localPosition = alphabet1Pos;
answerId = 0;
}

CheckWinner();
}

public void DropAlphabet2 ()


{
float Distance = Vector3.Distance(alphabet2.transform.position,
alphabetLine.transform.position);

if(Distance < 100 && isAnswerTrue == false)


{
alphabet2.transform.position = new
Vector2(alphabetLine.transform.position.x,alphabetLine.transform.position.y
);
isAnswerTrue = true;
answerId = 2;
}
else if (Distance > 100 && isAnswerTrue == false)
{
alphabet2.transform.localPosition = alphabet2Pos;
answerId = 0;
}

CheckWinner();
}

26 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

public void DropAlphabet3 ()


{
float Distance = Vector3.Distance(alphabet3.transform.position,
alphabetLine.transform.position);

if(Distance < 100 && isAnswerTrue == false)


{
alphabet3.transform.position = new
Vector2(alphabetLine.transform.position.x,alphabetLine.transform.position.y
);
isAnswerTrue = true;
answerId = 3;
}
else if (Distance > 100 && isAnswerTrue == false)
{
alphabet3.transform.localPosition = alphabet3Pos;
answerId = 0;
}

CheckWinner();
}

private void CheckWinner ()


{
if(isAnswerTrue == true)
{
if(questionId == answerId){
benar++;
score = score + 10;
}
counterSoal++;
StartCoroutine(SetQuestion());
}
}

private IEnumerator SetQuestion ()


{
randomNumber = Random.Range(0,10);

yield return new WaitForSeconds(1);

if(counterSoal < maxSoal){


SetSprite();

isAnswerTrue = false;

27 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

alphabet1.transform.localPosition = new Vector3(-370,-200,0);


alphabet2.transform.localPosition = new Vector3(0,-200,0);
alphabet3.transform.localPosition = new Vector3(370,-200,0);
}
}

public void SetSprite ()


{
if(randomNumber == 0)
{
image_Question_Container.sprite = spriteQuestion[0];

image_Answer_1_Container.sprite = spriteAnswer[0];
image_Answer_2_Container.sprite = spriteAnswer[1];
image_Answer_3_Container.sprite = spriteAnswer[2];

questionId = 1;
}
else if(randomNumber == 1)
{
image_Question_Container.sprite = spriteQuestion[1];

image_Answer_1_Container.sprite = spriteAnswer[3];
image_Answer_2_Container.sprite = spriteAnswer[4];
image_Answer_3_Container.sprite = spriteAnswer[5];

questionId = 2;
}
else if(randomNumber == 2)
{
image_Question_Container.sprite = spriteQuestion[2];

image_Answer_1_Container.sprite = spriteAnswer[6];
image_Answer_2_Container.sprite = spriteAnswer[7];
image_Answer_3_Container.sprite = spriteAnswer[8];

questionId = 1;
}
else if(randomNumber == 3)
{
image_Question_Container.sprite = spriteQuestion[3];

image_Answer_1_Container.sprite = spriteAnswer[4];
image_Answer_2_Container.sprite = spriteAnswer[5];
image_Answer_3_Container.sprite = spriteAnswer[6];

questionId = 2;

28 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

}
else if(randomNumber == 4)
{
image_Question_Container.sprite = spriteQuestion[4];

image_Answer_1_Container.sprite = spriteAnswer[9];
image_Answer_2_Container.sprite = spriteAnswer[10];
image_Answer_3_Container.sprite = spriteAnswer[11];

questionId = 1;
}
else if(randomNumber == 5)
{
image_Question_Container.sprite = spriteQuestion[5];

image_Answer_1_Container.sprite = spriteAnswer[12];
image_Answer_2_Container.sprite = spriteAnswer[13];
image_Answer_3_Container.sprite = spriteAnswer[14];

questionId = 3;
}
else if(randomNumber == 6)
{
image_Question_Container.sprite = spriteQuestion[6];

image_Answer_1_Container.sprite = spriteAnswer[14];
image_Answer_2_Container.sprite = spriteAnswer[15];
image_Answer_3_Container.sprite = spriteAnswer[16];

questionId = 2;
}
else if(randomNumber == 7)
{
image_Question_Container.sprite = spriteQuestion[7];

image_Answer_1_Container.sprite = spriteAnswer[17];
image_Answer_2_Container.sprite = spriteAnswer[18];
image_Answer_3_Container.sprite = spriteAnswer[19];

questionId = 1;
}
else if(randomNumber == 8)
{
image_Question_Container.sprite = spriteQuestion[8];

image_Answer_1_Container.sprite = spriteAnswer[20];
image_Answer_2_Container.sprite = spriteAnswer[21];

29 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

image_Answer_3_Container.sprite = spriteAnswer[22];

questionId = 1;
}
else if(randomNumber == 9)
{
image_Question_Container.sprite = spriteQuestion[9];

image_Answer_1_Container.sprite = spriteAnswer[21];
image_Answer_2_Container.sprite = spriteAnswer[8];
image_Answer_3_Container.sprite = spriteAnswer[22];

questionId = 3;
}
else if(randomNumber == 10)
{
image_Question_Container.sprite = spriteQuestion[10];

image_Answer_1_Container.sprite = spriteAnswer[24];
image_Answer_2_Container.sprite = spriteAnswer[25];
image_Answer_3_Container.sprite = spriteAnswer[20];

questionId = 2;
}
}
}

63. Klik kanan pada GameObject “Canvas” kemudian pilih “Create Empty”. Beri nama
“Hasil Bermain” dan atur bagian “Rect Transform” sesuai dengan gambar berikut.

30 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

64. Kemudian buat beberapa GameObject baru dan sesuaikan dengan tampilan
berikut ini. Tampilan ini akan kita gunakan untuk menampilkan hasil permainan.

65. Tambahkan fungsi “ReplayScene” ke dalam OnClick() “Replay Button” dan fungsi
“BackToMenu” ke dalam OnClick() “Back Button”.
66. Selanjutnya seleksi GameObject “GameController”, atur nilainya sesuai dengan
gambar berikut ini.

67. Seleksi GameObject Alphabet 1 kemudian pilih “Add Component”, tambahkan


“Event Trigger”. Setelah component tertambahkan, pilih “Add New Event Type”
untuk menambahkan event baru. Tambahkan event “Drag” dan “End Drag”, anda
akan mendapat tampilan seperti berikut.

31 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

68. Lakukan langkah nomor 67 untuk Alphabet 2.

69. Lakukan langkah nomor 67 untuk Alphabet 3.

32 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

70. Simpan scene tersebut dengan menekan tombol “Ctrl + S” pada keyboard.
71. Selanjutnya pilih File > Build Settings.

72. Kemudian buka folder “Scenes” dan tarik kedua scene ke dalam “Scene In Build”.

33 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

73. Buka scene “MainMenu” dan klik play untuk mencoba game tersebut.

34 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

EXTRA

Build Game ke APK


1. Download Android SDK terlebih dahulu, jika anda belum memiliki Android SDK
maka anda dapat mengunduh file Android SDK yang sudah kami melalui link ini.
https://drive.google.com/file/d/1GJ-
zRcjQh_pw_RcaA6dMcOnKT0dvULNS/view?usp=sharing
2. Setelah selesai mengunduh, letakkan file di lokasi yang anda inginkan. Kemudian
klik kanan pada file tersebut, pilih “Extract to”.

3. Tunggu hingga prosesnya selesai.


4. Buka Unity kembali, lalu pilih menu Edit > Preferences.

35 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

5. Pilih “External Tools” kemudian atur lokasi Android SDK sesuai dengan lokasi
Android SDK yang telah anda simpan sebelumnya. Anda juga perlu mengatur
bagian JDK, centang bagian “Use Embedded JDK” untuk menggunakan JDK
default dari Unity.

6. Jika sudah tutup jendela tersebut.


7. Selanjutnya buka “Build Settings” dengan memilih menu File > Build Settings.
Pilih Android, kemudian tekan pilihan “Switch Platform”.

36 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

8. Tunggu hingga proses selesai.


9. Selanjutnya masuk ke system environment variable dengan mencarinya pada
Windows search. Berikut ini tampilannya.

10. Pilih “Environment Variables”.

11. Kemudian buat “User Variable” baru dengan memilih tombol New, pada variable
name isikan “ANDROID_HOME” lalu pada variable value isikan lokasi tempat
Android SDK anda.

37 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

12. Jika sudah maka klik OK.


13. Kembali lagi pada Unity, pada bagian “Build Settings” tadi pilih “Player Settings”.

14. Lihat tab baru yang muncul, pada bagian ini anda dapat mengatur informasi
mengenai nama pembuat, versi game serta nama game tersebut.

38 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

15. Selanjutnya pada bagian “Resolution and Presentation”, atur nilainya seperti
berikut ini.

16. Pada bagian “Other Settings” kurang lebih atur nilainya sebagai berikut. Anda
juga dapat mengganti nilai “Minimum API Level” serta “Target API Level” sesuai
dengan API android yang anda inginkan.

39 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

17. Jika sudah kembali lagi pada bagian “Build Settings”, kemudian pilih “Build”.

18. Tunggu hingga prosesnya selesai dan anda dapat melihat file APK game yang telah
anda buat.

40 MASPION IT
Icon IT Indonesia
MASPION IT, Senin 9 Nopember 2020
Magang + Pelatihan Guru Materi : Membangun GAME Edukasi via Unity

41 MASPION IT
Icon IT Indonesia

Anda mungkin juga menyukai