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

有效完善游戏图像的3大步骤

发布时间:2015-10-13 15:47:49 Tags:,,,,

作者:Nathan Lovato

我们总是很容易通过封面去评判一本书的好坏。关于我们的网站或任何视觉设计也是如此。但是制定一个吸引人的艺术方向以及进行有效的UX设计却不是一件简单的任务。当有人发现你的游戏时,他的第一印象总是关于你的图像设计。他可能会先看到你的游戏的一张图像。可能是来自视频截图,视频或游戏动图。

所以如果你之前还不理解为何工作室门会花大笔钱去优化图像的话,现在你便能够找到原因。

而我们真正要讨论的内容是什么呢?和谐的视觉效果不只是关于精致的图像。它们还必须让玩家觉得好看且具有意义。实际上,你的游戏美学需要同时包含设计原则以及你的整体艺术风格。换句话说,也就是所有能够提高你的游戏视觉效果吸引力的元素。

作为美术师,我们还有许多需要雕琢的游戏艺术内容。为了让我们的设计具有生命力,并提供给用户有趣的体验,我们必须:

创造强大的构成或布局去引导玩家的视线。

为我们的游戏资产制定吸引人的配色方案和形状。

根据用户反馈,分析以及A/B测试方法去判断我们的选择是否可行。

我们该如何做到这些呢?在本文中我将与你们分享完善游戏视觉效果的一些捷径。以下技巧同样也能够帮助你更好地理解美术师这份工作以及如何称职地做好这份工作。

1.专注于强大的构成

任何图像内容的威力就在于它能够帮助玩家去理解设计的视觉语言。一方面,它包含了各种视觉元素—-这就像是一张词汇表,如颜色,形状,色差等等。另一方面,我们拥有与语法规则相似的设计原则。它们能够提供给我们整合所有元素的灵活工具。

明确的构成便等于准确使用设计原则。这一原则通常包含6个元素:规模与比例,重复与对比,平衡,强调,层次结构与和谐,单位。理解所有这些元素是很有趣的。每个元素就似一面放大镜,能够帮助你一点点地分析自己的创造,并更好地完善它们。

确定布局

在此我们将专注于布局的平衡。我们应该有效利用空间和比例去创造能够引导玩家视线的清楚格局。通常情况下我们都会通过网页设计和界面去设计布局。但在所有艺术领域概念都是非常重要的。

布局是图像元素的组合。它可以是一款游戏的GUI,但却并不局限于此。在动画产业中,布局美术师将明确一个电影镜头中每一个元素的位置,大小和比例。伴随着光线和颜色,布局是之后会活跃起来的实体基础。

强大的构成总是能够将玩家的视线引向那些重要的内容。它们会为玩家创造前进的道路—-这就像各种元素间连贯的层级。你的游戏中的每个图像资产都具有一定的视觉分量。这些分量是基于每个资产在canvas上的位置,大小,对比度与亮度所决定。这依赖于各种元素。从整体上看,较大,较亮或五彩的对象总是拥有较高的分量,因为它们能与周边的事物形成鲜明的反差。从而更有效地引起人们的注意。

适当分隔元素是确保玩家能够轻松浏览你的界面的关键。我想强调的是在元素之间留出一定空间是非常重要的。屏幕中间的游戏按键就像是国王房间里的王座:你能够从它所摆放的位置看出它的重要性。它总是能够吸引你的注意。

玩家需要能够控制游戏中的各种变量并与UI元素进行互动。这也是为何界面设计总是很鲜明并被置于游戏世界最上方的原因。GUI通常都是逆着屏幕进行设置,从而将其与游戏世界分隔开来。

你也可以使用同样的方式去设置游戏方法:如果你在游戏玩法之间留出足够的空间,它们便会显得更加重要且独特。

具有深度的世界

还有一个图片元素能够创造图像元素间的层级,那就是深度。我们可以将视觉设计的大小和比例与深度相结合让玩家感受到游戏世界的规模。深度既依赖也作用于多种设计原则的使用。它能够创造前景与背景间的反差。并通过环境光线而进一步融合整个游戏世界。

我们可以通过2种方式去实现深度:重叠资产与使用光线。第一种方法较为直接。如果我们重叠了不同图像元素,我们会觉得它们更接近自己。通过使用鲜艳的轮廓,像《巫师3》等游戏便创造了互动元素与背景元素间的重叠,从而让它们更加突出。

就像在《巫师》中,你可以看到被光圈包围着的路径与战利品。

