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

阐述《Active Bomb Sweeper》的游戏设计过程

发布时间:2011-10-13 18:10:40 Tags:,,,,

作者:George Coghill

《Active Bomb Sweeper》是款iPhone解谜游戏应用,由Zeologic开发和编程,我负责的部分有角色设计、插图和整体游戏设计。

下文将阐述插图制作和设计过程,以及某些使用Adobe Illustrator CS5的Pixel Grid的技术要点和在为Retina Display输出iOS图像时使用PNG输出与Save For Web相比的局限性。

Active Bomb Sweeper(from georgecoghill)

Active Bomb Sweeper(from georgecoghill)

角色设计

项目开发从角色“bomb sweeper”的设计开始。我向开发商建议使用穿着军事炸弹套装的角色,类似于《拆弹部队》的主角那样。他们很喜欢这个想法,于是我们开始制作草图。

已上色的草图原型(from georgecoghill)

已上色的草图原型(from georgecoghill)

调整后的草图(from georgecoghill)

调整后的草图(from georgecoghill)

这个最初的草图定义了角色的大小和比例,制作时考虑到了其最终在iPhone和iPod Touch屏幕上显示的大小。这样,一个大脑袋小身体的角色诞生了。

我们进行了数轮的角色草图设计,在此期间我曾经让角色失去了原本的吸引力。但是,Zealogic根据其获得的积极反馈又使其步入正轨。

平滑的颜色矢量美术(from georgecoghill)

平滑的颜色矢量美术(from georgecoghill)

阴影和辅助照明效果(from georgecoghill)

阴影和辅助照明效果(from georgecoghill)

我们制作玩角色的草图之后,就开始进行界面的设计。

界面设计

我最初的设计是想要利用角色的颜色,并且使用沙漠或者军事化的外观。Zealogic告诉我说他们需要应用更加明亮,让玩家更能感受到其中的趣味性,使用《愤怒的小鸟》作为颜色和界面设计的样本。

《愤怒的小鸟》已经获得了巨大的成功,难道有人会讨厌这样的设计吗?

最初的“沙漠化”颜色方案(from georgecoghill)

最初的“沙漠化”颜色方案(from georgecoghill)

我修改后的“明亮颜色”设计并不符合客户的要求,他们认为颜色过于明亮。

“明亮颜色”设计1(from georgecoghill)

“明亮颜色”设计1(from georgecoghill)

“明亮颜色”设计2(from georgecoghill)

“明亮颜色”设计2(from georgecoghill)

我仍然很喜欢这个较为明亮的颜色方案,但是我还是得进行修饰和更改。

我还有个想法,就是使用炸弹导火索作为计时器。

Pixel Grid

在技术方面,我使用了Adobe Illustrator CS5中的Pixel Grid工具,这使得我不仅可以预览像素,而且还可以将它们分解成屏幕上的格子,以便能够精确放置。

标准视图(from georgecoghill)

标准视图(from georgecoghill)

Pixel Grid预览(from georgecoghill)

Pixel Grid预览(from georgecoghill)

在Bjango上通读iOS应用设计技巧之后,我知道自己需要专注于像素层面以避免出现模糊的边界。在这个方面,Pixel Grid表现得极为出色。

在定义游戏图像的大小时,Zealogic发现无论如何调整我提交的PNG文件的大小都会对美术的质量造成损害。所有东西都需要从原始的矢量艺术中输出,才能够正确地调整大小和旋转。

应用图标设计

接下来要设计的是应用的图标,我们做出了各种各样的版本,有游戏名称文字、角色和炸弹等。最后,从图标大小的可读性因素来考虑,我们一致同意炸弹图标是最好的选择。

图标(from georgecoghill)

图标(from georgecoghill)

主菜单设计

设计的最后一个步骤是主菜单设计:

主菜单设计(from georgecoghill)

主菜单设计(from georgecoghill)

所有的设计都经Zealogic通过之后,输出最终PNG文件这项冗长的工作就要开始进行了。

虽然很难在iPhone屏幕上辨清,我们还是创造了某些简单的姿势变动,使得游戏角色在游戏平台上移动时有带有一定的卡通动画。

你应该会注意到,我们放弃了阴影和辅助光照的细节效果,在如此小的屏幕上这些根本无法识别。

App Store

这个过程我参与的并不多,只是保存了下文件,等待游戏于2011年4月1日发布。Zealogic的Eithan给我了一段可以下载应用的代码,在iPhone 4上看到最终的产品令我颇感惊喜。Zealogic的这款游戏很不错,我正期盼《Bomb Sweeper》能够与《愤怒的小鸟》相媲美。

整个项目的制作过程很愉快。与Zealogic的Eithan合作很有趣,能够接触到苹果、iOS、iPhone、插图、卡通、角色设计和卡通化图像设计等诸多领域确实很棒。

这是我参与的首个iOS应用项目,从中得到了很多经验。当你为新平台游戏制作图像时还会发现很多细节内容,但是这款游戏的设计奖励将让我未来接手的iOS项目显得更加有趣。事实上,在编撰这篇博文时我已经又开始参与另一个项目了。

技术要点:Adobe Illustrator的Multiple Artboards和Save For Web的局限性

Adobe Illustrator CS4发布之后,Multiple Artboards整个功能已被证实非常有用。其优点在于,使用者可以一次性地输出所有的画板。这个功能的缺点在于,输出文件时无法指定大小或百分比。

因为iPhone 4引进了Retina Display,所以应用需要同时包含旧分辨率和新超高清Retina Display的文件。

使用Pixel Grid,确保所有图像的尺寸都能够被2整除,这样可以先设计Retina Display,然后输出50%的比例用于旧屏幕。不幸的是,“Export to PNG”功能不允许你设定输出百分比。

所以,你可以使用“Save For Web & Devices”。但是,这种方法有相反的局限性:尽管你可以设定输出文件的大小和百分比,但是你不能同时输出所有画板。这两个功能的功能性应当进行整合。

所以我手动输出了所有的文件,首先输出100%的,然后输出50%用于旧屏幕的文件。文件上传到Dropbox的共享文件夹中,Zealogic将它们用于游戏设计。

游戏邦注:本文发稿于2011年4月20日,所涉时间、事件和数据均以此为准。(本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦

iPhone Game Design: Active Bomb Sweeper

George Coghill

Active Bomb Sweeper is an iPhone puzzle game app developed and coded by Zeologic, for which I created the character design, illustrations and overall game design.

Read on for more about the illustration and design process, as well as some technical notes on using Adobe Illustrator CS5′s Pixel Grid and the limitations of using PNG export versus Save For Web when outputting iOS graphics for the Retina Display.

Character Design

The project started with developing the “bomb sweeper” character. I suggested to the developers that we go with a military bomb suit character, similar to the lead character in the film The Hurt Locker. They loved the idea and we ran with sketches.

Initial rough sketch with color:

Cleanup sketch:

The initial sketches were mostly to capture sizing and proportions for the character, keeping in mind the final size on the iPhone and iPod Touch screens. In this case, a large head/small body approach was pretty self-evident.

We went through a few rounds of character design sketches, during which I drifted away from the appeal of the original character. Eithan over at Zealogic got things back on track with his positive and enthusiastic feedback.

Flat color vector art:

Shading and highlighting:

Once we had the character fleshed out in sketch form, we starting working on the interface design.

Interface Design

My initial designs were intended to play off the color scheme of the character, as well as a desert/military operation look. Zealogic let me know that they wanted the app to have a far more light/fun feel, and used Angry Birds as a reference for the color scheme and approach they wanted to go with.

With the immense success of Angry Birds, who can blame them?

Initial “desert” color scheme:

My revised “bright color” designs were not what the client wanted, they were too bright.

I still prefer this brighter approach and color scheme, although I would have refined things further from this rough state.

I also came up with the idea of using the bomb fuse as the timer/countdown indicator.

Pixel Grid

On the technical side, one great tool I worked with in Adobe Illustrator CS5 was the Pixel Grid tool, which allows one to preview not just the pixels, but breaks them down into a grid on the screen for precise placement.

Standard zoom (note raster effects resolution is set to 72 DPI, hence the pixellated drop shadow):

Pixel Grid preview:

After reading up on the iOS app design tips over at Bjango, I knew I would need to dig into these at the pixel level to avoid blurry edges. The Pixel Grid was fantastic in this regard.

When sizing the graphics for the game, Zealogic discovered that any resizing to the PNG files I submitted resulted in a lowering of the quality of the artwork. Everything needed to be output from the original vector art, to size, and properly rotated.

App Icon Design

The next step was to get an app icon designed, and we worked with variations that included the game name text, the character, and the bomb by itself. In the end, due to the readability factor of the icon at the size it would be displayed we agreed the simple bomb icon worked best.

Splash Screen and Main Menu Design

The final design step was to work up a main menu splash screen:

Once all the designs were finalized and approved by Zealogic, the tedious task of outputting the final PNG files began.

Although tough to discern on the iPhone screen, we created some simple pose variations to give the illusion of a cartoony animation for when the character moved across the game board. Here’s a zoomed up animated version showing the various poses:

Note that we left out the shading and highlighting details, at such a small size they would have been unreadable and visually distracting.

In The App Store

I was pretty much out of the loop, save for a few file tweaks here and there, until the actual final game was released on April 1, 2011. Eithan over at Zealogic kindly sent a code to download the app, and I was pleasantly surprised to see the final creation on my iPhone 4. Zealogic did a fine job realizing the game they had envisioned, and I look forward to seeing Bomb Sweeper knock Angry Birds off of it’s roost!

The entire project was a complete pleasure to work on. Eithan over at Zealogic was incredibly fun and enthusiastic to work with, and being able to branch out into an arena that overlaps many of my geek passions — Apple, iOS, iPhone, illustration, cartooning, character design as well as cartoon-style graphic design — was a blast.

This was my first iOS app project, and it was quite a learning experience. There are a lot of details you discover when you get into publishing graphics for a new platform, but having this first one under my belt will make future iOS projects even more fun as well as streamlined as far as workflow. In fact, I’m working on another as I write this post!

Technical Notes: Limitations of Adobe Illustrator’s “Multiple Artboards” and “Save For Web”

Since Adobe Illustrator CS4 was released, there has been a Multiple Artboards feature which has proven to be extremely useful. The upside is the fact that one can export all the artboards at once. The downside of this feature is that when exporting files, you cannot specify sizes or percentages.

Since the introduction of the Retina Display in the iPhone 4, apps are required to include files for both the older resolution displays as well as the new super high-res Retina Display.

Using the Pixel Grid and ensuring all the graphics are of dimensions divisible by two, one can design once for the Retina Display and then export at 50% for the older screens. Unfortunately the Export to PNG feature does not allow you to set export percentages as mentioned earlier.

So the other option is to use the “Save For Web & Devices”. However the limitation here is the inverse: while you can set sizing & percentages for the files you’re exporting, you cannot export all the artboards at once. These two features need to share functionality.

So I went about manually exporting all the files, first at 100%, then at 50% scale for the older displays. The files were uploaded to a shared folder on Dropbox, and Zealogic went about implementing them into the game design. (Source: Coghillustration)


上一篇:

下一篇: