Parallax Scrolling, Pengertian dan Pengaplikasiannya

Sumber : inet

     Dulu saya benar-benar penasaran mengenai sebuah efek pada permainan-permainan yang saya mainkan di mana latar belakang bergerak lebih lambat dari pada apa yang berada di depannya meskipun permainan tersebut hanyalah permainan 2 dimensi. Setelah saya googling dengan menebak-nebak kata kunci, akhirnya didapatlah bahwa hal tersebut bernama Parallax Scrolling atau Gulir Paralaks.

     Sewaktu saya masih SMP, saya tadinya mengira paralaks merupakan salah satu istilah astronomi yang mempelajari mengenai posisi relatif jarak bintang satu dengan yang lainnya menurut pandangan mata. Namun menurut Wikipedia, “Paralaks, (bahasa Yunani: παραλλαγή (parallagé)) adalah perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak. Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu obyek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat.”

     Sedangkan Gulir Paralaks atau Parallax Scrolling adalah suatu teknik khusus di mana benda yang berada di latar belakang bergerak lebih lambat dibandingkan dengan yang berada di latar depan sehingga menimbulkan efek 3 dimensi meskipun grafik yang dibuat hanyalah sebatas 2 dimensi. Ini persis seperti apa yang saya definisikan sebelum saya tahu apa itu parallax scrolling yang telah saya sebutkan di atas.

     Ini adalah contoh sangat-sangat sederhana dari parallax scrolling yang saya buat dengan Adobe Flash.

Dapat dilihat di atas bahwa gerakan jalan lebih cepat dari gerakan pegunungan. Dan gerakan pegunungan lebih cepat dibandingkan gerakan awan. Inilah yang disebut gerak paralaks di mana mata seseorang diarahkan agar meyakini bahwa seakan-akan antara jalan, pegunungan, dan awan memiliki jarak yang berbeda-beda. Singkatnya, semakin dimaksudkan untuk jauh objek tersebut, semakin lambat pula gerakannya.

     Parallax scrolling merupakan sebuah efek yang cukup keren bila diterapkan pada permainan video pada umumnya. Namun tidak hanya itu, efek ini juga ternyata juga diterapkan pada website di mana contoh sangat-sangat sederhananya dapat dilihat di sini.

     Cara membuatnya cukup atau bahkan sangat mudah, mungkin jika dibuat statis seperti contoh flash yang saya buat di atas tidak memerlukan logika yang berarti. Cukup posisi x pada objek-objeknya dikurangi oleh nilai-nilai tertentu yang berbeda-beda sehingga menghasilkan kecepatan yang bervariasi.

     Namun bagaimana jika memang dinamis? Maksud dinamis di sini adalah parallax scrolling akan bekerja jika diberi trigger atau pemacu. Seperti jika kita menggerakan pemain maka akan terlihat efeknya, atau jika pada situs web efeknya akan terlihat ketika kita menggeser batang gulir ke bawah (men-scroll-nya).

• Logika Umum pada Permainan

     Setiap objek latar belakang atau background pada dasarnya selalu mengikuti gerakan ‘kamera’ atau view yang digunakan pada saat itu. Namun latar belakang atau background yang memiliki efek paralaks sebenarnya prinsipnya sama, yang membedakannya hanyalah adanya fraksi atau pembagian dengan suatu bilangan tertentu yang membuat hal itu menjadi berfungsi.

     Contoh logika sederhana :

     Jika latar belakang atau background tidak memiliki efek paralaks maka tidak ada perintah yang diterapkan di sini, dalam arti tidak perlu menambahkan kode atasnya.

     Jika latar belakang atau background memiliki efek paralaks yang tetap, di mana background akan terus mengikuti kamera, sebagai contoh posisi x latar belakang akan selalu sama dengan posisi x kamera, maka perintah yang diberikan adalah :

background.x = camera.x

     Jika latar belakang atau background memiliki efek paralaks yang memiliki kecepatan berbeda-beda, untuk membedakan tingkat kejauhan dari beberapa lapis atau layer gambar tersebut, maka perintahnya sama, hanya saja diberikan fraksi atau pecahan.

background.x = camera.x * 0.5

atau,

background.x = camera.x / 2

     Maka hasilnya adalah latar belakang memiliki kecepatan setengah dari kecepatan kamera. Dan ini dapat langsung diterapkan pada permainan-permainan pada umumnya.

     Berikut adalah contoh sintaks yang berlaku pada Game Maker Language :

// Kecepatan posisi X latar belakang akan menjadi setengahnya
// dari kecepatan kamera
background_x = view_xview[view_current]*0.50;

// Kecepatan posisi Y latar belakang akan menjadi setengahnya
// dari kecepatan kamera
background_y = view_yview[view_current]*0.50;

// Angka yang diberikan tidak harus setengah,
// bisa saja lebih dari itu atau kurang dari itu.

• Logika Umum pada Website

     Dalam CSS ada sebuah perintah yang mengatur posisi latar belakang yang bernama :

background-position

     Jika ingin latar belakang mengikuti posisi gulir atau scrollnya, maka cukup :

position : fixed

     Namun jika ingin latar belakang memiliki kecepatan tertentu yang lebih lambat dari kecepatan gulirnya, maka perlu adanya bantuan dari Javascript atau JQuery untuk hal ini. Contoh berikut disajikan dengan memakai javascript :

<div id = "paralaks"></div>

<style>
#paralaks {
    position: fixed;
    background: url(gambarmu.jpg);
    width: ...px;
    height: ...px;
}
</style>

<script>
// tambahkan perintah untuk jendela browser
// agar dapat bekerja ketika di-scroll
window.addEventListener ("scroll", gulirParalaks, false);

// maka buat perintah berupa gulirParalaks
function gulirParalaks () {
    // definisi dahulu mana yang akan dibuat paralaks
    var latarBelakang = document.getElementById("paralaks");
    // Atur kecepatan paralaksnya, dalam hal ini nilainya seperempat.
    // Karena posisinya yang mengikuti gulir/fixed (lihat style),
    // maka perlu diberi minus pada perintah windownya
    // agar gerakannya menjadi ke atas.
    // (Tidak relatif bertambah pada posisi Y halamannya)
    latarBelakang.style.top = -(window.pageYOffset / 4) + "px";
}
</script>

 Semoga Bermanfaat