[Ubuntu] Panduan Membuat Tema Plymouth (Bagian 3)

Kita sudah membahas cara instalasi dan melihat preview dari tema plymouth yang aktif pada bagian 1 dan cara debugging pada bagian 2. Pada bagian 3 ini, saya akan menjelaskan cara mengatur background untuk plymouth mulai dari memuat gambar, mengatur letak, opacity dan ukuran gambar di layar.

Baiklah, untuk mempermudah pemahaman, silakan buat folder baru untuk menampung file-file project kita. Saya membuat folder dengan nama "plymouth-tutorial/my-theme" di folder "Home" (kalian bisa membuat folder sesuai selera masing-masing), untuk melakukannya ketik perintah berikut di Terminal:

cd ~
mkdir -p plymouth-tutorial/my-theme

Folder project telah dibuat, sekarang saatnya membuat script untuk memanggil gambar ke layar. Buka Terminal dan ketik:

cd ~/plymouth-tutorial/my-theme
touch my-theme.script

Kata "my-theme" bisa diganti sesuai selera. Edit file "my-theme.script" dengan panduan sebagai berikut:

Memanggil gambar

back_image = Image("naruto.png");
back_sprite = Sprite(back_image);

Baris pertama kode di atas akan memanggil gambar "naruto.png" dan menyimpannya ke dalam variabel "back_image". Pastikan file "naruto.png" ada pada folder project kalian (dalam contoh ini: "/home/username/plymouth-tutorial/my-theme". Plymouth hanya mendukung file dengan format PNG, jadi pastikan gambar kalian pakai sudah berformat PNG.

Baris kedua berfungsi untuk membuat sprite. "Sprite" adalah sebuat gambar yang memiliki koordinat atau posisi tertentu di layar. Baris kedua di atas membuat sprite baru dengan menggunakan gambar yang sudah dipanggil (yaitu "back_image").

Mengatur letak sprite

Secara default, gambar (baca: sprite) akan berada di koordinat (0,0) alias di pojok kiri atas layar. Untuk mengubah posisi sprite, kalian bisa menggunakan perintah "SetX" dan "SetY".

back_sprite.SetX(100);
back_sprite.SetY(400);

Baris pertama kode di atas akan mengatur letak sprite pada koordinat 100 sumbu X (100 piksel ke kanan), sedangkan baris kedua mengatur letak sprite pada koordinat 400 sumbu Y (400 piksel ke bawah).

Selain koordinat X dan Y, plymouth juga memperhatikan koordinat sumbu Z. Pada keadaan default, sprite yang terakhir dibuat akan berada di atas sprite sebelumnya. Kita dapat mengatur urutan tersebut dengan perintah "SetZ". Semakin besar nilai Z maka sprite akan berada di posisi paling atas daripada yang lain. Contoh:

back_sprite.SetZ(10);

Ketiga perintah "SetX, SetY, SetZ" di atas dapat disederhakan dengan perintah "SetPosition" dengan urutan pemberian nilai mulai dari X, Y, kemudian Z.

back_sprite.SetPosition(100, 400, 10);

Kode di atas akan mengatur letak sprite "back_sprite" di koordinat 100 sumbu X, 400 sumbu Y, dan 10 sumbu Z.

Mengatur opacity

Untuk mengatur opacity (tingkat transparansi) sprite dapat dilakukan dengan perintah "SetOpacity". Nilai yang dapat diberikan adalah antara 0 dan 1. Nilai 1 menunjukkan bahwa sprite akan 100% transparan, sedangkan nilai 0 menunjukkan 0% transparan. Contoh:

back_sprite.SetOpacity(1);

Perintah di atas akan mengatur opacity sebesar 100%.

Mengatur ukuran sprite

Untuk mengatur ukuran gambar bisa dilakukan dengan perintah "Scale". Setelah mengubah ukuran, kita perlu memanggil ulang sprite dengan perintah "SetImage".

resized_back_image = back_image.Scale(640, 480);
back_sprite.SetImage(resized_back_image);

Baris pertama kode di atas akan mengubah ukuran gambar ("back_image" yang telah kita panggil) menjadi 640x480 piksel dan menyimpannya ke dalam variabel "resized_back_image". Baris kedua memanggil/membuat kembali sprite dari gambar yang barusan diubah ukurannya.

Untuk mengatur ukuran gambar agar sesuai dengan resolusi layar pengguna, kita dapat memanfaatkan fungsi "Window.GetWidth()" dan "Window.GetHeight()". "Window.GetWidth()" berfungsi untuk mengetahui lebar resolusi layar yang digunakan pengguna, sedangkan "Window.GetHeight()" berfungsi untuk mengetahui tinggi resolusi layar yang digunakan.

screen_width = Window.GetWidth();
screen_height = Window.GetHeight();
resized_back_image = back_image.Scale(screen_width, screen_height);
back_sprite.SetImage(resized_back_image);

Baris pertama dan kedua berfungsi untuk mengetahui resolusi layar pengguna, kemudian menyimpannya ke variabel masing-masing. Baris ketiga untuk mengubah ukuran gambar sesuai dengan resolusi layar yang digunakan pengguna. Baris keempat untuk memanggil kembali sprite.

Ringkasan

Sampai tahap ini, isi dari file "my-theme.script" kurang lebih sebagai berikut:

back_image = Image("naruto.png");
back_sprite = Sprite(back_image);
back_sprite.SetOpacity(1);
screen_width = Window.GetWidth();
screen_height = Window.GetHeight();
resized_back_image = back_image.Scale(screen_width, screen_height);
back_sprite.SetImage(resized_back_image);

Sedangkan isi dari folder "my-theme" adalah file "naruto.png" dan "my-theme.script".

Tunggu bagian keempat :D