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

360ITO技术社区  > 文章

订阅文章

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

smallghost 发布于 4年前 ( comment 0条评论  查看:3500  收藏:0 )
上节讲了礼品栏的UI,接下来我们将讲解商店和好友部分的UI。
 

商店

商店UI里面有下列元素:
  1、上下翻页按钮和页信息
  2、关闭按钮
  3、金币信息
  4、黄钻按钮
  5、商品分类属性页
  6、商品列表
  7、商品购买相关按钮

在村神游戏中每个商品都有库存,卖完了当天就不能再购买了,要等第二天才能购买。每次玩家登录游戏的时候服务端都会将玩家道具相关的数据传过来,这些数据都被保存在TPropsData中,如下图:


代码:
package game_data {
    import com.jcit.debug.JFLog;
    import config.TPropsCfg;
    import config.cfg;
    import flash.utils.Dictionary;
 
    public class TPropsData {
        protected var FPropsSurplus:Array;
        protected var FPropsSurplusDict:Dictionary;
 
        /**
         * 保存服务端返回的数据
         * @param arg_data      - 服务端返回的道具剩余数据
         */
        public function setData(arg_data:Object):void {
            // 道具剩余数量
            FPropsSurplusDict = new Dictionary(true);
            FPropsSurplus = arg_data.FPropsSurplus;
            var i:int;
            for (i = 0; i < FPropsSurplus.length; i++) {
                FPropsSurplusDict[FPropsSurplus[i].id] = FPropsSurplus[i];
            }
        }
 
        /**
         * 设置道具剩余量
         * @param arg_id
         * @param arg_value
         */
        public function setPropsSurplus(arg_id:int,arg_value:int):void {
            if (FPropsSurplusDict[arg_id] == null) {
                var propsCfg:Object = TPropsCfg.Instance.getCfg(arg_id);
                if (DEF::DEBUG) {
                    if (propsCfg == null) {
                        JFLog.Trace('is null!');
                        return;
                    }
                }
                if (propsCfg.buy_limit == 0) {
                    return ;
                }
                var propsSurplus:Object = {id:arg_id,surplus:propsCfg.buy_limit};
                FPropsSurplus.push(propsSurplus);
                FPropsSurplusDict[propsCfg.id] = propsSurplus;
            }
            FPropsSurplusDict[arg_id].surplus = arg_value;
        }
 
        /**
         * 获取道具剩余量
         * @param arg_id    - 道具ID
         * @return
         *  还剩余多少个道具
         */
        public function getPropsSurplus(arg_id:int):int {
            if (FPropsSurplusDict[arg_id] == null) {
                var propsCfg:Object = TPropsCfg.Instance.getCfg(arg_id);
                if (DEF::DEBUG) {
                    if (propsCfg == null) {
                        JFLog.Trace('is null!');
                        return 0;
                    }
                }
                if (propsCfg.buy_limit == 0) {
                    return cfg.MAX_PROPS_COUNT;
                }
                var propsSurplus:Object = {id:arg_id,surplus:propsCfg.buy_limit};
                FPropsSurplus.push(propsSurplus);
                FPropsSurplusDict[propsCfg.id] = propsSurplus;
            }
            return FPropsSurplusDict[arg_id].surplus;
        }
 
        private static var instance:TPropsData;
        public function TPropsData() {
            instance = this;
        }
 
        public static function get Instance():TPropsData {
            if (instance == null) {
                new TPropsData();
            }
            return instance;
        }
    }
}
在玩家进入游戏后,保存道具剩余量数据,代码如下:


TPropsData.Instance.setData(arg_data);


数据准备好了,现在我们来创建商店UI,在UI.store包中创建商店面板 和 商品列表项,如下图:




