Hypoxic125/Sandbox – User
Jump to navigation
Jump to search
Hypoxic125 (talk | contribs) No edit summary |
Hypoxic125 (talk | contribs) No edit summary |
||
(6 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{ | {{TOC|side}} | ||
Creating a custom loading bar involves utilizing two images. A background image (typically desaturated) and a foreground image (full color). | |||
Key things to establish before you develop your own loading bar: | |||
* Where will your control be defined | |||
* In what direction will the loading bar flow in | |||
== Required Images == | |||
[[File:arma3 decal-rifle-gray.png|300px|frameless|right|Background Image - Desaturated]][[File:arma3 decal-rifle-pink.png|300px|frameless|right|Foreground Image - Full Color]] | |||
You will need to have two images: | |||
* Background Image: Desaturated | |||
* Foreground Image: Full Color | |||
These images will need to be converted from .png to .paa using TexView2 | |||
== | == Building The Config == | ||
'''Define Pixel Grid Macros''' | |||
<syntaxhighlight lang="cpp"> | <syntaxhighlight lang="cpp"> | ||
#define pixelScale 0.5 | |||
#define GRID_X safezoneX | |||
#define GRID_Y safezoneY | |||
#define GRID_W (pixelW * pixelGridNoUIScale * pixelScale) | |||
#define GRID_H (pixelH * pixelGridNoUIScale * pixelScale) | |||
#define CENTER_X ((getResolution select 2) * 0.5 * pixelW) | |||
#define CENTER_Y ((getResolution select 3) * 0.5 * pixelH) | |||
</syntaxhighlight> | </syntaxhighlight> | ||
'''Define Image Positions''' | |||
'' | |||
<syntaxhighlight lang="cpp"> | <syntaxhighlight lang="cpp"> | ||
#define IMAGE_X 0 | |||
#define IMAGE_Y 0 | |||
// IMAGE_W and IMAGE_H need to follow the aspect ratio of your image. This is for a 2:1 image. | |||
#define IMAGE_W 50 | |||
#define IMAGE_H 25 | |||
</syntaxhighlight> | |||
'''Create Config''' | |||
Import Base Classes | |||
* [[GUI_Tutorial#Import_Classes_Via_import_Keyword_(Mission_Only)|Mission]] | |||
* [[GUI_Tutorial#Declare_Classes_(Addon_Only)|Addon]] | |||
<syntaxhighlight lang="cpp"> | <syntaxhighlight lang="cpp"> | ||
#define pixelScale 0.5 | |||
#define GRID_X safezoneX | |||
#define GRID_Y safezoneY | |||
#define GRID_W (pixelW * pixelGridNoUIScale * pixelScale) | |||
#define GRID_H (pixelH * pixelGridNoUIScale * pixelScale) | |||
#define CENTER_X ((getResolution select 2) * 0.5 * pixelW) | |||
#define CENTER_Y ((getResolution select 3) * 0.5 * pixelH) | |||
#define IMAGE_X 0 | |||
#define IMAGE_Y 0 | |||
// IMAGE_W and IMAGE_H need to follow the aspect ratio of your image. This is for a 2:1 image. | |||
#define IMAGE_W 50 | |||
#define IMAGE_H 25 | |||
class TAG_MyDisplay { | |||
idd = -1; | |||
onLoad = "uiNamespace setVariable ['TAG_MyDisplay', _this select 0]"; | |||
onUnload = "uiNamespace setVariable ['TAG_MyDisplay', nil]"; | |||
class Controls { | |||
class BackgroundCtrl: RscPicture { | |||
idc = -1; | |||
x = IMAGE_X * GRID_W; | |||
y = IMAGE_Y * GRID_H; | |||
w = IMAGE_W * GRID_W; | |||
h = IMAGE_H * GRID_H; | |||
onLoad = "uiNamespace setVariable ['TAG_BackgroundCtrl', _this select 0]"; | |||
onUnload = "uiNamespace setVariable ['TAG_BackgroundCtrl', nil]"; | |||
text = "pathTo\BackgroundImg.paa"; | |||
}; | |||
class ForegroundCtrlGroup: RscControlsGroupNoScrollBars { | |||
idc = -1; | |||
x = IMAGE_X * GRID_W; | |||
y = IMAGE_Y * GRID_H; | |||
w = IMAGE_W * GRID_W; | |||
h = IMAGE_H * GRID_H; | |||
onLoad = "uiNamespace setVariable ['TAG_ForegroundCtrlGroup', _this select 0]"; | |||
onUnload = "uiNamespace setVariable ['TAG_ForegroundCtrlGroup', nil]"; | |||
class controls { | |||
class ForegroundCtrl: RscPicture { | |||
idc = -1; | |||
x = 0 * GRID_W; | |||
y = 0 * GRID_H; | |||
w = IMAGE_W * GRID_W; | |||
h = IMAGE_H * GRID_H; | |||
onLoad = "uiNamespace setVariable ['TAG_ForegroundCtrl', _this select 0]"; | |||
text = "pathTo\ForegroundImg.paa"; | |||
}; | |||
}; | |||
}; | |||
}; | |||
}; | }; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
[[Category:Arma 3: Editing]] | |||
[ | |||
[ | |||
Latest revision as of 02:31, 27 April 2024
Creating a custom loading bar involves utilizing two images. A background image (typically desaturated) and a foreground image (full color).
Key things to establish before you develop your own loading bar:
- Where will your control be defined
- In what direction will the loading bar flow in
Required Images
You will need to have two images:
- Background Image: Desaturated
- Foreground Image: Full Color
These images will need to be converted from .png to .paa using TexView2
Building The Config
Define Pixel Grid Macros
#define pixelScale 0.5
#define GRID_X safezoneX
#define GRID_Y safezoneY
#define GRID_W (pixelW * pixelGridNoUIScale * pixelScale)
#define GRID_H (pixelH * pixelGridNoUIScale * pixelScale)
#define CENTER_X ((getResolution select 2) * 0.5 * pixelW)
#define CENTER_Y ((getResolution select 3) * 0.5 * pixelH)
Define Image Positions
#define IMAGE_X 0
#define IMAGE_Y 0
// IMAGE_W and IMAGE_H need to follow the aspect ratio of your image. This is for a 2:1 image.
#define IMAGE_W 50
#define IMAGE_H 25
Create Config
Import Base Classes
#define pixelScale 0.5
#define GRID_X safezoneX
#define GRID_Y safezoneY
#define GRID_W (pixelW * pixelGridNoUIScale * pixelScale)
#define GRID_H (pixelH * pixelGridNoUIScale * pixelScale)
#define CENTER_X ((getResolution select 2) * 0.5 * pixelW)
#define CENTER_Y ((getResolution select 3) * 0.5 * pixelH)
#define IMAGE_X 0
#define IMAGE_Y 0
// IMAGE_W and IMAGE_H need to follow the aspect ratio of your image. This is for a 2:1 image.
#define IMAGE_W 50
#define IMAGE_H 25
class TAG_MyDisplay {
idd = -1;
onLoad = "uiNamespace setVariable ['TAG_MyDisplay', _this select 0]";
onUnload = "uiNamespace setVariable ['TAG_MyDisplay', nil]";
class Controls {
class BackgroundCtrl: RscPicture {
idc = -1;
x = IMAGE_X * GRID_W;
y = IMAGE_Y * GRID_H;
w = IMAGE_W * GRID_W;
h = IMAGE_H * GRID_H;
onLoad = "uiNamespace setVariable ['TAG_BackgroundCtrl', _this select 0]";
onUnload = "uiNamespace setVariable ['TAG_BackgroundCtrl', nil]";
text = "pathTo\BackgroundImg.paa";
};
class ForegroundCtrlGroup: RscControlsGroupNoScrollBars {
idc = -1;
x = IMAGE_X * GRID_W;
y = IMAGE_Y * GRID_H;
w = IMAGE_W * GRID_W;
h = IMAGE_H * GRID_H;
onLoad = "uiNamespace setVariable ['TAG_ForegroundCtrlGroup', _this select 0]";
onUnload = "uiNamespace setVariable ['TAG_ForegroundCtrlGroup', nil]";
class controls {
class ForegroundCtrl: RscPicture {
idc = -1;
x = 0 * GRID_W;
y = 0 * GRID_H;
w = IMAGE_W * GRID_W;
h = IMAGE_H * GRID_H;
onLoad = "uiNamespace setVariable ['TAG_ForegroundCtrl', _this select 0]";
text = "pathTo\ForegroundImg.paa";
};
};
};
};
};