另外一种创造深度的方法便是真正理解光线。当光线穿越空间时,它们会碰到尘粒并且会分散这些尘粒。如果穿行速度更快,它们便会遇到更多尘粒,从而转换出更多颜色。当我们在看远处的山时,它们通常都是灰色的。比起那些离我们更近的对象,它们看起来会比较暗淡。而分析并复制这些效果到图像中能够帮助我们创造出更具3D效果的游戏世界。

上图是我去年所创造的游戏截图。你可以发现道路与背景中的山之间具有饱和差。

Dan-The-Rabbit(from gamasutra)

Dan-The-Rabbit(from gamasutra)

2.努力创造具有吸引力的资产

颜色,光线和形状是定义你的图像风格的3大要素。图像风格能够赋予你的游戏一个独特的身份。图像的新鲜感与吸引眼球的能力将构成它们的魅力,这也是动画世界中一个常见的概念。

有关吸引力的理念是关于创造作品与观众之间的一种联系。这需要归功于充满魅力的角色或者让人惊叹的景色。同时设计师需要将所有设计原则与自己的一些设计经验相结合。这也是我们作为设计师的经验之一:想出一些能够与玩家形成共鸣的艺术方向。

再一次地,吸引力艺术并不等于惊喜的绘制。你的视觉效果应该足够清楚简单,且能够吸引人的眼球。我们便拥有许多带有有效美术风格的手机游戏案例。即使是一些简单但却很可爱的资产也需要你花时间去创造并优化。创造吸引人的游戏世界需要一定的经验。此外我们还需要专注于2大元素:轮廓和颜色。虽然我提到了光线,但并不是每一款游戏都能使用它。如果你创造的是一款带有简单设计或简单美术风格的2D游戏,你可能不会用到光线。

轮廓的威力

阴影可能成就或破坏你的视觉构成。当我在学习动画时,我和同学尝试了一次快速但却并不简单的实验。我们使用角色去表示一些特别的行动或情感。但我们只能呈现他们的轮廓。最终观众需要说出发生了什么。但结果是我们遭遇了多次失败。

关键在于大多数情况下轮廓未能发挥作用。通常情况下如果你不能通过一个对象的轮廓直观地理解它的特征,那么这一设计便不可能吸引你的注意。

当我们进入一个游戏世界时,我们会发现各种对象,怪兽和角色。它们是朋友还是敌人?是能够与你互动还是只是背景的一部分?我们的大脑会处理我们所看到的一切并快速做出反应。我们会下意识地对我们所遇到的任何对象做出判断与反应。而轮廓则具有重要的作用。

The-Wind-Waker-Silhouettes (from gamasutra)

The-Wind-Waker-Silhouettes (from gamasutra)

你是否认出了Link,Zelda和Ganondorf?你可以选择迪士尼电影中的角色,武器和其它建筑。一个出色的剑的轮廓必须让人一眼就看出它是一把剑。它的刀锋必须是锋利的,且带有圆形的刀柄。因为我们知道一些较为锋利的东西大多都是危险的。同时,一些胖胖或毛茸茸的动物总是看起来很可爱很亲切。

为了让玩家能够更轻松地判断一个轮廓,你需要在它身边留出一些空间,或者说你应该在一个角色的手与身体,或者两条腿之间留出一些实体空间。就像我们在本文第一部分中所说的那样,这是留给那些重要构成元素的空间,目的是为了让它们看起来更清楚。这一原则同样也适用于单一角色或对象的比例。就像上图Link的轮廓便是一个有效的例子。

充满活力的颜色

在创造唤醒人们情感的图像时,颜色便是我们的最佳工具。我们总是认为那些鲜艳且具有高饱和度的颜色是充满活力的颜色。颜色能够赋予我们的图画生命力。在一张单色图中添加颜色就好像往一道菜中撒上盐或胡椒一样。它能够强化一张图画的故事。

人们对于颜色的欣赏是非常主观的,所以在创造颜色方案时我们并没有可以遵循的特定公式。所以我只能在此提供给你们一些参考与建议。

在整款游戏中使用高饱和度的颜色能够更好地迎合更广泛的用户。他们会因此情绪高涨。这也是为何大多数休闲游戏创造者会选择高饱和度的调色。而一些柔和的色调则会创造出较为阴郁的氛围。这也是像《纪念碑谷》等带有虚幻世界的游戏的理想选择。

带有充满活力的颜色的更加现实的图像总是能够吸引人们的眼球。《激战2》的图像便是很好的例子。像这样的配色会让人觉得很成熟,并充满生活感。它们呈现出了强烈的反差,这也是美术师在讲述一个地方的故事的一种好方法。《镜之边缘》使用了充满活力的颜色去引导玩家穿越一些复杂的关卡。在这款游戏中,颜色便是用于为玩家指路。

