Onelab, Frontend Tech Supervisor, Jul 2010 ~ 09
Multi-Table Virtual games (2019-2020)
- 開發在一頁顯示不同遊戲類型的 multi widget game RWD SPA 架構, 混搭 react component 跟 pixi.js 視覺元件的高度整合應用,並設計能在這兩種 view 元件中共享同樣的 redux state/action/reducer 環境。
- 使用 react-redux multi store 架構, 讓 lobby 與 game 各自保持自己獨立的 redux store 結構。
- 設計分離式專案架構, 讓同事可以自行建立獨立專案各自開發 react widget & pixi component.
- 協助同事轉型並訓練撰寫 react functional component & hooks.
- 撰寫 custom hooks / react 共用元件 / middleware 給其他同事開發利用。
使用技術
- react functional component, react hooks. react lazy & suspense, styled component / system (emotion).
- redux v7.1+, react-redux with hooks, react context API, react-i18n with hooks.
- pixi.js v5 / rx.js / webpack / websocket.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Streaming Player (2019-2020)
- 開發整合不同家廠商的 streaming (hls, webrtc... )的 h5 客戶端視訊播放器。
- 使用 react context API (after v16.3) 整合不同廠商的 player state。
- 使用 webRTC peer connection API 和 canvas 2d api 結合實作出可以顯示 video/audio bitrate 跟 fps 的統計曲線面板,讓使用者能即時預覽 3 分鐘內的網路連線品質。(類似 youtube 的 stats for nerds 滑鼠右鍵的統計資料功能)。
使用技術
- react, react hooks, React Context API / styled component(emotion)
- WebRTC / WebRTC peer connection API
- canvas context 2D API
--------------------------------------------------------------------------------------------------------------------------------------------------------
CI / CD (2018-2020)
- 使用 docker image 包裝 nodejs / yarn / texture-packer 環境, 並寫 shell script 執行自動搬移編譯的檔案內容至指定硬碟路徑。
接著使用 drone CI 自動編譯部署前端專案,透過 gitlab -> drone (create docker container and build project)-> notify slack channel, 實現 RD 能在 git commit 時自動編譯程式測試, 用 npm 打版號 push 到 gitlab 時便能自動編譯 prod 版本部署至跳板。
- 後期統一改為 gitlab runner 實現.
使用技術
- docker / docker compose / shell script
- Drone CI
- gitlab runner
--------------------------------------------------------------------------------------------------------------------------------------------------------
All slot game / table game / card game client architecture (2013-2020)
- 2013 年開始獨自研發 h5 canvas game + h5 UI layout (build by react) , 設計並實作 slot game 引擎(FSM 架構) , table game, card game fullscreen RWD 等前端架構,建立 js shared library 架構,並開發部署多樣不同平台的設計應用, 包含 mobile (landscape / portrait) / tablet / desktop / mini-desktop 共計 30+ web h5 games.
- 實作 mobile fullscreen RWD canvas application, 並針對不同 android / iOS browser 實現 fullscreen layout.
- 從 pixi.js v1 開始使用並持續更新至 v5, 保持穩定版本升級並優化架構。
- 從 angularJS -> react (v0.13 -> v16 ) / flux -> react / redux 持續優化架構流程。
- 利用 yeoman 建立專案腳手架, RD 無需自行手動安裝專案並能迅速開發。
- 開發 game library / pixi.js mvc 架構 / 各種 pixi & react 元件供同事開發使用。
- 協助 flash RD 轉型,並開教育課程定期訓練。
- 建立 coding style guide, 並定期幫同事 code review 做流程優化並保持各項專案一致性。
使用技術
- pixi.js ( v1 -> v5 )
- angular 1 -> react / flux -> react-redux
- sass -> post-css
- webpack / gulp
- rx.js
- websocket
--------------------------------------------------------------------------------------------------------------------------------------------------------
React native code push Demo (2020)
- 研究 react native code push 並實作 prototype 更換 app 內容。
使用技術
- react native
ms code push
--------------------------------------------------------------------------------------------------------------------------------------------------------
Easy game board site (2020)
- 開發簡易的 restful API 及排行榜相關頁面供 client RD 做測試使用。
使用技術 - express / firebase / react SSR
- react / react-router
--------------------------------------------------------------------------------------------------------------------------------------------------------
mocha unit test(2018-2019):
- 因應不同的情境流程,所以使用 mocha 將 client 時常使用的 util function 集合做 unit test 測試,以便收集各種測試會遇到的狀況。
--------------------------------------------------------------------------------------------------------------------------------------------------------
Electron project folder deploy Tool (2019)
- 因應不同版本的 js library 跟 game project 資料夾, 開發了一個 electron + react 整合應用, 使用者點選所需專案名稱並自動找出所需的各種 linbrary 版本, 選定後可以簡單 copy 相關資料夾到跳板,讓不熟專案路徑或程式的一般使用者也可以輕易搬動不同版本的 前端專案資料夾 及 library.
使用技術
- electron
- react / react-checkbox-tree
- node.js / tree-node-cli
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Mobile Live Streaming Casino Baccarat (2017-2018)
- 研究各家相關串流技術, 後來選定 jsmpeg 為實作技術, 利用 ffmpeg 抓取 camera 畫面並轉成串流輸出至 jsmpeg server, 再使用 canvas + jsmpeg.js 播放 streaming 畫面,prototype 完成後將後端部分交給後端架構師研究。
- 前端使用 react.js 實作 lobby <-> game SPA 架構,並將 jsmpeg 輸出在 canvas 的畫面整進 pixi view.
- 切出分離式專案結構, 讓 RD 能夠自行開發 pixi game, lobby 則使用 react 開發。
- client lobby 會不斷更新全部遊戲桌資料, 並做預載式處理, 點選遊戲桌可無縫快速進桌遊玩 pixi game,並讓整個頁面保持高效能的運作。
使用技術
- pixi.js v4
- jsmpeg
- react / redux / post css
- websocket
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
iOS Programming <side project> (2012-2014)
- Experienced iOS 4 - 7 programming.
- Experienced custom iOS UI component implemented.
使用技術
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
FMS Record App (2012-2013)
- 針對需要對每場賽事做定期錄影, 撰寫 Adobe Flash Media Server 錄影程式及 Flash 操作介面配合 winform 做自動化錄影存證。
使用技術
- Flash Media Server / Flash / Actionscript 3
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Adobe AIR IOS Game (2012)
- 研究並開發上架一款數字心算 iOS game, 使用 adobe AIR 技術開發
- 使用原生 obj-c 開發 native extension 連結 apple game center 取得資料並寫入排行榜.
使用技術
- Adobe AIR / Actionscript 3 / Starling / Robotlegs
- Objective-C
- Native Extensions for Adobe AIR
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
P2P card game client (2011-2012)
- 開發多人 game client, 能讓不同使用者在 lobby 選擇遊戲桌並與線上玩家互動玩相關牌類遊戲(德州撲克, 13張 ...)及聊天功能。
- 實作 lobby 排版功能, 另開遊戲視窗, 並從 lobby 呼叫子視窗遊戲做排版。
- 實作遊戲錦標賽功能。
- 帶領兩位同事一起開發並熟悉專案結構。
- 客製化 flex component.
- 開發 flex theme 技術。
使用技術
- Flex 2,3 / Actionscript 3
- PureMVC
- Javascript
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------