返回

使用 Coding.NET 和 Hexo 实现网页游戏的发布

本文将尝试借助 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 了,我就是那个断送它的人啊!

效果演示

Built with Hugo v0.110.0
Theme Stack designed by Jimmy
已创作 265 篇文章,共计 1000931 字