查看“文档 v1.0”的源代码


== 首次启动运行游戏 ==  
  
=== Demo资源下载 ===  
* [gitlab_demo地址](https://git.jumpw.com/popx/client/popx-game-demo.git)
上述地址

=== 运行环境配置 ===  
  
==== node 版本 v10.24.1 ====  
推荐使用指定的node版本，可以用nvm来转换。  
  
* [nvm下载及安装方式](https://blog.csdn.net/ppz8823/article/details/130862191)  
* [使用nvm命令的参考](https://blog.csdn.net/qq_45621643/article/details/139989015)  
  
参考上述文档安装完成nvm后，运行如下命令切换到node版本v10.24.1  
<pre>  
nvm install 10.24.1  
nvm use 10.24.1  
</pre>

==== 修改host文件 ====  
找到host文件，一般在'''C:\WINDOWS\system32\drivers\etc'''目录下
最后一行添加
<pre>
199.232.68.133 raw.githubusercontent.com
</pre>  

==== laya 版本 v2.13.1 ====  
[laya官方ide](https://ldc2.layabox.com/layadownload/?type=layaairide-LayaAir%20IDE%202.13.1)  
  
==== 安装laya的cmd命令库 ====  
推荐如下安装方式，demo目录下  
<pre>  
npm i -g cnpm@6.1.0  
cnpm config set registry https://registry.npmmirror.com  
cnpm i layaair2-cmd -g  
</pre>

=== 首次运行时的操作（图文） ===  

  
打开demo目录文件夹，运行

demo目录下安装相关依赖  
<pre>  
npm i  
</pre>  
'''<span style="color: red;">如果安装失败，检查host文件是否修改，删掉node_modules目录重新运行命令</span>'''  

安装完成后，VSCODE运行调试，或者按键F5
'''<span style="color: red;">注意，不需要打开laya的IDE环境，直接用VSCode调试即可。</span>'''  

  
上述操作无误，即可进入游戏的登录界面，

=== 登录界面 ===
[[File:登录界面.png]] 


输入账号密码后，选择指定地图（也可以不选择，地图的制作可以查看demo视频）  
就可以看到战斗服务器世界中有自己的人物了。

== 游戏的基础开发逻辑 == 

该篇会讲述最基础的开发逻辑，如果想要先了解项目目录和工作流，建议先参考如下篇幅
[[#主要工程目录]]

==== 进入房间（游戏世界） ====
如下是最基本的开发登录流程说明
{| class="wikitable"  
|-  
! 步骤  
! 描述  
! 流向  
|-  
| 开始  
| 流程的开始  
| -> 登录页面
|-  
| 登录页面  
| 账号密码，选定地图，输入房间号（可不填）
| -> 远端服务器（官方） 
|-  
| 远端服务器（官方） 
| 获取玩家账户信息，分配到房间,房间就是我们的host代码  
| -> Client 和 -> Host
|-  
| Client   
| 监听XPopManager.onGameStart 
| -> 前端逻辑开始  
|-  
| Host  
| 监听XPopManager.onHostStart  
| -> 房间战斗逻辑开始  
 
|}

远端服务器(官方)会处理最基本的登录，分配房间，创建游戏世界的逻辑，并且同步该世界中的游戏数据。

通过'''XpopManager'''管理类，来向Client和Host抛出事件，开发者可以监听这些事件做处理。

开发者需要关心的逻辑，就是Clint和Server（上图中Host）目录下的代码。

==== 模型加载(人物动作) ====
'''XModelHero'''可以用于加载玩家的模型
<pre>
    let hero = new Hero();
    hero.onInit(0, 0, userid);
    hero.index = index;
    hero.loadModel('role/model_avatar_body_default');
</pre>
上述'''Hero'''类对角色的模型和数据进行了封装，最终
[公共模型的路径集合](https://h5ppreview.jumpw.com/popion/web/v1.0.1729/version.json)

==== 前后端协议交互 ====
项目采用proto来做相互通信，建议参考如下篇幅 [[#npm run proto（协议通信）]]

==== 前后端共用配置 ====
前端'''src/client'''目录和后端'''src/server'''目录中，都可以调用如下代码来加载所有的表格配置
<pre>
   CsvManager.ins.loadCsvs(this, () => {
     // Do some thing after load
   });
</pre>

表格的加载逻辑和解析逻辑，可以参考CsvManager中的代码
'''src/shared/csv/CsvManager.ts'''


''如何新增配置?''
以demo中的'''item.csv'''为例.
*1.配置csv文件资源的根目录为'''res-extra/csv/''' ,在里面添加'''item.csv'''
*2.'''CsvManager.ts'''文件中，添加读取表格和解析表格的逻辑
<pre>
    // loadCsvs代码中，添加你需要解析的csv名称
    public loadCsvs(caller: any = null, listener: Function = null) {
        let assets = [
            this._prefix + "item.csv",
        ];
        // XResManager加载本地资源
        XResManager.instance.loadText(assets, () => {
            // 在加载完成的回调中，处理表格数据结构，生成CItemData，不再赘述
            this.onCompleted(caller, listener);
        });
    }
</pre>
*3.解析表格得到的'''CItemData'''结构，定义在'''src/shared/dataMgr/'''中，可以被前后端一起调用

==== 玩家战斗数据快照 ====
游戏战斗服务器中，每个玩家的实时信息，通过快照来更新
===== XVF_SnapData  =====
以demo中的'''Snap_UserData.ts'''为例
*该玩家数据中类中，包含的各种public变量，都是''XVF_SnapData''接口类型
<pre>
export class Snap_UserData {
    //坐标旋转
    public position: XVF_SnapData<SyncPos>;
    //状态
    public state: XVF_SnapData<SyncState>;
    //hp
    public hp: XVF_SnapData<number>;
}
</pre>
*每次该接口类型的数据发生变化时，会调用OnSet方法，这类数据的修改逻辑是：服务器修改，前端监听变化
** 前端登录成功后，服务器注册对应玩家数据
** 前端对数据中的某个XVF_SnapData做监听，注册OnSet方法
** 服务器战斗逻辑修改了该数据时，前端根据OnSet的逻辑做表现处理

*XVF_SnapData数据，如果是复杂类型，需要调用UpdateData()方法，前端才能触发OnSet
如下的SyncState就是复杂类型
<pre>
    public state: XVF_SnapData<SyncState>;
    public setState(key:string, obj:string):void{
        this.state.value.key = key;
        this.state.value.obj = obj;
        this.state.UpdateData();
    }
</pre>
*XVF_SnapData如果是基础类型，不需要调用UpdateData()
<pre>
    public hp: XVF_SnapData<number>;
    public setHP(hp:number):void {
        this.hp.value = hp;
    }
</pre>

== 项目目录和命令 ==  
  
=== 主要工程目录 ===  
对于开发者，需要关心和操作的目录如下：  
  
* '''node_modules/''' - 通过npm安装的PGT库文件，对外暴露的方法，可以通过bridge.d.ts来外部引用  
* '''res-extra/''' - 开发者除了PGT的远程资源外，需要额外使用到的资源目录，比如UI，图片，音频，表格，最后会打包上传到PGT远端资源服务器  
* '''ui/''' - 开发者自己在laya编辑器中，拼接的界面json文件，运行命令后，会转化为PGT指定的XUIComponent存放于此  
* '''src/''' - 开发者所有的战斗逻辑代码修改都在此进行  
  * '''src/client/''' - 前端代码，入口文件index.ts，监听XPopManager.onGameStart，前端游戏逻辑  
  * '''src/server/''' - 后端代码，入口文件index.ts，监听XPopManager.onHostStart，后端游戏逻辑  
  * '''src/shared/''' - 前后端共用的数据结构，包括表格，协议，玩家数据
* '''dist/''' - 编译后，生成的运行文件，包含前后端代码
  * '''dist/client/''' - 编译后生成的混淆的前端代码  
  * '''dist/host/''' - 编译后服务端的代码文件，里面也包括表格数据的缓存

=== npm命令说明 ===  
以下是项目中常用的命令，和工作流相关，先简要说明用法，后续工作流中会继续补充。  
  
==== npm run proto（协议通信）====  
该命令会用到tsrpc的proto协议，  
把'''src/shared/protocols'''下的指定格式文件，  
转换到'''src/shared/protocols/generated/serviceProto'''文件中，  
  
* 文件名为：Ptl{接口名}.ts  '''<span style="color: red;">（Ptl 是 Protocol 的缩写，l是小写的L）</span>'''    
* 请求类型名为： Req{接口名}，通过 interface 或 type 定义，需 export  
* 响应类型名为：Res{接口名}，通过 interface 或 type 定义，需 export  
  
例如，添加'''PtlPosition.ts'''文件  
文件代码如下  
<pre>  
// 该接口用于向服务器同步自身的坐标  
export interface ReqPosition {  
    i: number;  
    x: number;  
    y: number;  
    z: number;  
    ry: number;  
}  
export interface ResPosition {  
    ret: string;  
    diy: string;  
}  
</pre>  
  
在demo目录下运行 npm run proto后，  
'''serviceProto.ts'''中会增加可外部调用的api类型  
<pre>  
export interface ServiceType {  
    api: {  
        "Position": {  
            req: ReqPosition,  
            res: ResPosition  
        },  
    },  
    msg: {  
  
    }  
}  
</pre>  

'''前端代码调用请求'''
<pre>
// 前端可以用promise语法来调用同步位置的Request，异步处理服务器的返回值
   let remote = XPopManager.instance.xRemote;
   let ret = await remote.Request('Position', {i: 1, x:2, y:3, z:4, ry:5});
   if(ret && ret.isSucc){
       console.log(ret.res.diy)
   }
</pre>
   
'''后端代码监听请求处理返回'''
<pre>
// 服务器收到前端请求的处理返回RegisterRpc
      let host = XPopManager.instance.xHost;
      //当收到坐标变化请求
      host.RegisterRpc("Position", async (call: ApiCall<ReqPosition, ResPosition>) => {
      let index = call.req.i;
      let userData = this.usersData.get(index);
      userData.setPosition(call.req.x, call.req.y, call.req.z, call.req.ry);
      return call.succ({
       ret: "Success",
       diy: "自定义参数"
     });
   });
</pre>   
如果想更多了解proto的结构和数据类型说明，可以参考官方链接  
[tsrpc-proto格式说明](https://tsrpc.cn/docs/server/service-proto.html)

==== npm run build ( 编译构建 ) ====  
'''<span style="color: red;">每次代码有修改时，如果要调试运行，必须先运行此命令</span>'''

运行后，会在dist目录下生成混淆过后的可执行代码

此时VSCode编辑器可以直接F5运行

==== npm run ui ( 生成ui类 ) ==== 
如果开发者有额外的ui交互需求，希望在IDE中自己拼接UI
可以在指定目录下，
* '''ui_laya/laya/''' - 开发者可以自由扩展的ui资源目录
  * '''ui_laya/laya/pages''' - 开发者创建的.scene文件目录
  * '''ui_laya/laya/assets/uiextra''' - secne文件中引用到的各种美术资源，包括音频和动画

运行后，会在client目录代码中，生成对应的XUIComponent类，[[#XUIComponent]]

==== npm run server ( 启动本地host服务 ) ====
启动一个本地host服务器，
局域网内其他用户在登录时输入你的房间号，就可以链接到你的本地游戏一起调试

==== npm run publish ( 打包文件 ) ====

==== npm run upload( 上传文件 ) ====



== 核心类目说明 ==
==== XPopManager ====
==== XActor ====
==== XUIComponent ====

==== XStateMachine ====


== 地图的制作 ==
==== 地图官网地址 ====
[地图网页](https://h5ppreview.jumpw.com/pgc/pgcedit0.0.2/index.html)
==== 地图制作导出 ====
在项目目录'''/地图编辑器操作说明'''中，有视频教程

==== 地图测试权限申请 ====
[论坛帖子](https://pgcbbs.popx.com/d/49-di-tu-shang-chuan-he-wan-fa-ce-shi-lin-shi-fang-an)

== 官方论坛 ==
[论坛地址](https://pgcbbs.popx.com/)