cocos2dx 通过shader实现背景平铺

最新推荐文章于 2025-05-21 11:46:42 发布

原创

最新推荐文章于 2025-05-21 11:46:42 发布 · 3.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#cocos2d-x

本文介绍了如何使用cocos2dx通过shader技术优化背景图，减少内存和包体积。通过9宫格设定边框大小，并结合纹理精灵与shader，实现了背景平铺效果，将原本4MB的内存占用降低到51K。

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

游戏中包含很多如下图类似的背景图，大概有10张左右，结果导致内存和包体积大涨只能想办法缩减了

先看下效果图

怎么缩减呢？我用了这样一个方案，背景图除了一个边框其他的都不要了，使用cocos2dx的9宫格改变大小，有人说那直接全部使用9宫格不行吗？当然不行，因为好多图上面是需要有花纹的，否则很难看，因此，需要下面两张图

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

炼钢大湿

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【cocos shader 006】连续滚动特效无限地图背景

刀客

07-27

1591

先上效果： local Rolling = { frag = [[ #ifdef GL_ES precision highp float; #endif varying vec4 v_fragmentColor; varying vec2 v_texCoord; uniform float speedX = 0.f; uniform float speedY = 0.f; void main() { vec2 pos = v_t

【进击的Shader】【入门一】Cocos Shader Effect 实现Sprite 滚动效果

weixin_43677520的博客

01-23

753

shader ,cocos Creator ,Effect,UV滚动

参与评论您还未登录，请先登录后发表或查看评论

cocos2dx 图片平铺

z104207的专栏

05-20

2380

Texture2D *texture = Director::getInstance() -> getTextureCache() -> addImage("Santa.png"); Texture2D::TexParams tp = {GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT}; texture -> setTexParameters(tp); aut

cocos2d-x binding lua 实现背景图片平铺

01-04

686

使用情境: 先在Cocos Studio中创建了一个Panel作为背景层，需要在其中平铺图片。代码如下：其中注释部分注明了我用过的错误方法，需注意。 local panelPage1 = ccui.Helper:seekWidgetByName(uiNode, "Panel_page1") local panelRepeatBg1 = ccui.Helper:seekWidg

Cocos——shader实现2D平面点击水波纹效果

最新发布

2403_88924202的博客

05-21

222

修改shader片元着色器，通过正弦函数实现周期性的uv坐标偏移，具体看代码注释。

cocos2d-x 图片平铺

playddt的专栏

04-01

2026

图片平铺要注意getTextUre()的资源一定要是2的次方 CCSize s = CCDirector::sharedDirector()->getWinSize(); CCSprite* sprite = CCSprite::create("sprite.png"); // the image size is 256 * 224, so the height is non power

cocos2d-x 实现图片平铺的代码

leonqiu的博客

01-02

1283

http://blog.youkuaiyun.com/dh2442897094/article/details/51233059 平铺主要用到了openGL的知识，示例代码如下： Texture2D *texture = Director::getInstance() -> getTextureCache() -> addImage("HelloWorld.png");

cocos2d-x中Texture2D::TexParams(图片平铺）一张图片铺满全屏做背景

记录日常开发过程中遇到的一些问题

04-24

4208

平铺主要用到了openGL的知识，示例代码如下： Texture2D *texture = Director::getInstance() -> getTextureCache() -> addImage("HelloWorld.png"); Texture2D::TexParams tp = {GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT}; textu

cocos的effect shader：图片渐变rgba并控制渐变区间

weixin_42253927的博客

06-21

263

【代码】cocos的effect shader：图片渐变rgba并控制渐变区间。

Cocos creater 3.x模型拉伸贴图平铺

qianqian256的博客

09-09

1953

cocos creator 3.x 缩放模型，贴图平铺且不被拉伸

Cocos2d-x一张小背景重复贴图充满整个屏幕

weixin_34377065的博客

09-14

343

首先重复贴图的图片的宽和高必须是2的n次幂，这里选择一张128*128的小图片来做例子代码如下：SizevisibleSize=Director::getInstance()->getVisibleSize(); Vec2origin=Director::getInstance()->getVisibleOrigin(); a...

Cocos2d-x屏幕适配之Sprite绘制原理

ado137的专栏

07-08

924

手机(智能终端)游戏绝大多数为全屏(Full Screen)显示，这样开发人员在制作游戏时势必要考虑不同手机(智能终端）屏幕大小、宽高比的不同给游戏画面带来的影响，并且要将这种影响降低到最小，努力使用不同终端的游戏玩家拥有几乎相同的游戏画面体验。为此各种游戏引擎在屏幕适配方面都给出了自己的方案，Cocos2d-x也不例外。在Cocos2d-x官网Wiki上特地撰写了一篇讲解Cocos2

应用BitmapShader实现平铺的画布背景和椭圆形的图片

程序员深夜写bug

01-13

1343

1、布局文件 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/frameLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" a

cocos2d-x CCSprite自动拉伸全屏

weixin_30550271的博客

11-27

237

CCSize size = CCDirector::sharedDirector()->getWinSize();CCSprite* pSprite = CCSprite::create("bg.jpg");pSprite->setPosition(ccp(size.width/2, size.height/2));float winw = size.width; //获取屏幕宽...

Unity SpriteRender 支持Tile平铺的Shade：效果，可以然图片在一个MashRender 中重复平铺图片

u011644138的博客

05-04

2465

默认的SpriteRender不支持平铺，因此需要重复平铺地砖的时候，要么就得用一个Quad，要么就得重复的铺多个SpriteRender 使用Quad的情况下，还需要处理Z轴，比较麻烦，要不就会出现Z-Fighting（个别小米手机上会出现）而使用平铺很多SpriteRanderer的方法，又会引起效能损耗。于是我想通过修改Unity内置的Shader的方式，让SpriteRender支持...

cocos2dx 纹理优化

John_cdy的专栏

06-04

4905

description: 为什么要谈纹理的问题，游戏的画面无时无刻不充斥着图像，通俗意义上一款精致的游戏都有着非常精美的画面，这样往往能给玩家带来更好的游戏体验，这一点也是对于游戏制作者来说所尽力追求的，但是无奈有CPU和GPU的限制，手持设备上的硬件资源就更窘迫一些了，如何处理好图片资源，往往能给游戏提供更大的扩展空间，从画面上给游戏加分。为什么要谈纹理的问题，游戏的画面无时无刻不充斥着图像，通俗

cocos 屏幕适配

zsl65326的专栏

02-29

1139

1、适配模式（1）ResolutionPolicy::EXACT_FIT ：拉伸变形，使铺满屏幕。（2）ResolutionPolicy::NO_BORDER ：按比例放缩，全屏展示不留黑边。（长宽中小的铺满屏幕，大的超出屏幕）（3）ResolutionPo

cocos2dx lua和c++纹理平铺

大猪的博客

11-27

981

lua: local bg = cc.Sprite:create("test.png"); bg:getTexture():setTexParameters(GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT); bg:setTextureRect(cc.rect(0, 0, 1136, 1024)); bg:setScaleY(640/1024); bg:se

如何让一张背景图充满整个屏幕

weixin_30261095的博客

07-05

2320

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1...

Cocos2d-X中实现背景无限重复贴图

在Cocos2d-X游戏开发中，背景重复贴图是一种常见的技术，用于制作无限滚动或平铺背景，以增加游戏的视觉深度和沉浸感。该技术通过设置纹理参数来实现图像在屏幕上的水平和垂直重复，使得背景看起来像是无限延伸。...