Project: Gui5E

[ll00ll00ll00ll]

I have an idea that I would like help with. I have put a lot of work into making myself a standardized setup of all of the GUI resources for the 5E ruleset. In doing so, I have found that there are a lot of little tweaks that could be made to the .xml / .lua files that would make it much easier for mere mortals to take a theme project on. Right now, there is still a lot of hunting around for the resource and it's controlling line of code.

What I envision is a basic extension and a wiki showing how to use it. My hope is that this would make re-skinning Fantasy Grounds into a fairly painless process for most people. The thinking is that someone who is good at the artistic component might not be great at the coding, and vice-versa.

I know there are some very talented people on this forum and I feel like there is a yearning out there for a bit more variety in the themes available for Fantasy Grounds.

One stipulation is that there should be no charge for any of the resulting themes that are made with it. The "Pay What You Want" on the DMs Guild scheme is very fair. I want these themes to be free to anyone that can use them. My hope is to one day see hundreds of different themes available on DMs Guild. After all, what ultimately drew me to Fantasy Grounds was the community mods... this is something that FG has that the other VTTs don't have, or at least not nearly as many.

I will freely share what I've done so far, including the .ai files that I am using to generate the art resources with anyone who is willing to help with this project. This will be a nights and weekends affair for me, so obviously this is not something that's going to happen in a short time.

Any takers?

[Nickademus]

In doing so, I have found that there are a lot of little tweaks that could be made to the .xml / .lua files that would make it much easier for mere mortals to take a theme project on. Right now, there is still a lot of hunting around for the resource and it's controlling line of code.

I think the idea of a theme is to replace the graphics in the graphics folder of the ruleset. They should all being in that folder and its subfolders and you shouldn't need to touch any .xml or .lua files if you keep to the size graphic dimensions.

[ll00ll00ll00ll]

you would think so, however, the positioning of the individual "parts" is not at all obvious. For instance, then close and help buttons, are all registered to the original CoreRPG artwork. When you start moving things around, changing window shapes, the placement of those extra parts doesn't make sense.

Another big problem is that the window shapes in the original are not always centered in the space that is allowed for them, to allow for the different drop shadows, edge and corner treatments. When trying to "normalize" all of this, so that a potential single window design is possible, there are a lot of issues with how the original theme was designed. For instance, right now there are a total of 10 different window resource files (see the attached screenshot, all bright red parts are window resources / note the different white spacing around each). Really there should be maybe 2 or 3, and the xml should draw from just those. For each of them, there are separate close and help button positions.

Why this matters... For each of the different window resources, there are all of the other little resources that fit on top of them, and their placement on the windows is described by different lines of code. Going and tracking each of them down is the most time consuming part of doing a skin theme. If this was streamlined so that there were only 2 or 3 different window resources, then this would be much easier to standardize, so that anyone basically could venture into something like this.

Also, the code that points to the resources is not obvious, so what you would end up doing is basically copying the entire 5E of & CoreRPG folders so that you could replace everything. This is basically what I did, however like I said before, it's not really straight forward, and I doubt it would currently make much sense to anyone but me.

I can absolutely go into more detail, but suffice to say that it's not really as easy as just replacing the existing elements.

17154

[ll00ll00ll00ll]

Also, what I tried really hard to do is to leave as much revised code out of the extension. What I found is that a lot of the resource placement, adjustment is interlaced with xml that controls much more than just the look of the theme. I figured if that stuff could be left out, and the overrides were only overriding visual resource elements, then when version 3.2.2 comes out, it should hopefully continue to work, assuming they keep the resource names the same.

Since some of the resources are located in the CoreRPG ruleset, and some are in the 5E ruleset, editing all of the resources is difficult, especially when having to make an extension that overrides everything.

I'm absolutely not a coder, so I'm sure how I've achieved the stuff I've done so far could be done much much better, following best practices, etc. That's what I'm going for, a single location for a complete redesign of the theme that will minimize the designers interaction with the coding aspect, leaving them free to work on the design aspect.

[Zacchaeus]

