cocos creator 无缝循环滚动道具教程 scroll

最新推荐文章于 2024-10-27 11:12:26 发布

weixin_44632085

最新推荐文章于 2024-10-27 11:12:26 发布

阅读量2.7k

点赞数 2

分类专栏： cocos 文章标签：小程序算法 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44632085/article/details/106178278

版权

本文介绍了如何在Cocos Creator中创建一个无缝循环滚动的道具效果。首先，设置好布局，将图片放入scroll节点；接着，为scroll节点添加Mask组件并调整分辨率；然后，创建scroll.js组件并挂载。作者分享了一个使用该技术的动作游戏demo，详细教程可在B站找到。

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

在这里插入图片描述

第一步，先把布局弄好
把要滚动的图片都拖到scroll下
在这里插入图片描述

第二步,在scroll节点里添加Mask组件，辨率设为300*500,
这个分辨率你们可以随意改变
在资源管理器里新建一个scroll.js的组件，再把组件挂到scroll节点上
在这里插入图片描述

下面是scroll.js的代码部份

cc.Class({
    extends: cc.Component,
 
    properties: {
 
    },
 
    onLoad(){
        this.allItem = []; //道具的列表
        this.lineHeight = 30;//每个道具的间距
        let tH = 0; //当前高度
        this.itemCount = this.node.children.length;//取的scroll下子节点的数量
        this.speed = 0; //当前移动速度
        //遍历所有子节点，并且排好位置
        for(let i=0; i<this.itemCount; i++){
            let n = this.node.children[i];