守望先锋 UI 库

缘起

去年 12 月玩守望等匹配的时候就无聊萌生出作一套守望 UI 的想法，由于以为守望的 UI 比较简洁，并且对于那些小组件的实现都有个大概的思路。当时 Hey UI 的做者也在知乎上宣传本身的 UI 库，因此更加坚决了作这个 UI 库的想法。

调研了以后还真发现已经有人用 React 写了 4 个守望的组件了。

他是用 React.js 写的，不过他写不是很全，没有造成一个库。既然没有同类型的产品，那就我来用 Vue.js 搞一个吧。因此今年写完代码高亮插件后，在一些契机下开始动工。

文档

整个库所使用到的有 Vue.js + Karam, Mocha, Chai，能够从 npm 下载试试~

Overwatch UI 文档

Overwatch UI Github

后记

其实整个 UI 库真的有用么？作完以后其实不见得有用 :(，单从设计上来讲这个库和网页开发的配合不是那么的好。

由于游戏通常是有鲜明的背影图的，因此它的不少组件都是有透明度的，而网页通常以白色为底，因此组件在网页上有点“看不清”。并且守望的组件 UI 逻辑和网页也不太同样，为了凸显游戏自己它的组件作得很“浅”，再用到网页上就很差看了，可是若是加背景图应该会好点。

虽然没啥用吧，可是收获仍是很大的，不只熟悉了市面上 UI 库的不少 API，也对本身的 Vue.js 有个提高，还有接触到了之前从没有用过的单元测试，固然也被 Vue-cli-3, Karam 等配置坑过几遍。

总之，3 个月的制做过程也是颇有趣的，这个库的开发算是告一段落了，该期末考了。