ODRP开发日记-靠近NPC触发交互（一）
本文默认你不是电脑小白，我不会讲的特别详细
点此查看ODRP开发日记（二）
起因
朋友最近跟我提到了关于FiveM模组制作的一些想法，正好这两天有闲情雅致，遂尝试开启了FiveM插件开发之旅。
实现
环境搭建
我素来不多说废话，既然有了想法，便要勇于尝试，于是开始搭建开发环境
我希望能以最低的成本进行开发试错，因此具体环境配置思路如下：
- 在本地搭建Windows FXServer
- 通过VS Code安装C#插件以实现最低空间占用的开发环境
鉴于可能要闭源及商业化，主要开发语言选择了C#而非Lua或JavaScript。当然，我本人最为熟悉的还是JavaScript，
因此我一开始选择了用JavaScript来熟悉API。JavaScript、Lua和C#的API略有区别，因此只能通过JavaScript来熟悉开发思路。
VS Code安装
本文不是手把手的教程，但我还是放个链接在这 点此前往VS Code官网
如果你已经安装完毕，则去插件市场中搜索.NET Extension Pack，虽然它评分不高，但是毕竟是微软出品，选它试错成本肯定是更低的。
.NET环境安装
你可以选择通过安装Visual Studio 2026 Community以安装.NET环境，也可以在这里下载独立的.NET SDK分发。
FiveM服务器搭建
这一块稍微难一点点，但我相信你都看到这里了，肯定还是有些本事的。
账号注册
首先我们需要前往Cfx.re注册一个账号，这是必须的，因为我们开设服务器需要使用其提供的license key，当然，这是免费的。
下载服务器
在注册好账号后，我们就可以先行前往此处下载最新的txAdmin面板分发，你可以点左上角的LATEST RECOMMENDED按钮，也可以在下方点击最顶部的版本号下载最新版，这个无所谓，我就是下载的最新版。
运行txAdmin
把服务器解压到你想要的任意位置，双击运行FXServer.exe，在启动后，浏览器会自动打开并预填好Link Code，然后我们就需要链接我们的Cfx.re账号，后续我们也需要使用Cfx.re账号登录。
手动配置初始服务器数据包
这里就是麻烦所在，我们必须手动配置一下服务器数据包，因为使用txAdmin自带流程，你大概率会因为网络问题而配置失败。
第一步，先在本地创建一个文件夹，用于后续存放服务器数据包
第二步，前往Github@citizenfx/cfx-server-data下载基础文件，直接下载仓库ZIP即可，无需git clone了，没有必要。把下载好的压缩包中的resources文件夹解压到你先前创建的文件夹中，点开resources/[gameplay]文件夹，删除其中的chat目录。
第三步，前往Github@citizenfx/txAdmin-recipes获取服务器配置模板文件，在第一步创建的文件夹中新增一个server.cfg的文件，把前面打开网站的内容复制进去，并进行如下修改
1、将sv_hostname右边双引号中的内容替换为随便什么内容
2、将sv_projectName和sv_projectDesc右边双引号内的文字也随便替换成你想要的文本
3、重要！将sv_licenseKey右侧双引号中的内容替换为你在Server Registration Keys获取到的REGISTRATION KEY
4、将{{maxClients}}替换为大于1的数字
5、重要！将{{serverEndpoints}}替换为
endpoint_add_tcp "0.0.0.0:30120"
endpoint_add_udp "0.0.0.0:30120"
6、删去末尾的{{addPrincipalMaster}}行
这是修改后server.cfg的样例，你可以直接复制，把sv_licenseKey替换为你自己的
# This file is a minimal version of the default config file.
# This is NOT supposed to be enough for most servers.
# Please read the fivem documentation:
# https://aka.cfx.re/server-commands
# https://docs.fivem.net/docs/server-manual/setting-up-a-server/
## You SHOULD edit the following:
sv_hostname "test server"
sets sv_projectName "no pj"
sets sv_projectDesc "no desc"
sets tags "default, deployer"
sets locale "root-AQ"
## You CAN edit the following:
sv_enforceGameBuild 3258 #mp2024_01 - Bottom Dollar Bounties
sv_licenseKey "cfxk_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
sv_maxclients 1
endpoint_add_tcp "0.0.0.0:30120"
endpoint_add_udp "0.0.0.0:30120"
set steam_webApiKey "none"
set resources_useSystemChat true
## These resources will start by default.
ensure mapmanager
ensure chat
ensure spawnmanager
ensure sessionmanager
ensure basic-gamemode
ensure hardcap
## Add system admins
add_ace group.admin command allow # allow all commands
add_ace group.admin command.quit deny # but don't allow quit
使用txAdmin启动服务
1、在Server Name中输入你想要的服务器名称
2、在选择Deployment Type时选择Existing Server Data
3、填入你刚才创建的存放了服务器数据的目录
4、输入你刚才创建的服务器配置文件名，如果你按我说的做了，这里保持默认即可
5、最后点击Save & Start Server
至此，FiveM本地服务器搭建完毕。
创建JavaScript工程
现在进入正式编码环节，我前面说了，使用JavaScript来熟悉开发思路，因此先创建一个JavaScript工程
NodeJS版本选择
FiveM内置的nodejs环境是16.x，因此我从nodejs官网下载了v16.20.2用于FiveM插件开发，你可能需要注意你的nodejs版本是否低于该版本。
初始化项目
选一个你认为风水好的目录，创建项目文件夹，在该文件夹中打开终端，运行以下命令以初始化项目
npm init -y
npm install --dev @citizenfx/server @citizenfx/client typescript
npx tsc --init
是的，我们将使用TypeScript编码
完善项目结构
在项目根目录下创建一个src文件夹和html文件夹，在src中再创建三个文件夹，分别为client、common、server
创建完成后，你的项目应该有如下结构
├─html
├─node_modules
│ └─@citizenfx
│ ├─client
│ └─server
└─src
├─client
├─common
└─server
完善TypeScript编译配置
这一节就简单点，你复制以下内容覆盖tsconfig.json即可
{
// Visit https://aka.ms/tsconfig to read more about this file
"compilerOptions": {
// File Layout
"rootDir": "./src",
"outDir": "./dist",
// Environment Settings
// See also https://aka.ms/tsconfig/module
"module": "nodenext",
"target": "esnext",
"types": [],
// For nodejs:
// "lib": ["esnext"],
// "types": ["node"],
// and npm install -D @types/node
// Other Outputs
"sourceMap": true,
"declaration": true,
"declarationMap": true,
// Stricter Typechecking Options
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
// Style Options
// "noImplicitReturns": true,
// "noImplicitOverride": true,
// "noUnusedLocals": true,
// "noUnusedParameters": true,
// "noFallthroughCasesInSwitch": true,
// "noPropertyAccessFromIndexSignature": true,
// Recommended Options
"strict": true,
"jsx": "react-jsx",
"verbatimModuleSyntax": true,
"isolatedModules": true,
"noUncheckedSideEffectImports": true,
"moduleDetection": "force",
"skipLibCheck": true,
},
"include": [
"src/**/*"
]
}
添加fxmanifest.lua
这个是FiveM插件的描述清单，直接在项目根目录下新建文件（我假设你已经用VSCode打开项目文件夹了）并命名为fxmanifest.lua，输入以下内容
fx_version 'cerulean'
game 'gta5'
author 'you'
description 'A startup resource'
client_script 'dist/client/index.js'
server_script 'dist/server/index.js'
ui_page 'html/index.html'
files {
'html/index.html',
}
至此，项目已初具雏形，具体的代码编写，就留到下一章吧。
浙公网安备 33010602011771号