pixuireactcomponents 1.0.0

package/utils/utils.md

@@ -0,0 +1,145 @@
+# 工具类组件
+### 1. EventDispatcherJs.tsx
+React里可供使用的事件派发器，类似Pandora Lua里的EventDispatcher。
+
+用法主要就3个接口：
+
+* AddEventListener： 添加监听事件
+* DispatchEvent： 分发监听事件
+* RemoveEventListener： 移除监听事件
+
+### 2. Logger.tsx
+React里可供使用的对象（数组）打印器。
+
+直接console.log一个对象时，在游戏引擎中，无法打印出这个对象里的东西。而实际开发时，前后端联调时，需要方便的确认各种对象里的细节。
+
+ 用法一共3个接口，打印粒度有差异。
+
+* ObjectPrinter: 打印一个对象的内部细节，效果如下
+	![](./img/logger.png)
+	
+* ObjectPrinter2：比上一个打印的信息更多
+* HierarchyPrinter： 采样打印，对数组进行采样，能打印最多的信息
+### 3.MakeImage.js
+React 里用于一键生成图集文件
+用法有2个命令： 
+* node MakeImage.js create path
+* node MakeImage.js update path
+
+(path: 一个文件夹的路径，可以按绝对路径写法，形如：/Users/zhengyanan/Desktop/work_git/LgameVideoGameTest/src/asset/Textures/VideoGame;也可以按相对当前位置的路径，形如../../LgameVideoGameTest/src/asset/Textures/VideoGame。)
+
+第一条命令是创建一个Images.tsx文件，可以直接代码中使用。如图：
+![](./img/makeImage.png)
+
+第二条命令是更新Images.tsx文件，用于增加图片的时候，更新Images.tsx。如上图所示，创建之后按上面的要求，只能改Images的key值（这个已足够满足需求，因为这个key值，代码中才可能用到）。使用update可以保留这些你的改动，无需重新改代码中的引用。如果没改动的话，那就无所谓，直接重新create即可。
+
+### 4. GenerateConstructorAndGeterSeter.js
+先定义好类的字段后，一键生成该类的构造函数，getter方法 和 setter方法。
+
+用法只有一个命令：
+
+* node GenerateConstructorAndGeterSeter.js xxx.tsx 110
+
+其中，xxx.tsx指的是待生成的类文件；110是选项，3个bit位依次表示是否生成构造函数、setter、getter。
+
+
+例如，先定义好类的字段，如下：
+
+```
+class RealTimeMatchInfo{
+        bo: number // 赛制bo1, bo3, bo5
+        location: string
+        round: number // 当前是第几场， 从1开始
+        matchId: number
+        seasonId: number
+        stageId: number
+        status: number //  状态 0: 未开始; 1: 进行中; 2: 已结束
+        teamA: number // 战队A id
+        teamAScore: number // 战队A 获胜的游戏单局数
+        teamB: number // 战队B id
+        teamBScore: number // 战队B 获胜的游戏单局数
+        winTeam: number // 系列赛胜利战队ID
+    }
+```
+
+然后执行 上述命令，即可自动生成构造函数 和 setter方法，生成的结果如下：
+
+```
+class RealTimeMatchInfo{
+    bo: number // 赛制bo1, bo3, bo5
+    location: string
+    round: number // 当前是第几场， 从1开始
+    matchId: number
+    seasonId: number
+    stageId: number
+    status: number //  状态 0: 未开始; 1: 进行中; 2: 已结束
+    teamA: number // 战队A id
+    teamAScore: number // 战队A 获胜的游戏单局数
+    teamB: number // 战队B id
+    teamBScore: number // 战队B 获胜的游戏单局数
+    winTeam: number // 系列赛胜利战队ID
+
+	constructor(){
+		this.bo = -1
+		this.location = ""
+		this.round = -1
+		this.matchId = -1
+		this.seasonId = -1
+		this.stageId = -1
+		this.status = -1
+		this.teamA = -1
+		this.teamAScore = -1
+		this.teamB = -1
+		this.teamBScore = -1
+		this.winTeam = -1
+	}
+
+	setBo(bo: number){
+		this.bo = bo
+	}
+
+	setLocation(location: string){
+		this.location = location
+	}
+
+	setRound(round: number){
+		this.round = round
+	}
+
+	setMatchId(matchId: number){
+		this.matchId = matchId
+	}
+
+	setSeasonId(seasonId: number){
+		this.seasonId = seasonId
+	}
+
+	setStageId(stageId: number){
+		this.stageId = stageId
+	}
+
+	setStatus(status: number){
+		this.status = status
+	}
+
+	setTeamA(teamA: number){
+		this.teamA = teamA
+	}
+
+	setTeamAScore(teamAScore: number){
+		this.teamAScore = teamAScore
+	}
+
+	setTeamB(teamB: number){
+		this.teamB = teamB
+	}
+
+	setTeamBScore(teamBScore: number){
+		this.teamBScore = teamBScore
+	}
+
+	setWinTeam(winTeam: number){
+		this.winTeam = winTeam
+	}
+}
+```