十三 手游开发神器 cocos2d-x editor 之选关滑动界面(ScrollView)

原创 2014年01月25日 17:14:49

这一节,我将实现游戏的选关界面,游戏50关,每一屏15关,总共4屏,左滑动可切换到上一屏,右滑动可切换到下一屏;


效果如下;

开始进入选关界面;



滑动到最后一屏;



点击关卡,进入主界面;



代码下载:http://share.weiyun.com/c3f24a752d5e6f26ca3e1e97855807f6 (snow-level)



首先新建,GameSelectLayer.ccbx,GameSelectLayer.js,指定控制器让两个文件关联;设计选关场景如下,调节参数



创建每个单元格关卡GameSelectItemSprite.ccbx,这是一个小精灵层,如下图;





设计完成后,打开MainLayer.js,编写如下:

GAME_LEVEL = 0;
var GameSelectLayer = function () {
    cc.log("GameSelectLayer");
    this.levelScrollPanel = this.levelScrollPanel || {};
    this.pageIndex = 0;
    this.pageMax = 4;
    this.dotNode = this.dotNode || {};
    this.start = false;

};

GameSelectLayer.prototype.onDidLoadFromCCB = function () {
    if (sys.platform == 'browser') {
        this.onEnter();
    }
    else {
        this.rootNode.onEnter = function () {
            this.controller.onEnter();
        };
    }

    this.rootNode.onExit = function () {
        this.controller.onExit();
    };


    this.rootNode.onTouchesBegan = function (touches, event) {
        this.controller.onTouchesBegan(touches, event);
        return true;
    };

    this.rootNode.onTouchesMoved = function (touches, event) {
        this.controller.onTouchesMoved(touches, event);
        return true;
    };
    this.rootNode.onTouchesEnded = function (touches, event) {
        this.controller.onTouchesEnded(touches, event);
        return true;
    };
    this.rootNode.setTouchEnabled(true);
};

GameSelectLayer.prototype.onEnter = function () {
    this.maxColumns = 3;
    this.columnSize = 177;
    this.maxRows = 5;
    this.rowSize = 104;
    cc.log("GameSelectLayer");

    this.itemDatas = [];
    var itemName = "";
    var levelPan = cc.Layer.create();
    var currentLevel = sys.localStorage.getItem("pb_level");
    if (currentLevel == null) {
        currentLevel = 0;
    }

    sys.localStorage.setItem("pb_level_score_1", "S");
    currentLevel = 3;

    for (var i = 0; i < 50; i++) {
        var xIndex = Math.floor(i % 3) + Math.floor(i / 15) * 3;
        var yIndex = Math.floor(i / 3 % 5);
        var levelScore = "A"
        if (i < currentLevel) {
            levelScore = sys.localStorage.getItem("pb_level_score_" + i);
            if (levelScore == null || levelScore == '') {
                levelScore = "A";
            }
            if ("S" == levelScore) {
                itemName = "GameSelectItemScoreS";
            }
            else {
                itemName = "GameSelectItemScore";
            }
        }
        else if (i == currentLevel) {
            itemName = "GameSelectItemLevel";
        }
        else {
            itemName = "GameSelectItemLocked";
        }
        var itemData = {
            xIndex: xIndex,
            yIndex: yIndex,
            index: i,
            type: itemName,
            onItemAction: function () {
                cc.log("onItemAction");
                var action = cc.ScaleBy.create(0.5, 0.8);
                this.rootNode.runAction(cc.Sequence.create(
                    action, action.reverse(), cc.DelayTime.create(2)
                    //  cc.CallFunc.create(this.onItemClicked())
                ));
            },
            onItemClicked: function () {
                cc.log("onItemClicked");
                GAME_LEVEL = (this.index + 1);
                require("MainLayer.js");
                cc.BuilderReader.runScene("", "MainLayer");
            },
            onLockOpened: function () {
            }
        };
        var item = cc.BuilderReader.loadAsNodeFrom("", "GameSelectItemSprite", itemData);
        if (item == null) {
            continue;
        }
        item.setPosition(cc.p(this.columnSize * xIndex, this.rowSize * (4 - yIndex)));
        item.setZOrder(11);
        itemData.rootNode = item;
        itemData.controller = this;
        this.itemDatas.push(itemData);
        itemData.levelNum.setString("" + (i + 1));
        levelPan.addChild(item);
    }
    levelPan.setContentSize(cc.size(this.columnSize * 12, this.rowSize * 5));
    this.levelScrollPanel.setTouchEnabled(false);
    this.levelScrollPanel.setBounceable(true);
    this.levelScrollPanel.setContainer(levelPan);
    this.levelScrollPanel.setTouchPriority(-99999);

    this.pageDots(0);
}

