cocos-creator使用记录19_根据当前关卡自动调整的滚动区

本文记录了如何在Cocos Creator中实现一个根据当前关卡自动调整的左右滑动滚动区。通过动态生成关卡按钮,计算滚动区大小,并根据当前关卡设置位置,提供流畅的关卡浏览体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.适用的情况
左右滑动式滚动区的关卡界面


2.实现的思路
关卡按钮使用预制文件,在进入关卡时动态生成。
根据关卡总数计算滚动区的大小。
根据当前关卡序号设置滚动区的位置和表示分页的点的显示。


3.控件布局
Canvas
--scrollView
  --view
    --content
--pointNode
  --point1
    --red
--black
  --point2
  --point3
  --point4
  --point5  
  --point6


4.代码
Common.js-------------------
module.exports = {
currentLevel: 1, //当前关卡
    maxLevel: 29, //关卡总数
};
Level.js-------------------
var common = require('zqddn_zhb_Common');
cc.Class({
    extends: cc.Component,


    properties: {
        scrollViewNode: cc.Node, //滚动区节点
        scrollViewContentNode: cc.Node, //滚动区内容节点
        linePrefab: cc.Prefab, //线预制
        levelBtnPrefab: cc.Prefab, //关卡按钮预制
        pointNode: { default: [], type: cc.Node }, //点节点
    },


    onLoad: function() {
        this.first = true; //第1次
        this.only1 = true; //只一次
        this.only2 = true;
        this.only3 = true;
        this.currentPageIndex = 0; //当前滚动页序号
        this.direction = 0; //滚动方向(0默认,1左,2右)
        this.startOffset = 0; //开始滚动时第1帧
        this.endOffset = 0; //开始滚动时第2帧


        //根据关卡数设置滚动区大小
        this.pageCount = Math.ceil(common.maxLevel / 12);
        this.scrollViewContentNode.width = 750 * this.pageCount;
        //添加线
        for(var i = 0; i < this.pageCount; i++){
            for(var j = 0; j < 4; j++){
                var line = cc.instantiate(this.linePrefab);
                this.scrollViewContentNode.addChild(line);
                line.setPositio
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值