↕
How to Scale w/ Examples
Droptop can scale anywhere between 80% to 300% of its original size. In order for your app's meters to be position on their X/Y axis and to be the correct Width/Height regardless of the scale Droptop is set to, you will need to include the
#DroptopSize#
variable in all X/Y and W/H parameters for each meter you create, as well as anything that has to do with a Meter's size, such as a string's FontSize
parameter, padding, etc.Included meters, such as the dropdown menu, items, and default text and shapes all automatically scale with Droptop - Only meters you create will need to include the
#DroptopSize#
variable.The value of
DroptopSize
is equal to 1.0 at 100%, 0.8 at 80%, 1.5 at 150%, and 3.0 at 300%. If you are creating an app for the first time, it's recommended that you build your app with Droptop set to 100% scale - This way you can add the #DroptopSize#
variable to your Meters later on in the development process.1
[StringMeter]
2
Meter=String
3
FontSize=12
4
X=8
5
Y=15
6
W=#DropdownMenuWidth#
7
H=#DropdownItemHeight#
8
Padding=5,0,5,0
1
[StringMeter]
2
Meter=String
3
FontSize=(12*#DroptopSize#)
4
X=(8*#DroptopSize#)
5
Y=(15*#DroptopSize#)
6
W=#DropdownMenuWidth#
7
H=#DropdownItemHeight#
8
Padding=(5*#DroptopSize#),0,(5*#DroptopSize#),0
In the above example, we multiplied
FontSize
, X
, Y
, and Padding
by #DroptopSize#
. We did not multiply #DropdownMenuWidth#
or #DropdownItemHeight#
because these variables already scale automatically with Droptop. In padding, we only multiplied the sections of padding containing a value - We do not need to scale a value if it equals 0.Let's try another example...
1
[ImageMeter]
2
Meter=Image
3
ImageName=#SKINSPATH#Droptop Community Apps\Apps\#MyAppID#\Images\MyImage.png
4
X=[StringMeter:X]
5
Y=([StringMeter:YH]+5)
6
W=100
7
H=100
1
[ImageMeter]
2
Meter=Image
3
ImageName=#SKINSPATH#Droptop Community Apps\Apps\#MyAppID#\Images\MyImage.png
4
X=[StringMeter:X]
5
Y=([StringMeter:YH]+(5*#DroptopSize#))
6
W=(100*#DroptopSize#)
7
H=(100*#DroptopSize#)
In the above example, we set the X position to match the X position of
StringMeter
and the Y position to match the Y plus its Height of StringMeter
- These do not need to be scaled as the X
, Y
, and H
of StringMeter
are already scaled. But the 5 in the Y
parameter does need to be scaled. We also scaled the Meter's Width and Height.Last modified 3mo ago