[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

11 comments :

Putra Eka mengatakan...

Wah keren bisa bikin tema plymouth sendiri, dibookmark dulu ah siapa tahu nanti ada wallpaper yang bagus buat dijadiin tema plymouth

Damar Riyadi mengatakan...

@Putra Eka: Sip2, tunggu bagian-bagian selanjutnya :D

Anonim mengatakan...

kapan nih bagian 4 nya,, ??

Damar Riyadi mengatakan...

@Anonim: Sabar gan, tutorial sekalian dibarengin dengan project plymouth ane :)

Unknown mengatakan...

pake command semua gan??
gak ada GUI nya??
waduh...

Damar Riyadi mengatakan...

@Boss: Saat ini belum ada gan :(

Ade Malsasa Akbar mengatakan...

Saa dari awal TahuTek berdiri (waktu itu masih belum ada posting) sudah kagum. Sekarang tambah salut dengan perkembangan yang sepesat ini. Apalagi sampeyan mengerjakannya sendirian. Wow, keberanian!

Salam hangat dan jabat erat, Mas. Teruskan perjuanganmu. Indonesia masih belum merdeka (dari kapitalisme). Ayo majukan sumber terbuka!

Damar Riyadi mengatakan...

@Ade: Wah, terima kasih atas apresiasinya gan, saya benar-benar terharu membacanya :)

Anonim mengatakan...

gak sabar nih nunggu yang ke empat.. btw yang keempat dikasitau gak cara buat gambar yang bergerak-gerak itu?

Damar Riyadi mengatakan...

@Anonim: InsyaAlloh gan, tutorial akan saya sajikan dalam bentuk ebook, ini masih dalam proses pengerjaan ...

ThreeLost mengatakan...

Maaf min. untuk yang point ringkasan kok saya cek tidak ada coding "back_sprite.SetPosition(100, 400, 10);"
padahal pada point2 sebelumnya ada. apakah pada point itu tidaklah haarus dipakai, jadi anda tidak menyertakan pada pint ringkasannya.

Terimakasih

Posting Komentar