Cara Membuat Tema untuk OPL 0.8

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 :

1. 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).
2. 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).
3. 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).
4. 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).
5. 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).
6. 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).
7. 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).
8. 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++.

Untuk model gambar latar seperti pada contoh ini, maka yang perlu kita rubah untuk menyesuaikan gambar background diantaranya:

• Untuk posisi elemen tema digunakan posisi default, jadi untuk kode elemen tema tidak perlu dicantumkan pada file konfigurasi tema.
• Warna tulisan yang digunakan adalah warna putih, yang artinya sama dengan pengaturan warna default OPL, jadi untuk kode warna tulisan (text_color) tidak perlu dicantumkan pada file pengaturan tema.
• Untuk warna latar digunakan warna abu-abu yang pada contoh ini kode abu-abu yang digunakan adalah #8d9190, maka untuk kode bg_color=#8d9190.
• Warna tulisan untuk item terpilih (sel_text_color) yang digunakan pada contoh tema ini adalah Hitam, dimana kode hex untuk warna hitam adalah #000000, maka untuk kode tulisan item terpilih adalah sel_text_color=#000000.
• Dan pada contoh tema ini untuk icon kecil sebelah kiri judul game akan ditampilkan juga, maka untuk kode items_list_icons=1.
• Untuk mode background yang akan digunakan adalah mode art, maka untuk kode background_mode=3.
• Dan pada gambar latar untuk menu setting (setelah menekan START dan segitiga) digunakan gambar latar pada tema atau mode picture, maka kode background_alt_mode=0.

Okey... setelah semua kode sudah kita tentukan, maka selanjutnya kode-kode tersebut kita tulis pada notepad++, seperti pada contoh gambar dibawah ini.

Selanjutnya untuk merubah ke format UNIX, klik Edit >> EOL Conversion >> UNIX Format seperti pada contoh gambar dibawah ini.

Selanjutnya disave dengan menekan CTRL+S dan simpan dengan nama file conf_theme.cfg, seperti pada contoh gambar dibawah ini.

Okey.... sampai tahap ini, tema OPL sudah siap digunakan.

Dan pada OPL versi 0.8 beta sudah mendukung juga Cover_overlay, dimana cover_overlay merupakan semacam bingkai yang akan membentuk cover standar OPL (segi empat) menjadi berbagai macam model mengikuti model dari cover_overlay.

Dan untuk model-model cover_overlay yang sudah siap pakai sudah saya uploadkan pada postingan terdahulu, bagi teman-teman yang ingin menggunakannya, silahkan download disini.

Setelah sudah mendapatkan model cover_overlay yang diinginkan, umpamanya seperti pada contoh gambar dibawah ini.

Selanjutnya masukkan kode kordinat cover_overlay pada pengaturan tema dengan cara sebagai berikut:

Buka file pengaturan tema (conf_theme.cfg) di notepad++, kemudian kode kordinat cover_overlay dimasukkan pada file pengaturan tema seperti pada contoh ini, akan seperti pada gambar dibawah ini setelah kode cover_overlay dimasukkan pada file conf_theme.cfg.

Selanjutnya tekan CTRL+S untuk menyimpan perubahan.

Kemudian untuk file gambar cover_overlay.png di tempatkan bersama dengan gambar tema beserta pengaturan tema dalam satu folder, dimana untuk pengaturan penulisan folder yang dimengerti oleh OPL sebagai suatu folder tema sebagai berikut:

thm_Nama Tema

Penjelasan :

• thm_ merupakan awal nama setiap folder OPL v 0.8 beta yang harus ditulis.
• Nama Tema merupakan nama dari tema dan nama ini yang akan ditampilkan oleh OPL dimenu pilihan tema pada pengaturan display OPL.

Seperti pada contoh ini saya tempatkan pada folder thm_FFVII seperti pada contoh gambar dibawah ini.

Setelah ini, tema sudah siap digunakan pada OPL v 0.8 beta dengan cover_overlay template.

Dan untuk tema ditempatkan pada:

• Jika HD Internal ditempatkan pada partisi +OPL/THM/thm_Nama Tema.
• Jika HD External ditempatkan pada folder THM/thm_Nama Tema.
• Jika Ethernet (SMB) ditempatkan pada folder share smb yang digunakan pada folder THM/thm_Nama Tema.

Selesai.