静儿的博客

学习opengl相关库配置

qq_42006069 — Wed, 10 May 2023 17:54:04 +0800

找到glfw3.dll文件并把他拷贝放在系统目录下。导出后，得到如下，下载glad.zip文件。把里面的glad.c文件放在工程源文件下。（1）.配置附加包含目录。（2）配置附加依赖项。

cocos creater 2.4关于提示Error Bundle Texture doesn‘t contain错误

qq_42006069 — Wed, 26 Apr 2023 17:44:17 +0800

时隔这么久，我终于想起来我还有一个博客了。。那就更新一点内容吧，关于项目中我遇到的很恶心的错误提示。

Cocos Creator 制作分步引导

qq_42006069 — Mon, 14 Mar 2022 18:17:14 +0800

之前我在写laya的时候发现他们官方有一个示例的新手引导还挺好用的，但是当我使用cocos的时候我发现好像并没有好的示例来用，大家一般都是采用mask的形式，然后再去解决适配等问题，但是我其实不太喜欢使用mask的，那样就会增加dc，虽然有人说一两个无所谓，但是能省为什么不省呢？那下面我就自己采用相机分组渲染的方式实现吧！ 1.添加一个新的分组，专门用来做引导 2.在主相机渲染是不勾选引导渲染这个组 3.做一个节点专门用来做引导，里面可以加上引导需要的一些手指引导动画，tip提示等，并把它隐藏。默认是

cocos creator碰撞和碰撞回调不生效

qq_42006069 — Fri, 11 Feb 2022 14:30:40 +0800

1、碰撞不生效一定要记得，在使用物理的时候，一定要先开启物理： cc.director.getPhysicsManager().enabled = true; 只有在onLoad()中开启才有效，在onEnable()或者start()都无效 2.碰撞回调不生效如果想执行官方文档中的碰撞回调函数，需要注意两点（1）勾选刚体的如下选项，碰撞的刚体不管是动态还是静态，两个都需要勾选（2）开启碰撞回调 cc.director.getCollisionManager().enabled = true

Cocos Creator的label文字太长安卓机上不显示

qq_42006069 — Wed, 12 Jan 2022 13:55:56 +0800

如果lable的文字字数太长不显示，可以把lable的cache model设置为char就可以了附上官方文档

cocos性能优化之spine动画

qq_42006069 — Fri, 19 Nov 2021 14:55:36 +0800

最近在做一个塔防的项目，怎么说呢，炮台，子弹攻击特效加上受击特效等等等一顿代码撸下来一看dc稳定在200+，这还只是核心的游戏逻辑，如果加上ui那还得了，普通手机挂几分钟就直接挂掉，那就想只能先优化了，这个时候想到之前看过一个滑动层优化的代码，于是想着照葫芦画瓢直接把他的思想拿过来用啊，实践后发现果然可行，不得感叹大佬还是大佬。先看看没有优化之前的dc，只有两种炮的情况下就是120了：看看现在，n种炮加子弹特效加受击特效：那就直接讲思路吧，首先在主场景中，挂一个节点，专门用来做渲染层的东西，比如这

openGL关于VAO和VBO和EBO的区分和理解

qq_42006069 — Thu, 14 Oct 2021 18:01:23 +0800

