Jump to content
Bohemia Interactive Forums
Ilias48rus

GUI creating from 0 tutorial.

By Ilias48rus, in ARMA 3 - MISSION EDITING & SCRIPTING

Recommended Posts

Ilias48rus    32

Ilias48rus
Posted

https://youtu.be/peWWPO3zZB8


Creating GUI .
 

Everyone who whenever wanted to create a GUI - thats how to do it:

open GUI builder in game

press | ctrl , s |

choose "parent classes" , (write any name), |ok|,

| ctrl , v | in any text document
                    /|\
base (predefined) classes and "define" - variables (technically don't need, but maybe GUI builder will use them)
(here is all classes which GUI editor will use, but not all of them, to get full list open
|_|:|_|\Arma 3\Addons\ui_f.pbo\config.bin 
with arma unbin tool and watch after 102 line),

include it in your mod's config.cpp or description.ext,

if you are working with dexcription.ext you'll need to insert there some variables defined in game (i saw only needeble "safezone" and "gui_grid", but hope the two lines will be all you'll ever need):

upper then your GUI s: 

#include "\A3\ui_f\hpp\defineCommonGrids.inc"
#include "\A3\ui_f\hpp\defineCommonColors.inc"

(if working with mod the definitions will be assessable)
 

create your GUI: 

class |name| {
    idd = -1;                   // set to -1, if don't require a unique ID
    movingEnable = 1;           // the dialog can be moved with the mouse
    enableSimulation = 0;       // freeze the game
    controlsBackground[] = { }; // not necessary
    objects[] = { };            // not necessary
    controls[] = { };           // our elements
};  

next: use GUI builder (use safezone "position type" (with "gui grid" something wrong), save as config) and insert: 

class |name| {
	idd = -1;                      // set to -1, if don't require a unique ID
	movingEnable = 1;              // the dialog can be moved with the mouse
	enableSimulation = 0;          // freeze the game
	controlsBackground[] = { };    // not necessary
        objects[] = { };               // not necessary
        class controls {
class |_1_|: |_|
{
	idc = |_|;
	text = "|_|";
	x = |_| * safezoneW + safezoneX;
	y = |_| * safezoneH + safezoneY;
	w = |_| * safezoneW;
	h = |_| * safezoneH;
};
class |_2_|: |_|
{
    idc = |_|;
    text = "|_|";
    x = |_| * safezoneW + safezoneX;
    y = |_| * safezoneH + safezoneY;
    w = |_| * safezoneW;
    h = |_| * safezoneH;
};
        };               // our elements
};  

or 

class |name| {
	idd = -1;                      // set to -1, if don't require a unique ID
	movingEnable = 1;              // the dialog can be moved with the mouse
	enableSimulation = 0;          // freeze the game
	controlsBackground[] = { };    // not necessary
        objects[] = { };               // not necessary
class |_1_|: |_|
{
	idc = |_|;
	text = "|_|";
	x = |_| * safezoneW + safezoneX;
	y = |_| * safezoneH + safezoneY;
	w = |_| * safezoneW;
	h = |_| * safezoneH;
};
class |_2_|: |_|
{
	idc = |_|;
	text = "|_|";
	x = |_| * safezoneW + safezoneX;
	y = |_| * safezoneH + safezoneY;
	w = |_| * safezoneW;
	h = |_| * safezoneH;
};
        controls[]={|_1_|,|_2_|};               // our elements
}; 

(creating elements),

