Parallax

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

Suka
Komentar
pos ke FB
pos ke Twitter
🤗 Selesai! 🤗

Nilai

Polling

Sugesti

Permainan


  • Sebelumnya
    Langkah-Langkah Singkat Untuk Memperbaiki Bahasa Inggrismu

    Berikutnya
    Kekuatan Modulo dalam Pemrograman


  • 1 Jejak Manis yang Ditinggalkan

    1. Mantap kang, jadi lebih ngerti tentang paralax nih

    Minta Komentarnya Dong...

    Silakan tulis komentar kalian di sini, yang ada bintangnya wajib diisi ya...
    Dan jangan khawatir, email kalian tetap dirahasiakan. 😉

    Kembali
    Ke Atas

    Terima kasih telah membaca artikel Anandastoon!

    Apakah artikelnya mudah dimengerti?

    Mohon berikan bintang:

    Judul Rate

    Desk Rate

    Terima kasih telah membaca artikel Anandastoon!

    Dan terima kasih juga sudah berkontribusi menilai kemudahan bacaan Anandastoon!

    Ada saran lainnya untuk Anandastoon? Atau ingin request artikel juga boleh.

    Selamat datang di Polling Anandastoon.

    Kalian dapat iseng memberi polling seperti di Twitter, Facebook, atau Story Instagram. Pollingnya disediakan oleh Anandastoon.

    Kalian juga dapat melihat dan menikmati hasil polling-polling yang lain. 😊


    Memuat Galeri Poll...

    Sebentar ya, Anandastoon muat seluruh galeri pollnya dulu.
    Pastikan internetmu tetap terhubung. 😉

    Asik poll ditemukan!

    Silakan klik salah satu poll yang kamu suka untuk mulai polling!

    Galeri poll akan terus Anandastoon tambahkan secara berkala. 😉

    Judul Poll Galeri

    Memuat poll...

    Sebentar ya, Anandastoon memuat poll yang kamu pilih.
    Pastikan internetmu tetap terhubung. 😉

    Masih memuat ~

    Sebelum memulai poll,

    Anandastoon ingin memastikan bahwa kamu bukan robot.
    Mohon agar menjawab pertanyaan keamanan berikut dengan sepenuh hati.
    Poll yang 'janggal' berpotensi dihapus oleh Anandastoon.
    Sebab poll yang kamu isi mungkin akan bermanfaat bagi banyak orang. 🤗

    Apakah nama hari sebelum hari Kamis?

    Mohon jawab pertanyaan keamanan ini. Jika jawaban benar, kamu langsung menuju pollnya.

    Senin
    Rabu
    Jumat
    Sabtu

    Atau, sedang tidak ingin mengisi poll?

     

    Wah, poll telah selesai. 🤗

    Sebentar ya... poll kamu sedang di-submit.
    Pastikan internetmu terhubung agar dapat melihat hasilnya.

    Hasil poll 👇

    Menunggu ~

    Ups, sepertinya fitur ini masih dikembangkan Anandastoon

    Di sini nantinya Anandastoon akan menebak rekomendasi artikel yang kamu inginkan ~

    Heihei maihei para pembaca...

    Selesai membaca artikel Anandastoon? Mari, saya coba sarankan artikel lainnya. 🔮

     

    Ups, sepertinya fitur ini masih dikembangkan Anandastoon

    Di sini nantinya kamu bisa main game langsung di artikelnya.

    Permainan di Artikel

    Bermain dengan artikel yang baru saja kamu baca? 😱 Kek gimana tuh?
    Simpel kok, cuma cari kata dalam waktu yang ditentukan.

    Mempersiapkan game...

    Aturan Permainan

    1. Kamu akan diberikan sebuah kata.

    2. Kamu wajib mencari kata tersebut dalam artikel.

    3. Kata yang ditemukan harap diblok atau dipilih.
    Bisa dengan klik dua kali di laptop, atau di-tap dan tahan sampai kata terblok.

    4. Terus begitu sampai kuota habis. Biasanya jumlahnya 10 kuota.

    5. Kamu akan berhadapan dengan waktu yang terus berjalan.

    6. DILARANG Inspect Element, CTRL + F, atau find and replace. Juga DILARANG berpindah tab/windows.