GameSelectLayer.prototype.onUpdate = function () {

}

GameSelectLayer.prototype.onExit = function () {

}

GameSelectLayer.prototype.onTouchesBegan = function (touches, event) {
    cc.log("onTouchesBegan");
    this.beganPosition = touches[0].getLocation();
}

GameSelectLayer.prototype.onTouchesMoved = function (touches, event) {
    this.movePosition = touches[0].getLocation();
}

GameSelectLayer.prototype.onTouchesEnded = function (touches, event) {
    cc.log("onTouchesEnded");
    var loc = touches[0].getLocation();
    var distanceX = this.beganPosition.x - loc.x;

    var x = this.levelScrollPanel.getContentOffset().x;
    var y = this.levelScrollPanel.getContentOffset().y;
    this.levelScrollPanel.unscheduleAllCallbacks();

    if (distanceX > 50) {
        if (this.pageIndex < 4) {
            this.pageIndex += 1;
        }
        this.pageDots(this.pageIndex);
    }
    else if (distanceX < -50) {
        if (this.pageIndex > 0) {
            this.pageIndex -= 1;
        }
        this.pageDots(this.pageIndex);
    }
    else {
        this.onItemClicked(loc);
    }
    this.levelScrollPanel.setContentOffsetInDuration(cc.p(-this.columnSize * 3 * this.pageIndex, y), 0.5);
}

GameSelectLayer.prototype.onItemClicked = function (location) {
    var x = location.x;
    var y = location.y;

    if (!isInScroll(location)) {
        cc.log("out");
        return;
    }

    var scrollPanelRect = this.levelScrollPanel.getBoundingBox();
    var xIndex = Math.floor((x - 110) / this.columnSize) + this.pageIndex * 3;
    var yIndex = 4 - Math.floor((y - 385) / this.rowSize);
    cc.log("scrollX==" + scrollPanelRect.x + ",scrollY==" + scrollPanelRect.y);
    cc.log("xIndex==" + xIndex + ",yIndex==" + yIndex);

    for (var i = 0; i < this.itemDatas.length; i++) {
        if (this.itemDatas[i].xIndex == xIndex && this.itemDatas[i].yIndex == yIndex) {
            cc.log("click i=" + i);
            this.itemDatas[i].onItemClicked();
            break;
        }
    }
}

GameSelectLayer.prototype.pageDots = function (position) {
    this.dotNode.removeAllChildren();
    for (var i = 0; i < 4; i++) {
        var dots = ["s_point.png", "s_point_s.png"];
        var type = 0;
        if (position == i) {
            type = 1;
        }
        var dotSprite = cc.Sprite.createWithSpriteFrameName(dots[type]);
        dotSprite.setAnchorPoint(cc.p(0, 1));
        dotSprite.setPosition(cc.p(30 * i, 60));
        dotSprite.setZOrder(100);
        this.dotNode.addChild(dotSprite);
    }
}

function isInScroll(location) {
    var x = location.x;
    var y = location.y;
    if (x > 110 && x < (110 + 510) && y > 385 && y < (385 + 500)) {
        return true;
    }
    return false
}

同时修改Main.js,加入,require("GameSelectLayer.js");;

然后修改StartLayer.js,让点击开始后跳转到GameSelectLayer.js;

//
// CleanerScoreScene class
//
var StartLayer = function () {
    cc.log("StartLayer")
};

StartLayer.prototype.onDidLoadFromCCB = function () {
//    this.rootNode.onUpdate = function (dt)
//    {
//        this.controller.onUpdate();
//    };
//    this.rootNode.schedule(this.rootNode.onUpdate);

    if (sys.platform == 'browser') {
        this.onEnter();
    }
    else {
        this.rootNode.onEnter = function () {
            this.controller.onEnter();
        };
    }

    this.rootNode.onExit = function () {
        this.controller.onExit();
    };
};