(additional information: RscMap
base class:

Spoiler 

class RscMapControl {
	access = 0;
	idc = -1;
	type = 101;
	style = 48;
	x = 0.1;
	y = 0.1;
	w = 0.8;
	h = 0.6;
	moveOnEdges = 1;
	shadow = false;
	ptsPerSquareSea = 5;
	ptsPerSquareTxt = 3;
	ptsPerSquareCLn = 10;
	ptsPerSquareExp = 10;
	ptsPerSquareCost = 10;
	ptsPerSquareFor = 9;
	ptsPerSquareForEdge = 9;
	ptsPerSquareRoad = 6;
	ptsPerSquareObj = 9;
	showCountourInterval = 0;
	scaleMin = 0.001;
	scaleMax = 1;
	scaleDefault = 0.16;
	maxSatelliteAlpha = 0.85;
	alphaFadeStartScale = 0.35;
	alphaFadeEndScale = 0.4;
	colorBackground[] = {0.969, 0.957, 0.949, 1};
	colorSea[] = {0.467, 0.631, 0.851, 0.5};
	colorForest[] = {0.4, 1, 0.4, 0.3};
	colorForestBorder[] = {0, 0, 0, 0};
	colorRocks[] = {0, 0, 0, 0.3};
	colorRocksBorder[] = {0, 0, 0, 0};
	colorLevels[] = {0, 0, 0, 1};
	colorMainCountlines[] = {1, 0, 0, 1};
	colorCountlines[] = {1, 0, 0, 0.5};
	colorMainCountlinesWater[] = {0.491, 0.577, 0.702, 0.6};
	colorCountlinesWater[] = {0.491, 0.577, 0.702, 0.3};
	colorPowerLines[] = {0.1, 0.1, 0.1, 1};
	colorRailWay[] = {0.8, 0.2, 0, 1};
	colorNames[] = {0, 0, 0, 1};
	colorInactive[] = {1, 1, 1, 0.5};
	colorOutside[] = {0.5, 0.5, 0.5, 1};
	colorTracks[] = {0.84, 0.76, 0.65, 1};
	colorTracksFill[] = {0.84, 0.76, 0.65, 1};
	colorRoads[] = {1, 0.8, 0, 1};
	colorRoadsFill[] = {1, 0.8, 0, 1};
	colorMainRoads[] = {1, 0.6, 0.4, 1};
	colorMainRoadsFill[] = {1, 0.6, 0.4, 1};
	colorGrid[] = {0.1, 0.1, 0.1, 0.6};
	colorGridMap[] = {0.1, 0.1, 0.1, 0.6};
	fontLabel = "PuristaMedium";
	sizeExLabel = "(			(			(			((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 0.8)";
	fontGrid = "TahomaB";
	sizeExGrid = 0.02;
	fontUnits = "TahomaB";
	sizeExUnits = "(			(			(			((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 0.8)";
	fontNames = "PuristaMedium";
	sizeExNames = "(			(			(			((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 0.8) * 2";
	fontInfo = "PuristaMedium";
	sizeExInfo = "(			(			(			((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 0.8)";
	fontLevel = "TahomaB";
	sizeExLevel = 0.02;
	colorText[] = {1, 1, 1, 1};
	font = "PuristaMedium";
	text = "#(argb,8,8,3)color(1,1,1,1)";
	SizeEx = "(			(			(			((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 1)";

	class Legend {
		x = "SafeZoneX + 					(			((safezoneW / safezoneH) min 1.2) / 40)";
		y = "SafeZoneY + safezoneH - 4.5 * 					(			(			((safezoneW / safezoneH) min 1.2) / 1.2) / 25)";
		w = "10 * 					(			((safezoneW / safezoneH) min 1.2) / 40)";
		h = "3.5 * 					(			(			((safezoneW / safezoneH) min 1.2) / 1.2) / 25)";
		font = "PuristaMedium";
		sizeEx = "(			(			(			((safezoneW / safezoneH) min 1.2) / 1.2) / 25) * 0.8)";
		colorBackground[] = {1, 1, 1, 0.5};
		color[] = {0, 0, 0, 1};
	};

	class Task {
		icon = "\A3\ui_f\data\map\mapcontrol\taskIcon_CA.paa";
		iconCreated = "\A3\ui_f\data\map\mapcontrol\taskIconCreated_CA.paa";
		iconCanceled = "\A3\ui_f\data\map\mapcontrol\taskIconCanceled_CA.paa";
		iconDone = "\A3\ui_f\data\map\mapcontrol\taskIconDone_CA.paa";
		iconFailed = "\A3\ui_f\data\map\mapcontrol\taskIconFailed_CA.paa";
		color[] = {"(profilenamespace getvariable ['IGUI_TEXT_RGB_R',0])", "(profilenamespace getvariable ['IGUI_TEXT_RGB_G',1])", "(profilenamespace getvariable ['IGUI_TEXT_RGB_B',1])", "(profilenamespace getvariable ['IGUI_TEXT_RGB_A',0.8])"};
		colorCreated[] = {1, 1, 1, 1};
		colorCanceled[] = {0.7, 0.7, 0.7, 1};
		colorDone[] = {0.7, 1, 0.3, 1};
		colorFailed[] = {1, 0.3, 0.2, 1};
		size = 27;
		importance = 1;
		coefMin = 1;
		coefMax = 1;
	};

	class Waypoint {
		icon = "\A3\ui_f\data\map\mapcontrol\waypoint_ca.paa";
		color[] = {0, 0, 0, 1};
		size = 27;
		importance = 1;
		coefMin = 1;
		coefMax = 1;
	};

	class WaypointCompleted {
		icon = "\A3\ui_f\data\map\mapcontrol\waypointCompleted_ca.paa";
		color[] = {0, 0, 0, 1};
		size = 27;
		importance = 1;
		coefMin = 1;
		coefMax = 1;
	};

	class CustomMark {
		icon = "\A3\ui_f\data\map\mapcontrol\custommark_ca.paa";
		size = 24;
		importance = 1;
		coefMin = 1;
		coefMax = 1;
		color[] = {0, 0, 0, 1};
	};

	class Command {
		icon = "\A3\ui_f\data\map\mapcontrol\waypoint_ca.paa";
		size = 18;
		importance = 1;
		coefMin = 1;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class Bush {
		icon = "\A3\ui_f\data\map\mapcontrol\bush_ca.paa";
		color[] = {0.45, 0.64, 0.33, 0.4};
		size = 14/2;
		importance = 0.2 * 14 * 0.05 * 0.05;
		coefMin = 0.25;
		coefMax = 4;
	};

	class Rock {
		icon = "\A3\ui_f\data\map\mapcontrol\rock_ca.paa";
		color[] = {0.1, 0.1, 0.1, 0.8};
		size = 12;
		importance = 0.5 * 12 * 0.05;
		coefMin = 0.25;
		coefMax = 4;
	};

	class SmallTree {
		icon = "\A3\ui_f\data\map\mapcontrol\bush_ca.paa";
		color[] = {0.45, 0.64, 0.33, 0.4};
		size = 12;
		importance = 0.6 * 12 * 0.05;
		coefMin = 0.25;
		coefMax = 4;
	};

	class Tree {
		icon = "\A3\ui_f\data\map\mapcontrol\bush_ca.paa";
		color[] = {0.45, 0.64, 0.33, 0.4};
		size = 12;
		importance = 0.9 * 16 * 0.05;
		coefMin = 0.25;
		coefMax = 4;
	};

	class busstop {
		icon = "\A3\ui_f\data\map\mapcontrol\busstop_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class fuelstation {
		icon = "\A3\ui_f\data\map\mapcontrol\fuelstation_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class hospital {
		icon = "\A3\ui_f\data\map\mapcontrol\hospital_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class church {
		icon = "\A3\ui_f\data\map\mapcontrol\church_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class lighthouse {
		icon = "\A3\ui_f\data\map\mapcontrol\lighthouse_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class power {
		icon = "\A3\ui_f\data\map\mapcontrol\power_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class powersolar {
		icon = "\A3\ui_f\data\map\mapcontrol\powersolar_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class powerwave {
		icon = "\A3\ui_f\data\map\mapcontrol\powerwave_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class powerwind {
		icon = "\A3\ui_f\data\map\mapcontrol\powerwind_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class quay {
		icon = "\A3\ui_f\data\map\mapcontrol\quay_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class shipwreck {
		icon = "\A3\ui_f\data\map\mapcontrol\shipwreck_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class transmitter {
		icon = "\A3\ui_f\data\map\mapcontrol\transmitter_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class watertower {
		icon = "\A3\ui_f\data\map\mapcontrol\watertower_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {1, 1, 1, 1};
	};

	class Cross {
		icon = "\A3\ui_f\data\map\mapcontrol\Cross_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {0, 0, 0, 1};
	};

	class Chapel {
		icon = "\A3\ui_f\data\map\mapcontrol\Chapel_CA.paa";
		size = 24;
		importance = 1;
		coefMin = 0.85;
		coefMax = 1;
		color[] = {0, 0, 0, 1};
	};

	class Bunker {
		icon = "\A3\ui_f\data\map\mapcontrol\bunker_ca.paa";
		size = 14;
		importance = 1.5 * 14 * 0.05;
		coefMin = 0.25;
		coefMax = 4;
		color[] = {0, 0, 0, 1};
	};

	class Fortress {
		icon = "\A3\ui_f\data\map\mapcontrol\bunker_ca.paa";
		size = 16;
		importance = 2 * 16 * 0.05;
		coefMin = 0.25;
		coefMax = 4;
		color[] = {0, 0, 0, 1};
	};

	class Fountain {
		icon = "\A3\ui_f\data\map\mapcontrol\fountain_ca.paa";
		size = 11;
		importance = 1 * 12 * 0.05;
		coefMin = 0.25;
		coefMax = 4;
		color[] = {0, 0, 0, 1};
	};

	class Ruin {
		icon = "\A3\ui_f\data\map\mapcontrol\ruin_ca.paa";
		size = 16;
		importance = 1.2 * 16 * 0.05;
		coefMin = 1;
		coefMax = 4;
		color[] = {0, 0, 0, 1};
	};

	class Stack {
		icon = "\A3\ui_f\data\map\mapcontrol\stack_ca.paa";
		size = 20;
		importance = 2 * 16 * 0.05;
		coefMin = 0.9;
		coefMax = 4;
		color[] = {0, 0, 0, 1};
	};

	class Tourism {
		icon = "\A3\ui_f\data\map\mapcontrol\tourism_ca.paa";
		size = 16;
		importance = 1 * 16 * 0.05;
		coefMin = 0.7;
		coefMax = 4;
		color[] = {0, 0, 0, 1};
	};

	class ViewTower {
		icon = "\A3\ui_f\data\map\mapcontrol\viewtower_ca.paa";
		size = 16;
		importance = 2.5 * 16 * 0.05;
		coefMin = 0.5;
		coefMax = 4;
		color[] = {0, 0, 0, 1};
	};

	class ActiveMarker {
		size = 24;
		importance = 1;
		coefMin = 1;
		coefMax = 1;
		color[] = {0, 0, 0, 1};
	};
};

 

can't be created under some other element by standard way (lowest in controls is uppest) you'll need to use controlsbackground class)

 


for first test can use the command: 

createDialog "|name|";  

For GUI is scripting commands too.

 

 

for use image in your GUI:

 

make, get, .. any image,


using some transparent background supporting editor (photoshop are fine) expand the background to get the picture's resolution == 2^p (512x512 , 1024x2048..),

 

can use "Imagetopaa" in b.i.'s tools to convert the picture to .paa,
 

make some element which supporting images (RscPicture,..),
 

write in "text" patch to the picture - if picture in mission's folder - from the folder without \ at start (t.paa , images\t.paa) , if in mod folder - (\|modname|\..).

  • Like 3

Share this post

Link to post
Share on other sites

celludriel    79

celludriel
Posted

Thanks for this really appreciate.

 

Personally I'm more a fan of written tutorials, less pausing , looking for a timemark if you want to backtrack.  If you should find the time, maybe I'll do it, a PDF version of this would be great :D  No pressure though :)

Share this post

Link to post
Share on other sites

Joe98    90

Joe98
Posted

Bump do I can easily find this thread :)

Share this post

Link to post
Share on other sites

Ilias48rus    32

Ilias48rus
Posted

The "basic classes" from GUI editor have only classes which will be used by the editor, looking for file with all of them in game's directory

|(did how could)

Share this post

Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
Go To Topic Listing ARMA 3 - MISSION EDITING & SCRIPTING
×