add vehicle screenshoting

Bentix-cs · Mar 6, 2024 · d52411c · d52411c
1 parent dd0f1f1
commit d52411c
Show file tree

Hide file tree

Showing 4 changed files with 269 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -1,51 +1,49 @@
 # fivem-greenscreener
 
-A small script that allows you to take screenshots of every gta clothing or prop infront of a greenscreen.
-You can use them for example in your inventory or a clothing shop.
+A small script that allows you to take screenshots of every gta clothing, prop/object or vehicle against a greenscreen.
+You can use them for example in your inventory, clothing store or vehicle store.
 
 ## Using the images
-
-You are free to use the images in your open source projects if you credit me :) 
-For commercial use you have to contact me on discord so we can discuss the price and conditions.
-
-## Service
-
-For some money I will generate the pictures for you (you can send me also your modded clothes) and convert them to a format you decide (recommend .webp).
-
-Contact me for that on Discord **ben.001**
-
-## Features
-- Take screenshots of every gta clothing (addon clothing included)
-- Take screenshots of every object in gta (addon props included)
-- Comprehensible naming of the screenshots for implementing it in your scripts
-- Small progress ui
+You are granted the freedom to utilize the images in your open-source projects with proper accreditation.
+For commercial usage, please reach out to me on Discord to discuss pricing and conditions.
+
+## Services Offered
+For a fee, I offer a service where I generate the images for you. You can also send me your custom clothing mods, and I will include them.
+Contact me on Discord at **ben.001** for inquiries.
+
+## Key Features
+- Capture screenshots of every GTA clothing item, including addon clothing
+- Capture screenshots of all objects and props in GTA, including addon props
+- Capture screenshots of every vehicle in GTA, including addon vehicles
+- Screenshots are labeled comprehensively for seamless integration into your scripts
+- Minimalistic progress UI for user convenience
 - Almost completely invisible ped
