Membuat Game Flappy Bird menggunakan Unity3D Part 4



Oke langsung saja kita lanjutkan membuat game dengan Unity3D, ini adalah part ke 4 dari beberapa tutorial yang telah saya bikin sebelumnya :


Langsung saja yaaa... selanjutnya adalah memberikan background pada game. Didalam asset telah saya sediakan. Caranya masuk ke folder sprite terlebih dahulu, expand sprite pack kemudian pilih gambar background "Sprite Pack_0" dan drag ke Hierarcy , seperti ini:


Jangan lupa ubah nama "Sprite Pack_0" pada Hierarcy menjadi "Background" dengan cara klik kemudian pencet key F2. Kemudian ubah nama.



Upsss...objek Playernya tertutup background !! Tenang aja..ada caranya kok agar objek Player tidak tertutup dan berada di depan. Caranya klik objek "Background" pada Hierarcy dan ubah properti Sprite Renderer Order Layer dari 0 menjadi -10.



KOK KALAU GANTI RESOLUSI LAYAR, BACKGROUND GAK MENGIKUTI UKURAN RESOLUSI !!!

Yups...Benar sekali sebagai contoh kasus sperti ini :

Ketika kita menggunakan resolusi 480x800 terlihat tidak menjadi masalah, namun jika kita rubah ke resolusi 320x480 maka yang terjadi sisi kanan dan kiri layar tidak dipenuhi oleh background (Sprite), hal ini dikarenakan aspect ratio sprite yang berbeda.


Adapun beberapa cara untuk mengakali, namun cara yang paling efektis adalah dengan cara scripting alias kita mengatur resolusi objek background dengan script berdasarkan ukuran screen android.

Langsung saja, kita masuk pada folder Script kemudian Klik Kanan > Create > C# Script 
Berilah nama  script "AutoResolution"


Klik 2x script AutoResolution.cs untuk meng edit script.
using UnityEngine;
using System.Collections;

public class AutoResolution : MonoBehaviour {

 // Use this for initialization
 void Start () {
 
 }
 
 // Update is called once per frame
 void Update () {
 
 }
}

Tmabhakan kode berikut tepat dibawah public class AutoResolution : MonoBehaviour {

 public bool KeepAspectRatio = true;
 public bool ExecuteOnUpdate = true;

Buat fungsi Resize seperti berikut :

void Resize(bool keepAspect = false)
 {
  SpriteRenderer sr = GetComponent<SpriteRenderer>();
  transform.localScale = new Vector3(1, 1, 1);

  float width = sr.sprite.bounds.size.x;
  float height = sr.sprite.bounds.size.y;

  float worldScreenHeight = Camera.main.orthographicSize * 2f;
  float worldScreenWidth = worldScreenHeight / Screen.height * Screen.width;

  Vector3 imgScale = new Vector3(1f, 1f, 1f);


  if (keepAspect)
  {
   Vector2 ratio = new Vector2(width / height, height / width);
   if ((worldScreenWidth / width) > (worldScreenHeight / height))
   {

    imgScale.x = worldScreenWidth / width;
    imgScale.y = imgScale.x * ratio.y; 
   }
   else
   {

    imgScale.y = worldScreenHeight / height;
    imgScale.x = imgScale.y * ratio.x;             
   }
  }
  else
  {
   imgScale.x = worldScreenWidth / width;
   imgScale.y = worldScreenHeight / height;
  }
   
  transform.localScale = imgScale;
 }


Kemudian juga tambahkan kode berikut didalam fungsi void Start()
Resize(KeepAspectRatio);
dan tambahkan pula fungsi FixedUpdate() sebagai berikut:
    void FixedUpdate()
    {
        if (ExecuteOnUpdate)
            Resize(KeepAspectRatio);
    }
Hasilnya keseluruhan akan seperti berikut:
using UnityEngine;
using System.Collections;

public class AutoResolution : MonoBehaviour {

    public bool KeepAspectRatio = true;
    public bool ExecuteOnUpdate = true;

    void Start()
    {
        Resize(KeepAspectRatio);
    }

    void FixedUpdate()
    {
        if (ExecuteOnUpdate)
            Resize(KeepAspectRatio);
    }


    void Resize(bool keepAspect = false)
    {
        SpriteRenderer sr = GetComponent<SpriteRenderer>();
        transform.localScale = new Vector3(1, 1, 1);

        float width = sr.sprite.bounds.size.x;
        float height = sr.sprite.bounds.size.y;

        float worldScreenHeight = Camera.main.orthographicSize * 2f;
        float worldScreenWidth = worldScreenHeight / Screen.height * Screen.width;

        Vector3 imgScale = new Vector3(1f, 1f, 1f);


        if (keepAspect)
        {
            Vector2 ratio = new Vector2(width / height, height / width);
            if ((worldScreenWidth / width) > (worldScreenHeight / height))
            {

                imgScale.x = worldScreenWidth / width;
                imgScale.y = imgScale.x * ratio.y;
            }
            else
            {

                imgScale.y = worldScreenHeight / height;
                imgScale.x = imgScale.y * ratio.x;
            }
        }
        else
        {
            imgScale.x = worldScreenWidth / width;
            imgScale.y = worldScreenHeight / height;
        }

        transform.localScale = imgScale;
    }

}


Seletah itu simpan script dan balik ke Unity Editor, Klik objek Background pada Hierarcy kemudian pada Inspector tambahkan script AutoResolution.cs:
Add Component > Scripts > AutoResolution



Uncheck Keep Aspect Ratio pada script Auto Resolution pada Inspector dan setelah itu coba kalian klik Play pada Unity Editor kemudian cobalah mengganti resolusi screen.


Setelah itu Stop untuk melakukan editing lagi. 

Selanjutnya adalah persiapan tanah, Caranya sdalah masuk ke folder Sprite terus expand Sprite Pack dan pilih "Sprite Pack_2" kemudian Drag ke Hierarchy rename menjadi Ground.


Kemudian atur posisi Ground ( 0, -1.15, 0 ) dengan cara Klik objek Ground pada Hierarchy dan rubah properti Position pada Inspector Transform. 


Kemudian Duplicate Ground dengan cara klik Ground pada Hierarchy lalu pencet tombol Ctrl + D. 
Setelah itu Drag Ground (1) ke parent Ground seperti berikut:




Atur posisi Child Ground / Ground (1) ke posisi ( 1.67, 0, 0 ) :




Ketika kita Play dan kita mainkan, maka ground hanya diam saja...tentunya ini kurang menarik dan seharusnya terlihat bergerak.

Agar ground terlihat bergerak, maka nantinya akan kita sematkan script pada ground. Namun, untuk tutorial kali ini cukup sekian dulu.... :D

Kalau ada pertanyaan, kalian bisa post komntar disini. 

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

0 komentar:

Posting Komentar