Pada kesempatan ini, kita akan
mencoba membahas cara membuat tema yang bisa digunakan baik pada
revisi 0.7 new gui (OPL 0.8 beta), maupun pada OPL v 0.8 final (saat
rilis).
Pada postingan yang lalu, sudah saya
uploadkan beberapa contoh tema yang sudah jadi dan siap pakai, dan
bagi teman-teman yang ingin menggunakan tema tersebut, silahkan download disini.
Sebelum kita memulai membuat gambar
tema, sebaiknya kita coba pahami dulu bagian-bagian dari tema itu
sendiri yang ada pada OPL v 0.8 beta, dan untuk memudahkan menjelaskan
bagian-bagian dari tema, maka dibawah ini terlihat tema dari opl
beserta dengan elemen-elemen pendukung tema.
(sumber = OPL Theme Guide by Izdubar)
Penjelasan elemen tema :
-
Icon
Menu merupakan icon dari setiap device yang terpilih seperti icon
untuk menu HDD, USB, ETH, dan APPS. dan kode untuk pengaturan di
tema adalah "menu_icon". yang terdiri dari 2 koordinat XY (menu_icon_x dan menu_icon_y).
-
Tulisan
Menu merupakan uraian dari menu yang aktif atau sementara
ditampilkan oleh OPL, seperti HDD Games, USB Games, Network Games,
dan Apps. Dan kode untuk pengaturan di tema adalah "menu_text", yang terdiri dari 2 koordinat XY (menu_text_x dan menu_text_y).
-
Daftar
Item merupakan judul dari setiap item yang dibaca oleh OPL,
seperti judul game yang terinstal diharddisk atau di jaringan (PC),
dan judul-judul aplikasi. Dan kode untuk pengaturan di tema
adalah "items_list", yang terdiri dari 2 koordinat XY (items_list_x dan items_list_y).
-
Icon Item
merupakan gambar icon yang ditampilkan OPL dari setiap item/judul
game yang terpilih (jika icon disertakan). Dan kode untuk
pengaturan di tema adalah "item_icon", yang terdiri dari 2 koordinat XY (item_icon_x dan item_icon_y).
-
Cover item
merupakan gambar cover atau sampul dari item/judul game yang
terpilih yang ditampilkan oleh OPL jika pada setting utama OPL
untuk Enable Cover Art = On dan gambar cover disertakan. Dan kode untuk pengaturan di tema adalah "item_cover", yang terdiri dari 2 koordinat XY (item_cover_x dan item_cover_y).
-
Tulisan ID item merupakan nama item atau ID dari judul game yang terpilih. Dan kode untuk pengaturan di tema adalah "item_text", yang terdiri dari 2 koordinat XY (item_text_x dan item_text_y).
-
Animasi
loading merupakan gambar loading yang dirender oleh OPL saat
meload data yang dibutuhkan, dan gambar loading ini merupakan
gambar dengan format PNG sebanyak 8 gambar yang dibaca dari file
OPL sendiri atau dari gambar loading yang disertakan pada tema yang
diterapkan. Dan kode untuk pengaturan di tema adalah "loading_icon", yang terdiri dari 2 koordinat XY (loading_icon_x dan loading_icon_y).
-
Tombol
Aksi OPL merupakan icon control yang disertai dengan penjelasan
dari tombol-tombol kontrol PS2 yang bisa digunakan di OPL untuk
mengakses pengaturan dan fungsi-fungsi lainnya. Dan kode untuk
pengaturan di tema adalah "hint_text" yang terdiri dari 2 koordinat XY (hint_text_x dan hint_text_y).
Okey.....
Setelah kita sudah mengerti bagian-bagian tema OPL berikut kode-kode pada pengaturan tema (conf_theme.cfg) seperti untuk Icon Menu dengan kode menu_icon_x untuk kode horisontal dan menu_icon_y
untuk kode vertikal beserta kode-kode elemen lainnya, dan nantinya
kode-kode tersebut yang di rubah nilainya jika ingin pindahkan letak
elemen dari tema OPL yang kita buat dari posisi/letak dari setiap
elemen tema seperti yang terlihat pada gambar diatas.
Selain dari kode-kode elemen tema diatas, pada pengaturan tema (conf_theme.cfg) juga memuat pengaturan lainnya, diantaranya:
use_default
Kode ini untuk mengatur tampilan elemen icon dari tema, dan untuk nilai dari kodenya jika 1 berarti ya, dan jika 0 berarti tidak.
Dan default untuk kode ini adalah 1, dimana semua gambar elemen yang ikut pada tema akan ditampilkan oleh OPL sesuai dengan pengaturan elemen tema (conf_theme.cfg).
Contoh :
Jika
menginginkan tema yang di buat hanya menggunakan icon default OPL,
maka pada pengaturan utama opl dicantumkan kode sebagai berikut
use_default=0
Tapi jika menginginkan semua gambar elemen yang ada pada folder tema ditampilkan oleh OPL juga, maka untuk kode use_default
tersebut tidak perlu kita cantumkan, karena untuk setting
defaultnya adalah 1 yang berarti semua gambar elemen pada folder tema
akan ditampilkan.
items_list_icons
Kode ini mengatur tampilan icon kecil disebelah kiri judul game, dan untuk nilai dari kodenya sendiri jika 1 berarti ditampilkan, dan 0 berarti tidak ditampilkan.
Dan default untuk kode ini adalah 0 yang berarti icon yang berada disebelah kiri judul game tidak ditampilkan oleh OPL.
Contoh :
Jika
icon kecil yang berada disebelah kiri judul game ingin juga
ditampilkan oleh OPL pada tema yang digunakan, maka pada pengaturan
OPL dicantumkan kode sebagai berikut:
items_list_icons=1
Sementara
jika icon kecil yang berada disebelah kiri judul game tidak ingin
ditampilkan oleh OPL, maka untuk kode items_list_icons tidak perlu
kita cantumkan, yang artinya mengikuti pengaturan default dari OPL
yang bernilai 0 (tidak ditampilkan).
displayed_items
Kode
ini mengatur jumlah judul item atau judul game yang ditampilkan
setiap layarnya, dan default jumlah judul item yang ditampilkan oleh
OPL adalah 20 baris.
Jadi
dengan kode ini kita bisa mengecilkan atau mengurangi judul game
yang ditampilkan oleh OPL setiap layarnya untuk menyesuaikan gambar
background dari tema yang digunakan.
Contoh :
Jika ingin OPL menampilkan judul item atau judul game hanya 15 judul/baris setiap layarnya, maka pada pengaturan OPL dicantumkan kode sebagai berikut:
displayed_items=15
Dan
untuk jumlah baris judul lainnya tinggal sesuaikan dengan keinginan
masing-masing, atau jika ingin tetap menampilkan judul game
sebanyak 20 baris setiap layarnya, maka untuk kode displayed_items
tidak perlu dicantumkan, yang artinya mengikuti aturan dari default
OPL yang menampilkan 20 judul item setiap layarnya.
background_mode
Kode ini mengatur tampilan latar (background) pada menu pilihan item OPL, dimana untuk nilai dari kodenya diantaranya
- 0
= Mode Picture, dimana pada mode ini OPL akan menampilkan gambar
background yang ada pada tema yang digunakan, tapi jika gambar
background tidak ditemukan, maka akan ditampilkan mode plasma.
- 1 = Mode Plasma, dimana pada mode ini ditampilkan latar dari OPL dengan animasi warna yang bisa diatur pada kode bg_color.
- 2 = Mode Color, dimana pada mode ini ditampilkan warna latar dari OPL yang bisa diatur pada kode bg_color dengan kode warna default bg_color=#28c5f9.
- 3
= Mode Art, dimana pada mode ini akan mendukung mode art atau
akan ditampilkan semua gambar cover, background, cover_overlay,
dan icon jika ditemukan, tapi jika tidak ditemukan, maka akan
diaktifkan mode Picture, dan jika tidak ditemukan gambar
background, maka akan diaktifkan mode Plasma.
Dan untuk default background_mode OPL bernilai 0 atau Mode Picture.
Contoh :
Jika menginginkan mode OPL menjadi mode Art, maka pada pengaturan tema OPL dicantumkan kode sebagai berikut:
background_mode=3
Sementara
untuk mode yang lain, tinggal kita rubah saja nilai untuk
background_mode sesuai dengan nilai yang sudah dijelaskan diatas.
background_alt_mode
Kode ini mengatur tampilan latar pada pilihan menu setting OPL, dimana untuk nilai default adalah 1 atau Mode Plasma, jadi jika kode ini tidak diatur atau masih menggunakan default dari OPL, maka saat menekan START dan 
untuk masuk dimenu setting akan ditampilkan latar warna animasi (plasma) yang berpatokan pada kode warna bg_color yang warna default adalah bg_color=#28c5f9.
Jadi jika menginginkan saat masuk di
setting untuk latar ditampilkan gambar background dari tema yang
diterapkan, maka pada pengaturan tema OPL dicantumkan kode sebagai
barikut:
background_alt_mode=0
Kode background_alt_mode=0 tersebut berarti bahwa, untuk latar pada menu setting OPL ditampilkan gambar atau Mode Picture, dimana gambar latar yang ditampilkan sesuai dengan gambar background yang ada pada tema yang diterapkan.
bg_color
Kode ini mengatur warna latar dari OPL, dimana untuk format warnanya menggunakan kode hexadecimal RGB (red, green, blue).
Dan default kode warna untuk bg_color ini adalah #28c5f9 atau warna biru langit
Untuk mencari kode warna RGB, kita
bisa menggunakan software visual color picker atau color picker dari
photoshop yang sudah dijelaskan pada postingan yang lalu.
Contoh :
Umpamanya untuk warna latar, kita akan menggunakan warna hijau, dimana untuk kode RGB warna hijau adalah #2df928
Maka pada pengaturan tema OPL dicantumkan kode sebagai berikut
bg_color=#2df928
Sementara
untuk kode warna latar yang lain, tinggal sesuaikan dengan kode
warna RGB yang didapat dari software color picker yang digunakan.
text_color
Kode ini mengatur warna tulisan yang digunakan oleh OPL, dimana untuk format warnanya digunakan kode hexadecimal RGB.
Default kode untuk text_color ini adalah #ffffff atau warna Putih.
Contoh :
Umpamanya kita akan merubah tulisan dengan warna Hitam, dimana untuk kode RGB warna hitam adalah #000000, maka pada pengaturan tema OPL dicantumkan kode sebagai berikut:
text_color=#000000
Sementara
untuk kode warna tulisan yang lain, tinggal gunakan software
color picker seperti yang sudah dijelaskan diatas, kemudian mengubah
nilai dari kode text_color sesuai dengan kode warna yang didapat dari color picker yang digunakan.
ui_text_color
Kode ini mengatur warna tulisan untuk dialog menu OPL, dimana untuk format warna yang digunakan adalah Hex RGB.
Default kode warna untuk ui_text color ini adalah #408040 atau warna Hijau.
Contoh :
Umpamanya kita akan merubah warna untuk kode ini menjadi warna merah, dimana untuk kode warna merah yang digunakan adalah #d60000. maka pada pengaturan tema OPL dicantumkan kode sebagai berikut:
ui_text_color=#d60000
Sementara
untuk code warna yang lainnya, gunakan software color picker dan
rubah nilai pada kode ui_text_color sesuai dengan kode warna yang
didapat di color picker.
sel_text_color
Kode ini mengatur warna tulisan untuk menu item yang terpilih, dimana untuk format warna yang digunakan adalah hex RGB.
Default kode warna untuk sel_text_color ini adalah #ff8000 atau warna Orange.
Contoh :
Umpamanya kita akan merubah warna untuk kode ini menjadi warna biru, dimana untuk kode warna biru yang digunakan adalah #0024ff, maka pada pengaturan tema OPL dicantumkan kode sebagai berikut:
sel_text_color=#0024ff
Sementara
untuk kode warna yang lain, maka caranya sama dengan kode warna
text seperti yang dijelaskan diatas, dan untuk semua kode warna text
pada OPL jika tidak ingin dirubah warna defaultnya, maka untuk
setiap kode text tidak perlu dicantumkan pada pengaturan tema OPL (conf_theme.cfg).
Okey...
Setelah
kita sudah tahu mengenai kode-kode yang digunakan beserta fungsinya
masing-masing, maka selanjutnya kita lanjutkan membuat gambar latar
yang akan kita gunakan untuk membuat sebuah tema OPL v 0.8.
Untuk
membuat gambar latar tema, maka untuk ukuran gambar yang digunakan
agar sesuai dengan mode PAL (640x448) dan NTSC (640x512) digunakan
ukuran gambar standar untuk background OPL yaitu 640x480 pixel dengan
format gambar sebagai berikut:
-
Gambar yang digunakan sebaiknya JPEG (*.jpg),
-
Format options gambar baseline optimized (bukan progressive),
-
Resolution sebaiknya antara 70 sampai 80,
-
Image quality sebaiknya antara 3 (low) sampai 5 (medium).
-
Tidak memerlukan gambar tumbnail.
Okey...
Selanjutnya kita membuat atau mempersiapkan gambar background yang akan kita jadikan sebagai tema OPL.
Dan
untuk coba-coba, kita mulai dengan membuat gambar tema yang tidak
terlalu rumit atau kita sesuaikan saja dulu dengan posisi default dari
setiap elemen-elemen tema OPL seperti pada gambar tampilan tema yang
dijelaskan pada awal tulisan ini, agar kita tidak perlu merubah dulu
posisi dari setiap koordinat XY elemen tema OPL.
Umpamanya setelah gambar latar selesai dibuat seperti pada contoh gambar dibawah ini.
Setelah gambar background sudah jadi, selanjutnya kita buat file untuk pengaturan tema (conf_theme.cfg). Dan untuk membuat file pengaturan tema pada contoh ini saya gunakan Notepad++.
maka
