360ITO技术社区  > 文章

订阅文章

从零开始学社交游戏开发（11）

smallghost 发布于 4年前 ( comment 0条评论  查看:2862  收藏:0 )

上一节讲到神力面板的创建，接下来的这节还是围绕UI部分。


音乐、音效、帮助

这一部分可以看成是游戏设置相关的一些功能，玩家通过点击音乐和音效按钮可以开关音量和音乐。帮助按钮点击后弹出帮助窗口。
先创建TFunctionPanel类，把这部分的UI都放在这里里面，如下图：



每个玩家配置都保存在服务器上的，所以这里需要建立一个和服务器通讯的命令。在Servercmd中加一个命令定义：
public static const CFG_SAVE:String = "sys.cfg";
如下图：


在TFunctionPanel构造方法中创建音效、音乐和帮助3个按钮： 
sound_btn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1, "mc1101"));
sound_btn.allowCtrlAnim = false;
sound_btn.toolTip = LanguageCn.getInstance().getStr(90052);
sound_btn.toolTipDirection = ToolTipManager.DOWN;
sound_btn.tag = 1;
sound_btn.addEventListener(MouseEvent.CLICK, onSoundBtnClick);
sound_btn.setPosition(0, 0);
addChild(sound_btn);
 
music_btn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1, "mc1102"));
music_btn.allowCtrlAnim = false;
music_btn.tag = 1;
music_btn.toolTip = LanguageCn.getInstance().getStr(90053);
music_btn.toolTipDirection = ToolTipManager.DOWN;
music_btn.addEventListener(MouseEvent.CLICK, onMusicBtnClick);
music_btn.setPosition(44, 0);
addChild(music_btn);
 
help_btn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1, "res11002"));
help_btn.setPosition(90, 0);
help_btn.addEventListener(MouseEvent.CLICK, onHelpBtnEventClick);
addChild(help_btn);
音效、音乐按钮按下后，设置音效和音乐状态，并将数据保存到服务器上，代码如下： 

// 音乐设置按钮按下
private function onMusicBtnClick(event:MouseEvent):void {
    if (music_btn.tag == 1) {
        SoundCtrl.getInstance().m_musicOpen = false;
        music_btn.tag = 0;
        (music_btn.skin as MovieClip).gotoAndStop(2);
    } else {
        SoundCtrl.getInstance().m_musicOpen = true;
        music_btn.tag = 1;
        (music_btn.skin as MovieClip).gotoAndStop(1);
    }
    // 通知服务端设置变化
    var param:Object = {cmd: JSON.encode({api: TServerCmd.CFG_SAVE, key: JFApp.key, music: music_btn.tag, sound: sound_btn.tag})};
    ServerProxy.getInstance().onAppDo(param, TServerCmd.CFG_SAVE);
}
 
// 音效按钮按下
private function onSoundBtnClick(event:MouseEvent):void {
    if (sound_btn.tag == 1) {
        SoundCtrl.getInstance().m_soundOpen = false;
        sound_btn.tag = 0;
        (sound_btn.skin as MovieClip).gotoAndStop(2);
    } else {
        SoundCtrl.getInstance().m_soundOpen = true;
        sound_btn.tag = 1;
        (sound_btn.skin as MovieClip).gotoAndStop(1);
    }
　// 通知服务端设置变化
    var param:Object = {cmd: JSON.encode({api: TServerCmd.CFG_SAVE, key: JFApp.key, music: music_btn.tag, sound: sound_btn.tag})};
    ServerProxy.getInstance().onAppDo(param, TServerCmd.CFG_SAVE);
}

帮助按钮按下后，需要弹出一个帮助窗口，帮助窗口里面有10页，玩家可以翻页看。先来创建一个帮助窗口，如下图：


