我们一起来游戏（四）——（AS3零基础做AIR卡牌网游）

来源：互联网发布：小米盒子知乎编辑：程序博客网时间：2024/06/05 03:56

小伙伴们一定都在想，楼主你不要掉胃口了，赶快来写点更实在的吧，这都好几天了，连个登录都没看到。别急，别急，小伙伴们我们一起来登录啊！

配置

大家应该还没有忘记settings.xml文件吧，现在主要讲解一下这个文件，上代码来说：

<settings>
<version>V1.4</version>
<locale>zh_CN</locale>
<uris>
<uri id="9miao">http://www.9miao.com</uri>
<uri id="firefly">http://firefly.9miao.com</uri>
</uris>
<servers>
<server id="default_server" name="默认服务器" host="0.0.0.0" port="9999" sport="943" />
</servers>
</settings>

复制代码

回到代码里面，我们要对这个XML进行解析然后运用到游戏中去。先创建一个Settings类（在app.game.mvc.models.env中），然后里面写一堆getter和setter方法。在MVC中，Model是来获取说明，并加工数据的地方，不牵扯业务逻辑，也不牵扯页面逻辑。来看代码，我们怎么借助StarlingMVC，来初始化这个类：

public final class Settings
{
// 一堆getter和setter，这个看下载的代码示例，这里只说明一个怎么用StarlingMVC
[PostConstruct] // 大家注意个元标签，这个元标签是由StarlingMVC提供的，在Settings类new之后，由StarlingMVC直接调用的方法，so必须是public的
public function construct():void
{
var conf:XML = new XML(FileUtil.reader(Globals.instance.path.settings)); // 这个地方小伙伴应该发现了很奇妙的东西，就这么一句，这个settings.xml文件就被加载并转化成XML对象了。
// 解析XML文件给上面那一堆的setter就可以了。
// .......
// 要注意这一句：
Globals.instance.initLocale(_locale); // 初始化我们的国际化文件的，这个很重要哦。
// .......
}
}

复制代码

到这里Settings文件已经完成了它所有的事情，可是StarlingMVC怎么管理它呢？怎记否，我们有一个类叫ModelProvider么？对，就是它，我们在这个里面要注册一下这个Settings，来看代码：

public class ModelProvider extends BeanProvider
{
public function ModelProvider
{
beans = [
new Bean(new Settings(). "mSettings") // 注册里Settings类，并在StarlingMVC中定义唯一命名为：mSettings
];
}
}

复制代码

这样我们StarlingMVC就可以管理Settings类了。后面我们看一下UI部分的。

登录

话说，看看cocos2dx版的，目测用到几张图，我们就开始先整理一下资源，然后配置一下游戏。拿出我们的刀子（TexturePacker）准备割肉喽！

1. 整理一下我们要用到的图，重新命名一下，让它们看起来更规则一点，如图所示：

2. 打开TexturePacker，将上面看到图拖到右边的Sprites框里面

3. 修改一些参数

3.1 在Output里面找到下面参数，改之：
Data Format 修改为： Sparrow/Starling
Data filename 自己找一个目录存在，然后起名为：login，后面的Texture file会自动更改的

3.2 在Geometry里面找到参数，改之：
Size constraints 修改为：Any size

修改这些参数后，如图所示：

4. 保存一下，然后发布，尽量用同名称的，这样好找一些，如图所示的位置，点击按钮

这样可以在你指定的目录中找到这三个文件：

这样我们的登录资源就算OK了，请保留tps文件，这样后面我们可以很方便的替换资源，只要名称一致，就可以不用做任何更改了。
我们真正用到的资源是png和xml文件的。

5. 将login.png和login.xml文件复制到项目的assets/images目录下，资源的前期准备就算结束了。

6. 回到代码里，在app.game.uis包里创建一个Login的UI，没有任何逻辑的UI部分，只负责初始化控件的。看代码：

public fina class Login extends starling.display.Sprite // 注意父类不是AS标准的Sprite
{
private var _background:ImageLoader; // 一堆Features控件的getter和setter，其它部分见下载的代码
// 还是跟Settings类一样，需要一个[PostConstruct]元标签，来初始化这些控件，但图片资源不在这个时候添加的
[PostConstruct]
public function constrcut():void
{
background = addChild(new ImageLoader()) as ImageLoader;
// 其它控件初始化....
}
[PreDestroy] // 注意这个，这个也是由StarlingMVC提供，代表的意思是在销毁这个对象的前执行的语句
public function destroy():void
{
}
}