Mirror's-edge-orange-bands(from gamasutra)

Mirror’s-edge-orange-bands(from gamasutra)

也许看起来不明显,但这些橙色栏杆是沿着墙壁安置的,能够清楚地告诉我们该怎么走。就像医院中也有这样的路标指示人们前行。

现在我们该来说说最重要的一点了。这也是年轻创造者经常忽视的一点。即反馈。

3.获得建设性反馈

“很出色。”“太棒了!”

获得这样的正面反馈总是会让人兴奋。并且会让我们倍受鼓舞。但这却不是建设性反馈。这样的反馈不能告诉我们什么是可行的。更重要的是什么是不可行的。对于我们来说真正的机遇是我们还能够去完善游戏图像。

建设性批评能够告诉你图像的质量与缺点。更有效的批评甚至还会带着一些建议去帮助你解决问题。但是我们很少会获得这样详细的反馈。这种反馈通常是来自一些较为亲近的同事或团队成员。那些真正理解相关技艺的人往往都很忙。而你需要投入更多时间去正视任何有效的批评。

然而我们还需要一些新鲜血液帮助我们判断所有创作是否符合他们的目标或者我们是否朝着正确的方向前进。这些新鲜血液不应该只是周边的同事。我们还应该了解所有图像对于玩家的视觉影响。通过测试和游戏分析,我们可以不断获得一些较为客观的反馈。

简单的A/B测试

我们将使用A/B测试。这是一种非常直观的方法。测试A能够审查游戏中特定互动资产的点击率。然后我们将进行测试B。即我们将替换图像元素并再次测试它的点击率。我们将比较两次测试结果。即改变前后的互动玩家数量各是多少?

哪个版本拥有更高的用户粘性?A还是B?是的,这是一种很简单的方法。

A-B-testing(from gamasutra)

A-B-testing(from gamasutra)

这也是网页设计师一直在使用的一种测试方法。它非常适合界面和UX设计。也许乍看之下它好像没什么用,但是当你开始使用它时你便能发现它的厉害之处,只是改变社交分享机制或游戏按键有可能有效提高玩家数量。

此外这种方法也能够帮助你了解在改变图像后玩家是否更频繁地使用菜单或者更灵活地前行。如果玩家一眼就觉得能够按压你的按键,他们便更有可能去按压它。特别是在手机设备上,因为在这里我们是使用手指进行各种互动。

结论

总之,你可以通过3大步骤去完善自己的游戏图像:

首先确定可靠的构成。这能够提供给你的视觉风格一个坚实的基础。

其次专注于图像的吸引力。清楚的轮廓和充满活力的颜色便是非常强大的工具!

最后使用分析工具和A/B测试确保自己始终朝着正确方向前进。

本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转发,如需转载请联系:游戏邦

3 steps to improve your game’s graphics

by Nathan Lovato

We have a strong tendency to judge a book by its cover. It takes but a split-second for our opinion of a website or any visual design to be tinted. Positively or negatively. Coming up with both an appealing art direction and some efficient UX design is no easy task. When someone discovers your game, his first experience is shaped by your art. He likely first sees a picture of it. Be it from a screenshot, a video, or your game in action.

So if you ever wondered why studios bother spending big money on polished art, now you know.

But what are we talking about exactly? Resonant visuals are more than just detailed graphics. They have to be both beautiful and meaningful to players. In practice, your game’s aesthetics encompass both the principles of design and your overall art style. In other words, everything that may increase the appeal of your game’s visuals.

There are many aspects of game art that we need to carefully hone as artists. In order to breathe unity in our designs and provide a pleasant user experience, we have to:

Establish strong compositions or layouts to effectively guide the players’ eyes.

Come up with appealing color palettes and shapes for our assets.

Ensure that our choices work, thanks to user feedback, analytics and the A/B testing method.

How can we do all of that? In this article, I want to share with you some trails to improve your game’s visuals. The techniques exposed below are also useful to better understand your artist’s job and to communicate efficiently with them.

1. Focus on strong compositions

The power of any piece of art boils down to a strong understanding of the visual language of design. On one end, it is composed of the visual elements, a form of vocabulary. They encompass colors, shapes, shading… On the other end, we have the principles of design, which are similar to grammar rules. They give us flexible tools to assemble our elements into strong compositions.

Clear compositions boil down to a correct use of the principles of design. There are more or less 6: Scale and Proportion, Repetition and Contrast, Balance, Emphasis, Hierarchy and Harmony or Unity. It is interesting to understand them all. Each principle offers you powerful lenses to analyze your creations bit by bit, and improve them. CtrlPaint covers each of them in greater details in a 7 part video series.

