[Show] Theme System(Image Heavy)

12/30/2012 04:41 xMootie#1
Since no one has been able to code in v19 interface, I'll show you that it's possible and relatively easy.

The theme system I've developed allows for additional theme integration, along with the pre-v19 and post-v19 themes. Maybe I'll code in the cFlyff theme eventually. Anyways, here are the screenshots.

[Launcher Config] Post-v19 theme selected
[Only registered and activated users can see links. Click Here To Register...]

[Post-v19 Theme] Login Screen
[Only registered and activated users can see links. Click Here To Register...]

[Post-v19 Theme] Character Selection
[Only registered and activated users can see links. Click Here To Register...]

[Post-v19 Theme] Character Creation(note the 2nd Password Prompt for security)
[Only registered and activated users can see links. Click Here To Register...]

[Post-v19 Theme] Character Selection with 2nd Password Prompt
[Only registered and activated users can see links. Click Here To Register...]

[Post-v19 Theme] Inventory
[Only registered and activated users can see links. Click Here To Register...]

[Post-v19 Theme] Item linking
[Only registered and activated users can see links. Click Here To Register...]

[Post-v19 Theme] Party Finder
[Only registered and activated users can see links. Click Here To Register...]

[Launcher Config] Pre-v19 theme selected
[Only registered and activated users can see links. Click Here To Register...]

[Pre-v19 Theme] Login Screen
[Only registered and activated users can see links. Click Here To Register...]

[Pre-v19 Theme] Character Selection
[Only registered and activated users can see links. Click Here To Register...]

[Pre-v19 Theme] Character Creation(note the 2nd password prompt for security)
[Only registered and activated users can see links. Click Here To Register...]

[Pre-v19 Theme] Character Selection with 2nd Password Prompt
[Only registered and activated users can see links. Click Here To Register...]

[Pre-v19 Theme] Character Selection with 2nd Password Change Window
[Only registered and activated users can see links. Click Here To Register...]

[Pre-v19 Theme] Inventory
[Only registered and activated users can see links. Click Here To Register...]

[Pre-v19 Theme] Item Linking
[Only registered and activated users can see links. Click Here To Register...]

More screenshots coming soon.

Comments, questions, and criticism are welcome.
12/30/2012 08:45 ThoughtfulDev#2
thats nice but one question,do u have two different resdata.inc ? or how du u made it?
12/30/2012 09:56 Andrej-Delany#3
I think he do it like APP_Login und APP_LOGIN_V19 und macht dann eine abfrage if V19 enabled then use APP_LOGIN_V19
12/30/2012 10:23 Jopsi332#4
Quote:
Originally Posted by Andrej-Delany View Post
I think he do it like APP_Login und APP_LOGIN_V19 und macht dann eine abfrage if V19 enabled then use APP_LOGIN_V19
Looks like u use the same buttonn system like v19 for old interface. Just othrt trxt szyle and color
12/30/2012 16:24 xMootie#5
Quote:
Originally Posted by Jopsi332 View Post
Looks like u use the same buttonn system like v19 for old interface. Just othrt trxt szyle and color
This is correct, I use only one resdata.inc.
12/30/2012 16:42 Jopsi332#6
Quote:
Originally Posted by XorLethal View Post
This is correct, I use only one resdata.inc.
yeah

how much if's you have for if(scanner.Token == "WndEditTile.tga")
etc. ? ;D

so my idea to make this is in resdata.inc reading in f.e.
pWndApplet->strTexture = scanner.token;
if(g_Option.Theme == 0)
{
if(scanner.Token == "WndInventory3d.tga")
{
pWndApplet->strTexture = "WndInventory3dv15.tga";
}
}
with the most applets,to change the images

and for buttons split the button texture path last 4(.tga) and replace with
v15.tga
12/30/2012 17:19 Delightx3.#7
AWESOME :)
12/30/2012 17:36 DarkFlyffTeam#8
Quote:
Originally Posted by Jopsi332 View Post
yeah

how much if's you have for if(scanner.Token == "WndEditTile.tga")
etc. ? ;D

so my idea to make this is in resdata.inc reading in f.e.
pWndApplet->strTexture = scanner.token;
if(g_Option.Theme == 0)
{
if(scanner.Token == "WndInventory3d.tga")
{
pWndApplet->strTexture = "WndInventory3dv15.tga";
}
}
with the most applets,to change the images

and for buttons split the button texture path last 4(.tga) and replace with
v15.tga

It may use the resdata to load the theme instead source, which is more efficient.
12/30/2012 18:14 xMootie#9
Quote:
Originally Posted by Jopsi332 View Post
yeah

how much if's you have for if(scanner.Token == "WndEditTile.tga")
etc. ? ;D

so my idea to make this is in resdata.inc reading in f.e.
pWndApplet->strTexture = scanner.token;
if(g_Option.Theme == 0)
{
if(scanner.Token == "WndInventory3d.tga")
{
pWndApplet->strTexture = "WndInventory3dv15.tga";
}
}
with the most applets,to change the images

and for buttons split the button texture path last 4(.tga) and replace with
v15.tga
I have separate windows for each, since they're aligned differently. If a user selects pre-v19 theme, the window Id used for CWndInventory will be APP_INVENTORY. Otherwise, it'll be APP_INVENTORY_EX. I probably could have made a system to optionally store separate layouts for each theme in a single window Id, but this should be fine for now.

When I develop a cFlyff-like theme, I might code in a system for that if many of the windows require separate layouts.

[Only registered and activated users can see links. Click Here To Register...]

[Only registered and activated users can see links. Click Here To Register...]

Quote:
Originally Posted by DarkFlyffTeam View Post
It may use the resdata to load the theme instead source, which is more efficient.
It's probably more efficient to do it in source actually, but much more convenient to do in res data.
12/30/2012 18:21 Zoeybird#10
I do it with 2 resdata(resdatav19.inc and resdatav15.inc), i think this is more easier/clearer then do it in 1 resdata. CFlyff/v19/Classic Theme is a nice Idea, then User can swap 3 Themes. So you can make infinitely Themes xD
Change you your Theme with neuz.ini change?
12/30/2012 18:26 xMootie#11
Quote:
Originally Posted by Zoeybird View Post
I do it with 2 resdata(resdatav19.inc and resdatav15.inc), i think that is more easy then do it in 1 resdata and itīs more clearer i mean. CFlyff/v19/Classic Theme is a nice Idea, then User can change 3 Themes.
I have one "resdata.inc", but also .skin files. Below are the contents of them.

resDatav1.skin
Quote:
// Theme Directory
Default
// Version
1
// Window Caption Centered
0
// Official
0
// Text Color
0xFF000000
// Default Window Caption Color
0xFFFFFFFF
// Default Window Caption Outline Color
0xFFD95B33
// Default StaticCtrl Caption Color
0xFF2E70A9
// Default StaticCtrl Text Caption Color
0xFFFFFFFF
// Default ButtonCtrl Caption Color
0xFFFFFFFF
// Default ButtonCtrl Caption Outline Color
0xFF6D6D6D
// Default ButtonCtrl Disabled Caption Color
0xFFFFFFFF
// Default ButtonCtrl Disabled Caption Outline Color
0xFFB6B6B6
// Default ButtonCtrl Pushed Caption Color
0xFFFFFFFF
// Default ButtonCtrl Pushed Caption Outline Color
0xFF6D6D6D
// Default ButtonCtrl Highlighted Caption Color
0xFFF4CDB6
// Default ButtonCtrl Highlighted Caption Outline Color
0xFFE17230
// Default RadioCtrl Caption Color
0xFF404040
// Default RadioCtrl Highlighted Caption Color
0xFF4040FF
// Default CheckBoxCtrl Caption Color
0xFF404040
// Default CheckBoxCtrl Highlighted Caption Color
0xFF4040FF
// Listbox Text Color
0xFF000000
// Listbox Selected Text Color
0xFF4040FF
// Listbox Highlighted Color
0xFFFF8000
// Listbox Disabled Color
0xFFAAAAAA
// ItemCtrl Number Color
0xffb0b0f0
// ItemCtrl Number Outline Color
0xFF000000
// TabCtrl Text Color
0xFFFFFFFF
// TabCtrl Selected Text Color
0xFF000000
// ComboBox Background
0xFFFFFFFF
// ComboBox Background Outline
0xFFC8C8C8
// Default ButtonCtrl Caption Color
0xFFFFFFFF
// Default ButtonCtrl Caption Outline Color
0xFF000000
resDatav2.skin
Quote:
// Theme Directory
v19
// Version
2
// Window Caption Centered
1
// Official
0
// Text Color
0xFFFFFFFF
// Default Window Caption Color
0xFFFFDD66
// Default Window Caption Outline Color
0xFF000000
// Default StaticCtrl Caption Color
0xFFFFDD66
// Default StaticCtrl Text Caption Color
0xFFC4C4C4
// Default ButtonCtrl Caption Color
0xFF1C1C1C
// Default ButtonCtrl Caption Outline Color
0x00000000
// Default ButtonCtrl Disabled Caption Color
0xFF1C1C1C
// Default ButtonCtrl Disabled Caption Outline Color
0x00000000
// Default ButtonCtrl Pushed Caption Color
0xFF1C1C1C
// Default ButtonCtrl Pushed Caption Outline Color
0x00000000
// Default ButtonCtrl Highlighted Caption Color
0xFF746B55
// Default ButtonCtrl Highlighted Caption Outline Color
0x00000000
// Default RadioCtrl Caption Color
0xFFFFF9C6
// Default RadioCtrl Highlighted Caption Color
0xFFFFF9C6
// Default CheckBoxCtrl Caption Color
0xFFFFF9C6
// Default CheckBoxCtrl Highlighted Caption Color
0xFFFFF9c6
// Listbox Text Color
0xFFFFFFFF
// Listbox Selected Text Color
0xFF27C4CB
// Listbox Highlighted Color
0xFFFD5FFF
// Listbox Disabled Color
0xFFAAAAAA
// ItemCtrl Number Color
0xFF85FF8A
// ItemCtrl Number Outline Color
0xFF000000
// TabCtrl Text Color
0xFF968970
// TabCtrl Selected Text Color
0xFFFFFFFF
// ComboBox Background
0xFF000000
// ComboBox Background Outline
0xFF746B55
// Default ButtonCtrl Caption Color
0xFF1C1C1C
// Default ButtonCtrl Caption Outline Color
0xFFFFFFFF
resDataOffi.skin(legacy format support for v19 theme, I only use with Rose to view what officials are developing)
Quote:
// Theme Directory
Offi
// Version
2
// Window Caption Centered
1
// Official
1
// Text Color
0xFFFFFFFF
// Default Window Caption Color
0xFFFFDB6F
// Default Window Caption Outline Color
0xFF000000
// Default StaticCtrl Caption Color
0xFFFFDB6F
// Default StaticCtrl Text Caption Color
0xFFC4C4C4
// Default ButtonCtrl Caption Color
0xFF1C1C1C
// Default ButtonCtrl Caption Outline Color
0x00000000
// Default ButtonCtrl Disabled Caption Color
0xFF1C1C1C
// Default ButtonCtrl Disabled Caption Outline Color
0x00000000
// Default ButtonCtrl Pushed Caption Color
0xFF1C1C1C
// Default ButtonCtrl Pushed Caption Outline Color
0x00000000
// Default ButtonCtrl Highlighted Caption Color
0xFF746B55
// Default ButtonCtrl Highlighted Caption Outline Color
0x00000000
// Default RadioCtrl Caption Color
0xFFFFF9C6
// Default RadioCtrl Highlighted Caption Color
0xFF746B55
// Default CheckBoxCtrl Caption Color
0xFFFFF9c6
// Default CheckBoxCtrl Highlighted Caption Color
0xFF746B55
// Listbox Text Color
0xFFFFFFFF
// Listbox Selected Text Color
0xFF27C4CB
// Listbox Highlighted Color
0xFFFD5FFF
// Listbox Disabled Color
0xFFAAAAAA
// ItemCtrl Number Color
0xFF85FF8A
// ItemCtrl Number Outline Color
0xFF000000
// TabCtrl Text Color
0xFF968970
// TabCtrl Selected Text Color
0xFFFFFFFF
// ComboBox Background
0xFF000000
// ComboBox Background Outline
0xFF746B55
// Default ButtonCtrl Caption Color
0xFF1C1C1C
// Default ButtonCtrl Caption Outline Color
0xFFFFFFFF
Quote:
Originally Posted by Zoeybird View Post
Change you your Theme with neuz.ini change?
Yes, below is a sample Neuz.ini from my client. (My config isn't perfect, especially for pet filter which I wrote a long time ago...)
Quote:
[chat]
filter1 = 31
filteretc = 832
filter4 = 9
filter5 = 17
filter3 = 4
cmdfilter = 0
word_filter = 0
filter2 = 2

[object]
shadow = 0
range = 0
detail = 0

[character]
display_damage = true
display_mask = true

[texture]
detail = 0

[resolution]
height = 900
fullscreen = false
width = 1440

[interface]
pet_filter8 = 1
notice_time = 0
pet_filter3 = 1
pet_filter4 = 1
allow_say = true
pet_filter14 = 1
pet_filter5 = 1
display_monster_name = true
display_player_names = true
show_dropped_items = true
allow_trade = true
pet_filter0 = 1
pet_filter9 = 1
allow_shout = true
pet_filter1 = 1
auto_attack = true
display_buff_timers = true
player_select_mode = false
theme_id = 1
pet_filter15 = 1
display_other_player_names = true
allow_messenger_add = true
pet_filter6 = 1
pet_filter12 = 1
pet_filter13 = 1
buff_status_mode = 0
mouse_speed = 1
pet_filter10 = 1
pet_filter11 = 1
pet_filter2 = 1
notice = true
allow_messenger_message = true
camera_locked = true
version = 1
zoom_limit = false
allow_party = true
rolleffect = false
alpha = 255
pet_filter7 = 1

[tutorial]
guide2 = 0
instant_help = 0
tip = false
guide1 = 0
level = 0
guide3 = 0

[effects]
linear_mipmap = true
weather = false
fsmsaa = 2
anisotropic_filtering = true
bloom = 0

[logon]
username = mootie
save_account = true
server_id = 1
ip_addr = logon.aetherflyff.com
cluster_id = 1

[sfx]
quality = 5

[world]
view_range = 0

[sound]
music_volume = 0
effect_volume = 0
voice = true
battle_bgm = false

[screen]
contrast = 1
overbright = 10
gamma = 1
12/30/2012 22:42 DerObstBauerFreak#12
Is there the program ready to download?
I mean Rose GUI Editor.

if yes, please send me the Downloadlink.
12/30/2012 22:53 Мichie#13
Really Nice this System.
12/30/2012 23:13 xMootie#14
Quote:
Originally Posted by DerObstBauerFreak View Post
Is there the program ready to download?
I mean Rose GUI Editor.

if yes, please send me the Downloadlink.
No, it's a private tool that was developed by XorNet. Only XorNet developers have access.
12/31/2012 00:13 DerObstBauerFreak#15
ok.
Nice System.

How long did you learn c++?
Did you learn it on a book or internet site?