HelpPageItem就是10页帮助项，HelpUI是帮助窗体。HelpUI构造流程：
1、创建HelpUI背景 
addChild(JFDynamicResManager.getInstance().displayObjectByName(1,"res1901"));
2、创建关闭按钮 
FCloseBtn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1,"mc1802"));
3、创建页数标签和翻页按钮 
FPageInfoLabel = UIManager.getTextField("", tmpFont, 0xFFFFFF, TextFieldAutoSize.NONE);
FLeftScrollBtn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1,"mc0503"));
FRightScrollBtn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1,"mc0504"));
4、创建页列表框 
FHelpPageList = new List(ITEM_WIDTH, ITEM_HEIGHT, LIST_WIDTH, LIST_HEIGHT, HelpPageItem, List.horizontal_SCROLL_ITEM);
5、设置页数据 
FHelpPageList.setData([1,2,3,4,5,6,7,8,9,10]);
6、翻页事件初始化 
FLeftScrollBtn.addEventListener(MouseEvent.CLICK,onLeftScroll);
FRightScrollBtn.addEventListener(MouseEvent.CLICK,onRightScroll);
HelpPageItem处理流程比较简单，只要在数据被设置的时候装载相应的美术资源就可以了，代码如下： 
override public function set data(data_:Object):void {
    super.data = data_;
    setSkin(JFDynamicResManager.getInstance().displayObjectByName(1,'res19_'+int(data_).toString()));
}
下图是帮助的10页美术资源：


最后在帮助按钮按下后显示帮助窗体，代码如下： 
private function onHelpBtnEventClick(event:MouseEvent):void {
    HelpUI.instance.show(true);
}
执行后没有看到需要的结果，界面上没有看到需要的按钮，哦，还忘记创建FunctionPanel，在UIManager中创建功能面板，代码如下： 
// 创建功能面板
FFunctionPanel = new TFunctionPanel();
JFApp.appMainSprite.uiLayer.addChild(FFunctionPanel as TFunctionPanel);


点击音乐按钮既然能听到背景音乐了，呵呵呵，以后再讲解游戏音效和音乐部分，点击帮助按钮后，可以看到弹出了一个帮助窗口。可以点左右按钮翻页，感觉炫不？来个效果图：


礼品栏

礼品栏里存放好友送来的礼品，礼品栏要处理的逻辑还是挺复杂的，我们今天就先把UI部分搞定，以后再详细介绍礼品栏。
首先UI包中创建TGiftPanel（礼品面板）和TGiftItem（礼品项）两个类，如下图：



