你在无聊中挣扎，渴望发挥你的创造力. 你想要创造一些东西，一些视觉上令人印象深刻的东西，一些艺术的东西. 或者也许你想学习编程，并尽快做出一些令人印象深刻的东西. 如果是这样，那么处理语言就是最好的选择.
在我迄今为止使用过的所有编程语言中, 处理过程无疑是最有趣的过程之一. 它是一种直截了当的语言——易于学习、理解和使用，但它非常强大. 这几乎就像你在一张空白的画布上用几行代码作画. 没有任何严格的规则或指导方针来限制你的创造力, 唯一的限制是你的想象力.
在大学里，我是一个项目的助教，这个项目聚集了高中生，教他们处理过程. 他们中的大多数人都没有很强的编程背景, 有些人以前甚至没有写过一行代码. 在短短五天的时间里，他们被要求学会语言，并建立自己的简单游戏. 成功率几乎是百分之百，我们很少遇到失败. 在本文中，这正是我们将要做的. 我把整个项目缩减为两部分. 第一部分，我将谈论语言. 我将给出一个基本的概述，一个处理的演练，并给出一些提示 & 技巧. 然后在接下来的部分, 我们将一步一步地构建一个简单的游戏, 每一步都将详细解释. 我也会将游戏的代码转换成 JavaScript 使用p5js，使我们的游戏可以在网页浏览器中运行.
理解和容易地跟随这些文章, 你应该有编程的基本知识, 因为我不会讲编程基础. 不过，我基本上不会涉及任何高级编程概念, 所以肤浅的理解就可以了. 在某些部分，我讨论了一些低级的想法和概念，例如面向对象编程(OOP), 但它们并不重要. 这些是为对语言结构感兴趣的好奇的读者准备的. 如果你不想知道，你可以跳过这些部分. 除此之外, 你唯一需要具备的就是学习这门很棒的语言的野心和创造自己游戏的热情!
我总是喜欢通过尝试和实验来学习编程. 你越早投入到自己的游戏中，你就会越快地适应处理. 所以这是我的第一个建议，在你自己的环境中尝试每一步. 处理有一个简单易用的IDE (i.e. (代码编辑器)，这是您唯一需要下载的东西 & 按照以下步骤安装. 你可以下载 从这里.
让我们开始吧!
本节包括该语言的简要技术概述, 它的结构和一些关于编译和执行过程的注意事项. 详细内容将包括编程和Java环境方面的一些高级知识. 如果你现在不介意细节，迫不及待地想学习和编写自己的游戏, 您可以跳到“处理基础”部分.
处理是一种可视化编程语言，可以这么说，它允许您用代码绘制草图. 然而，它本身并不是一门编程语言, 这就是他们所说的“java式”编程语言, 这意味着该语言是建立在Java平台之上的, 但并不完全是Java本身. 它基于Java，当您点击运行按钮时，您的所有代码都会被预处理并直接转换为Java代码. Java的PApplet类是所有处理草图的基类. 举个例子，让我们来看看几个基本的处理代码块:
Public 无效设置(){
//设置代码在这里
}
Public 无效绘制(){
//绘制代码到这里
}
这些代码块将被转换成这样:
ExampleFrame扩展Frame
公共ExampleFrame() {
超级(“嵌入式PApplet”);
setLayout(新BorderLayout ());
PApplet embed = new Embedded();
add(嵌入BorderLayout.中心);
embed.init ();
}
}
嵌入类扩展PApplet {
Public 无效设置(){
//设置代码在这里
}
Public 无效绘制(){
//绘制代码到这里
}
}
您可以看到，处理代码块被一个从Java的PApplet扩展的类包装起来. 因此, 在处理代码中定义的所有类, 如果有任何, 会被视为内部类吗.
处理是基于Java的这一事实给了我们很多优势，特别是如果您是一个 Java开发人员. 不仅语法很熟悉, 而且它还提供了嵌入Java代码之类的功能, 库, 您的草图中的JAR文件, 直接在Java应用程序中使用处理小程序, 定义类并使用标准数据类型(如int), 浮动, Char等等. 您甚至可以直接从Eclipse中编写处理代码, 如果你想花点时间设置一下. 您不能在处理草图中使用AWT或Swing组件, 因为它们与处理的循环特性相冲突. 但不要担心，我们不会在本文中做任何花哨的东西.
处理代码由两个主要部分组成， 设置 和 画 块. 设置块在代码执行时运行一次，绘制块连续运行. 处理背后的主要思想是， 你在画 block中所写的内容将从上到下每秒执行60次, 直到你的程序终止. 我们将利用这个想法来建造一切. 我们将使我们的对象移动, 保持我们的分数, 检测到碰撞, 实现重力, 然后用这个特性做很多其他的事情. 这个刷新循环是我们项目的心跳. 在后面的部分中，我将解释如何使用这个心跳使您的代码变得生动. 首先，让我向您介绍处理IDE.
如果您已经阅读到这里，但仍然没有下载处理IDE，请继续 这样做. 在文章中, 我将列出一些简单的任务供你自己尝试, 只有在启动并运行IDE后才能进行练习. 下面简单介绍一下处理IDE. 它非常简单，不言自明，所以我将保持简短.
正如你所期望的，运行和停止按钮做他们建议的事情. 当你点击 运行 按钮，您的代码将被编译并执行. 从本质上说, 处理程序永远不会被终止, 它们会不停地跑，直到被打扰. 可以通过编程方式终止它，但是如果不这样做，可以使用 停止 button.
按钮，看起来像一个蝴蝶在右边的运行 & 停止是 调试器. 使用调试器需要另一篇专门介绍它的文章. 它超出了本文的范围，因此您现在可以忽略它. 调试器按钮旁边的下拉菜单是添加/设置mod的地方. 插件 为您提供某些功能, 允许你为Android编写代码, 允许你用Python编写代码, 以此类推. 插件也不在范围内，因此您可以将其保持在默认Java模式并忽略它.
代码编辑器上的窗口是您的草图通常运行的地方. 在图像中，它是空白的, 因为我们没有设置任何属性，比如大小或背景颜色, 或者我们什么都没画.
代码编辑器没什么可说的，它只是你编写代码的地方. 有行号(!) 老版本的处理没有这个功能，你无法想象当我第一次看到它们时我有多高兴.
下面的黑盒子是 控制台. 我们将使用它来打印一些东西，以便快速调试. 的 错误 控制台旁边的选项卡将显示您的错误. 这也是处理 3带来的一个有用的新特性.0. 在旧版本中，错误被打印到控制台，很难跟踪它们.
如前所述，程序启动时只执行一次设置块. 您可以使用它来进行配置，或者只运行一次, 例如, 加载图像或声音. 下面是一个示例设置块. 在您自己的环境中运行此代码，并亲自查看结果.
Public 无效设置(){
//我们的草图大小将是800x600，
//使用P2D渲染引擎.
size(800,600, P2D);
//我们可以使用这个函数来代替尺寸()
/ /全屏(P2D);
//我们的草图的背景色将是黑色
//默认情况下，除非另有指定
背景(0);
//我们可以使用这个来设置背景图像.
//注意，我们的草图的大小应该与图像相同.
/ /背景(loadImage(“测试.jpg”));
//形状和对象默认填充为红色，
//除非另有指定.
填充(255,0,0);
//形状和对象默认为白色边框，
//除非另有指定.
中风(255);
}
与样式(背景、填充、描边)相关的方法将在属性部分解释 & 设置部分. 现在, 你需要知道的是我们在这里设置的设置和配置如何影响我们的整个草图. 这里编写的代码用于设置一些适用于整个草图的基本规则集. 在本节中，您还应该了解下面列出的方法:
尺寸() -顾名思义，该函数用于配置我们的草图的大小. 它必须位于设置代码块的第一行. 它可以以以下形式使用:
宽度和高度值可以以像素为单位给出. Size函数接受第三个参数, 渲染器, 哪一个用于设置我们的草图将使用哪个渲染引擎. 默认情况下，渲染器设置为P2D. 可用的渲染器是P2D(处理2D), P3D(加工3D), )和PDF (2D图形直接绘制到acrobatpdf文件中. 可以找到更多信息 在这里). P2D和P3D渲染器使用OpenGL兼容的图形硬件.
全屏() -截至处理3.现在可以使用fullScreen函数来代替尺寸()函数. 就像尺寸()函数一样，它也应该位于设置块的第一行. 用法如下:
如果你不带任何参数使用它, 您的处理草图将简单地全屏运行, 并将在主显示器上运行. ' display '参数用于设置您的草图将在哪个显示器上运行. 例如，如果您连接外部显示器到您的计算机, 可以将显示变量设置为2(或3), 4等.)，你的草图就会在那里运行. ' 渲染器 '参数如上面的尺寸()部分所述.
这是处理新版本中引入的另一个特性. 它是一个代码块，就像设置和画一样. 当您想要定义带有可变参数的尺寸()或全屏()方法时，它很有用. 如果您使用的环境不是处理自己的IDE，那么还需要在此代码块中定义尺寸()和其他样式属性，例如smooth(), 比如Eclipse. 但是在大多数情况下您都不需要它，在本文中绝对不需要.
绘图块没有什么特别的，但它的一切都很特别. Draw block是所有奇迹发生的地方. 它是程序的心脏，每秒跳动60次. 这个代码块容纳了所有的代码逻辑. 所有的形状，物体等等. 会写在这里吗.
我们将在本文中讨论的大部分代码将来自绘制块, 因此，清楚地理解这个代码块是如何工作的是很重要的. 为了给你一个示范，你可以尝试一下. 方法将任何内容打印到控制台中 print () or println () 方法. 打印方法只打印到控制台, 然而Println输出并在末尾附加一个换行符, 因此，每个println ()将在单独的行中打印.
因此，看看下面的代码块. 首先，尝试猜测它将在控制台中打印什么. 然后，继续尝试:
无效的设置(){
}
空白画(){
Int x = 0;
x += 1;
打印(x + " ");
}
如果你猜的是“1 2 3 4…”，我猜对了! 这是处理中的困惑之一. 记住，这个块会被反复执行? 当你在这里定义一个变量时，它会在每个循环中被一次又一次地定义. 在每次迭代中，x被设置为0，增加1，并打印到控制台. 因此我们得到的结果是“1 1 1 1…”. 这个例子有点明显，但是当事情变得有点复杂时，它可能会令人困惑.
我们不希望x被覆盖，那么我们如何实现这一点并得到结果“1 2 3 4…” ? 通过使用 全局变量. 这没什么特别的, 我们只在绘制块之外定义变量，这样它就不会在每次迭代中被重新定义. 此外，在整个草图中都可以访问变量的范围. 请看下面的代码:
Int x = 0;
无效的设置(){
}
空白画(){
x += 1;
打印(x + " ");
}
您可能会问自己，在我们的块之外定义的变量是如何工作的? 为什么我们不使用设置()块呢?因为它在开始时只执行一次? 答案与面向对象编程和作用域有关, 如果你不熟悉, 你可以跳过这一段. 请参阅我解释如何将处理代码转换为Java的部分. 记住它们是如何用Java类包装的? 我们在设置()和画()代码块之外编写的变量也被包装, 因此，它们被视为 字段 包装代码的外部类的. 使用x+=1和使用这个是一样的.x+=1. 在我们的例子中也是一样的, 在画()的作用域中没有定义名为x的变量，而是搜索外部作用域, 范围是什么 这. 为什么不在设置()部分定义变量x呢? 如果有的话, 定义x的范围将是设置函数的范围，并且不能从画()块访问它.
现在我们知道如何配置我们的草图使用设置块，我们知道什么绘制块. 因此，现在是时候获得一点视觉并了解处理的有趣部分:如何绘制形状.
在我们开始之前，你应该理解 坐标系统. 在处理中，确定在屏幕上绘制的每个对象的坐标. 坐标系统以像素为单位. 起源(即. 起始点)是左上角，你应该给出相对于该点的坐标. 你应该知道的另一件事是，每个形状都有一个不同的参考点. 例如，矩形()将其左上角作为参考点. 对于椭圆()，它是中心. 这些参考点可以通过rectMode ()和ellipseMode ()等方法进行更改。, 我会在性质课上解释的 & 设置部分. 提供了一个示例图来帮助您更好地理解.
本文是对处理的基本概述, 所以我们不会接触任何复杂的形状，比如顶点或3D形状. 基本的2D形状对于我们创造自己的游戏来说已经足够了. 在图中，您可以看到如何绘制形状的示例. 每个形状都有自己要创建的语法, 但基本思想是给出它的坐标或大小，或者两者都给出. 以下是您应该熟悉的一些形状(对于下面给出的所有值), “x”和“y”表示以像素为单位的x和y坐标, ' w '和' h '表示宽度和高度值(也以像素为单位):
点() -简单点，只需要一个坐标. 用法:
(行) —用于创建线路. 您可以创建一条只有起点和终点的线. 用法:
三角形() -用于创建三角形. 用法:三角形(x1, y1, x2, y2, x3, y3)
四() -用于创建四边形. 用法:quad(x1, y1, x2, y2, x3, y3, x4, y4)
矩形() -用于创建矩形. 默认情况下，参考点位于左上角(参见图). 用法如下:
椭圆() -用于创建椭圆形状. 这也用于创建一个圆，相同的宽度和高度值应该给出. 默认情况下，此形状的参考点是中心(参见图). 用法如下:
弧() -画一条弧. 用法:
在屏幕上显示文本与显示形状类似, 其基本思想是确定文本显示的坐标. 然而，还有更多的处理文本. 在属性之后，您将对文本有更多的控制 & 设置部分，您将了解如何将设置和属性应用于对象. 现在，我将展示显示文本的基础知识. 有很多方法可以做到这一点，我只展示最基本的.
text () -显示文本. 用法:
本节首先要解释的是设置对象属性背后的逻辑. 填充颜色, 背景颜色, 边境, 边框宽度, 边框颜色, 形状的对齐, 边框样式等. 可以举一些这些性质的例子吗.
设置属性时，必须记住代码将从 从上到下. 说, 将fill属性设置为红色, 在该线下方绘制的所有对象都将被填充为红色，直到它被另一个填充属性覆盖. 同样的事情也适用于其他属性, 但是请注意，并非所有属性都会相互覆盖. 例如，“stroke”属性不会覆盖“fill”属性，而是它们一起工作. 下面是一个可视化的表示，以便您理解逻辑:
正如你在图片中看到的, 第一行设置填充颜色为红色，第二行设置描边颜色为蓝色. 我们现在有两个活动设置:填充红色和蓝色笔画. 如你所料, 不管下一行的对象是什么, 填充为红色，描边为蓝色(如适用). 你可以继续这样检查图像，你就会掌握其中的逻辑.
以下是一些基本属性 & 常用的设置:
填满() -设置对象的填充颜色. 此设置也用于为文本上色. 现在，我们只需要知道以下用法:
noFill () -设置填充颜色为透明.
中风() -设置对象的描边颜色. 描边属性适用于对象周围的线条和边框. 现在，我们只需要知道以下用法:
noStroke () -删除笔划.
strokeWeight () -设置笔画的宽度. 用法:
背景() —设置背景颜色. 现在，我们只需要知道以下用法:
ellipseMode () -设置在哪里作为对齐椭圆的参考点. 用法:
rectMode () -设置将何处作为对齐矩形的参考点. 用法:
textSize () -设置文本的字体大小. 用法:
textLeading () -设置文本的行高. 用法:
textAlign () -设置在哪里作为参考点对齐文本. 使用.
到目前为止，我们学习了如何绘制对象和文本. 但问题是它们是静态的. 现在我们如何让它们移动? 简单, 而不是给出整数形式的坐标, 我们使用变量是为了对它们进行自增/自减. 是有意义的? 看看下面的代码:
//初始化x和y为0
int x = 0;
int y = 0;
无效的设置(){
规模(800600);
background(255); // set 背景颜色 to white
}
空白画(){
填充(255,0,0); // fill color red
stroke(0,0,255); // stroke color blue
ellipseMode(中心); // ref. 指向椭圆的点是它的中心
ellipse(x, y, 20, 20); // 画 the ellipse
//增加x和y
x+=5;
y+=5;
}
你知道我们是怎么制作动画的吗? 我们将x和y设置为全局变量，它们的初始值为0. 在我们的画循环中, 我们画出了椭圆, 设置填充颜色为红色, 笔画颜色为蓝色，坐标为x和y. 当我们增加x和y时，球只是改变它的位置. 但是这段代码有个问题，你能注意到吗? 作为对你自己的一个简单的挑战，试着找出问题是什么，并测试出来. 结果如下:
我让这种情况发生的目的是让您了解处理的循环本质是如何工作的. 参考“绘制块”部分的示例, 你还记得为什么我们得到的是“11 11…”而不是“1 2 3…”吗? ? 和球留下痕迹的原因一样. 每次绘制块迭代, X和y增加5，因此球被重新绘制到向下和向右5个像素. 但是，从以前的迭代中绘制的球仍然留在视图中. 我们怎么让它们消失? 任何猜测?
为了去除球留下的痕迹, 我们只需从设置块中删除背景(255), 并将其粘贴为绘制块的第一行. 当我们的后台代码在设置块, 它在开始时运行了一次, 将背景设置为白色. 但这还不够, 我们需要将每个循环的背景设置为白色，以覆盖从前一个循环绘制的球. 背景作为第一行意味着它首先运行，它成为基础层. 在每个循环中, 我们的画布被涂成了白色, 新的元素被绘制在白色背景的顶部. 所以我们没有标记.
这就是处理中动画化事物背后的思想, 通过编程操作对象的坐标来改变它们的位置. 但是我们如何做一些花哨的东西，比如让球保持在屏幕上? 或者实现重力? 我将在本文的下一部分讲授如何做这些事情. 我们将通过尝试和建设来学习. 我们将学习如何做到这一点，并立即将它们应用到我们的游戏中. 最后，我们将拥有一个完整的，可玩的，希望有趣的游戏.
键盘 & 处理中的鼠标交互非常简单和直接. 您可以为每个事件调用一些方法, 当事件发生时，你在里面写的东西就会被执行. 此外，还有全局变量，如mousePressed和keyPressed，您可以在绘制块中使用以利用循环. 下面是一些方法和解释:
无效设置(){
规模(500、500);
}
无效绘制(){
if (mousePressed) {
//只要鼠标移动，代码就会被执行
//按钮被按下
if (mouseButton == LEFT){
//只要
//点击鼠标按钮是鼠标左键
/ /按钮.
}
}
if (keyPressed) {
//这里的代码只要一个键就会被执行
//在键盘上被按下
if (key == code) {
// if语句检查是否按下了键
//被处理识别.
if (键码 == ENTER) {
//如果按下键，这一行将被执行
//是回车键.
}
}
其他{
//如果按下键，这一行将被执行
//不能被处理识别.
}
}
}
void mousePressed() {
//这些代码将被执行一次，当鼠标
//被点击. 注意，mouseButton变量是
//也可以在这里使用.
}
void keyPressed() {
//这些代码将被执行一次，当一个键
//被按下. 注意key和键码变量
//也可以在这里使用.
}
如你所见, 很容易检查是否点击了鼠标或按下了哪个键. 然而，mousePressed和键码变量有更多可用选项. 可用选项 mousePressed 左，右，中. 还有更多可用的 键码; UP, DOWN, LEFT, RIGHT, ALT, CONTROL, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC 和 DELETE.
关于鼠标变量有一点需要了解, 我们会经常用到这个, 是如何获得鼠标的坐标. 要获得光标的确切坐标，可以使用 mouseX 和 像老鼠的 变量直接在画()块中. 最后但并非最不重要的是，还有很多其他有用的方法，你应该看看. 它们都记录在 处理参考.
现在您应该熟悉处理了. 但是如果你停在这里，所有的知识都会 飞 走了. 我强烈建议你继续练习，用你所学到的东西玩一玩. 为了帮助你练习，我将提供你两个练习. 你应该尽力自己去做. 如果你卡住了， 谷歌 和 处理参考 应该是你最好的朋友吗. 我将提供第一个的代码，但是查看它们应该是您要做的最后一件事.
你应该做 4球 与 不同的颜色，从…开始 4个角落 屏幕的 穿过中心 与 不同的速度. 当你点击并按住鼠标按钮时，球应该 冻结. 当你放开鼠标时，球可以回到它们最初的位置并继续移动. 所以，我要找的是 这.
在您自己尝试了练习之后，您可以检查代码 在这里.
记住那些著名的 DVD屏幕保护程序 DVD的标志在屏幕上跳来跳去，我们都在绝望地等待它撞到角落? 我想让你复制那个屏幕保护程序，但只使用一个矩形而不是DVD标志. 当你启动应用程序时, 屏幕应该是黑色的，矩形应该从一个随机的位置开始. 每次矩形碰到角，它应该改变它的颜色(当然还有方向). 当你移动鼠标时, 矩形应该消失，背景颜色应该变成白色(这是一个屏幕保护程序, 不是吗?). 我不会在本文中给出这个练习的代码. 你应该尽你最大的努力去实现它, 代码将在本文的第二部分中提供.
加工终极指南的第二部分， 一步一步的教程 来构建一个简单的游戏，已经发布.
世界级的文章，每周发一次.
世界级的文章，每周发一次.
作者都是各自领域经过审查的专家，并撰写他们有经验的主题. 我们所有的内容都经过同行评审，并由同一领域的Toptal专家验证.