作者：Alex Rose

第二部分：如何制作2D图像

如今我们已经完成了代码编写，但却还缺少合适的图像。请不要担心，我们可以很快掌握这一要领。（请点击此处阅读本系列第一篇）

我从未接触过美术设计，我也并不重视它。对于那些只拥有数学思维的人来说，在面对程序编写时也会遇到以下情况：

screenie（from gamasutra）

当你第一次开始编程时，你将逐步思考如何执行某些特定程序，但你却不晓得如何以代码形式将其呈现出来。或者你知道自己想要什么结果，但却想不出循序渐进的对策去获得这些结果。

而在美术设计中，我们也有可能遇到前一种问题，即在脑海中形成某个画面，并思考着如何去勾勒这一画面，但却因为缺乏美术能力而不能将其整合到程序中。

有时候，你的脑海中可能不存在与问题相关的画面，但是你却可以通过试错法去避开这一问题。就像我就不是个视觉思考者。当我闭上眼睛思考时，我便想不出任何生动的画面。

但是这却是个很容易解决的问题（即缺乏美术能力），即只要使用开源矢量图像编辑器Inkscape便可。

在最初面对Inkscape时，我真的很为难。我根本就不了解矢量图像，之前都是依赖于MS Paint（一种画图工具）。

而现在我认为矢量图像是最棒的选择，并且将所有的游戏图像设计都寄托于它。

所以我们可以基于这一逻辑一步一步地创造游戏图像。

以下我将列出矢量图像所具有的优势：

不包含任何烦人的“光栅层”。我们可以单独选择每个对象。如果在30个步骤之内你发现自己不喜欢最初所添加于对象上的内容，你便可以删除该组件。这是一种非常简单的做法。如果你想要将一个组件置于最上方？那只要按压一个按键便可。

具有强大的路径菜单。你可以在节点路径中改变任何形状，并在此获得更广泛的路径工具。就像维恩图解（游戏邦注：英国逻辑学家维恩制定的一种类逻辑图解）。你可以使用路径菜单在无穷符号里添加循环，并删去循环中的叠加块，从而确保只有部分区域保持重叠。

splitoptions（from gamasutra）

如何面向iOS设计游戏并确保今后的选择能够升至1080p？矢量图像是可扩展的。你可以基于任何分辨率（而不会影响质量）去输出矢量图像，从而说明图像的设定是具有前瞻性。

如果你勾勒出一条错误的曲线，你也不需要删除它再重新开始；而是只需要使用节点编辑器去抓取贝塞尔曲线，压弯曲线，移动节点并改变节点的角度便可。

能够轻松地创造出精灵图标/纹理结构。这是一种非常有用的工具。你可以通过数字选择每个对象的宽度，长度，x轴和y轴坐标，并将对象对齐到网格上。你可以基于任何坐标轴为对象分组。

window（from gamasutra）

能够轻松地创造出渐变的色彩。基于填充菜单我们能够进行线性渐变，径向渐变，并添加模糊和透明效果等。同时我们还能够增添轮廓，改变层次并在此添加渐变效果。

可以将文本映射在路径上并转变成贝塞尔曲线，从而轻松地创造出文本logo。

这也是创造图像用户界面（GUI）的绝佳工具。我们只需要花几分钟时间便能够创造一个合适的按键。不只如此，如果你是面向不同的分辨率制作GUI，Cartesian坐标系统也能帮助你面向GUI对象轻松地编写出最有效的代码。

我认为可以先勾勒出一些不规则的图形，并依附于节点路径，然后通过改变节点去创造真正的对象。也就是你可以通过在一个不规则图形上添加其它图形而创造出一个完整的内容。如下图：

cogs（from gamasutra）

只要移动滚动条，我们便能够创造出一个好看的平面图像。如果你的脑中已经形成了明确的画面，你便只需要花几分钟时间便能够描绘出这一想法。

上图便是使用贝塞尔曲线所创造的奖杯。你只需要明确一个基本的形状，然后调整节点并将其整合成你想要的形状便可。

矢量图像拥有一些非常棒的风格。你可以复制一些已经完成的图像，追踪所有图像创作的进展，并将旧的设计理念转变成新理念。以下便是我在制作《Rotation Station》角色时的进展：

characters（from gamasutra）

因为使用了Inkscape，我只花了1，2个月便完成了这些图像设计——之前我从未接触过美术设计，一心只专注于编程设计。所以说实在的，使用Inkscape根本不需要我们花费太多时间，也无需具备美术才能。对于2D游戏开发者来说，这便是最佳软件选择——并且还是免费的。

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

Making Games with No Previous Experience – Part 2: 2D Art

by Alex Rose

Part 2: I don’t know how to make 2D Art!

So, you’re all good on the code front and making your game is starting to look like a realistic prospect, but you’re still absolutely useless at art? No worries. In no time you can get really good at it.

I could never do art, nor did I particularly care for it. But there’s a program that is incredible for mathematically minded people, and in a few weeks it produces results like this:

When you first start coding, your problems probably arise because you can think logically step by step how you would perform a specific procedure, but you don’t know how to convey that in code. Other problems arise because you know what outcome you want, but you can’t think of a step by step method for reaching that outcome.

In art, you tend to either have the former problem, where you can picture an image in your head, and think how you would assemble that picture, but you don’t have the artistic prowess to put it all together in a program.

Obviously, sometimes there’s also the issue that you don’t actually have an image in your head, but you can get around this through trial and error. I, personally, am not a very visual thinker. When I close my eyes to imagine things, I don’t see vivid images; I see the back of my eyelids.

However, the former problem (assembling an image step by step with a lack of artistic ability) is incredibly easy to solve, using a beautiful open source vector art editor called Inkscape.

Before I found Inkscape, I was completely stumped. I had no idea vector art exists. I used MS Paint for everything.

Vector art is the best thing ever. Really. I owe all my game’s aesthetics to it.

You can make art step by step using just logic.

Here’s some of the amazing benefits to using vector art:

No annoying “raster layers” and such. Every object is individually selectable. If in 30 steps’ time you decide you don’t like something you put onto your object at the start, you can just drag the offending component out. It’s that easy. Or you want to put one component on top? One button press.

The Path menu is incredible. You can convert any shape into node paths, and from there you get extensive path tools. Imagine a Venn diagram. You could use the Path menu to join the circles together into one infinity symbol, cut one circle out of the other, keep only the area that overlaps, etc.

Designing a game for iOS but want to keep your options open for upscaling it to 1080p in the future? Vector graphics are entirely scalable. You can output them in as low or high a resolution you want with no degradation in quality, so your graphics are completely future proof.

If you draw a curve that’s slightly wrong, you don’t have to rub it out and start again; you can grab your Bezier curves with the node editor, and curve the lines, move the nodes and change the node angles.

Sprite sheets/texture atlases are a breeze. This is the ultimate tool for creating them. You can numerically choose the width, height, x and y coordinates of each object and snap objects to a grid. You can simply group any object and type in its desired coordinates.

Colour gradients are incredibly easy to apply. The Fill menu allows you to apply linear gradients, radial gradients, blur and transparency. You can add outlines, change the thickness of them and even apply gradients to those too.

Text can be mapped to paths and turned into Bezier curves, so making text logos is incredibly easy.

It’s the perfect tool for GUIs. It only takes a few minutes to make a slick button. Not only this, but if you’re making a GUI that’s going to be scaled for different resolutions, the Cartesian coordinate system makes it really easy to write code for GUI objects that have to sit on top of each other.

I recommend drawing things out of squares, converting these to node paths and then moving the nodes to make things. The great thing about this is that you alter the roundness of the square to make really juicy corners. For instance, check this simple cog:

Just by moving a slider on a box, you get nice, squishing looking sides. And it takes under a minute to make something like this if you have a picture in your head (and luckily, I already knew what a cog looked like). It’s just a case of breaking it down into steps.

Underneath that you can see a trophy made with Bezier curves. All you need is a basic shape, and then you simply tweak the nodes and it into the shape you want. I used a photograph of a trophy as a reference for the shape.

And vector art can have a range of really nice styles. Since you can just keep duplicating as you make things, you can keep track of all the progressions of everything you make and transfer ideas from old designs to new ones with ease. Here’s the progression of how I made my characters for Rotation Station:

And all these were designed within only a month or two of using Inkscape, with no prior knowledge of art at all, while largely focusing on learning how to code. It really honestly takes no time or artistic talent to get extremely proficient with Inkscape. It’s the perfect software for any 2D game developer, and it’s free. You should go try it out.

Stay tuned for next time, where I’ll be discussing where to start if you have no idea about making your own game music!(source:gamasutra)