Hypoxic125/Sandbox – User
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
<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"; }; };
}; }; };