在商店UI构造方法中初始化子项目和事件。
public function TStorePanel() {
    if (FInstance != null) {
        throw new Error("商店面板是单列模式!");
    }
    FInstance = this;
 
    // 商店面板位置
    x = 769;
    y = 188;
    // 商店面板UI
    setSkin(JFDynamicResManager.getInstance().displayObjectByName(1,"res0502"));
 
    // 初始化子项目
    initChild();
    // 初始化事件
    initEvent();
}
初始化子项目
初始化子项目主要需要做的工作有:创建“分类属性页”、“商品列表框”和 一些功能按钮。代码如下:
private function initChild():void {
 
    // 创建分类属性页
    FTypesheet = new JFImageTabsheet(-2);
    // 功能
    FTypesheet.add(JFDynamicResManager.getInstance().displayObjectByName(1, "res0505"), JFDynamicResManager.getInstance().displayObjectByName(1, "res0506"));
    // 社会
    FTypesheet.add(JFDynamicResManager.getInstance().displayObjectByName(1, "res0514"), JFDynamicResManager.getInstance().displayObjectByName(1, "res0515"));
    // 艺术
    FTypesheet.add(JFDynamicResManager.getInstance().displayObjectByName(1, "res0516"), JFDynamicResManager.getInstance().displayObjectByName(1, "res0517"));
    // 科技
    FTypesheet.add(JFDynamicResManager.getInstance().displayObjectByName(1, "res0518"), JFDynamicResManager.getInstance().displayObjectByName(1, "res0519"));
    FTypesheet.x = 5;
    FTypesheet.y = 106;
    FTypesheet.activePageIndex = 0;
    addChild(FTypesheet);
 
    // 创建商品列表框
    const ITEM_WIDTH:int = 167;
    const ITEM_HEIGHT:int = 70;
    const LIST_WIDTH:int = 167;
    const LIST_HEIGHT:int = 280;
    const SHOW_OFFSET_X:int = 5;
    const SHOW_OFFSET_Y:int = 130;
    FPropsList = new List(ITEM_WIDTH, ITEM_HEIGHT, LIST_WIDTH, LIST_HEIGHT, TStoreItem, 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().song14Font;
    tmpFont.setBold(true);
    tmpFont.setAlign(TextFormatAlign.LEFT);
 
    // 金币信息
    FJinBiInfoLabel = UIManager.getTextField("", tmpFont, cfg.JIN_BI_FONT_COLOR, TextFieldAutoSize.NONE);
    FJinBiInfoLabel.x = 63;
    FJinBiInfoLabel.y = 18;
    FJinBiInfoLabel.width = 67;
    FJinBiInfoLabel.height = 18;
    FJinBiInfoLabel.filters = [JFFilter.getDropShadowFilter()];
    addChild(FJinBiInfoLabel);
 
    // 页信息
    tmpFont.setBold(true);
    tmpFont.setAlign(TextFormatAlign.CENTER);
    FPageInfoLabel = UIManager.getTextField("", tmpFont, 0xFFFFFF, TextFieldAutoSize.NONE);
    FPageInfoLabel.x = 47;
    FPageInfoLabel.y = 416;
    FPageInfoLabel.width = 86;
    FPageInfoLabel.height = 19;
    FPageInfoLabel.filters = [JFFilter.getDropShadowFilter()];
    addChild(FPageInfoLabel);
 
    // 上页按钮
    FLeftScrollBtn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1,"mc0503"));
    FLeftScrollBtn.x = 22;
    FLeftScrollBtn.y = 413;
    addChild(FLeftScrollBtn);
 
    // 下页按钮
    FRightScrollBtn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1,"mc0504"));
    FRightScrollBtn.x = 133;
    FRightScrollBtn.y = 413;
    addChild(FRightScrollBtn);
 
    // 关闭按钮
    FCloseBtn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1,"mc1901"));
    FCloseBtn.x = 154;
    FCloseBtn.toolTip = LanguageCn.getInstance().getStr(90017);
    FCloseBtn.y = 10;
    addChild(FCloseBtn);
 
    // 商店打开按钮
    FPanelOpenBtn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1,"mc0501"));
    JFApp.appMainSprite.uiLayer.addChild(FPanelOpenBtn);
    FPanelOpenBtn.x = 903;
    FPanelOpenBtn.y = 183;
    FPanelOpenBtn.visible = false;
    FPanelOpenBtn.toolTip = LanguageCn.getInstance().getStr(90035);
 
    // 黄钻按钮
    FYellowVipBtn = new Button(JFDynamicResManager.getInstance().displayObjectByName(1,"mc170205"));
    FYellowVipBtn.tag = 0;
    FYellowVipBtn.x = 7;
    FYellowVipBtn.y = 39;
    addChild(FYellowVipBtn);
}

初始化事件

事件主要分为玩家事件 和 服务端事件两类,代码如下:
private function initEvent():void {
    // 黄砖按钮点击事件
    FYellowVipBtn.addEventListener(MouseEvent.CLICK, onYellowVipBtnClick);
 
    // 购买完成的被调用事件
    FBuyCompleteNotify = null;
    FQBuyCompleteNotify = null;
 
    // 分类改变
    FTypesheet._selNotify = OnTypeChange;
 
    // 商品列表更新UI
    FPropsList.tweeningCompleteNotify = updateUI;
    // 商品列表项创建
    FPropsList.setItemCreateNotify(itemCreate);
    // 左右滚动
    FLeftScrollBtn.addEventListener(MouseEvent.CLICK,onLeftScroll);
    FRightScrollBtn.addEventListener(MouseEvent.CLICK,onRightScroll);
    // 关闭打开商店面板
    FCloseBtn.addEventListener(MouseEvent.CLICK,onClose);
    FPanelOpenBtn.addEventListener(MouseEvent.CLICK, onOpenPanleBtnClick);
 
    // 购买是服务端返回的事件处理
    ServerProxy.getInstance().registerCompHandler(ServerCmd.BUY_PROPS_CMD,onBuyPropsComplete);
    ServerProxy.getInstance().registerCompHandler(ServerCmd.GET_BUY_GOODS_TOKEN,onBuyGoodsTokenComplete);
    ServerProxy.getInstance().registerCompHandler(ServerCmd.CONFIRM_DELIVERY,onQDianBuyComplete);
 
    //提供给JS调用的AS方法
    ExternalInterface.addCallback("buy_success",buy_success);
}
这些代码都应该很好理解,这里就介绍一下商品列表项创建(itemCreate)方法,这个方法里对金币按钮和Q点按钮两个事件做了初始化。这样玩家就可以点击每个商品中的购买按钮购买了。代码如下:
private function itemCreate(arg_item:IListItem):void {
    (arg_item as TStoreItem).FOnJinBiBuyNotify = OnJinBiBuyBtnClick;
    (arg_item as TStoreItem).FOnQDianBuyNotify = OnQDianBuyBtnClick;
}
商店UI创建好了,接下来需要把他加到场景里,代码如下:
// 添加商店
TStorePanel.Instance.addToStage();
最后在服务端商品数据发给我们时更新一下商店UI,代码如下:

// 更新商店UI
TStorePanel.Instance.OnUpdateUI();

代码放在下图的位置:


看看效果图:



好友