-- Config for customizing the camera positions
-- Config for enabling cycle through textrue variations
-- Greenscreen gets removed automatically (Thanks to @hakanesnn)
-- Big greenscreen box (Thanks to [@jimgordon20](https://github.com/jimgordon20/jim_g_green_screen))
+- Customizable camera positions through configuration settings
+- Option to enable cycling through texture variations
+- Automatic removal of the greenscreen backdrop (courtesy of [@hakanesnn](https://github.com/hakanesnn))
+- Utilizes a large greenscreen box (thanks to [@jimgordon20](https://github.com/jimgordon20/jim_g_green_screen))
 
-## Planned
-- Maybe add it for vehicles too
+## Planned Updates
+- Feel free to share any ideas or suggestions for future enhancements!
 
 ## Installation
 **Dependencies**
 - [screenshot-basic](https://github.com/citizenfx/screenshot-basic)
 - yarn
 
 ### Step 1
-Rename the resource from "main-fivem-greenscreener" to "fivem-greenscreener" and put it into your main resources folder.
+Simply place the resource in your resources folder.
 
-**Don't use a subfolder like** `resources/[scripts]` **otherwise the script won't work**
+**Do not use a subfolder like `resources/[scripts]` as it will cause the script to malfunction.**
 
 ## Usage
 ### Screenshot all clothing
-Use the command `/screenshot` and the process for clothing will start.
-It will take some time and better don't touch your pc while the script runs.
+Execute the command `/screenshot` to initiate the clothing screenshot process.
+Be patient as it may take some time to complete, and it's advisable not to interfere with your PC during this operation.
 
 
 ### Screenshot specific clothing
-Use the command `/customscreenshot`, that allows you to screenshot a specific item with optional specific camera settings (format has to be the same as in the config.json).
+Utilize the command `/customscreenshot` to capture a specific clothing item, with optional custom camera settings specified in the format outlined in `config.json`.
 
 `/customscreenshot [component] [drawable/all] [props/clothing] [male/female/both] [camerasettings(optional)]`
 
@@ -55,13 +53,27 @@ Use the command `/customscreenshot`, that allows you to screenshot a specific it
 
 
 ### Screenshot objects/props
-For screenshoting objects you can use the command `/screenshotobject [hash]`.
+To screenshot objects or props, employ the command `/screenshotobject [hash]`.
+
+Example Usage:
+`/screenshotobject 2240524752`
+
+### Screenshot vehicles
+Capture screenshots of vehicles using `/screenshotvehicle [model/all]`.
+
+Example Usage:
+`/screenshotvehicle all`
+
+`/screenshotvehicle zentorno`
 
 ## Examples
 <img src="https://i.imgur.com/2WJyGgy.png" width="200"> <img src="https://i.imgur.com/aAQwU4d.png" width="200">
 <img src="https://i.imgur.com/EqY5Inu.png" width="200"> <img src="https://i.imgur.com/ctTF9M9.png" width="200">
+<img src="https://i.imgur.com/6qD7hF3.png" width="200"> <img src="https://i.imgur.com/xdMyGyk.png" width="200">
 
 ## Support
-Discord **ben.001**
+For assistance or further inquiries, you can reach me on Discord **ben.001**.
+
+## Support the Project
+If you wish to support this project, consider buying me a coffee on [ko-fi](https://ko-fi.com/bentix). Your support is greatly appreciated! ❤️
 
-## If you want to support me use [ko-fi](https://ko-fi.com/bentix)❤️.
diff --git a/client.js b/client.js
@@ -51,7 +51,7 @@ async function takeScreenshotForComponent(pedType, type, component, drawable, te
 
 	SetEntityHeading(ped, camInfo.rotation.z);
 
-	emitNet('takeScreenshot', `${pedType}_${type == 'PROPS' ? 'prop_' : ''}${component}_${drawable}${texture ? `_${texture}`: ''}`);
+	emitNet('takeScreenshot', `${pedType}_${type == 'PROPS' ? 'prop_' : ''}${component}_${drawable}${texture ? `_${texture}`: ''}`, 'clothing');
 	await Delay(2000);
 	return;
 }
@@ -102,7 +102,56 @@ async function takeScreenshotForObject(object, hash) {
 
 	await Delay(50);
 
-	emitNet('takeScreenshot', `${hash}`);
+	emitNet('takeScreenshot', `${hash}`, 'objects');
+
+	await Delay(2000);
+
+	return;
+
+}
+
+async function takeScreenshotForVehicle(vehicle, hash, model) {
+	setWeatherTime();
+
+	await Delay(500);
+
+	if (cam) {
+		DestroyAllCams(true);
+		DestroyCam(cam, true);
+		cam = null;
+	}
+
+	let [[minDimX, minDimY, minDimZ], [maxDimX, maxDimY, maxDimZ]] = GetModelDimensions(hash);
+	let modelSize = {
+		x: maxDimX - minDimX,
+		y: maxDimY - minDimY,
+		z: maxDimZ - minDimZ
+	}
+	let fov = Math.min(Math.max(modelSize.x, modelSize.y, modelSize.z) / 0.15 * 10, 60);
+
+	const [objectX, objectY, objectZ] = GetEntityCoords(vehicle, false);
+
+	const center = {
+		x: objectX + (minDimX + maxDimX) / 2,
+		y: objectY + (minDimY + maxDimY) / 2,
+		z: objectZ + (minDimZ + maxDimZ) / 2,
+	}
+
+	let camPos = {
+		x: center.x + (Math.max(modelSize.x, modelSize.y, modelSize.z) + 2) * Math.cos(340),
+		y: center.y + (Math.max(modelSize.x, modelSize.y, modelSize.z) + 2) * Math.sin(340),
+		z: center.z + modelSize.z / 2,
+	}
+
+	cam = CreateCamWithParams('DEFAULT_SCRIPTED_CAMERA', camPos.x, camPos.y, camPos.z, 0, 0, 0, fov, true, 0);
+
+	PointCamAtCoord(cam, center.x, center.y, center.z);
+	SetCamActive(cam, true);
+	RenderScriptCams(true, false, 0, true, false, 0);
+
+	await Delay(50);
+
+	emitNet('takeScreenshot', `${model}`, 'vehicles');
 
 	await Delay(2000);
 
@@ -525,7 +574,7 @@ RegisterCommand('screenshotobject', async (source, args) => {
 			}
 		}
 
-		SetEntityCoordsNoOffset(ped, config.greenScreenPosition.x, config.greenScreenPosition.y - 2, config.greenScreenPosition.z - 2, false, false, false);
+		SetEntityCoords(ped, config.greenScreenHiddenSpot.x, config.greenScreenHiddenSpot.y, config.greenScreenHiddenSpot.z, false, false, false);
 
 		SetPlayerControl(playerId, false);
 
@@ -553,6 +602,124 @@ RegisterCommand('screenshotobject', async (source, args) => {
 	};
 });
 
+RegisterCommand('screenshotvehicle', async (source, args) => {
+	const vehicles = GetAllVehicleModels();
+	const ped = PlayerPedId();
+	const type = args[0].toLowerCase();
+
+	if (!stopWeatherResource()) return;
+
+
+	DisableIdleCamera(true);
+	SetEntityCoords(ped, config.greenScreenHiddenSpot.x, config.greenScreenHiddenSpot.y, config.greenScreenHiddenSpot.z, false, false, false);
+	SetPlayerControl(playerId, false);
+
+	await Delay(100);
+
+	if (type === 'all') {
+		SendNUIMessage({
+			start: true,
+		});
+		for (const vehicleModel of vehicles) {
+			const vehicleHash = GetHashKey(vehicleModel);
+			if (IsModelValid(vehicleHash)) {
+				if (!HasModelLoaded(vehicleHash)) {
+					RequestModel(vehicleHash);
+					while (!HasModelLoaded(vehicleHash)) {
+						await Delay(100);
+					}
+				}
+
+				const vehicleClass = GetVehicleClassFromName(vehicleHash);
+
+				if (!config.includedVehicleClasses[vehicleClass]) {
+					SetModelAsNoLongerNeeded(vehicleHash);
+					continue;
+				}
+
+				SendNUIMessage({
+					type: vehicleModel,
+					value: vehicles.indexOf(vehicleModel) + 1,
+					max: vehicles.length + 1
+				});
+
+				const vehicle = CreateVehicle(vehicleHash, config.greenScreenVehiclePosition.x, config.greenScreenVehiclePosition.y, config.greenScreenVehiclePosition.z, 0, true, true);
+
+				if (vehicle === 0 || vehicle === null) {
+					SetModelAsNoLongerNeeded(vehicleHash);
+					continue;
+				}
+
+				SetEntityRotation(vehicle, config.greenScreenVehicleRotation.x, config.greenScreenVehicleRotation.y, config.greenScreenVehicleRotation.z, 0, false);
+
+				FreezeEntityPosition(vehicle, true);
+
+				SetVehicleWindowTint(vehicle, 1);
+
+				SetVehicleColours(vehicle, 12, 12)
+
+				await Delay(50);
+
+				await takeScreenshotForVehicle(vehicle, vehicleHash, vehicleModel);
+
+				DeleteEntity(vehicle);
+				SetModelAsNoLongerNeeded(vehicleHash);
+			}
+		}
+		SendNUIMessage({
+			end: true,
+		});
+	} else {
+		const vehicleModel = type;
+		const vehicleHash = GetHashKey(vehicleModel);
+		if (IsModelValid(vehicleHash)) {
+			if (!HasModelLoaded(vehicleHash)) {
+				RequestModel(vehicleHash);
+				while (!HasModelLoaded(vehicleHash)) {
+					await Delay(100);
+				}
+			}
+
+
+			SendNUIMessage({
+				type: vehicleModel,
+				value: vehicles.indexOf(vehicleModel) + 1,
+				max: vehicles.length + 1
+			});
+
+			const vehicle = CreateVehicle(vehicleHash, config.greenScreenVehiclePosition.x, config.greenScreenVehiclePosition.y, config.greenScreenVehiclePosition.z, 0, true, true);
+
+			if (vehicle === 0 || vehicle === null) {
+				SetModelAsNoLongerNeeded(vehicleHash);
+				console.log('ERROR: Could not spawn vehicle.');
+				return;
+			}
+
+			SetEntityRotation(vehicle, config.greenScreenVehicleRotation.x, config.greenScreenVehicleRotation.y, config.greenScreenVehicleRotation.z, 0, false);
+
+			FreezeEntityPosition(vehicle, true);
+
+			SetVehicleWindowTint(vehicle, 1);
+
+			await Delay(50);
+
+			await takeScreenshotForVehicle(vehicle, vehicleHash, vehicleModel);
+
+			DeleteEntity(vehicle);
+			SetModelAsNoLongerNeeded(vehicleHash);
+		} else {
+			console.log('ERROR: Invalid vehicle model');
+		}
+	}
+	SetPlayerControl(playerId, true);
+	startWeatherResource();
+	DestroyAllCams(true);
+	DestroyCam(cam, true);
+	RenderScriptCams(false, false, 0, true, false, 0);
+	cam = null;
+});
+
+
 setImmediate(() => {
 	emit('chat:addSuggestions', [
 		{
@@ -577,6 +744,13 @@ setImmediate(() => {
 				{name:"object", help:"The object hash to take a screenshot of"},
 			]
 		},
+		{
+			name: '/screenshotvehicle',
+			help: 'generate vehicle screenshots',
+			params: [
+				{name:"model/all", help:"The vehicle model or 'all' to take a screenshot of all vehicles"},
+			]
+		}
 	])
   });
 

diff --git a/config.json b/config.json
@@ -1,6 +1,32 @@
 {
   "includeTextures": false,
   "//__comment__//": "The image generation will take much longer and you will have much more images!",
+  "includedVehicleClasses": {
+    "0": true,
+    "1": true,
+    "2": true,
+    "3": true,
+    "4": true,
+    "5": true,
+    "6": true,
+    "7": true,
+    "8": true,
+    "9": true,
+    "10": true,
+    "11": true,
+    "12": true,
+    "13": true,
+    "14": false,
+    "15": false,
+    "16": false,
+    "17": true,
+    "18": true,
+    "19": true,
+    "20": true,
+    "21": false,
+    "22": false
+  },
+  "//__comment__//.": "The classes that will be included in the image generation. See https://docs.fivem.net/natives/?_0x29439776AAA00A62",
   "cameraSettings": {
     "CLOTHING": {
       "1": {
@@ -156,5 +182,20 @@
     "x": 0,
     "y": 0,
     "z": 330
+  },
+  "greenScreenVehiclePosition": {
+    "x": -1269.58,
+    "y": -3383.08,
+    "z": 14.13
+  },
+  "greenScreenVehicleRotation": {
+    "x": 0,
+    "y": 0,
+    "z": 254.03
+  },
+  "greenScreenHiddenSpot": {
+    "x": -1224.22,
+    "y": -3349.63,
+    "z": 13.96
   }
 }