游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

《Animory》开发者分享HTML5手机游戏制作经验

发布时间:2013-04-15 16:35:58 Tags:,,,,

作者:Przemyslaw Szczepaniak

我的上一篇文章讲的主要是开发者在HTML5游戏的制作过程中应该注意的几个问题,以及游戏开发者以及其他游戏业人士给出的建议。他们关注的大多是:游戏开发的步骤、营销、推广、寻找合伙人等与产品发布有关的活动。而这一次,我要介绍的是如何着手HTML5手机游戏的开发。我将以我们的最新游戏《Animory》的制作过程为例。我不会告诉你怎么写脚本,而是提出最适合我们的途径和方法,以及我们从开发过程中学习到的经验。但愿看了这份“案例研究”后,读者能找到一些适用于自己的开发过程的方法和想法。

1、构思和原型

开发过程的第一步和关键就是构思。你当然可能已经有一些游戏动作的代码或类库,但总是需要一些以此为基础的想法。在开发《Animory》时,我们从之前的一款游戏《Animals Puzzle》中借用了图像。那款游戏剩下了一些没有用上的图像材料,我们决定就在那些图像的基础上编写新代码。那些不同的动物图画使我们想到:为什么不将它们运用到记忆游戏中去?对,我们就这么干!下一步就是制作可操作的原型。我们使用uxpin.com的原型制作工具来完成,它看起来简单又直观。

prototype(from gamasutra)

prototype(from gamasutra)

你可能会问,我们怎么开始制作原型?我们从现成的图像开始,然后编写可操作原型的代码。结论:我们从这个过程中学习到的重要一点是:应试先花更多时间制作不带图像的原型(也就是“游戏的网格”),然后再制作图像,最后完成可操作的、可玩的原型。例如,使用一些默认的红色方块作为游戏元素、简单的背景等等。为什么?想象一下,当你有大量现成的图像或功能函数时,你得到的测试的结果很可能是,那些东西根本无法与游戏相结合……还可能产生许多问题和增加不必要的代码编写量。

2、代码过程

整个游戏花了一个月才完成——我指的是包括绘制图像、做测试、写代码等所有活动。现在,你可能会想“什么?一整个月才做出这么一款简单的游戏?”我们费了这么长的时间是因为,我们太纠结于细节、游戏逻辑和代码质量。我们是根据我们自己的库和引擎编写代码的。在那时,我们仍然要根据其他将要发布的游戏的需要,开发和修改这个引擎。

这款游戏的核心是最简单的部分,制作过程事实上只费了大约两天。在核心部分,我们必须制作会转动和调用贴图的元件,并检查各贴图是否相适应。下一步是制作游戏逻辑,也就是解锁奖励图片、计算得分或打开/关闭声音的概率。这个部分花了三天。这个部分应该与编写代码一起谈,我们已经将图像添加到游戏代码中了。游戏开发最长的一部分是修改HTML和CSS,使游戏在IE9、IE10、Chrome、Firefox、Android浏览器、iOS浏览器和手机Chrome浏览器上的显示效果达到最佳。这是最费代码的过程,我们用了在大概3周才完成。

值得一提的是,我们在这时候不得不对代码作了一番修改。我们得到的教训是,好的原型可以加快进度和避免某些问题。游戏还在开发中,我们却要数次修改游戏玩法。为什么?因为我们发现平衡性不太好。

1、在第一版游戏中,玩家每次都能赢游戏,但如果他超过规定的时间,就得不到奖励。

2、我们把这个功能改得更简单一些,也就是,如果玩家超过规定的时间,他就会失败;如果没超过,就会胜利。

3、第三也就是最后一版游戏是最清楚的。我们认为那就是《Animory》最佳玩法。

正如你所见,原型是最重要的部分。没有可做测试的原型,你会遇到多得无法应付的问题。当然,我们会在下一个项目中牢记这个教训。

3、图像

在本文的开头,我提到《Animory》的创意来自现成的图像。美术制作的实际过程几乎与整个游戏的制作过程相当。我们的设计师完成所有美术工作大概费了3周的时间。这个过程主要是绘制概念草图、头脑风暴、制作原型和用CSS表现各个元素。我们对图像质量提出很高的要求,因为这是游戏的外观形像,起到吸引玩家的作用。图像绘制与游戏代码编写是同时开工的,所以我们几乎每天都能看游戏发生的变化。

