SAOUtilsHTML5 是刀剑神域(Sowrd Art Online)UI菜单的HTML5实现,主要参考了JoshuaSAO Utils for Windows版本,已经原作者许可,您可以认为这是SAO Utils原版本的移植或者说表达上的延伸。
SAOUtilsHTML5 是一个可以在任何页面通过滑动手势来触发的UI菜单,里面会添加一些方便用户浏览页面的功能,达到优化浏览体验的目的。
至于为何开发,首先完全是兴趣使然,主要是借助它来将自己对于SAO世界乃至二次元文化的理解进行表达。
跟同人非常类似,不考虑商业性质,是完全为了与同好分享快乐的产物。
接着是因为原有版本的代码非常依赖Windows桌面系统,导致移植到其他平台上(Linux/Mac)非常困难。而随着IE6淘汰,支持HTML5特性的浏览器已逐渐普及,而且当前浏览器的渲染能力已比较强大,甚至逐渐接近桌面环境。就当前而言,开发HTML5版本可以一定程度解决跨平台问题,而在技术上也已可以满足需求。
最后想说的是,开发这个项目比想象中要有趣得多,结合原先作品中的世界可以预想许多好玩的特性(甚至可开发一个简单的 Web RPG游戏),同时借此将一些实用的插件小功能添加进去(一些针对弹幕网站的黑科技)
以下不是客套话: 目前项目才刚刚开始,如果您有任何想法或者建议,亦或发现了什么问题,希望在issue处提出,如果您有意向与对应的技术实力,请参考下文项目计划来协助开发;)
Have a nice day!
- 通过本项目github主页右方的zip文件下载按钮下载源文件
- 使用Firefox/Chrome/Safari 打开 index.html (为了支持尽可能多的HTML5特性,建议您升级对应浏览器至最新版本)
- 在页面任意位置按住键盘Ctrl键与鼠标左键,接着移动鼠标下拉,即可调出SAO Utils菜单
工程因本人需要准备考研以及完成夏季学期作业而暂停 (#°Д°) ,预计在2014年11月或2015年春季会加快进度(取决于未来学业进展)
目前完成的初步工作有:
- 利用hammer.js库实现手势事件
- 以面向对象方式重写了早先的版本
- 完成了基本的菜单开启/关闭功能以及相应动画
- 完成了菜单左面板的开关/切换,以及相应动画
- 利用jquery插件velocity.js对jquery原有动画进行性能优化,并取代了CSS3动画库 move.js
未来将要完成的工作请看下文的【项目计划】
gif动图,请耐心等待浏览器加载
目前项目处于原型阶段, 原型阶段的目的在于尽可能将原先桌面版本的效果与体验实现, 并提供一些基本的简单功能
原先桌面版本可以到前文提到的原作者博客中下载
下面是针对原型的计划目标,正式版本的计划将在日后补充:
- 彻底解决菜单显示越界问题
- 菜单左面板文字信息显示/切换
- 引入 require.js ,将当前代码与资源模块化
- 完成右子菜单的基本功能与动画 (样式实现,开启/关闭动画,菜单项目的滚动,长按触发)
- 需要实现一个资源加载(Loading)动画,以应对资源与代码需要存放服务器端来加载的情况
- 实现 Immortal Object、Message、Alert 模态框,将它们与对应事件绑定
- 优化细节,如优化减小一些图片、图标资源,考虑中文字体的加载问题
- 进一步研究velocity.js,优化动画代码与动画效果
原型完成后,首先可以考虑将其看作向SAO致敬的小toy,在一些二次元相关网站作为彩蛋使用,这样需要将原先的主菜单项目替换,以更加接近原作品中的设定(好中二
进一步,在正式版本中将会加入实用功能,对于一些二次元站点进行特化,然后打包为Chrome/firefox扩展插件来使用
最后,是在此基础上希望开发一个简单的Web游戏(挂机RPG型?),一定程度能够模拟原先的SAO环境(这个比较远,仅仅是想法
遵守MIT协议,详见LICENSE文件