以前所有UI相关都是让VGUIManager（这里要注意一下：VGUIManager 就是以前的UIManager，SDK里面也有一个UIManager，虽然在不同的包里面，但是有些时候还是怕被误解，所以在前面带了个“VG”）来管理，这样看起来可以统一管理，但是有些时候使用起来还是很繁琐的（例如：在神力变化了需要更新一下神力界面的神力值，我们就要通过IVGUIManager接口做一个“UpdateShenLi”的方法，然后实现这个方法）。所以在这里我将礼品栏设计成了单列模式，所有和礼品栏相关的UI操作都可以通过IGiftPanel接口中方法来处理。（IGiftPanel接口以前也没有定义，今天写教程的时候觉得应该定义一个IGiftPanel接口）。
在这里我先来谈谈我在开发中积累的一点开发经验（我也是野码农说的不对的地方希望大家一起探讨交流）：
1、开始不要注重说明文档
　　因为在开始的时候只有不断重构才能慢慢把想要的东西coding出来，如果一开始就把说明文档写的很好，其实就是在浪费时间，我现在做法就是先快速做出需要的东西，然后在一遍遍迭代，到了最后觉得OK了，再开始整理代码和文档说明。
2、太多的文档说明也是累赘
　　代码写好了，也不是说以后就不会调整了，过些日子可能会因为业务需求变化了，我们自认为OK的代码很有可能会被踢出项目，这个时候加一大堆说明是不是觉得很徒劳？那怎么办呢？我的做法是所有对外的方法（就是接口里的方法）说明要很详细（方法作用是什么，方法参数都有什么作用，方法返回都有啥意义）。接口实现代码里的文档说明只在关键部位说明一下，而且说明尽量要简洁，一句说能说明意思那是最好的。
3、代码段落要明确
　　在一个方法里也尽量要分段，每段之间空一行。
4、要用版本管理
　　在你一步步迭代完善功能的时候，有版本管理了，就不怕丢东西了。现在git很流行，里面有些概念还是很好的，特别是分支。给大家推荐一篇文章《Git分支管理策略》。
5、步伐不能太慢
　　现在游戏太多了，玩家都已经不知道怎么玩了，如果我们再花半年左右出一款游戏已经太慢了，而且自己觉得不错的游戏在上线后玩家也不见得会买单。我觉得３个人（一个美术、一个策划（策划时间多要辅助美术打点杂活）、一个程序（前后台要通吃））３个月左右出一款游戏是最理想的。不要怕步伐快了扯到蛋。
好了不瞎扯蛋了！呵呵呵！，继续我们的教程。定义一个IGiftPanel接口，TGiftPanel实现接口，在单列模式的get方法中一定要注意返回的IGiftPanel接口，而不是TGiftPanel。以后对外的方法就都在IGiftPanel接口中定义就可以了。代码如下： 
private static var instance:IGiftPanel = null;
public static function get Instance():IGiftPanel {
    if (instance == null) {
        new TGiftPanel();
    }
    return instance;
}
public function TGiftPanel() {
    if (instance != null) {
        throw new Error("单列模式");
    }
    instance = this;
    ...
}
在需要操作礼品栏的地方只要通过 get Instance()获取时，会在第一次获取时先创建礼品栏（new TGiftPanel();），在构造方法里处理了UI布局和事件初始化。代码如下： 
public function TGiftPanel() {
    if (instance != null) {
        throw new Error("单列模式");
    }
    instance = this;
    this.setSkin(JFDynamicResManager.getInstance().displayObjectByName(1, "res1703"));
    x = 770;
    y = 72;
    initChild();
    initEvent();
}
礼品栏中主要有下面几个元素：
1、礼品项目列表
2、上下翻页按钮
3、页信息
代码： 
private function initChild():void {
    const ITEM_WIDTH:int = 53;
    const ITEM_HEIGHT:int = 53;
    const LIST_WIDTH:int = 110;
    const LIST_HEIGHT:int = 55;
    const SHOW_OFFSET_X:int = 60;
    const SHOW_OFFSET_Y:int = 8;
    FPropsList = new List(ITEM_WIDTH, ITEM_HEIGHT, LIST_WIDTH, LIST_HEIGHT, TGiftItem, List.horizontal_SCROLL_ITEM);
    (FPropsList as List).x = SHOW_OFFSET_X;
    (FPropsList as List).y = SHOW_OFFSET_Y;
    addChild(FPropsList as List);
 
    // 页信息
    var tmpFont:IJFFont = FontLibrary.getInstance().song10Font;
    tmpFont.setBold(false);
    tmpFont.setAlign(TextFormatAlign.CENTER);
    FPageInfoLabel = UIManager.getTextField("", tmpFont, 0xFFFFFF, TextFieldAutoSize.NONE);
    FPageInfoLabel.x = 18;
    FPageInfoLabel.y = 40;
    FPageInfoLabel.width = 32;
    FPageInfoLabel.height = 18;
    FPageInfoLabel.text = "0/0";
    FPageInfoLabel.filters = [JFFilter.getDropShadowFilter()];
    addChild(FPageInfoLabel);
 
    // 上页按钮
    FLeftScrollBtn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1,"mc1702"));
    FLeftScrollBtn.x = 3;
    FLeftScrollBtn.enable = false;
    FLeftScrollBtn.y = 37;
    addChild(FLeftScrollBtn);
 
    // 下页按钮
    FRightScrollBtn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1,"mc1701"));
    FRightScrollBtn.x = 49;
    FRightScrollBtn.enable = false;
    FRightScrollBtn.y = 37;
    addChild(FRightScrollBtn);
}
再在VGUIManager的init中加入TGiftPanel.Instance.addToStage();，如下图：



礼品栏其实也可以看成是一些游戏里的玩家背包，里面存放玩家游戏里获得的一些道具（只是当初策划管他叫礼品栏）。在玩家登录游戏的时候服务端会将玩家礼品栏的数据发送过来，我们先将数据保存起来，代码如下：
// 礼品数据
TGiftData.Instance.setData(arg_data.backpack);



礼品栏就创建好了，来张效果图：



今天就先到这里了，888






0 有用 0 无用
本站原创，欢迎转载；尊重他人劳动，转载时保留以下信息：
本文转自：360ITO技术社区
原文标题：从零开始学社交游戏开发（11）
原文地址：http://www.360ito.com/article/641.html
360ito.com
社交游戏 Flash

共有0个评论 我要评论»

网友回复/评论仅代表其个人看法，并不表明本社区同意其观点或证实其描述。

请尽量让自己的回复能够对别人有帮助

热门标签

相关文章

周热点

月热点