《Cocos Creator游戏实战》可朝八个方向滑动的背景，横屏竖屏都适配，减少美术工作，让游戏背景更好看

原创于 2025-04-18 11:33:24 发布 · 496 阅读

5 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#游戏

《Cocos Creator游戏实战》专栏收录该内容

43 篇文章

订阅专栏

在线体验地址

https://la-vie-est-belle.github.io/bgslide-8dir/

Cocos Store 购买地址：
https://store.cocos.com/app/detail/7568

运行效果

滑动方向分别是：上、下、左、右、左上、右上、左下、右下
可通过接口自定义进行调整，可调整的内容有：滑动速度、滑动方向、行列图案个数以及图案大小。

实现原理

首先要生成9个跟画布同等大小的背景，并将他们按照九宫格的样子进行放置。
在这里插入图片描述

接下来就是确定图案在每行每列上的数量以及大小。bg预制体上挂有Layout组件，Cell Size的大小即图案大小。Layout组件的其他属性我们可以在代码中根据设置的图案行列数量来动态设置，确保图案间隙合适，整体在画布上居中即可。
在这里插入图片描述

最后就是移动各个背景节点即可，9个背景节点往同一方向移动，当快要出现黑边时，立即重置9个背景节点的位置。比方说现在是往左上移动，那当九宫格中右下背景节点移动到屏幕中心后（再移动就会出现黑边），立即重置各个背景节点的位置，恢复原状。

背景颜色和图案颜色我们完全可以自定义，这样也让游戏看起来更加生动有趣。

bgColorHexArray: Array<string> = ['FDF3E9', 'D2E1F8', 'BAD5F0', 'F5E7DC', 'E8F2D7', 'DBEEDB', 'E7DDD4', 'E3E8E2']   // 背景颜色
patternColorHexArray: Array<string> = ['BEBEBE']     // 图案颜色

/* 设置背景颜色 */
private setBgColorRandomly() {
    let randomwIndex = Math.floor(Math.random() * this.bgColorHexArray.length)

    for (let i=0; i<this.bgArray.length; i++) {
        this.bgArray[i].getComponent(Sprite).color = new Color().fromHEX(this.bgColorHexArray[randomwIndex])
    }
}

/* 设置图案颜色 */
private setPatternColorRandomly() {
    let randomwIndex = Math.floor(Math.random() * this.patternColorHexArray.length)

    for (let i=0; i<this.bgArray.length; i++) {
        for (let j=0; j<this.bgArray[i].children.length; j++) {
            this.bgArray[i].children[j].getComponent(Sprite).color = new Color().fromHEX(this.patternColorHexArray[randomwIndex])
        }
    }
}