StartLayer.prototype.onEnter = function () {
}

StartLayer.prototype.onUpdate = function () {

}

StartLayer.prototype.onPlayClicked = function () {
    cc.BuilderReader.runScene("", "GameSelectLayer");
}

StartLayer.prototype.onExit = function () {

}

完成后运行,ok,效果最上面;


下一篇文章 我会介绍cocos2d-x  editor的串联游戏流程    笔者(李元友)

资料来源:cocos2d-x  editor

cocos2d-x 关卡选择界面(CCScrollView的使用)

今天要写一个关卡选择界面。 百度了下,采用了CCScrollView来实现。 具体CCScrollView的使用就不介绍了。 百度大把。(关键字: CCScrollView详解) 这里,主要通过...
  • hitwhylz
  • hitwhylz
  • 2014-04-13 17:30:08
  • 4038

棋牌游戏之 触摸滑动-选牌(和欢乐斗地主效果一样)

触摸响应 bool GameLayer::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent) { if(_pWai...
  • themagickeyjianan
  • themagickeyjianan
  • 2014-09-11 16:55:58
  • 2912

cocos2d-x 游戏关卡选择的设计

  • 2013年10月19日 11:41
  • 182KB
  • 下载

cocos2dx实现环形角色选择界面

数据结构采用双向循环链表。由候选角色组成链表的节点,将链表中的节点在屏幕上按照椭圆分布。  .h: 1 //链表节点——候选角色 2 class CandidateRole :publi...
  • ezeroone
  • ezeroone
  • 2014-12-20 20:23:23
  • 78

cocos2d-x游戏开发系列教程-坦克大战游戏关卡选择场景的编写中

在上节课我们能够显示关卡选择界面了,但是点击按钮没有任何反应,那么我们这篇文章将会介绍如何响应点击触摸等事件。要使精灵能够相应触摸事件,我们必须将我们的类继承于CCSprite和CCTargetedT...
  • yincheng01
  • yincheng01
  • 2013-12-16 17:26:49
  • 3217

cocos2d 游戏选关界面 附源码

1. 选关效果图每页15个,总共45个,每行5个。这些都可以改。源码基于Cocos2d 3.3。2.实现原理反正有源码这里就少讲点了。我看下cocos2d 的 Menu的实现,是一个Layer, 然后...
  • fox64194167
  • fox64194167
  • 2015-01-05 09:40:35
  • 2235

cocos2d-x滑动模块学习

1.首先我们来认识下cocos引擎类中的CCScrollView,有关于该类源码的介绍该文章有详细介绍:http://www.it165.net/pro/html/201406/15461.htmlC...
  • ckisking
  • ckisking
  • 2015-09-29 16:42:05
  • 176

COCOS学习笔记--复选框CheckBox及其控件属性

一.Button介绍 游戏开发中有时我们会用到CheckBox,CheckBox就是复选框,大家应该都见过复选框,它有两个状态,一个勾选态,一个非勾选态,我们可以通过CheckBox在这两个状态间的切...
  • gzy252050968
  • gzy252050968
  • 2016-03-29 09:58:06
  • 6289

cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第一步---开始界面&关卡选择

***每一步对应的所有代码以及用到的资源都会打包在最后给出 ***为避免代码过多,每一步的代码都做了标记--一看就晓得是第几步实现的避免出错改不回去(难不成还用Git?) ***可以根据设计思路(好吧...
  • ZYY173533832
  • ZYY173533832
  • 2014-08-22 19:30:49
  • 3802

Cocos2d-x 3.2 大富翁游戏项目开发-第五部分 单机游戏-关卡选择ScrollView

在MenuScene.cpp 点击单机游戏后会调用 Director::getInstance()->pushScene(MapChooseScene::createScene()); 进入到关...
  • lideguo1979
  • lideguo1979
  • 2014-12-17 00:47:05
  • 2847
收藏助手
不良信息举报
您举报文章:十三 手游开发神器 cocos2d-x editor 之选关滑动界面(ScrollView)
举报原因:
原因补充:

(最多只允许输入30个字)