Since this chap is looking to do something similar (https://www.fantasygrounds.com/forums/showthread.php?35831-Skinning-Fantasy-Grounds) perhaps he's your man.

[ll00ll00ll00ll]

Since this chap is looking to do something similar (https://www.fantasygrounds.com/forums/showthread.php?35831-Skinning-Fantasy-Grounds) perhaps he's your man.

Thanks for the heads up, I've replied to his thread.

[damned]

When I make themes I combine a lot of the frames. I end up with a chat frame, character sheet frame, combat tracker frame and an everything else frame. Sometimes I even combine chat and/or character sheet into the everything else frame. This reduces the artistic load on my poor old brain if nothing else.

[ll00ll00ll00ll]

yes, that's exactly what I'm talking about. I also combined all of the resource artwork folders, so that they're all in the same place (I can't tell you how many times I ended up putting the frames files into the icons folder, then wonder why they changes I just made don't appear on reload).

I pretty much know what needs to happen with the art files to make that happen, but it's how they relate to the story templates and other window classes that I don't have a full grasp on. I know when I tried to use just one window resource, it played hell with how some of the other related resources were placed. I guess I just don't understand the relative placement locations in the xml's.

[damned]

yes, that's exactly what I'm talking about. I also combined all of the resource artwork folders, so that they're all in the same place (I can't tell you how many times I ended up putting the frames files into the icons folder, then wonder why they changes I just made don't appear on reload).

I pretty much know what needs to happen with the art files to make that happen, but it's how they relate to the story templates and other window classes that I don't have a full grasp on. I know when I tried to use just one window resource, it played hell with how some of the other related resources were placed. I guess I just don't understand the relative placement locations in the xml's.

So I re-used the graphic but you still need to check and update the frame definition. Often though you can re-use the same definition contents across the multiple frames once you get it right... I hope that makes sense...?

[ll00ll00ll00ll]

Yes it makes sense, it's just that the frames are all different sizes and positioned differently within their allotted area. In any event, I take your meaning, and you are talking about exactly what I would like to do, however my ability and patience with redefining the positioning in the xml is minimal at best. I envision a situation where we've gone in and made all of the frames the same exact resource file, and then the elements that are positioned on top of those have all been re-figured in the xml so that they are positioned correctly. That way this all becomes much easier for anyone attempting to make a skin.

[damned]

Here is an example...
13 frames using the same graphic.
There are still about 5 different positioning definitions but several are reused multiple times....



<!-- Character selection -->
<framedef name="charselect">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>68,75,77,51</offset>
<insideoffset>0,0,5,7</insideoffset>
</framedef>
<!-- Utility windows -->
<framedef name="utilitybox">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>74,75,77,51</offset>
<insideoffset>0,0,5,7</insideoffset>
<topleft rect="0,0,100,100" />
<top rect="100,0,457,100" />
<topright rect="557,0,100,100" />
<left rect="0,100,100,438" />
<middle rect="100,100,457,438" />
<right rect="557,100,100,438" />
<bottomleft rect="0,538,100,100" />
<bottom rect="100,538,457,100" />
<bottomright rect="557,538,100,100" />
</framedef>
<framedef name="utilitybox2">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>74,75,77,51</offset>
<insideoffset>0,0,5,7</insideoffset>
<topleft rect="0,0,100,100" />
<top rect="100,0,457,100" />
<topright rect="557,0,100,100" />
<left rect="0,100,100,438" />
<middle rect="100,100,457,438" />
<right rect="557,100,100,438" />
<bottomleft rect="0,538,100,100" />
<bottom rect="100,538,457,100" />
<bottomright rect="557,538,100,100" />
</framedef>
<framedef name="utilitybox3">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>74,75,77,51</offset>
<topleft rect="0,0,100,100" />
<top rect="100,0,457,100" />
<topright rect="557,0,100,100" />
<left rect="0,100,100,438" />
<middle rect="100,100,457,438" />
<right rect="557,100,100,438" />
<bottomleft rect="0,538,100,100" />
<bottom rect="100,538,457,100" />
<bottomright rect="557,538,100,100" />
<insideoffset>0,0,5,7</insideoffset>
</framedef>
<framedef name="campaignlist_tables">
<bitmap file="graphics/frames/utilitybox.png" />
<topleft rect="0,0,74,75" />
<top rect="74,0,506,75" />
<topright rect="580,0,77,75" />
<left rect="0,75,74,512" />
<middle rect="74,75,506,512" />
<right rect="580,75,77,512" />
<bottomleft rect="0,587,74,66" />
<bottom rect="74,587,506,66" />
<bottomright rect="580,587,77,66" />
<insideoffset>0,0,6,23</insideoffset>
</framedef>
<framedef name="referencepage">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>74,75,77,51</offset>
<insideoffset>0,0,5,7</insideoffset>
</framedef>
<framedef name="referencelist">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>74,75,77,51</offset>
<insideoffset>0,0,5,7</insideoffset>
</framedef>
<!-- Token Bag -->
<framedef name="tokenbag">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>74,75,77,51</offset>
<insideoffset>0,0,12,14</insideoffset>
</framedef>
<!-- Calendar -->
<framedef name="calendar">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>5,5,10,10</offset>
<insideoffset>0,0,5,5</insideoffset>
<topleft rect="0,0,100,100" />
<top rect="100,0,457,100" />
<topright rect="557,0,100,100" />
<left rect="0,100,100,438" />
<middle rect="100,100,457,438" />
<right rect="557,100,100,438" />
<bottomleft rect="0,538,100,100" />
<bottom rect="100,538,457,100" />
<bottomright rect="557,538,100,100" />
</framedef>
<!-- Party Sheet -->
<framedef name="partysheet">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>5,5,10,10</offset>
<insideoffset>0,0,5,5</insideoffset>
<topleft rect="0,0,100,100" />
<top rect="100,0,457,100" />
<topright rect="557,0,100,100" />
<left rect="0,100,100,438" />
<middle rect="100,100,457,438" />
<right rect="557,100,100,438" />
<bottomleft rect="0,538,100,100" />
<bottom rect="100,538,457,100" />
<bottomright rect="557,538,100,100" />
</framedef>
<!-- Images -->
<framedef name="imagebox">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>22,22,27,27</offset>
<insideoffset>0,0,5,5</insideoffset>
<topleft rect="0,0,100,100" />
<top rect="100,0,457,100" />
<topright rect="557,0,100,100" />
<left rect="0,100,100,438" />
<middle rect="100,100,457,438" />
<right rect="557,100,100,438" />
<bottomleft rect="0,538,100,100" />
<bottom rect="100,538,457,100" />
<bottomright rect="557,538,100,100" />
</framedef>
<!-- Story and Notes -->
<framedef name="campaignlistwithtabs">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>74,75,77,51</offset>
<insideoffset>0,0,5,7</insideoffset>
<topleft rect="0,0,100,100" />
<top rect="100,0,457,100" />
<topright rect="557,0,100,100" />
<left rect="0,100,100,438" />
<middle rect="100,100,457,438" />
<right rect="557,100,100,438" />
<bottomleft rect="0,538,100,100" />
<bottom rect="100,538,457,100" />
<bottomright rect="557,538,100,100" />
</framedef>
<!-- Other Campaign Records -->
<framedef name="recordsheet">
<bitmap file="graphics/frames/utilitybox.png" />
<offset>5,5,10,10</offset>
<insideoffset>0,0,5,5</insideoffset>
<topleft rect="0,0,100,100" />
<top rect="100,0,457,100" />
<topright rect="557,0,100,100" />
<left rect="0,100,100,438" />
<middle rect="100,100,457,438" />
<right rect="557,100,100,438" />
<bottomleft rect="0,538,100,100" />
<bottom rect="100,538,457,100" />
<bottomright rect="557,538,100,100" />
</framedef>

[ll00ll00ll00ll]

so, the second and third lines "offset" and "insideoffset", what exactly are they referring to? Is that the frame's position inside it's allotted space, or is it dealing with the content that goes on top of that frame?

[Trenloe]

so, the second and third lines "offset" and "insideoffset", what exactly are they referring to?
https://www.fantasygrounds.com/refdoc/framedef.xcp

[ll00ll00ll00ll]

Just a general update / interest post. Since December of 2016 I've now had 500 combined downloads of the PRO & GAP themes (about 250 each). Of those, 83 were "paid", as in some dollar amount was given (these are pay what you want).

I know others on here sell modules on the DM's Guild, so I have no idea how that total number stacks up, I'm sure it's fairly low, but I find it impressive, I was happy when 100 downloads happened. Anyways, the reason for posting this is to give "would-be" theme designers some idea of what they can expect, and to demonstrate that there is definitely an interest out there for this kind of thing.

At this time it looks like my two themes are the only ones on the DM's Guild... I wish that was not true, I'm certain there are other designers on here with vastly different styles, I'm also sure that making more themes available would be met with praise.

As I've stated elsewhere on this forum, I'm not currently in a position to take on another design project, but I'd be willing to pass on any of the info I've gathered so far. If you're in a position to handle Adobe Illustrator files, I would be happy to send you the source art files, my only stipulation is that the resulting themes be offered as Pay What You Want. (Just PM me)