好友面板要比商店面板的逻辑简单多了,主要元素有:
1、翻页按钮
2、游戏排行按钮
3、好友列表项(头像、名称和黄钻等等...)
首先我们先需要处理服务端发送过来的好友数据,先定义好友信息类,代码如下:
package game_data {
    public class Friend {
        // 是否年黄钻会员
        public var is_yellow_year_vip:int;
        // 黄钻等级
        public var yellow_vip_level:int;
        // 是否黄钻
        public var is_yellow_vip:int;
        // 好友名称
        public var nickname:String;
        // 头像URL
        public var figureurl:String;
        // 好友声望
        public var sheng_wang:Number;
        // 好友UID
        public var uid:int;
        // 排名
        public var ranking:int;
        // 声望(后面的版本建议使用这个)
        public var reputation:uint;
        // 上周神尊
        public var shen_zun1:uint;
        // 本周神尊
        public var shen_zun2:uint;
 
        public function Friend() {
        }
    }
}
接下来创建FriendsData类来保存好友数据,代码如下:
public function setData(arg_data:Object):void {
    var friends:Array = arg_data as Array;
    var friend_data:Object;
    var friend:Friend;
    FFriends = [];
    var is_exist_self:Boolean = false;
    for (var i:int = 0; i < friends.length; i++) {
        friend_data = friends[i];
        if (friend_data.uid < 1) {
            continue;
        }
        if (friend_data.uid == PlayerData.Instance.uid) {
            is_exist_self = true;
        }
        friend = new Friend();
        // 是否年黄钻会员
        friend.is_yellow_year_vip = friend_data.is_yellow_year_vip;
        // 黄钻等级
        friend.yellow_vip_level = friend_data.yellow_vip_level;
        // 是否黄钻
        friend.is_yellow_vip = friend_data.is_yellow_vip;
        // 好友名称
        friend.nickname = friend_data.nickname;
        // 头像URL
        friend.figureurl = friend_data.figureurl;
        // 好友声望
        friend.sheng_wang = friend_data.sheng_wang;
        // 好友UID
        friend.uid = friend_data.uid;
        // 声望(后面的版本建议使用这个)
        friend.reputation = friend_data.reputation;
        // 上周神尊
        friend.shen_zun1 = friend_data.shen_zun1;
        // 本周神尊
        friend.shen_zun2 = friend_data.shen_zun2;
        FFriends.push(friend);
    }
    // 服务端返回的好友数据中不包括自己,需要把自己也加入到好友列表中
    if (!is_exist_self) {
        friend = new Friend();
        // 是否年黄钻会员
        friend.is_yellow_year_vip = PlayerData.Instance.is_yellow_year_vip;
        // 黄钻等级
        friend.yellow_vip_level = PlayerData.Instance.yellow_vip_level;
        // 是否黄钻
        friend.is_yellow_vip = PlayerData.Instance.is_yellow_vip;
        // 好友名称
        friend.nickname = PlayerData.Instance.nickname;
        // 头像URL
        friend.figureurl = PlayerData.Instance.avatar;
        // 好友声望
        friend.sheng_wang = PlayerData.Instance.sheng_wang;
        // 好友UID
        friend.uid = PlayerData.Instance.uid;
        // 声望(后面的版本建议使用这个)
        friend.reputation = PlayerData.Instance.reputation;
        // 上周神尊
        friend.shen_zun1 = PlayerData.Instance.shen_zun1;
        // 本周神尊
        friend.shen_zun2 = PlayerData.Instance.shen_zun2;
        FFriends.push(friend);
    }
    OnFriendDataSort();
}
Friend和FriendsData的位置如下图:


在onSysEnterComplete方法中,保存好友相关数据:
FriendsData.Instance.setData(arg_data.friends);

好友数据保存好了,下面开始创建好友面板,在friend包中创建好友面板和好友列表项,如下图:

好友详细创建过程就省略了,不清楚的可以看看商店UI创建流程也可以自己去看看代码(代码下载猛点这里)。
最后需要做的就是把他加到场景里,并在服务端好友数据过来后更新一下UI。代码如下:
// 好友面板
TFriendPanel.Instance.addToStage();
// 更新好友UI
TFriendPanel.Instance.OnUpdateUI();
代码就放在商店UI的下面,如下图:


好友UI也搞定了,看看效果图吧:


大家没有见过八级黄钻吧?呵呵呵,这里有...
好了今天就先到这里了,888

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

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

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

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

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

代码下载猛点这里









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

共有0个评论 我要评论»

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

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

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

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

热门标签

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

相关文章

周热点

月热点

Copyright ©2011-2012 360ITO技术社区 All Rights Reserved. | 关于 | 联系我们 | 杭州精创信息技术有限公司 浙ICP备09019653号-26|
▲