Animory(from gamasutra)

Animory(from gamasutra)

大部分结果是由能产生漂亮的图像的设计师、技术、天份、经验和能力决定的。由图可知,我们的设计师追求的是某种特殊的风格。这款游戏看起来很吸引人,没有随机元素。有剧情,有特殊的思路。我们发现这种风格与我们的HTML5游戏的想法很契合。

4、声音

在这时,HTML5手机游戏有新的系统版本支持声音。声音使游戏更加吸引人,更加有趣,互动性更强。比如,声音提示能够清楚地反馈玩家在游戏中犯的错误。我们使用在网上可以找到的免费游戏声音库。至于音乐循环,我推荐Incompetech Royalty Free License,但你得记住,在你的游戏中注明版权和出处。

5、测试

我们在游戏的各个阶段都做了测试。在制作游戏的各个功能(游戏邦注:无论是图像匹配还是游戏逻辑代码)时,我们总是先检查再添加新的部分。从最开始,初始测试就是制作过程的一部分。测试通常需要30分钟。如果发现漏洞,我们就会制定修补方案,然后再测试,直到我们找不到漏洞。

当我们制作出一个包含所有计划元素的游戏版本时,我们就可以开始内测这款游戏的最终版了。内测所需的时间与初始测试相当,与原来一样,我们先修补漏洞,然后再测试,直到得到满意的结果。为此,我们准备了不同系统的手机(iOS、Android和BlackBerry):

Samsung Nexus S

HTC Wildfire S

iPhone 3GS

HTC Magic

Samsung Galaxy S Plus

iPhone 3G

Samsung I9000 Galaxy S

BlackBerry Playbook

Samsung Nexus S

测试是下一阶段的必要步骤。最好问问你的朋友、同事或任何愿意帮助你的人。你准备的测试设备越多,测试就越全面。做完测试后,就可以准备发布工作了。

6、寻找发行商

在我们的案例中,我们已经找好发行商了。为游戏寻找合适的、可靠的推广渠道是需要一些时间的。你必须实验发行商提议的不同模式,从中找到最适合自己的。HTML5手机市场还很小,所以为你的产品找到合适的生意和收益并不容易。

我们准备了一份《Animory》的演示片。我们联系与我们合作最频繁的发行商,使他们对新游戏产生兴趣。多亏了我们那份制作精良的演示片,发行商很快就表示“我们看好这款游戏,我们会给它做宣传。”当然,发行商在发行游戏以前,会再次测试游戏。从我们送出演示片算起,这个过程通常需要2周的时间。因为我们对这款游戏的测试已经相当彻底了,所以发行商的测试也没有找到任何问题。《Animory》终于可以发布了。

我们准备了不同版本的游戏,但我们并不是一次准备好所有的版本。我们得看看玩家对游戏的反应如何,然后再准备不同平台的移植工作和推广工作。

1)手机社交网络的手机网页版(免费+广告的模式/定制收费模式)

2)桌面浏览器的Chrome应用商店独立版(免费+广告的桌面版)

3)Android下载版(免费+广告和可购买版)

7、广告宣传

只靠发行商的力量是无法吸引玩家的兴趣的。你必须搞一些活动为游戏造势。你可以通过博客、Twitter或Facebook做宣传。你还可以使用其他社交网络。在你的朋友、朋友的朋友、独立游戏团体或支持HTML5游戏的地方如MarketJS或HTML5Devs论坛上宣传你的游戏。这些工作你做得越多,你的游戏就越可能得到玩家和其他发行商的关注。如果你为市场营销安排了预算,那么你最好能在大的博客网站或游戏网页上做广告。当然,这取决于你的能力了。

8、反思

整个生产过程历时约一个月。我们从中学习到的最重要的事就是,对游戏的各个部分和活动作准确的预测和原型。为了让各个阶段都顺利进行,你必须认真规划。要做出好游戏,头脑风暴、测试和详尽的代码和图像是必不可少的。我们不得不承认,原型过程仍然需要改进,但我们对最终结果很满意。另外,游戏最终得到我们的受众的认可。如果他们喜欢这款游戏,他们会发现它确实有趣,这就说明了游戏是成功的。

我希望这个案例能够让读者更好地理解游戏制作过程,也许对你自己的工作有所帮助。(本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦

Case study of HTML5 mobile game production by example of “Animory” game.

by Przemyslaw Szczepaniak

My last blog entry brought some questions and suggestions from developers and other people from gaming industry. In most cases they concerned: steps of game development, promotion, distribution, finding partners, and rest of activities which lead to a final product release. The previous entry gave a basic overview of what basic factors an indie HTML5 developer should focus on. My intention wasn’t giving out a full, long guide, since it’s rather pointless to do that in one article. This kind of development guide requires division to parts, or even a compendium in a form of e-book for example. Many suggestions I received were informative, well pointed, but some didn’t fit the HTML5 gaming market specificity. What I will do this time is to show you how you may approach the HTML5 mobile game development on basis of our experiences. As an example I will describe production of our last game, simple and lovely looking Animory. I will not show how to write your script, but I’ll try to indicate what approach, and methods worked out best for us, and what we learned from this production process. Possibly with this “Case study” you will find some solutions and ideas for your own production process.

1. Idea & prototyping.

The first thing that is the key to a production process is an idea. You may of course have already some code or libraries prepared with certain in-game actions, but there will be always an idea to built around it. In the case of Animory game we used the graphical ideas from our previous game Animals Puzzle. We had some graphical assets we didn’t use in this game, and we decided to build a new code around them. Those tiny pieces with different drawings of animals gave us a thought: why won’t we use them in a memory game? And we did! The next step was to create a working prototype. For this process we used uxpin.com prototyping tool which is very easy and intuitive.

You may ask how we approached a prototyping? We started with prepared graphics, and after that we wrote a code of a working prototype. A conclusion: we can say now that we learned one important thing about this process: it is better to spend more time to create a prototype without a graphics first (a “net of the game” like on screenshot above), and then you should create graphics, and in next step a working, playable prototype. For example try to use some default red squares for game elements, a simple backgrounds, etc. Why? Just imagine when you have loads of graphics, or functions prepared before you test them, and then it comes out that they won’t actually work with the game… That may cause many issues, and unnecessary coding.

2. Coding process.

The whole game was finished within a month – here I’m talking about all the activities along with the graphics creation, testing, coding, etc. Now, you may think “What? A whole month for such a simple game?” It may take so much time because we put a lot of care into details, game logic, and code quality. Our programming approach is based on our own libraries and engine. At the moment we are still developing and modifying this engine for the needs of other games we are about to release soon.

The main core of the game was the easiest part, this process actually took around 2 days. Here we needed to make a component that turns, draws the tiles, and checks if the tiles fit to each other. Next step was creating a game logic which consists of unlocking the bonus pictures, acquiring points, or possibility of turning on/off the sound. This part took around 3 days. It is worth to mention that simultaneously with coding, we’ve been adding the graphics to the game core. The longest process of game development were modifications of HTML and CSS so it would look as best as possible on IE9, IE10, Chrome, Firefox, Android browser, iOS browser, mobile Chrome browser in any possible screen resolution. This was most demanding process of coding, and it took us around 3 weeks.

It is worth to mention that we had to perform some changes in the game core during this process. This is a lesson where a good prototype can speed up your process, and helps you avoiding some issues. When the game was being developed we needed to change the gameplay couple times. Why? It came out that the balance wasn’t well designed.

In first version of game it came out that player could win the game every time he played, but he didn’t get the game bonus if he exceeded the defined time.

Secondly we changed this feature to less complicated, where player would loose the game if he exceeded the defined time, but he won if he fit in the defined time.

Third and final version is the clearest one, and we believe it’s the best approach for the Animory gameplay.
As you can see the prototype is the most important thing. Without it, and without testing it you may meet too many issues to cope with. For sure we will keep up this line of thought in the next projects.

3. What about the graphics?

In the beginning of this article I mentioned that idea for the Animory game came out from some graphics we already had. Actual process of arts creation was almost as long as the whole game production. It took around 3 weeks for our designer to finish all the assets. Whole process was a sum of concept sketches, team brain storms, prototyping, and fitting a final version of each element with CSS. We put high pressure into graphics quality because it’s the first visible element of the game, and it’s role is to attract gamers. The graphics was created simultaneously with the game code, so almost every day we could see changes in the game.

Most of the results here really depend on the designer, the skills, talent, experience, and ability to create cool, colorful graphics. As you can see our designer tries to achieve a specific style. The game looks very attractive, there are no random elements. There is a story into it, a specific a line of thought. We find this well fitting to our idea of HTML5 gaming, where games are providing fun and visual joy.

4. Sounds?

At the moment HTML5 mobile games have sound support along with newer systems versions. Sounds make the game more attractive, and fun. The interaction with the game is stronger, and sounds notifications give clearer understanding of what player did wrong or right during the gameplay for example. We were using free game sounds libraries which are easily accessible in the web. For the music loops I recommend Incompetech Royalty Free License, but you have to remember about copyrights and inserting credits in your game.

5. Testing.

Basically, this process was taking part in every stage of game creation. Along with building up each game feature (whether it was graphics fitting, or game logic coding), we were always checking them before adding new parts of the games. Initial tests were a part of production process since the very beginning. Usually they took around 30 minutes. If there were any bugs detected we planned corrections, and next small tests until we reached non-faulty version of game features.

When we made a version of game which contained all planned elements, we could start internal testing of a final game version. The time spend on those tests was similar to the initial testing, and same as before, firstly we were fixing the bugs, and performing tests again until we reached satisfying results. For this, we have a base of devices in different range of mobile systems (iOS, Android, BlackBerry).

Samsung Nexus S

HTC Wildfire S

iPhone 3GS

HTC Magic

Samsung Galaxy S Plus

iPhone 3G

Samsung I9000 Galaxy S

BlackBerry Playbook

Samsung Nexus S

That ensured us that game is ready for next stage. It is worth to ask your friends, work colleagues or anyone willing to help you with this process. The more devices you have the bigger the chance to have well tested version of game. After that we could prepare the game for release.

6. Sending a game to the publisher.

In our case we already have a publishers base. It takes some time before you will find a reliable network for your games distribution. You need to experiment with various models proposed by publishers to find out what suits you best. As you know HTML5 mobile market is a niche, and it is not so easy to find proper traffic and revenues for your products.

A demo version of Animory was ready. We contacted our most active publishers, and interested them with the new game. Thanks to well prepared version we instantly could plan couple integrations after the publishers said “Yes, we like the game, and we would like to promote it in our networks”. Of course publisher needs to perform his own test before he will put the game live, and this usually took up to 2 weeks since we sent the demo. As the game was well tested by us internally, we didn’t meet practically any problems from the side of the publishers, and Animory could be finally released.

We prepared various versions of the game, but we didn’t prepare all at once. We gave it some time to see what are the first impressions for the game, and after that we could work with different platforms and promote them.

web mobile version for social mobile networks (free to play advertisements model/subscription model)

Chrome Store standalone version for desktop browsers (free to play desktop version with advertisements

wrapped, downloadable version for Android (free with advertisements, and buyable version)

7. Tell the world that your games is online!

Relying only on the publisher won’t boost interest of gamers and publishers in your game. You need to make some activities to raise up a fuss around it. If you run a blog, Twitter or a Facebook fanpage you get an additional promotion. You may also find other useful tools, networks. Try to promote your game among your friends, friends of friends, indie gaming groups or places which support HTML5 gaming such as MarketJS or HTML5Devs forums. The more you do that the higher the chance that the game reaches more gamers and publishers. If you have a budget for your marketing, you may as well plan a campaign based on banners in big blogs or gaming pages. That is up to you and your capabilities!

8. Final thoughts.

Whole production process which took us around one month, needed to be built around a certain plan. We learned the most important thing is predicting and prototyping precisely each part and action in the game. To make it all go smooth each step has to be carefully measured. Brainstorms, tests, and specific approach to the code and graphics give proper results. We have to admit that the prototyping process still needs improvements, but we are very satisfied with the final results. What’s more the game was accepted by gamers who are our audience and final judges. If they like the game and they find it fun, it means that the game is produced well.

I believe that this long blog entry will help you understand more our approach to the game production, and maybe you will find some solutions for better organization of you work.(source:gamasutra)


上一篇:

下一篇: