360ITO技术社区
  • 首页
  • 文章
  • 快讯
  • 讨论
  • 问答
  • 小贴士
  • 代码块
  • 开源
  • 老论坛
登录 | 注册

360ITO技术社区  > 文章

订阅文章

从零开始学社交游戏开发(11)

smallghost 发布于 7年前 ( comment 0条评论  查看:4981  收藏: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、步伐不能太慢
  现在游戏太多了,玩家都已经不知道怎么玩了,如果我们再花半年左右出一款游戏已经太慢了,而且自己觉得不错的游戏在上线后玩家也不见得会买单。我觉得3个人(一个美术、一个策划(策划时间多要辅助美术打点杂活)、一个程序(前后台要通吃))3个月左右出一款游戏是最理想的。不要怕步伐快了扯到蛋。
好了不瞎扯蛋了!呵呵呵!,继续我们的教程。定义一个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个评论 我要评论»

按时间排 按有用数排 按支持数排

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

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

1.不欢迎无意义的回复/评论和类似“顶”、“沙发”之类没有营养的文字
如果只是想简单的表个态,请点 有用无用支持反对 等按钮
2.发言之前请再仔细看一遍文章,或许是您遗漏、误解了,理性讨论、切莫乱喷
3.严禁发布违法、违规的信息,请勿到处招贴广告、发布软文;
4.如果您发现自己的回复/评论不见了,请参考以上3条
5.不停制造违规、垃圾信息的,账户将被禁止

热门标签

  • android 20
  • Flash 15
  • 游戏 12
  • Linux 12
  • Python 11
  • 工作笔记 11
  • 社交游戏 7
  • delphi 5
  • jquery 5
  • 编程 4
  • 谷歌 4
  • git 4
  • Centos 4
  • JavaScript 3
  • 开发者 3
  • C/C++ 3
  • 安全 2
  • 代码 2
  • 浏览器 2
  • 移动应用 2

相关文章

周热点

  • 6天前qifei233333333333 (77)

月热点

  • 1月前qifei233333333333 (243)
  • 3周前qifei233333333333 (171)
  • 2周前qifei233333333333 (158)
  • 1周前qifei233333333333 (125)
  • 1周前qifei233333333333 (105)
  • 6天前qifei233333333333 (77)
Copyright ©2011-2012 360ITO技术社区 All Rights Reserved. | 关于 | 联系我们 | 杭州精创信息技术有限公司 浙ICP备09019653号-26|
▲