spi.snes themes


sebt3

homebrew player (P. & C.)
Joined
Sep 9, 2008
Messages
4,805
Age
39
Location
France
Website
sebt3.openpandora.org
Hi there,

I'm rather unhappy with the UI , especially with how it look. The good news is that it's completly themable and you already have all the tools requiered to build a new one. I'll explain you how.

The sources contain a directory named theme_data. Grab this.

Then in command lines :

/usr/pandora/scripts/pnd_run.sh -p "/path/to/spi.snes.pnd" -m
cd /mnt/utmp/spi.snes
./bin/interface.pack -t theme.eet /path/to/theme_data
Next run of the emulator will use the theme *you* generated.
Font rendering

For text rendering it expect the definition of these font alias : fps, text1, text2, text3

for this, just drop a ttf file in the directory and create a .txt file with the same name containing only the alias and a number : the font size for this alias. More lines can be added for other alias.

See the included file in the directory t "get" it :p

UI Drawing elements

It all come to a single png file where all the sprites have to exist.

The file should be in GLES size (512x512, 1024x1024 or 2048x2048)

With this .png file a .txt file of the same name should be created containing the sprites position in a simple list form. The file should be a list of the following columns : sprite alias name, top left coordinate, bottom right coordinate. coordinate matching the position of the sprite on the image file. like :


blue_sliderLeft 339:143 378:174
blue_sliderRight 378:143 417:174
hints_bt_a 511:596 547:633
hints_bt_b 551:596 587:633
Positionning everythingit all come to the main.frms file.

in this text file, the 1st line describe from which files the sprites be used.

here is a sniplet :


from menusheet.png
sprt menu_bg.frm red_button10 150:100 650:380 box 9
text menu_text1.frm default 360:120 -Menu
sprt menu_slot_bg.frm transparent 200:160 589:190
sprt menu_slot_bk.frm blue_sliderLeft 350:160 389:190
sprt menu_slot_nt.frm blue_sliderRight 550:160 589:190
...
All the defined lines in this are requiered, some might be added...line starting with the token "text" position a text. Second colomn is the name of the text the UI system will look for, the next column was planned for selecting the font alias, but it's currently not working. then come the top left coordinate of the text and the Text itself. (the minus have to be there and will be removed before display).

The lines starting with "sprt" describe a drawing element. after it's name come the label of the UI element as created in the previous file. The the top-left and bottom-right coordinate on the pandora screen.

The "box" option allow you to have the edges not scaled to kept at pixel perfect (but then the center will be even more scaled). It allow to preserv the edge of a box :)

Let me explain what the name mean : 1st part is the internal name of the UI "windows" displayed. Then come the widget name.

But there is a few special one. for each "window" a sprite named bg is used to draw the window background. then come text1 to text4 which can help to describe the content of the window.

Most widget have their own "bg" elements. Other describe other part of the widgets. if you dont want to draw anything use a transparent alias like I did.

If you want to have more complex drawing it is even possible. instead of having a line holding a sprite name, create a file named this way. then have a look at the demo main_scene.frm file :p

This pretty much mean you're free to come up with anything UI wise :p

I'm eager to see what you'll create :)
 
Top