Laying out layouts

Here, we are going to focus on the balance of our layouts. It takes a good use of space and proportions to create clear visual arrangements that guide the viewer’s eye as intended. We tend to associate layouts with web design and interfaces in general. But the concept is relevant in all artistic domains.

A layout is a composition of graphic elements. It may be a game’s GUI for example, but not only. In the animation industry, layout artists actually establish the position, the scale and the proportions of every element in a movie shot. They stage shots. The layout is a solid foundation that will come to life later, with the addition of lighting and colors.

Strong compositions guide the viewer’s eye to elements that matter. They create a path for the player to follow, a coherent hierarchy among various elements. Each and every graphic asset in your game bears a certain visual weight. That weight depends on each asset’s position on the canvas, its size, its contrast and luminosity… It relies on many factors. Overall, big, bright or colorful objects have a high weight, provided that they contrast with their surroundings. Such objects attract the eye.

Spacing out elements properly is key for your interfaces and levels to be easy to read. I want to stress out the fact that leaving some room between and around elements is as useful and level design or storytelling as it is in your UI. A play button in the center of the screen is like a throne in a Kings room: the way it is placed, you know how important it is. It calls for your attention.

The player needs to monitor variables from the game, and to interact with UI elements. That is why an interface is often sharp, contrasted, bright, and placed on top of the game world. GUI are generally drawn as if they were placed against the screen, to separate them from the game world.

You can treat your gameplay related assets the same way: if you leave some space between them and their surroundings, they will look key and unique.

Worlds with depth

There is another aspect of an image that creates a hierarchy between graphic elements: the use of depth. We can use the size and proportions of our visuals in combination with depth to give the players a sense of the game world’s scale. Depth both relies on and affects the use of multiple principles of design at the same time. It creates contrast between the foreground and the background. It helps to unify the game world with ambient lighting.

Depth is achieved in 2 ways: by overlapping assets and with lighting. The first way is straightforward. If we overlap a graphic element on top of another, it feels closer to us. For instance, the UI looks like it is placed against the screen because it sits on top of the game world, in another layer. Through the use of glowing outlines, many games like the Witcher 3 offer a way to create some overlap between interactive and background elements. It makes them look prominent.

Using your Witcher’s senses, you can see trails and loots surrounded by a glow.

The other way to achieve depth requires a certain understanding of lighting. As light rays travel through space, they encounter dust particles, which scatter them. The farther the travel, the more particles they encounter. And the more their color shifts. When we look at some hills or mountains far away, they look gray. Their colors do not look as vibrant as other objects near us. Analyzing and replicating that effect in our graphics helps to make our worlds feel like they have a 3rd dimension.

A screenshot from a game I worked on last year. Notice the difference of saturation and contrast between the road and the hills in the background.

2. Strive for appealing assets

The elements of color, lighting and shape are the 3 main components that define your art style. That style can give your game a unique identity. The freshness and the ability of your graphics to attract the eye make up their appeal, a common concept in the world of animation.

The idea of appeal is to create a connection between your creation and your viewers. Be it thanks to charismatic character or an awe-inspiring scenery. It requires a solid use of all of the principles of design in conjunction as well as some artistic experience. That is one of our targets as designers: to come up with an art direction that will resonate with players.

Again, appealing art doesn’t mean detailed drawings. Your visuals can be clean, simple, yet attract people. We have numerous examples of mobile games with efficient art styles. Even simple yet lovely assets take time to create and polish. And creating appealing worlds requires some experience. But, there are still 2 elements we can concentrate on to create appealing art efficiently: silhouettes, and colors. I could add lighting in here, but it is not relevant to all games. If you have a flat kind of design or a very simple cel-shaded art style in a 2d game, there isn’t really much lighting involved.

The power of silhouettes

Silhouettes can make or break visual compositions. When I was studying animation, my classmates and I had to repeat a quick, but not so simple exercise. We had to pose characters to represent a certain action or emotion. But we could only show their silhouettes. And the final viewer had to be able to tell what was happening. I failed. Many times!

The thing is, if the silhouette doesn’t work, most of the time, the lit pose doesn’t work either. This experience showed me the importance of strong silhouettes. Often, if you can’t understand intuitively an object’s characteristics with its silhouette, its design won’t mark you.

When we evolve in a game world, we discover numerous objects, monsters and characters. Friend or foe? Interactive, or part of the background? Your art is meant to answer those questions. Our brains process what we see and feel extremely fast. We unconsciously judge and react to the object we stumble upon in an instant. Silhouettes contribute greatly to that.

