twx開發教學

什麼是twx

twx 是一個可以將第一代光暈戰記檔案轉換成二代格式的工具，目前已經可以轉換地圖檔和角色檔，同人檔尚在開發中

你需要這些軟件

這部分主要讓你安裝開發環境必備的軟件

git

nodejs

yarn

開發環境任選一個，選一個你覺得好看的就好: vscode(我會示範這個)/atom/webstorm(學生免費)(我最喜歡Jetbrains IDE)

安裝這些東西應該不難吧

環境設定

這部分主要讓你可以有自己的開發環境，在自己的開發環境寫程式

開Github 帳號 -> https://github.com/join?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F&source=header-home
fork https://github.com/dipsywong98/twx
在你的fork，複製這條URL
在某個資料來開啟git bash
輸入git clone <剛剛複製的URL>，執行
會多個一個twx 資料夾，打開它
在空白位置右鍵，open with code
按terminal/New Terminal
在terminal執行 yarn
在terminal執行 yarn start，terminal 會出現Compiled successfully，然後可以在瀏覽器打開localhost:3000/twx
可以開始coding

第一個Pull Request(PR)

這部分主要讓你知道怎樣改code，並向我申請更新

確保自己已經有yarn start
到src/components/InfoModal.tsx加上自己的名字，儲存，terminal 會變成compiling
到localhost:3000/twx，按i，有看到自己的名字
按+多開一個terminal，執行git commit -am 'add <your name>'
然後執行git push origin master
到github 上面你的fork看，你會看到最新的commit 是add <your name>
啟用Action，並執行它。到settings啟用github pages，選gh-pages，按save。執行完畢可以在<你用戶名>.github.io/twx看你的twx
到開一個PR。要按compare across fork，右邊head repository 要選自己的fork，按Create pull request
看到這樣就可以等FK同意你的pull request

幫忙做轉檔器:支援多轉一種動作/檢查做CG

用twx打開一個twf檔
到轉換為CG同人陣，TREE JSON，打開裡面會說有什麼動作/檢查/參數尚未被支援

type:"Action Type" <--代表有個動作未支援
what:"screenEffect" <--動作名稱是screenEffect

打開example會看到這個動作的JSON結構 3. 到CG去看相對應的動作的JSON結構(官方/Alt都可啦，官方的東西那麼垃圾怎可以不用Alt，都沒有就只能親自做啦幹)

然後到src/translators/twf/actions 新增一個ts檔，ts 檔的名字要跟type一樣。例如要翻譯上面的screenEffect就是開screenEffect.ts，輸出來的function 名字也要是screenEffect。可以參考其他action translator的做法，例如標題文字

twf

{"type":"title","t":"歡迎來玩模擬新日檢N2試題 ","du":600000,"s":25}

{
    type: 'ActionTitle',
    data: {
      text: '歡迎來玩模擬新日檢N2試題',
      size: '25',
      bold: true,
      color: '#ffffff',
      stroke: '#000000',
      strokeThickness: 4,
      direction: 'rtol',
      shiftX: 0,
      shiftY: -60,
      duration: '600000',
      delay: '0',
      fadeinDuration: '300',
      fadeoutDuration: '300',
      wait: false
    }
  }

顯然twf 中的t 就是文字(text)，du是維持時間(duration)，s是大小(size)，那麼它的translator 就是

// 這個檔案名稱是title.ts，因為type 是title
import { ActionTranslator } from '../../../type'
import { withCheckFields } from '../missingStuff'
 
// function 名是title
export const title: ActionTranslator = withCheckFields([
  // 在這兒打上有被翻譯的參數
  // 如果參數在twf出現，但沒有在這個陣列，會被列出來
  't', // text
  's', // size
  'du' // duration
])((cgActions, action) => ([
  // action 就是來自twf 的JSON
  ...cgActions, {
    type: 'ActionTitle',
    data: {
      text: action.t,  // twf 的t 對應CG 的text
      size: action.s?.toString() ?? '25',  // s 對應CG的size，但CG都用string，所以要toString，預設值是25
      bold: true,
      color: '#ffffff',
      stroke: '#000000',
      strokeThickness: 4,
      direction: 'rtol',
      shiftX: 0,
      shiftY: -60,
      duration: action.du?.toString() ?? '2600',  // du 對應CG的duration，但CG都用string，所以要toString，預設值是2600
      delay: '0',
      fadeinDuration: '300',
      fadeoutDuration: '300',
      wait: false
    }
  }
]))

然後在src/translators/twf/actions/index.ts 加上export * from './title'

嘗試用twx輸出CG events 檔，在CG上面跑一下看看有沒有bug
沒有bug就可以開PR，給我你測試用的twf檔