在该系列中,我将记录下使用Phaser制作游戏并最终上架Steam的步骤,从“绿光”到最终游戏的发布。这里同样还会包含如何将游戏与Steam的排行榜以及成就服务进行集成的步骤。
Steam 青睐之光
要在Steam平台上线的第一步就是绿光,所以我们从这里开始。这已经有了很好的文档记录,并且与特定的JavaScript游戏没有任何关系,所以我会尽量保持简短。
如果你正在使用Phaser开发游戏并且正在阅读,这是一个让一切搞起来都非常明确和简单的机会(我也希望能简单……)。比如我们的预算基本上是没有的,Greenlight的费用(90欧或100刀)对于当前的我们来讲会是具有非常大风险的。所以我们选择了联系我们的一位发行商的帮助。这使得我们可以在不预先支付任何费用的情况下,在绿光上进行游戏,以换取(不是很小的)利润百分比。当你的游戏正式上架的时候,将这么大一部分利润分给别人似乎是不太明智的,但是当你付不起费用的时候,这是一个不错的选择。如果你处于类似的情况下,尽可能的去选择一个出版商是一个不错的选择,可能会给你一个很好的交易。
在greenlight页面发布之后,我们的出版商在几个不同的地方为我们的游戏做了广告,但主要是在twitter上和通过他们其他游戏的steam-key赠品。很难说这到底起了多大的作用,但我敢肯定,要想获得绿光的主动照顾是很困难的。虽然在Twitter的广告似乎比较粗暴,但是似乎是奏效的。
虽然很难说出版商帮了多少忙,但我们必须记住,他们工作中最重要的部分是在游戏发布之后。(无论如何建议找一个靠谱的发行)。
如果你选择自己去做,你就必须利用社交媒体(在正式发布之前尽量花时间去经营自己的社交媒体账号)来展现你的好处,并设法让这些选票流动。在greenlight页面上进行积极的讨论和更新也是一个好主意,以保持用户的兴趣。
这就是本系列的第一部分。同样,这只是一个简短的介绍,并没有真正关注实际的游戏,但下一部分将在这方面有所不同。接下来,我将研究我们必须对界面进行的更改,以使其更易于使用PC,并避免让玩家觉得他们在玩一个廉价的移动换皮游戏。
让游戏看起来更像PC游戏
我们的游戏,Curvatron,最初被设计成一款带有简单触摸控制的移动游戏。为了让游戏在PC机上感觉更好,必须对游戏的工作方式和呈现方式进行一些更改。这些更改在控制台上也有意义,即使我们不打算发布控制台版本。
我们对用户界面的最初想法是使一切尽可能简单,使用大的、圆的、触摸友好的按钮,只使用图标作为按钮,完全没有文本。菜单上唯一的文本是当前菜单的标题。这样,如果图标足够好,我们就不必担心翻译应用程序,每个人都应该能够浏览菜单。当然,这并不总是容易实现的,但它似乎足够好用。
但这对于现在的电脑游戏来说并不是很好的翻译。在个人电脑上,这种菜单只能与鼠标或触摸屏一起使用,许多人更喜欢使用键盘控制或外部控制器。即使在这样一个简单的游戏中,这也是需要考虑的。
所以我们使用了经典的垂直菜单,你已经习惯了在大多数游戏中看到。但是我们也不能疏远那些只想用鼠标来玩的人,所以它必须和两者都很好地合作。垂直菜单可能无法有效地使用屏幕空间,但如果使用不同的方法,控件可能会变得混乱。
游戏设置
美国的电脑游戏玩家喜欢修补游戏设置,并根据需要自定义游戏。Curvatron的简单性并不能给你很大的定制空间,但我们仍然认为最好是有一个单独的设置菜单,而不是主菜单上的简单切换。现在这里的情况不多。唯一的新设置是在窗口模式和全屏模式之间切换,但将来我们可能会添加一些其他选项。在主菜单上还增加了退出按钮,这是目前大多数移动游戏都没有的功能,但在PC上仍然是必需的。
分辨率
根据游戏的设计基础决定游戏分辨率方案。若游戏的方案要求分辨率不做变更(当显示的区域更多时,会导致玩家有更大优势),则需要采用固定游戏分辨率的基础上改变游戏窗口大小并填充黑条的方式。以下忽略一段与Steam无关的事情。
制作一个可执行文件
因为这是一个网页游戏,所以它在网络浏览器中运行。这显然不适用于Steam游戏,所以我们需要一个包装器来将其转换为可执行文件。
我利用NW.js制作启动文件,但是还有其他的选择,比如Electron。从现在开始,我将继续在整个系列中主要使用NW.js,因此,如果出于某种原因,您使用的是不同的方法,那么这些信息可能没有那么有用(可以利用NW.js做练习,了解网页游戏连接Steam的工作原理)。
NW.js
现在,我们只是在为Windows开发,我不确定这些步骤是否与其他系统兼容,但是使用nw.js,我们可以使我们的网络游戏成为Windows、Linux或Mac的可执行程序。设置东西很容易。首先下载NW.js,将所有内容粘贴到index.html文件所在的目录,然后运行nw.exe。这是最快的方法,也是在开发过程中测试游戏的最佳方法。我们还需要在同一个目录中创建package.json文件。这个文件包含一系列关于nw.js应该如何运行的说明。你可以在这里找到更多关于它的信息。以下是package.json的一些相关设置:
{
"main": "index.html",
"name": "curvatron",
"window": {
"title": "Curvatron",
"width": 800,
"height": 600,
"fullscreen": false,
"toolbar": true
},
"version": "0.1.0",
"chromium-args": "--data-path='./saves/' --in-process-gpu --disable-transparency"
}
这里最重要的设置是“main”。它指向打开nw.exe时应运行的文件。测试时应保持“toolbar”设置为true,这样我们就可以访问控制台/调试工具。除了最后一个设置“chromium-args”,其他的一切都是不言而喻的。我们在这里向chromium-args递三个论点。第一个--data path='./saves/'更改用于本地存储和临时文件的目录。这有助于用户找到他们保存的文件,并允许我们使用steam cloud跨计算机同步这些文件。 其他两个参数——处理中的gpu和禁用透明度——是为了解决蒸汽叠加??(游戏中按shift+tab键时显示)无法出现的问题。
将游戏文件打包到可执行文件中
我们可以像上面提到的那样做,它就会产生作用,但是我们所有的源代码和美术资源都在这里放着,这有点奇怪,对吧?解决这一问题的一种方法是将所有内容打包到exe中,这可以通过几种不同的方法实现,其中最简单的方法是Web2Executable。他有一个GUI版本,有一个非常容易使用的界面。只需下载它,提取到任何地方,然后运行它。
我们的package.json文件将根据我们在Web2Exe中选择的设置进行编辑。请记住,package.json中的一些新设置是Web2Exe独有的,并且可能包含一些无法很好兼容的绝对路径的配置,因此如果您使用版本控制(如git),可能会在这里遇到一些麻烦。
应用程序和窗口选项卡有一些相关的设置,因此我们将它们更改为我们的口味。在导出设置下,我们可以配置输出目录和平台。压缩应该保留为0,因为这会增加加载时间。 最后,我们可以按下导出按钮。我们可以在ouput目录的某个地方找到我们新打包导出的可执行文件。你会注意到这一次启动时间有点慢。
分模块加载
nw.js给了我们比过去在网络浏览器中拥有更多的自由。使用节点的内部模块,可以更容易地完成诸如本地文件(文件系统模块)的写入和读取等工作和其他很多重要的工作!
我们还可以使用第三方模块来简化一些任务。例如,对于curvatron,我们使用了node twitter API,允许玩家在游戏中轻松分享分数和截图。但最重要的是,我们使用Greenheart的Greenworks,实现了(成就、排名等)集成的Steamworks,我们将在未来更详细地讨论此模块。唯一的问题是,GeenWorks还没有排行榜的支持。
重命名exe文件
如果要在Windows上重命名可执行文件,某些模块可能会给您带来一些麻烦。显然,Greenworks是其中一个模块。重命名.exe后,您可能会发现您的游戏没有运行,错误是找不到指定的模块。要解决这个问题,我们需要使用rename import dll更改模块绑定到的名称。下载rid.zip并从某个地方提取它。您可以在这里找到关于如何使用这些命令的很好的例子。修复greenworks的相关命令如下:
rid.exe greenworks-win32.node nw.exe curvatron.exe(假设rid.exe与节点文件位于同一目录中)
现在应该已经设置和配置了可执行文件。下一步,我们将仔细研究一下我们可以用GreenWorks做什么。
Steamworks
在本系列的前一部分中,我提到了greenworks。它允许我们的javascript代码调用SteamWorksAPI,这基本上就是我们如何与Steam提供的功能进行交互的原因,例如: 1、用户信息
2、成就
3、Steam Cloud
4、Steam Workshop
这是一个非常了不起的项目,帮助了很多独立开发者,我相信大多数人(包括我在内)甚至不知道从哪里开始。所以,如果可以的话,感谢Greenheart Games公司无私的分享。 不幸的是,Greenworks不包括STEAM排行榜支持,我不确定自己是否有足够的知识来实现它。因此,我们必须找到另一种方法,将社交元素带到游戏中,或许在未来的文章中讨论。 如果您愿意,可以按照GreenWorks Github页面上的说明进行操作。
Greenworks files
为了在发布到steam之前测试我们的游戏,我们需要创建一个steam-appid.txt,其中包含我们游戏的appid。appid可以在我们游戏的steamwork管理页面找到,就在它的名字旁边。只需创建文本文件,其中只包含appid。
我们还需要编译好的greenworks文件,我们可以从github下载。我们要的是发布版的zip,而不是源代码版本。这些版本是针对nw.js的,在不同的情况下,我们需要自己构建它。
我们可以随意地将整个内容提取到我们的游戏目录(同index.html目录)中,但实际上我们应该选择lib目录中的一个文件,这取决于我们的操作系统和可执行文件的结构。这必须与我们使用的nw.js版本或web2executable中的导出选项一致(参见前文)。
最好先选择一个操作系统/体系结构来启动和运行。在Windows上,我们可以避免只有一个x32版本(尽管它仍然最好有一个单独的x64版本),但在Linux上,最好有一个单独的版本用于x32和x64。现在,在我们的游戏目录中,我们有了一个新的greenheart.js文件和一个新的目录,其中包含lib/greenworks-[whatever].node文件。
Steamworks SDK files
现在我们将从SteamWorks SDK中获取一些文件,这些文件可以在SteamWorks页面中找到。需要一个steam账户,如果这是你第一次这样做,你可能需要接受一个协议。我假设你已经可以访问你的游戏的管理页面,否则你不能用steamworks做什么事。
将压缩包里的文件解压缩到任意位置(我们并不需要将所有的都应用到我们的游戏),同样,我们必须选择正确的文件。我们需要的文件位于SteamWorks SDK的sdk/redestributable_bin/目录中:
拷贝完成之后的目录是这个样子的:
搞定
现在所有的准备工作都已搞定,我们可以开始在代码里使用Greenworks API了。API手册里有更多完整的信息告诉我们如何用它。第一件事就是需要进行初始化(这与微信小游戏以及微信H5页面首先需要调用微信API的授权是一个道理,在你想用到微信API的时候)。
剩下的所有事情基本上就是调用greenworks变量调用他的成员函数。原文提示:必须记住有些方法可能并没有完成,所以我们在实现依赖于greenworks特性之前要进行测试。该系列就此结束,以后会详细介绍一些steamworks的特性,以及如何通过Greenworks来调用他们。(不过在原文博客地址中,已经没有更更新了。)
附带原文地址:
希望能认识更多有趣的独立开发者
请联系我:QQ623440028
优秀