怎样为基于FlashPunk的游戏开发UI组件

Answer 1

用FlashPunk来创建你游戏的UI并不容易，因为它不包含任何UI元件，如按钮文本框等。尽管如此，这并非一个约束；这意味着你可以非常自由的将UI做成你想要的样子。但是你首先要知道如何去做！这个教学辅导将教会你如何去制作一些经典的UI元件，并且为你展示几种不同方法让你制作最符合你游戏风格的元件。

第一步：引论

许多flashpunk的使用者在为他们的游戏制作UI时都会遇到问题。没有简单的方法来制作按钮和其他可以相互作用的元素如文本框或检查盒，在FlashPunk里，没有Button class。

那看起来似乎是一种约束，是的，并且许多新手在开始的时候会感到很混乱。但是这背后是有原因的。每一个游戏都倾向于有一个独特的用户界面，它的设计取决于它的mechanics或它们自身的主题。你不会看到任何一款好游戏用默认的窗口按钮来操作！

所以这篇教程将要向你展示的是在FlashPunk中如何为你的游戏制作属于你自己的UI元素，给他们行为，并展示一些技巧让他们的绘图部分拥有最有用的技术。但是要记住，你的每一个游戏都将有一个不同美术风格的UI！

由于这个教程非常的长，它已经被分成了多个部分。这第一部分将介绍如何去制作每一个元件，没有eye-candy and costumization。我们将在以后介绍。

To code the example SWF with our UI，我们将使用FlashPunk，因为这是一篇FlashPunk教程，FlashDevelop作为IDE。如果你觉得用其他的IDE更加顺手，例如FlashBuilder，你也可已使用，只要在根据教程在细节部分进行调整。

对于这篇教程，你需要有一定FlashPunk的知识。这不是一篇关于FlashPunk的全面教程，这是FlashPunk的UI教程。如果你不了解FlashPunk，你可以在Activetuts+上看一下FlashPunk教程索引，也可以在FlashPunk的官方网站上寻找辅导。

第二步：新建一个项目

打开FlashDevelop 点击Project-> New Project来打开新建项目的窗口。

选择ActionScript 3 > AS3 Project。在项目的名字栏中，添入“FlashPunk UI“。在存储位置栏，选择你想要存放的文件夹。默认“create directory for project”为被选状态并点击OK。

第三步：下载最新的FlashPunk

去FlashPunk的官网主页，FlashPunk.net，点击导航栏上的Download按钮。然后点击页面上端的“Download FlashPunk”链接。它将带你转入GitHub下载页面。点击“Download.zip”按钮（或“Download.tar.gz”如果你选择这种格式）然后将文件保存在你知道的地方。

第四步：将FlashPunk加入我们的项目

现在我们已经下载了FlashPunk，我们必须将它加入我们的项目。我们只要像通常那样简单地将“net”文件夹从FlashPunk zip复制到我们的项目中的“src”文件夹。

第五步：驱动引擎

现在我们要在我们的文档类中初始化FlashPunk，这样才能控制我们的游戏，就像在每一个FlashPunk游戏中那样。我们通过用文档类扩展Engine类来达到目的，并回调super 所需要的参数。我们设定一个550x400像素的窗口。不要忘记在你的项目中单击右键， 在属性中将尺寸设定为550x400像素。

Package

{

import net.flashpunk.Engine;

public class Main extends Engine

{

public function Main():void

{

super(550, 400);

}

}

}
复制代码

第六步： 创建Our World

现在，我们需要创建一个FlashPunk World来装载我们的实体对象。我们将把每一个UI元件创建在这，这样我们可以测验他们。在一个real-world实例中，我们菜单的每一个状态都将对应这一个不同的World，游戏也是如此。所以我们将在“src”文件夹中创建一个包含World类，名为TestWorld的类。

Package

{

import net.flashpunk.World;

public class TestWorld extends World

{

public function TestWorld()

{

super();

}

}

}
复制代码

然后我们将告诉我们的Engine 类去我们的TestWorld重载init功能。不要忘记加载从net。Flashpunk中加载FP类！

override public function init():void

{

super.init();

FP.world = new TestWorld;

}
复制代码

第七步：Button实例

我们首先要做的是建立一个Button元件。我们以后要建的每一个元件都是一个实例，这是我们在FlashPunk中创建一些放在World中元件的基本步骤。最开始，我们要在“src”文件夹中创建一个新的文件夹，然实例存放的有条理一些。我们把这个文件夹命名为“ui”,并用来存放我们所有的元件。

然后我们创建一个包含Entity的Button类。包名叫ui，因为它在ui文件夹下。

package ui

{

import net.flashpunk.Entity;

public class Button extends Entity

{

public function Button(x:Number=0, y:Number=0)

{

super(x, y);

}

}

}
复制代码
现在我们要在我们的world中加入这个Button的实例，这样我们才能看到它运行，我们完成它时它是一个不可见的实例。所以将它加入到我们的TestWorld类中，然后不要忘记加载Button类，用如下代码import ui.Button;

override public function begin():void

{

super.begin();

add(new Button(10, 10));

}
复制代码