本文将尝试借助Coding.NET的项目演示功能,通过对Hexo中支持的发布类型进行扩充,实现可以在Hexo中发布网页游戏,从而方便博主展示游戏作品和帮助读者了解游戏效果。

为什么要这样做

  博主是一名至今为止都还没有做出一款完整游戏(指已上线)的游戏开发者,可是即使这样,博主依然愿意将自己在游戏开发过程中的感悟和体会分享给大家,因为博主在学习编程的路上摸索了这么久,首先要感谢的就是那些愿意在互联网上分享技术的人们,不管是Github上愿意将项目开源的那些技术大牛,还是在博客圈子里不断探索追逐梦想的人们,如果没有他们不求回报的辛勤付出,我是绝对不可能在环境科学这样一个专业中学好编程技术的。作为一名开源技术的追逐者,我们应该抱着”既取之,必与之”来回馈开源社区。况且将自己的知识分享给其他人,不仅可以敦促自己不断地学习,更能促进相互之间的学习,所以说写博客其实本来就是一件百利而无一害的事情。

  好了,说了这么多,其实博主的想法就是能够在博客中增加项目演示的需求。博主经常在博客上写一些游戏开发的技术文章,每次都会在文章最后给出这篇文章中具体实现了一种怎样的效果。如果是静态图片当然没有什么争议,可是我们知道游戏或者说程序是一种动态的东西,所以如果采用静态图片似乎不能完全展示出具体的效果。而游戏作为一种可互动的产品,它更加强调玩家的互动和代入感,所以能够为玩家提供一个可控的操作环境就显得特别重要。以往在CSDN博客都是利用GIFCam录制屏幕Gif动画来展示效果的,可是受制于CSDN每次上传图片必须小于2M的容量限制的要求,所以使用Gif基本只能让读者了解一个大概。现在博客采用七牛云存储来存储博客中的图片,这是在使用CSDN博客时所不能相提并论的,所以现在博主的博客基本上是以这个独立博客为主,CSDN博客只是负责将独立博客的内容更新过去,博主每隔一段时间会去维护下CSDN博客,所以如何有时候没有及时回复大家的评论,还希望大家能够谅解啊。

  那么,在Gif动画的基础上,有没有比这个方案更好的方案呢?博主的想法是直接将游戏嵌入到博客当中,这样读者在学习了技术上的实现以后可以立即体验到实际到操作游戏的感觉,从而更快地了解游戏的实现。因为博主认为只有真正热爱游戏的人才能够设计出好的游戏,所以博主最近打算在博客中开设一个专门推荐好游戏的栏目,这样可以让我们一边玩游戏、一边学习技术,这样的想法可好?哈哈,好了下面我们来说说怎样实现这个目标!

怎样实现这样的目标

Coding.NET是一个类似于Github的网站,提供了免费的项目托管服务。和Github不同的是Coding.NET为所有的Web项目提供了提供一个在线的演示环境,就是说只要Coding.NET支持你的项目,那么你的项目就可以托管在这个网站上面进行演示。基于这样一种机制,博主便想到下面两种实现的思路:

思路1

因为Unity3D可以将项目导出为WebPlayer项目,在Unity5.0中更是提供了WebGL的支持,可以将Unity3D游戏导出为网页游戏。既然可以导出网页游戏,那么我们就可以将网页项目托管到Coidng.NET上,然后iframe框架引用到博客当中。不过这种方法可能会影响到网页的加载速度和搜索引擎优化,因为所有的搜索引擎都讨厌iframe。所以这种思路果断放弃咯!

思路2

将Unity3D导出的.unity3d文件托管到七牛云存储上,然后通过在Hexo中增加一个新的模版,来实现.unity3d文件和模版文件的对接,模板文件采用Unity3D的WebPlayer插件进行编写,在实现目的的基础上保证整个页面布局美观大方。这种方法的优点是完全原生,没有第三方依赖关系。缺点是页面是针对某一个Hexo主题的,没有办法做到一次编写、完全通用的效果。好了,下面我们就以这种思路来开始实现这个伟(zhuang)大(bi)的目标吧!

模板修改

  首先我们的目的是要实现在博客中集成游戏的功能,因此我们的游戏是不能作为博客的文章出现的首页,我们知道在Hexo中可以通过hexo new page[PageName]这个命令来生成一个自定义页面,而且生成的自定义页面不会出现在博客首页,只有通过链接才可以访问到这个页面,因此我们可以从这里作为突破口。在输入hexo new page[PageName]命令后我们发现在hexo的source文件夹下会生成一个以PageName命名的文件夹,在这个文件夹中有一个index.md的文件,通过修改这个文件的内容就能实现自定义页面。可是我们发现一个问题,每次生成一个新的页面就需要创建一个新的文件夹,这样的结构对我们管理游戏项目十分不便。怎么办呢?首先我们在source文件夹下创建一个games的文件夹,然后再该文件夹下创建一个子文件夹,子文件夹的命名可以任意(此处以example为例)关键是要在这个子文件夹里需要放置我们前面通过命令生成的index.md文件,此时我们就可以通过http://YourSite.com/games/example来访问这个页面了,此后如果需要发布新的游戏,可以将example文件夹复制一份然后重命名即可。好了,下面我们来重点说下这个index.md里的内容。通过查看Unity3D生成的网页文件我们了解到一个完整的Unity3D游戏需要两个东西,一个是描述页面结构的HTML,一个是.unity3d文件。这里面麻烦点的是HTML,开始觉得蛮容易的,后来发现修改模板实在困难,所以不得不放弃这种思路了。

思路3

  博主是最近了解到,Github除了可以用xxx.github.io这种方式搭建博客外,还可以通过gh-pages分支来实现,换句话说只要我们把静态的网页放到项目的gh-pages下,Github就能帮你把页面显示出来,因此我们就可以将Unity3D导出的网页版本游戏放到Github上,从而实现游戏的在线演示。好吧,满满的罪恶感啊,要是有一天Github被GFW了,我就是那个断送它的人啊!

效果演示