相关链接：
原文地址（英文）
Rexrainbow 插件 Repo tool 下载
傅老师的C2系列教程
第一章、关于 Board
Rexrainbow 的 <Board>系列插件对于制作类似大富翁、SLG、roguelike、以及其他一些棋盘类游戏来说，是一个完美的解决方案。在这个教程里，我们会学习如何使用<Board>系列插件来设计一款 Poptile 游戏。
首先，我们需要知道<Board>插件到底能做些什么。先来看下这张图：
傅老师和蛋蛋老师在下“盲棋”——两个人都用布遮住了眼睛。这意味着他们要在头脑中假想一个棋盘，并记住所有操作。“假想棋盘”由两部分构成：一部分是数学要素，通常用数组来实现；另一部分是几何要素，用来定义每个格子的形状以及格子间的连接方式。
下一章，我们将使用 Rexrainbow 的<Board>和<SquareTx>插件来为傅老师和蛋蛋老师建立“假想棋盘”。
第二章、创建棋盘
继续教程前，请先安装好 Rexrainbow 的所有插件。然后我们新建一个项目，并将<Board>和<SquareTx>插件加入到项目中。
选择 [Board] 物件并察看参数。在这个示例中，我们要创建一个 10x7 的棋盘。也就是说从逻辑上棋盘应该是一个 10x7 的数组。所以我们可以按下图来设置参数：
这样棋盘的大小就定义好了。接下来我们来设置 [SqareTx] 的参数。我们想让每个格子都是边长为 64px 的正方形，所以我们要把 width 和 height 都设置成 64。另外，我们还想让棋盘出现在坐标（100，32），而不是原点。我们需要按下图来设置一下 [Square Tx]的参数：
接下来我们来给棋盘的格子加上图片。把<tile.png>图片文件直接拖到场景内，C2会自动创建一个 [tile] sprite。 把 [tile] 的大小设置成 (64,64)。
下面是本章最重要的部分：我们要根据数学和几何参数来生成棋盘的可见部分。切换到<Event sheet 1>并添加以下代码：
Event#1 对[board]和[SquareTx]进行了绑定，它告知系统：我们的棋盘是Square形式棋盘（除了Square外，还有HEX 和 Isometric 形式）。Event#2和#3是一个双重循环结构。在循环中，我们不断调用<Board>的<Create tile> action 来创建棋盘上的格子。按<F4>运行，你会看到棋盘被创建好了。
第三章、创建棋子
在棋盘上创建棋子可以分为以下两步：
1.创建棋子的图像部分
2.创建棋子的逻辑部分
第一步：把<chess.png>拖拽到场景内，C2会自动创建好[chess]物体。[chess]创建成功后，把它的大小设置为(64x64)：
这样我们就创建完棋子的图像部分了。
第二步：切换到<Event sheet1>，添加以下代码：
在 Event #4 中，我们在棋盘上创建了棋子。注意 #4 前面的缩进，他其实是 #1 的一个子事件。另外还要注意我们使用<Board>的<Create chess> action 时，会同时创建棋子的图像部分和逻辑部分。如果你使用<System>的<Create object>则只会创建棋子的图像部分。按<F4>运行，你会看到棋子出现在棋盘上了。
可以看到，棋子按逻辑坐标 (x,y)=(5,4) 放置在棋盘上。z轴坐标设置为1，表示棋子浮在棋盘上方一层。至此，我们完成了棋子的创建。下一章是整个教程最重要的部分：棋子的移动。
第四章、棋子的移动
之前的学习我们已经了解到，棋子是由逻辑和图像两部分构成的。所以当我们要移动棋子时，也要完成逻辑和图像两部分的移动。这是一个非常重要的概念，刚接触<Board>的同学经常会忘记移动棋子的图像，还以为出现了bug。注意，<Board>插件只会帮我们完成逻辑移动的工作。
开始前，我们需要设置一些显示信息来监测棋盘动态。用<Text>插件在场景左上角创建一个[txt_debug]物体，然后放大尺寸覆盖整个窗口（避免文本框过小、信息无法显示）：
切换到<Evnet sheet 1>，添加以下代码：
“Debug”代码组会持续监测棋子的逻辑位置。#9事件通过调用<Board>的<Pick chess at Logic X,Y>来检查当前位置上是否有棋子。如果有，就在[txt_debug]中追加显示"chess"；如果没有，就跳转到#10，在[txt_debug]中追加"none"。按下<F4>运行程序：
下面是关键步骤：移动棋子！先在项目中加入［Keyboard］方便我们用 WASD 来进行操作。
切换到<Event sheet1>，对代码进行如下增改（截图中Debug组已折叠）：
在Event #1中增加了两个动作，用来 destroy 我们放置在场景外的初始 sprite。#11~14 看起来好像是在移动棋子，但稍后我们会看到这些代码并不足以实现棋子的完整移动过程。按<F4>运行看下效果：
bug出现了！尽管图像上来看我们移动了棋子，但从debug信息中我们可以看到，棋子的逻辑位置并没有任何变化！我们不得不再改变一下棋子的逻辑位置。切换回<Event sheet 1>对代码进行更改：
大家可以看到，我们在每条移动棋子图像之前，都插入了<Board>的<Move chess to xy> action。这个 action 可以将棋子逻辑位置移动到指定坐标。另外，我们用 Board.PXY2LX()/Board.PXY2LY() 表达式将图像坐标转化成了逻辑坐标。这个表达式具体是什么意思？按下<F4>，通过debug信息来进行分析：
这张图是在场景刚开始时截取的。我们能看到，棋子的图像坐标是(420,288)。我们也知道棋子的逻辑坐标应该是在#4事件中设置的(5,4)。这两套坐标体系间应该可以通过某种方式进行换算，PXY2LX/PXY2LY 就是干这个的！只要将棋子图像坐标作为参数传入，<Board>插件就会帮我们算出对应的逻辑坐标。
按下<F4>运行程序，用WASD移动棋子。现在棋子无论是图像上还是逻辑上终于都正常的移动了。
第五章、更多强大的插件：<Chess>和<Gridmove>
好吧，我知道也许你在想“我们用<Board>实现的这些功能很基础啊，就算不用插件也可以做出来”。稍安勿躁，给力的部分马上就来。我们之前完成的还只是战棋游戏的基础部分。
本章，我们会利用<Chess>和<Gridmove>插件来让棋子移动的更平滑。你甚至可以让棋子进行加速或减速移动。你或许发现过一个bug：当玩家把棋子移到棋盘外时，棋子就会消失。现在我们引入这两个插件后，一切问题都迎刃而解了。这就来试试看吧：
新函数#1：由<Gridmove>实现的平滑移动
切换到<Layout 1>,为 [chess] 添加<Gridmove>behavior。
添加后，切到<Event sheet 1>修改 ＃11～14 事件：
我们改进代码所使用的 action 是 [chess]→<Gridmove>→<Move to neighbor>---需要注意的是截图中有4个叫<Move to neighbor>的 action，我们使用的是在 Square grid 栏之下的那个。
操作完毕后，按下<F4>运行。你会发现问题都解决了！棋子移动都变得平滑了，并且也不能再移到棋盘之外了。
你也可以试试设置一下<Gridmove>中的 acceleration和deceleration参数，感觉一下效果。
新函数#2：用<Chess>behavior 来读取棋子的逻辑坐标
在之前的程序中，我们通过<Board>的 PXY2LX/PXY2LY 表达式来获取棋子的逻辑坐标，操作略有繁琐。下面我们将用<Chess>behavior 来更快捷的获取棋子的逻辑坐标，或者更直观的选取某个棋子。
首先，给 [chess] 添加<Chess>behavior。
然后切到<Event sheet 1>重写以下代码：
#9 使用的是 [chess]→<Chess>→<Compare LX>/<Compare LY>事件。这两个条件用来筛出当前循环到的行列数。
#11 用 [chess]→<Chess>→<Move chess to xyz>动作来重写，比之前的写法更具可读性。按下<F4>运行程序，一切正常。
第六章、稍加学习就能实现的精彩效果（Minimum efforts with awesome functions）
作为给那些客服重重困难、坚持读到这里的同学的嘉奖，我们留了些惊喜在这最后一章。放松～本章的内容都非常的cool，但同时又很容易理解（因为我们用了<Board>!）
奖励 #1：Wrap 棋盘
大家都知道 C2 中有一个 <Wrap>behavior 可以让物体在场景中实现 wrap效果 (当物体从屏幕右侧移出时，会从屏幕左侧移入的效果)。如果你想让棋子在棋盘上实现同样的效果，只要把<warp>参数设置为<Yes>就可以了。之后你再通过<Gridmove>在棋盘上移动棋子，棋子就会实现wrap效果。
奖励 #2：创建 HEX 棋盘
如果不使用<Board>插件，HEX 棋盘是很难实现的。但现在，既然我们有了<Board>插件，HEX 棋盘的实现就是小菜一碟了：
在项目中添加<HexTx>插件，并进行如下设置：
将 ［Board］和［HexTx］进行绑定
重写<Gridmove> action。这次请使用<Request:Hexagongrid(Left-Right)>栏目下的 action。
恭喜，现在你的 HEX 棋盘完成了！
希望你喜欢这篇教程，下次见！
网友评论