复制代码

7. UI弄完了，我们怎么给UI里面添加资源呢？来上一个中介者来处理吧，将来所有页面逻辑都会在中介里面来完成，这样可以最大程度上保证UI的独立性的。

public final class LoginMediator extends Mediator // 这个Mediator只是一个公共父类，没有什么复杂的东西，就不详细说明了
{
// 先注入我们需要用到的服务器信息，这回就要用到Settings的内容了，我们怎么取到呢？别忘记有StarlingMVC这个的存在啊（StarlingMVC说，我抗议，我要提高存在感~~~）！
private var _settings:Settings;
[Inject(source = "mSettings")] // [Inject]元标签使用StarlingMVC提供的，将mSettings这个东西从MVC核中取出来并赋值给settings属性。详细的用法请自行查找StarlingMVC教程。
public function get settings():Settings
{
return _settings;
}
public function set settings(value:Settings):void
{
// ......
}
[ViewAdded]
public function added(view:Login):void
{
// 这个里面就要对我们的Login界面进行资源的赋值并监听事件了，详看代码吧
}
}

复制代码

当然别忘记，将这个中介放到ViewProvider中注册一下，跟Settings的注册方法是一样的。

登录界面就搞定了，运行一下，纳尼，为啥没显示出来~~~~为毛啊！呃，没有任何地方调用？资源也没有加载呢？什么个情况？

资源加载

在app.game.mvc.controllers里面创建AssetController类，来帮我们管理资源，并加载资源。要注意几点，看代码：

public final class AssetController
{
// 嵌入统一的字体，在页游里面相当的不可取，中文字体太大了，后面会有说道怎么更改，别急。
[Embed(source = "../../../../assets/hycc.ttf", fontFamily = "BlodSun", embedAsCFF = "false",
unicodeRange = "U+0020,U+0041-005A,U+0020,U+0061-007A,U+0030-0039,U+002E,U+0020-002F,U+003A-0040,U+005B-0060,U+007B-007E,U+0020-002F,U+0030-0039,U+003A-0040,U+0041-005A,U+005B-0060,U+0061-007A,U+007B-007E"
)]
private static var FONT:Class;
[PostConstruct]
public function construct():void
{
Font.registerFont(FONT); // 注册字体，不然后面就没法用了
// ......
_asset.loadQueue(
function progress(ratio:Number):void
{
// 当 ratio === 1 时，说明资源文件已经加载完成。
if (ratio == 1)
{
dispatcher.dispatchEventWith(SceneEvent.CHANGE_VIEW, false, Login); // 切换UI，SceneEvent后面会说道
loadSilent(); // 加载延迟队列
}
}
);
}
}

复制代码

到此，资源加载的问题就解决了，看看怎么变换UI吧~~

先建立SceneEvent，注意这个类是要继承starling.events.Event类的，看代码：

public class SceneEvent extends Event
{
public static const ADD_VIEW:String = "addView";
public static const CHANGE_VIEW:String = "changeView";
public function SceneEvent(type:String, bubbles:Boolean = false, data:Object = null)
{
super(type, bubbles, data);
}
}

复制代码

这个很简单，就不详细说明了，看看真正的切换UI，需要单独用一个东西来解决：

public final class SceneController
{
[Inject]
public function get viewManager():ViewManager
{
return _viewManager;
}
[EventHandler(event = "SceneEvent.ADD_VIEW", properties = "data")] // 这个元标签由StarlingMVC提供，响应全局事件的
public function addView_handler(data:DisplayObjectContainer):void
{
viewManager.addView(data); // 添加一个UI到当前UI
}
[EventHandler(event = "SceneEvent.CHANGE_VIEW", properties = "data")]
public function changeView_handler(data:Class):void
{
viewManager.setView(data); // 替换当前UI
}
}

复制代码

千万别忘记上面这连个Controller也是要注册到ControllerProvider中的。

运行一下，完美，应该能看到从飞溅屏到登录页面了~~

此章结束，下面是代码：
代码：

diabloworld-desktop-air.zip (4.93 MB, 下载次数: 12)

图片： login.zip (1.03 MB, 下载次数: 4)

9秒链接：www.9miao.com

我们一起来游戏 （四）——（AS3零基础做AIR卡牌网游）

我们一起来游戏（四）——（AS3零基础做AIR卡牌网游）