Windows > Third Party Plug-ins, Programs, and Skins
Standard View Skinning Tutorial
Dirhael:
--- Quote from: Matt on June 12, 2015, 08:01:37 am ---You can specify an image that's bigger than needed for 100% (which is good because of high DPI and scaling).
So you make the image four times as big and say that the scale is 4.
--- End quote ---
Just wanted to add that the Scale parameter is actually more flexible than it first appears. You can target each scaling percentage individually if you need to. For instance, one of the images I used in my skin didn't look quite right at 150%, but was OK on most of the others. The solution was to use <Entry Scale="1.5" ...> and create a separate image for just this scaling factor.
marko:
I think I need this for the frame border, but cannot get it to work. Could you show me how you are adding specific scaling images in the xml?
The issue I am having is, that with a scale of four, and 20 pixel frame border images, MC is leaving a 15 pixel internal border, filled with the "Face3D" colour (magenta for emphasis below) when used at 100%. The border gets smaller as the scale goes up, until disappearing at 400%, displaying as intended.
Dirhael:
--- Quote from: marko on August 19, 2015, 01:02:30 am ---I think I need this for the frame border, but cannot get it to work. Could you show me how you are adding specific scaling images in the xml?
The issue I am having is, that with a scale of four, and 20 pixel frame border images, MC is leaving a 15 pixel internal border, filled with the "Face3D" colour (magenta for emphasis below) when used at 100%. The border gets smaller as the scale goes up, until disappearing at 400%, displaying as intended.
--- End quote ---
I'll try, although I don't know if it'll solve that issue or not.
Here's a snipped portion of my skin's main.xml:
--- Code: --- <EntryGroup Name="VolumeSliderFront">
<Entry Bitmap="PlayerBar_SliderVolFront.png" />
<Entry Scale="1.5" Bitmap="PlayerBar_SliderVolFront-1,5x.png" />
<Entry Scale="2" Bitmap="PlayerBar_SliderVolFront-2x.png" />
</EntryGroup>
--- End code ---
Here you can see that I'm using Scale="1.5" and Scale="2" (the former in this case meaning "use this image for 150% for everything above 100%, up to 150%" and the latter "use this image for anything above that"), and each of those entries have their own unique image file. If you needed a unique image or setting such as margins etc. for, let's say 175% then you'd add an entry with Scale="1.75" (in my example, this would then be used for 175%-199%).
Hope this helps you out :)
Edit: Short summary, for a skin element using Scale 1, 1.5, 1.75 & 2:
Scale="1" : 0 - 100%
Scale="1.5" : 101 - 150%
Scale="1.75" : 151- 175%
Scale="2" : 176 - 400%
marko:
Dirhael,
"<EntryGroup >" completely passed me by. This fixes my issue.
I would need one for every scaling level for it to be perfect, but with 1x, 2x, 3x and 4x, the 'inbetweens' are barely noticeable, and I think I can live with that.
I had all but given up on fixing this one, thank you very much for replying.
-marko
Dirhael:
--- Quote from: marko on August 20, 2015, 01:23:33 am ---Dirhael,
"<EntryGroup >" completely passed me by. This fixes my issue.
I would need one for every scaling level for it to be perfect, but with 1x, 2x, 3x and 4x, the 'inbetweens' are barely noticeable, and I think I can live with that.
I had all but given up on fixing this one, thank you very much for replying.
-marko
--- End quote ---
Good to hear you solved it :) It can certainly be difficult to figure out just what causes a particular issue with the skinning engine, as there are some bugs and quite a few inconsistencies in what works where. In a "perfect world", the skinning engine would use CSS/SASS for styling. It would have some drawback as well, but it would have made things easier I think...
Navigation
[0] Message Index
[#] Next page
[*] Previous page
Go to full version