1.VBO VBO为顶点缓冲对象，是显卡存储空间中开辟出的一块内存缓存区，用于存储顶点的各类属性信息，如顶点坐标，顶点法向量，顶点颜色数据等。在渲染时，可以直接从VBO中取出顶点的各类属性数据。所以可以理解为VBO就是显存中的一个存储区域，可以保持大量的顶点属性信息。并且可以开辟很多个VBO，每个VBO在OpenGL中有它的唯一标识ID，这个ID对应着具体的VBO的显存地址，通过这个ID可以对特定的VBO内的数据进行存取操作。 ![在这里插入图片描述](https://img-blog.csdnimg.c

cocos creator中使用Easing

qq_42006069 — Thu, 23 Sep 2021 16:00:56 +0800

主要用作动画，示例： cc.tween(this.stretch) .to(0.1,{}).call(()=>{this.arrow.scale = scale}) .to(0.5, { x: x },{easing:"sineOut"}) .call(() => { this.inOrOut = !this.inOrOut; }) .star

webgl_进入三维世界（2）

qq_42006069 — Fri, 03 Sep 2021 14:02:23 +0800

显示生活中，我们经常遇到两个物体一前一后放在桌子上，观察时，前面的物体会把后面的物体遮住一部分的情况。隐藏面消除为了解决上述问题，WebGL提供了隐藏面消除功能。让我们绘制场景而不必顾及各物体在缓冲区中的顺序,因为那些远处的物体会自动被近处的物体挡住,不会被绘制出来。开启隐藏面消除功能，需要遵循以下两步: 1．开启隐藏面消除功能。（gl.enable (gl. DEPTH_TEST); 2．在绘制之前，清除深度缓冲区。（gl.clear (gl.DEPTH_BUFEER_BIT); 深度冲突当几何

webgl_进入三维世界（1）

qq_42006069 — Fri, 03 Sep 2021 11:39:15 +0800

激动的心颤抖的手，今天就开始三维空间的学习。首先我们就从最简单的立方体开始分析吧；立方体由三角形构成首先我们要明白三维物体也是由二维图形(特别是三角形)组成的。如图所示,12个三角形组成了一个立方体。那么我们可能就想，既然三维物体是由三角形组成的，那只需逐个绘制组成物体的每个三角形，最终就可以绘制出整个三维物体了。但是，三维与二维还有一个显著区别;在绘制二维图形时，只需要考虑顶点的x和y坐标，而绘制三维物体时，还得考虑它们的深度信息（也就是z轴）。其次在三维空间站会有视点和视线的概念。你可以理解成

webgl_图形变换(旋转，平移，缩放)

qq_42006069 — Fri, 03 Sep 2021 10:41:50 +0800

平移平移一个三角形，你需要对顶点坐标的每个分量(x和y)，加上三角形在对应轴（如X轴或Y轴）上平移的距离。比如，将点p(x, y, z)平移到p’(x’, y’, z’)，在X轴、Y轴、Z轴三个方向上平移的距离分别为Tx，Ty，Tz，其中Tz为0，如下图所示。那么在坐标的对应分量上，直接加上这些T值，就可以确定p’的坐标了，如下所示。 x’= x +Tx y’ = y + Ty z’=z+Tz 我们只需要着色器中为顶点坐标的每个分量加上一个常量就可以实现上面的等式。显然，这是一个逐顶点操作，上述修改应

OpenGL常用函数

qq_42006069 — Tue, 31 Aug 2021 18:01:17 +0800

Clamp函数 Clamp函数可以将随机变化的数值限制在一个给定的区间[min, max]内： template T Clamp(T x, T min, T max) { if (x > max) return max; if (x < min) return min; return x; } mod函数 mod函数是一个求余函数，其格式为： mod(nExp1,nExp2)，即是两个数值表达式作除法运算后的

cocos creator 2.4.0 渲染流程详解

qq_42006069 — Tue, 31 Aug 2021 15:35:10 +0800

这个作者分析的很细：https://www.jianshu.com/u/01450ce9ecbf 鼓掌鼓掌。

webgl纹理

qq_42006069 — Mon, 23 Aug 2021 17:33:29 +0800

效果图：操作步骤： 1.创建HTML5 canvas 2.获取画布 canvas 的 ID 3.获取WebGL 4.编译着色器，合并程序 //顶点着色器程序 var VSHADER_SOURCE = "attribute vec4 a_Position;" + "attribute vec2 a_TextCoord;" + // 接受纹理坐标 "varying vec2 v_TexCoord;" + // 传递纹理坐标 "vo

顶点着色器到片元着色器的过程，varying变量

qq_42006069 — Mon, 16 Aug 2021 18:40:53 +0800

varying 变量：从顶点着色器向片元着色器中传入数据。 varying 变量只能是float（以及相关的vec2，vec3，vec4，mat2，mat3，mat4）。前面我们了解到顶点着色器是控制的几何图形的位置、尺寸甚至指定几何图形的颜色，最终片元着色器来决定几何图形的颜色！但是我们并不知道他们之间的具体过程！下面就来了解两个过程：图形装配过程：这一步的任务是，讲孤立的顶点左边装配成几何图形，几何图形的类别由gl.drawArrays()函数的第一个参数决定。光栅化过程：这一步的任务是将

使用shader写序列帧动画

qq_42006069 — Mon, 09 Aug 2021 14:11:52 +0800

额，闲的没事那就写个简单的序列帧动画吧。。。这真是个奇奇怪怪的想法，但是很实用哈哈哈。美术给你一张图，大概就是这样的然后就讲一下大致思路吧：把图片分成12等分，，每次一次采样即可，如上图，按照1,2,3,4…的顺序采样显示；传入一个开始坐标即可； //effect代码 void main () { vec4 o = vec4(1, 1, 1, 1); float unit = 0.25; float unitY = 1.0/3.0; #if USE_TEXTURE

webGL入门(4)

qq_42006069 — Thu, 05 Aug 2021 22:40:33 +0800

使用uniform变量上一节讲过， uniform变量主要用于所以顶点都相同的(与顶点无关的)数据。与attribute变量传递类似，不同的是uniform传递的目标是片元着色器。实例，鼠标点击生产点，点的位置在不同的象限点的颜色不同 // 顶点着色器程序 var VSHADER_SOURCE = 'attribute vec4 a_Position;\n'+ 'void main() {\n' + ' gl_Position = a_Position ;\n' +

webGL入门(3)

qq_42006069 — Thu, 05 Aug 2021 21:49:54 +0800

使用attribute变量使用目的：将位置信息从js代码中传递给顶点着色器，主要有两种方式，attribute变量和uniform变量； attribute变量：与顶点相关的数据； uniform变量：所以顶点都相同的数据。上代码： // 顶点着色器程序 var VSHADER_SOURCE = 'attribute vec4 a_Position;\n'+ 'void main() {\n' + ' gl_Position = a_Position ;\n' + '

cocos使用自定义material显示问题

qq_42006069 — Thu, 05 Aug 2021 16:38:49 +0800

这个问题公司大佬刚跟我啰嗦了好多遍的，但是我用的时候没有注意，就记录一下吧！问题：图片使用自定义的material对图片纹理进行裁剪后显示不全想要的效果：头像从远程服务器下载后切成圆角显示出现的效果: 在查找过程中我发现替换成cocos自带的material就不会出现问题，一度以为我自己写的material出现问题，其实后面才知道默认的材质是没有对图片纹理进行操作的，所以它没问题。然后查找代码发现把他的packable改为false就好了。。太坑了，cocos中的图片下载后它会默认packab

webGL入门(1)

qq_42006069 — Wed, 04 Aug 2021 23:35:52 +0800

1.什么是webGL? webgl就是在网页上绘制和渲染图形(3D图形),并允许用户与之进行交互; 2.我为什么学webGL? 游戏开发中优化性能，它在web上可以开发直接查看效果，便于转化到游戏开发中理解。 3.最简单的webGL程序(清空绘图区)