Who are they? Hint: some of the character designs I love the most. Doesn’t help? I knew I should have used Mario and Sonic…

Did you recognize Link, Zelda and Ganondorf? You can take characters from Disney movies, but also weapons and other buildings, and try again. A good sword’s silhouette looks like it depicts a sword. It is sharp on the blade side, often with a more rounded pommel. We know instinctively that something spiky or sharp like that may be dangerous. On the other hand, round or fluffy animals look cute and friendly.

In order for a silhouette to read well, you need to leave space around it, you need some negative space between the arms of a character and his body, or between his legs. It is the same thing we talked about in the first part of the article. It is key to give some space to important elements of our composition for them to look clear and clean. This principle is still true at the scale of a single character or object. Link’s silhouette above offers a great example of that.

Vibrant colors

Colors are our best tool when it comes to provoking emotions with images. We qualify bright and saturated colors as vibrant. Colors vibrate. They bring life to our paintings. James Gurney dedicated more than half of his wonderful Guide for the Realist Painter to colors. And for a reason. A single touch of color on a monochromatic picture has the effect of a pinch of salt or spice in a dish. It enhances the image’s story.

The appreciation of color is subjective, so there is no definite formula we can follow to create good color schemes. All I can give you is a few notes and references to come up with your own color palettes.

Strong, saturated colors, used throughout your entire game worlds, are good for broad audiences. They feel cheerful, positive and lively. That is why most casual game creators choose to go with saturated palettes. Pastel tones, which are a bit fainter, tend to create a more moody ambience. They feel light and soft. They are ideal for a game with an ethereal world like Monument Valley for example.

More realistic schemes with vibrant touches of colors also attract the eye. Guild Wars 2’s artworks offer great examples of that. Such palettes feel mature, yet full of life. They possess a strong contrast, a great tool for the artists to tell a place’s story. Mirror’s Edge uses vibrant colors to guide the player through its intricate levels. In that case, the colors are used to indicate a clear path to follow.

They may not look like much, but those orange bars placed along the walls instinctively tell us where to go. Similar rectangles of paint are often use in hospitals to guide people.

All in all, the key with both silhouettes and colors is to analyze other games and pieces of art. And to observe their behavior in nature.

Now, it is time to get to the most important part of becoming better at our craft. An all too often overlooked aspect by young creators. Feedback.

3. Get constructive feedback!

“It’s good.” “It’s great!”

It is always pleasant to get such positive feedback. It feels rewarding. And it may be true as well: maybe we have done some good work. Yet, it’s not constructive. Such feedback doesn’t tell us what works and why. And more importantly, what doesn’t. Chances are we can improve some, if not many aspects of our game’s art.

A constructive critique outlines the qualities and defects of your art. A good critic should even come with advice or notes to help you fix issues. It is rare to get detailed feedback like that. It often comes from close peers, or teammates. People who have a solid understanding of the craft are often pretty busy. And good critiques take a lot of time to formulate right.

Yet, we need fresh pairs of eyes to ensure that our creations meet their goals or that we are headed the right way. And not only from our peers! We have to know how our visuals affect our players as well. On top of our coworkers’ insights, we can get continuous, objective feedback thanks to testing and game analytics.

The simple A/B tests

We are going to use a method called A/B testing. It is an intuitive technique. The idea is to check the funnel or CTR (Click Through Rate) of a given interactive asset in the game. That is test A. Then, we run test B. We replace the graphic element and track its CTR again. And we compare the results with the first test. Did a higher percentage of people interact with it before or after the change?

Which version got the highest rate of engagement? A or B? Yes, it’s as simple as that… yet it’s not easy to know why that is exactly.

It is a test web designers exploit all the time. It is very useful for interfaces and UX design in general. It may not seem like it until you try, but improving a social share or play button can significantly increase the proportion of players who push it. A/B tests are most useful when you are looking to get engagement through an interaction with a graphic element.

But it is also useful to see if players use a menu more or navigate through a level better with a graphic change. The style of your gameplay related assets can make or break their clarity. Buttons work better if they look thick. If they look like they can be pressed against. In particular on mobile devices, where we use our fingers to interact with them.

Summary

Each topic runs deep, thus a single article obviously can’t cover too much ground. You can find a lot of complementary resources on digital art and design on Matt Kohr’s website CTRLpaint.

All in all, here are the 3 steps you can take to improve your game’s graphics:

Work towards solid compositions first. It gives a strong foundation for your visual style to thrive.
Focus on your art’s appeal. Clear silhouettes and vibrant touches of colors are powerful tools for that!
Ensure that you are headed the right way, using analytics and A/B testing.(source:gamasutra)

 


上一篇:

下一篇: