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

无情的搬砖机

已于 2024-01-31 17:43:40 修改

阅读量746

点赞数 6

CC 4.0 BY-SA版权

分类专栏： cocoscreator 文章标签：游戏引擎 ui 程序人生

于 2024-01-23 20:16:42 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43677520/article/details/135779918

本文介绍了在CocosCreator中如何创建材质和着色器，包括vert:sprite-vs和frag:sprite-fs的具体代码，步骤涉及挂载Sprite、设置深度和混合模式，以及将代码应用到effect文件中以实现动画效果。

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

CCEffect %{
   
   
  techniques:
  - passes:
    - vert: sprite-vs:vert
      frag: sprite-fs:frag
      depthStencilState:
        depthTest: false
        depthWrite: false

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

无情的搬砖机

关注关注

6
点赞
踩
10

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

刀客

07-27

1589

先上效果： 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

cocos creator实现图片的循环滚动效果

最新发布

深之JohnChen的专栏

05-13

856

ShaderEffect 是 Qt 中用于实现自定义着色器效果的功能强大的类，但不当使用可能导致性能问题。

Cocos Creator | 通过 effect 实现卷轴展开和收拢效果

Valiancer

09-11

2209

源码获取请关注公众号： // 号外// 本公众号由我和 honmono 共同维护，honmono 目前主要分享一些神奇的 shader 效果，各位大佬敬请期待 // 开发工具// creator 实现卷轴展开和收拢效果. 版本2.4.4.源码位于文章末位, 需要的可以自取. 01 效果预览 02 实现方案两种方案通过自定义顶点+顶点着色器实现. 通过片元做色器实现. 2方案二片元做色器实现看图,...

Cocos creator(2d) 使用 shader + uv 实现单张图片衔接滚动效果

liuzhimayi的专栏

08-04

2633

在游戏中，如何实现背景图片的无限滚？能不能用shader滚动uv的方式来实现？本文给出cocos creator 2.4.3 版本的解决方案，试试看 :)

cocos creator 利用shader 实现探照灯效果

lck8989的博客

06-14

2549

【进击的Shader】【入门二】Cocos Shader Effect 实现Sprite 边缘光效果，圆角裁切抗锯齿效果，高斯模糊效果

weixin_43677520的博客

01-31

638

cocos creator Effect sprite 边缘光效果，圆角裁切效果，高斯模糊效果

11. ShaderEffect的简单使用

山间点烟雨

02-23

430

这个控件一般是用来对图像进行操作的，其中有两个经常用到的属性 ***fragmentShader*** 和 ***vertexShader***，前者的输出量一般是 gl_FragColor，控制着源文件的颜色值，后者的输出量一般为 gl_Position，控制着源文件的位置坐标。可以在这个控件当中使用 property 自定义属性，并在shader语法中使用 uniform 关键字定义变量，这样自定义属性就会自动传输到shader语法中进行使用。

cocos cretor shader effect-the book of shader前言

JoeyHuangzx的专栏

02-02

2680

前言说来惭愧，半年前开始接触cocso creator shader的时候，看了官方教程，看了大神写的例子，搞懂了一些语法概念。可是当时看一遍有种似懂非懂的感觉，那种感觉就是听过很多道理，任然过不好一生。在cocos论坛里有大神也分享过自己的shader教程例子，那些什么内外发光，高新模糊什么的滤镜效果，当时看的时候感觉懂了，可是一到自己想写点自己的东西，就完成无从下手。就这样，后面过了一段时间后，学习shader这件事，慢慢的就沉下去了，完成没动力去学了。过了几个月，因为某些原因，心血来潮了，又想重

CocosCreator Effect (Shader) - 斜条纹如何画

Ethan|实验室

12-12

2678

cocoscreator 条纹怎么画？锯齿的处理，透明区域的处理。一步一步的变换过程，非常简单。

QML使用ShaderEffect绘制波纹

龚建波

06-07

1617

0.前言对于 ShaderEffect 的介绍请看 Qt 文档：https://doc.qt.io/qt-5/qml-qtquick-shadereffect.html 之前用QtGraphicalEffects 模块的镜像渐变做过波纹效果，但是那个GradientStop 不能放到 Repeator 里，要根据参数动态设置波纹大小就需要 createComponent 之类的。最近用 ShaderEffect 又重新实现了下波纹效果。感觉最麻烦的就是抗锯齿，最终效果勉强，不过没 QtGraphi..

Qml-ShaderEffect的使用

u013125105的博客

10-29

997

ShaderEffect使用自定义的顶点和片段着色器用于渲染一个矩形。用于在qml场景中添加阴影、模糊、着色和页面卷曲等效果。Qt5和Qt6中ShaderEffect有一定区别，在Qt6中由于支持不同的渲染API，ShaderEffect是用统一的qsb文件来满足对不同的渲染API支持。使用Qt6提供的qsb.exe工具来将顶点着色器和片段着色器生成qsb文件。在Shader的编写中，顶点着色器默认输入有两个顶点：vec4 qt_Vertex 在location = 0,顶点坐标；

CocosCreator1.x实现水流动的效果

qq_18138105的博客

04-07

3394

CocosCreator1.x实现水流动的效果 Cocos Creator版本：1.10.2 运行结果：(H5和原生都支持) 场景: 脚本： HelloWorld.js： let shader = require(`shader`); cc.Class({ extends: cc.Component, properties: { water: cc.Node,...

Cocos Creator Shader入门实战(三)：CCEffect参数配置讲解

鹤九日的博客

03-09

1515

Cocos Shader Effect资源配置参数的讲解

Qt 6.5中的后期处理效果

aggs1990的专栏

02-24

1106

首先，让我们尝试可视化各种组件如何相互映射，即使用Qt 6.5和更高版本构建的新项目的推荐API和工具是什么。同时，请注意，Qt 6.5中显示的所有组件均已存在且功能齐全，此时未删除任何组件。严格来说，这有点简化，因为我们很快就会看到，任何2D效果方法都可以用于典型的View3D项目。这意味着QtQuick3D.Effects框也可以链接到EffectMaker应用程序，甚至可以链接到ShaderEffect。

cocos creator 用shader实现流光效果

lnn0904的博客

07-15

2776

cocoscreator用shader实现流光效果

CocosCreator2.3.2 Shader Effect学习

SlowFeather's blog

04-15

397

CocosCreator2.3.2 Shader Effect学习前言简单翻译前言项目需要一个水面的效果。。但是正在学习简单翻译 // Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd. // Note: Current format version is experiment, the format may be changed. // The future format may not be compatible, you may ne

Cocos Creator | ShaderLab：spine和sprite受击闪白特效

Valiancer

12-08

3144