游戏中很多需要用到ScrollView的情况,也就是需要滚动一片区域。这里有两种实现方法,一种是使用cocos studio的方式,第二种是手写代码。先看第一种
第一种记得在设置滚动区域时选取裁剪项。
var size = cc.winSize;
//读取json文件
var root = ccs.uiReader.widgetFromJsonFile(res.listJson);
this.addChild(root);
//获取在cocos studio里面设定好的scrollView
var missionlist = ccui.helper.seekWidgetByName(root, "MissionList");
//设定垂直朝向滚动
missionlist.setDirection(ccui.ScrollView.DIR_VERTICAL);
missionlist.setTouchEnabled(true);
missionlist.setBounceEnabled(true);
missionlist.setVisible(true);
//设置大小
missionlist.setSize(cc.size(960, 400));
//设置可以滚动区域
var len = 9;
missionlist.setInnerContainerSize(cc.size(960, 80* len));
missionlist.y = size.height/2;
missionlist.x = size.width/2;
missionlist.setAnchorPoint(cc.p(0.5,0.5));
//设置滚动的项目
for(var i = 0; i < len; i++){
var sprite = new cc.Sprite(res.item_png);
missionlist.addChild(sprite);
sprite.x = missionlist.width/2;
sprite.y = missionlist.getInnerContainerSize().height + 40 - (i+1)*80;
sprite.setAnchorPoint(cc.p(0.5,0.5));
}
missionlist.jumpToTop();
第二种,手写代码
var listView = ccui.ScrollView.create();
listView.setDirection(ccui.ScrollView.DIR_VERTICAL);
listView.setTouchEnabled(true);
listView.setBounceEnabled(true);
listView.setSize(cc.size(960, 400));
listView.x = size.width/2;
listView.y = size.height/2;
listView.setAnchorPoint(cc.p(0.5,0.5));
this.addChild(listView);
listView.setInnerContainerSize(cc.size(960, 80*9));
for(var i =0; i < 9; i++){
var sprite = new cc.Sprite(res.item_png);
listView.addChild(sprite);
sprite.x= listView.width/2;
sprite.y= listView.getInnerContainerSize().height + 40 - (i+1)*80;
sprite.setAnchorPoint(cc.p(0.5,0.5));
}
listView.jumpToTop();
下面是左右滑动的代码示例
var HelloWorldLayer = cc.Layer.extend({
sprite:null,
ctor:function () {
this._super();
var size = cc.winSize;
var listView = new ccui.ScrollView();
listView.setDirection(ccui.ScrollView.DIR_HORIZONTAL);
listView.setTouchEnabled(true);
listView.setBounceEnabled(true);
listView.setSize(cc.size(512, 200));
listView.x = size.width/2;
listView.y = size.height/2;
listView.setAnchorPoint(cc.p(0.5,0.5));
this.addChild(listView);
listView.setInnerContainerSize(cc.size(128*6, 200));
for(var i =0; i < 6; i++){
<span style="white-space:pre"> </span>var sprite = new cc.Sprite(res.item_png);
<span style="white-space:pre"> </span>listView.addChild(sprite);
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>sprite.x= i*130 + 40;
<span style="white-space:pre"> </span>sprite.y= listView.getInnerContainerSize().height/2;
<span style="white-space:pre"> </span>sprite.setAnchorPoint(cc.p(0.5,0.5));
}
listView.jumpToLeft();
cc.log("ben guo...");
return true;
}
});
var HelloWorldScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new HelloWorldLayer();
this.addChild(layer);
}
});