Jump to content
Snipes Murphy

[TUTORIAL] Material 3D Vehicle Store UI

Recommended Posts

Difficulty: Easy

Created by: Snipes Murphy

Screenshot:

462C9D5E23BE44BAAE1F8116E62FD8964BF6C37D

Versions Tested:

  • 4.4r3 - Snipes Murphy
  • 5.0 - Snipes Murphy

Material UI:

  • Spawn Menu:
  • Vehicle Store 3D:
  • Clothing Store 3D:
  • Market Dialog: Coming soon
  • ATM Dialog: Coming soon
  • HUD: Coming soon
  • Interaction Menu: Coming soon
  • Trunk Dialog: Coming soon
  • Y menu: Coming soon (Do you want to see something creative, tablet, phone or whatever, please comment below.)
  • Custom forums system built from the ground up with Arma 3 Admin panel integration: In works :)  

Go into your mission file directory (eg "Altislife.Altis") Dialog > vehicleShop3D.hpp and replace the entire file with the following:

Spoiler
/*
	Author: Snipes Murphy
*/

class Life_Vehicle_Shop_v2_3D {
    idd = 2300;
    name="life_vehicle_shop";
    movingEnable = 0;
    enableSimulation = 1;
    onLoad = "ctrlShow [2330,false];";
    onUnLoad = "[] call life_fnc_vehicleShopEnd3DPreview";

    class controlsBackground {
        class MainBackground: Life_RscText {
            colorBackground[] = {0.1,0.1,0.1,0.5};
            idc = -1;
          	x = 0.025625 * safezoneW + safezoneX;
          	y = 0.1414 * safezoneH + safezoneY;
          	w = 0.170156 * safezoneW;
          	h = 0.462 * safezoneH;
        };

        class RedHighlightLeftSelection: Life_RscText {
            colorBackground[] = {0.705882,0.027451,0.027451,1};
            idc = -1;
            x = 0.025625 * safezoneW + safezoneX;
          	y = 0.1414 * safezoneH + safezoneY;
          	w = 0.004125 * safezoneW;
          	h = 0.462 * safezoneH;
        };

        class MainBackground2: Life_RscText {
            colorBackground[] = {0.1,0.1,0.1,0.5};
            idc = -1;
          	x = 0.025625 * safezoneW + safezoneX;
          	y = 0.6122 * safezoneH + safezoneY;
          	w = 0.170156 * safezoneW;
          	h = 0.033 * safezoneH;
        };

        class RedHighlightLeftSelection2: Life_RscText {
            colorBackground[] = {0.705882,0.027451,0.027451,1};
            idc = -1;
          	x = 0.025625 * safezoneW + safezoneX;
          	y = 0.6122 * safezoneH + safezoneY;
          	w = 0.004125 * safezoneW;
          	h = 0.033 * safezoneH;
        };

        class MainBackground3: Life_RscText {
            colorBackground[] = {0.1,0.1,0.1,0.5};
            idc = -1;
          	x = 0.025629 * safezoneW + safezoneX;
          	y = 0.654 * safezoneH + safezoneY;
          	w = 0.170156 * safezoneW;
          	h = 0.0638 * safezoneH;
        };

        class RedHighlightLeftSelection3: Life_RscText {
            colorBackground[] = {0.705882,0.027451,0.027451,1};
            idc = -1;
          	x = 0.025625 * safezoneW + safezoneX;
          	y = 0.654 * safezoneH + safezoneY;
          	w = 0.004125 * safezoneW;
          	h = 0.0638 * safezoneH;
        };

        class RedHighlightTitle: Life_RscText {
            colorBackground[] = {0.705882,0.027451,0.027451,1};
            idc = -1;
          	x = 0.025625 * safezoneW + safezoneX;
          	y = 0.0864 * safezoneH + safezoneY;
          	w = 0.170156 * safezoneW;
          	h = 0.044 * safezoneH;
        };

        class SecondBackground: Life_RscText {
            colorBackground[] = {0.1,0.1,0.1,0.5};
            idc = -1;
            x = 0.809375 * safezoneW + safezoneX;
          	y = 0.1414 * safezoneH + safezoneY;
          	w = 0.170156 * safezoneW;
          	h = 0.462 * safezoneH;
        };

        class RedHighlightLeftInfo: Life_RscText {
            colorBackground[] = {0.705882,0.027451,0.027451,1};
            idc = -1;
            x = 0.809375 * safezoneW + safezoneX;
          	y = 0.1414 * safezoneH + safezoneY;
          	w = 0.004125 * safezoneW;
          	h = 0.462 * safezoneH;
        };

        class Title: Life_RscTitle {
            idc = 2301;
            text = "";
          	x = 0.025625 * safezoneW + safezoneX;
          	y = 0.0864 * safezoneH + safezoneY;
          	w = 0.170156 * safezoneW;
          	h = 0.044 * safezoneH;
        };

        class VehicleInfoHeader: Life_RscText {
            idc = 2330;
            text = "$STR_GUI_VehInfo";
            colorBackground[] = {0.705882,0.027451,0.027451,1};
            x = 0.809375 * safezoneW + safezoneX;
          	y = 0.0864 * safezoneH + safezoneY;
          	w = 0.170156 * safezoneW;
          	h = 0.044 * safezoneH;
        };

        class CloseBtn: Life_RscButtonMenu {
            idc = -1;
            text = "$STR_Global_Close";
            onButtonClick = "closeDialog 0;";
          	x = 0.0318123 * safezoneW + safezoneX;
          	y = 0.6892 * safezoneH + safezoneY;
          	w = 0.161891 * safezoneW;
          	h = 0.0242 * safezoneH;
        };

        class RentCar: Life_RscButtonMenu {
            idc = -1;
            text = "$STR_Global_RentVeh";
            onButtonClick = "[false] spawn life_fnc_vehicleShopBuy;";
          	x = 0.11453 * safezoneW + safezoneX;
          	y = 0.6584 * safezoneH + safezoneY;
          	w = 0.0794062 * safezoneW;
          	h = 0.0242 * safezoneH;
        };

        class BuyCar: Life_RscButtonMenu {
            idc = 2309;
            text = "$STR_Global_Buy";
            onButtonClick = "[true] spawn life_fnc_vehicleShopBuy;";
          	x = 0.0318123 * safezoneW + safezoneX;
          	y = 0.6584 * safezoneH + safezoneY;
          	w = 0.0794062 * safezoneW;
          	h = 0.0242 * safezoneH;
        };
    };

    class controls {
        class VehicleList: Life_RscListBox {
            idc = 2302;
            text = "";
            sizeEx = 0.04;
            colorBackground[] = {0.1,0.1,0.1,0.9};
            onLBSelChanged = "_this call life_fnc_vehicleShopLBChange";
          	x = 0.0318586 * safezoneW + safezoneX;
          	y = 0.1458 * safezoneH + safezoneY;
          	w = 0.161891 * safezoneW;
          	h = 0.4532 * safezoneH;
        };

        class ColorList: Life_RscCombo {
            idc = 2304;
            onLBSelChanged = "[] call life_fnc_vehicleColor3DRefresh;";
          	x = 0.0297498 * safezoneW + safezoneX;
          	y = 0.6122 * safezoneH + safezoneY;
          	w = 0.166031 * safezoneW;
          	h = 0.033 * safezoneH;
        };

        class vehicleInfomationList: Life_RscStructuredText {
            idc = 2303;
            text = "";
            sizeEx = 0.035;
            x = 0.819688 * safezoneW + safezoneX;
          	y = 0.142 * safezoneH + safezoneY;
            w = 0.175313 * safezoneW;
            h = 0.275 * safezoneH;
        };
    };
};

 

 

 

Edited by Snipes Murphy
  • Like 2

Share this post


Link to post
Share on other sites
2 hours ago, Salkio | privatealpha.co.za said:

I can confirm this is working on Altis Life 5.0.0. Working and look great!

 PS: For all the noobs, you need to go into your config_master and enable the 3D store! Just search for 3D while in the file and you should find it.

No need for the all the noobs bit everyone gets stuck at doing something. And saying "noobs" is derogatory as I'm sure you didn't know how to do it at one point as I know I was.

  • Like 2

Share this post


Link to post
Share on other sites
On 9/5/2018 at 7:53 AM, XaFlaForo said:

No need for the all the noobs bit everyone gets stuck at doing something. And saying "noobs" is derogatory as I'm sure you didn't know how to do it at one point as I know I was.

Noob.

  • Like 1

Share this post


Link to post
Share on other sites
On 9/5/2018 at 5:32 AM, Salkio | privatealpha.co.za said:

I can confirm this is working on Altis Life 5.0.0. Working and look great!

PS: For all the noobs, you need to go into your config_master and enable the 3D store! Just search for 3D while in the file and you should find it.

I appreciate the help, as @XaFlaForo was saying it isn't really necessary and if they don't know how to edit the master config they should probably get a dev, but never the less I do highly appreciate the support!

Share this post


Link to post
Share on other sites
1 hour ago, Snipes Murphy said:

You should be proud that I let you be like this smh

What do you mean you let me be like this? You dog the boys for your girlfriend.

Edited by Delexical

Share this post


Link to post
Share on other sites
On 9/4/2018 at 3:23 PM, XaFlaForo said:

No need for the all the noobs bit everyone gets stuck at doing something. And saying "noobs" is derogatory as I'm sure you didn't know how to do it at one point as I know I was.

i'm don't think it was meant in a derogatory way.......

Share this post


Link to post
Share on other sites
5 hours ago, BoGuu said:

In what way? I see a red box :)

Isn't that what a material design is haha, I've been doing front end design for 2 and a half years now and I'd consider it a Material design, obviously I added transparency so it doesn't look that material but never the less, the design is Material. 😉

Share this post


Link to post
Share on other sites
4 hours ago, Snipes Murphy said:

Isn't that what a material design is haha, I've been doing front end design for 2 and a half years now and I'd consider it a Material design, obviously I added transparency so it doesn't look that material but never the less, the design is Material. 😉

Stop arguing with Godly Boguu.

It's a red box, not material. K?

Share this post


Link to post
Share on other sites
14 hours ago, Snipes Murphy said:

Isn't that what a material design is haha, I've been doing front end design for 2 and a half years now and I'd consider it a Material design, obviously I added transparency so it doesn't look that material but never the less, the design is Material. 😉

I also do web and graphic design, and I wouldn't consider this Material. Material is about height and motion as well as simulating physical material characteristics vs something like flat design where nothing is skeuomorphic. This is somewhere between to two and doesn't fit Google's Criteria IMO.

 

Edit: That doesn't mean it doesn't look good though. 😉

Edited by imthatguyhere

Share this post


Link to post
Share on other sites
16 hours ago, imthatguyhere said:

I also do web and graphic design, and I wouldn't consider this Material. Material is about height and motion as well as simulating physical material characteristics vs something like flat design where nothing is skeuomorphic. This is somewhere between to two and doesn't fit Google's Criteria IMO.

 

Edit: That doesn't mean it doesn't look good though. 😉

The name was thought of in about 10 seconds as I was quickly pushing them out, as well as the design was inspired by Googles libraries. I do appreciate the feedback, thank you. ❤️

Weapon store should be finished today or tomorrow too.

Edited by Snipes Murphy
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.