# cocos-creator-examples **Repository Path**: wong4git6/cocos-creator-examples ## Basic Information - **Project Name**: cocos-creator-examples - **Description**: clone https://github.com/baiyuwubing/cocos-creator-examples - **Primary Language**: TypeScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 84 - **Created**: 2022-05-17 - **Last Updated**: 2022-05-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # cocos-creator-examples cocos creator 一些使用实例 (刚体挖洞/流体效果/shader/纹理处理) 欢迎关注微信公众号 `白玉无冰` 导航：https://mp.weixin.qq.com/s/Ht0kIbaeBEds_wUeUlu8JQ ![](./img/about.jpg) author: http://lamyoung.com/ B站视频: https://space.bilibili.com/1756070/video github: https://github.com/baiyuwubing qq 交流群: 859642112 gitee 同步地址： https://gitee.com/lamyoung/cocos-creator-examples ## 一个简单的~~广告播放器~~小游戏(可以点两下支持一下～) ![](./img/qiuqiu.jpg) ## [折纸效果](./folding) cocos creator v3.0.0 ![](./img/folding.gif) https://mp.weixin.qq.com/s/1guPBbKkG6iWCcWa_uz6CQ http://store.cocos.com/app/detail/2844 ## [垂直文本Label](./VerticalLabelTest) cocos creator v3.0.0 https://mp.weixin.qq.com/s/tMT9ZMFvYf9QoIdWaL8fOQ ![](./img/VerticalLabelTest.gif) ## [2.4.x](./2.4.x) cocos creator 2.4.x demo ### demo05 2d图片光照效果， add 2d sprite a base light (Blinn-Phong Light Model) 基础光照模型！CocosCreator2D光照! https://mp.weixin.qq.com/s/RtARzTb9KahZ70Ct5r8GRw ![](./2.4.x/img/demo05.gif) ### demo01 brightness/saturation/constrast (亮度/饱和度/对比度 两种实现方式) https://mp.weixin.qq.com/s/bKjJS3KX2rEI0F7_4QPJEw ![](./2.4.x/img/demo01.gif) ### demo02 多边形裁剪图片与gizmo https://mp.weixin.qq.com/s/EkMP_UcFcWTlSn_4Ml8zsA ![](./2.4.x/img/demo02.gif) ### demo03 Cocos Creator Liquidfun https://mp.weixin.qq.com/s/T-xkgkLonYqA_4yqPIYLSg ![](./2.4.x/img/demo03.gif) ### demo04 噪声纹理之消融效果！ shader 入门精要！ Cocos Creator Shader ! https://mp.weixin.qq.com/s/9od3cxdinGJ4q8Zjfc4qFQ ![](./2.4.x/img/demo04.gif) ## [quadtree_collision](./quadtree_collision) 四叉树碰撞检测 https://mp.weixin.qq.com/s/gkvOd11kbZYcKXkBc7V8kQ cocos creator v2.3.3 ![](./img/quadtree_collision.gif) ## [bg_scroll_3d](./bg_scroll_3d) 滚动背景图3d效果 cocos creator v2.3.3 图文: https://mp.weixin.qq.com/s/fJxE-Z0BEiQgAhFoJeHjlw ![](./img/bg_scroll_3d.gif) ## [color_Assembler2D](./color_Assembler2D) 渐变色图片/文字 cocos creator v2.3.3 图文: https://mp.weixin.qq.com/s/8pMNeD78fBvF480xiGJCVQ ![](./img/color_Assembler2D.gif) ## [graphics_sprite](./graphics_sprite) 画线-纹理 cocos creator v2.3.3 `cc.Graphics` + `cc.Sprite` 实现画线纹理。 ### `main_rope.fire` 有方向的纹理，类似绳子。 图文: part-3: https://mp.weixin.qq.com/s/QvJ2DHFhUxO3doNviCqBIg ![](./img/graphics_sprite_rope.gif) ### `main.fire` 普通纹理。 图文: part-1: https://mp.weixin.qq.com/s/ozXjdpyid5f2Xwo7uo0MuQ part-2: https://mp.weixin.qq.com/s/xniwz-a_FI0snWqqPd2NOg ![](./img/graphics_sprite.gif) 前置教程: [初探精灵中的网格渲染模式 ！](https://mp.weixin.qq.com/s/2FcixeoV-Fg-7OodILECeg) ## [dig_hole_3d](./dig_hole_3d) cocos creator v2.3.3 挖洞效果-3d 效果 图文：https://mp.weixin.qq.com/s/LJCdpdiRn9vZe83pf3ysUg ![](./img/dig_hole_3d.gif) ## [dig_hole](./dig_hole) cocos creator v2.3.3 ### 分块挖洞 `Main_poly_piecewise.fire` 图文: https://mp.weixin.qq.com/s/5JbIX7kHyZoGvJjGrXaZug ![](./img/dig_hole_poly_piece.gif) ### 多边形刚体挖洞 `Main_poly.fire` ![](./img/dig_hole_poly.gif) 填坑篇: https://mp.weixin.qq.com/s/bL4VTlmzAO7ZzxB9NZ-R8A 图文讲解: https://mp.weixin.qq.com/s/jxKeM2Ah5UHlGTryksdr6Q ### 链条挖洞 `Main.fire` 物理挖洞！涂抹地形! 优化篇来了！图文！视频！源码！通通来了！ 优化篇原文: https://mp.weixin.qq.com/s/4lFv9p346yEg_PSOwN0WKw 优化篇视频: https://b23.tv/BV1GV411d7eq 实现篇: https://mp.weixin.qq.com/s/Xcf-WPaqiIo-ef6O_IITFg 实现篇视频讲解 https://b23.tv/BV1jz411z7w1 在线体验: http://lamyoung.gitee.io/web/dig_hole/ ![](./img/dig_hole.gif) ## [shader_animation](./shader_animation) cocos creator v2.3.3 ### 波纹式的摇摆卷动(旗子/水纹波动效果) [图文讲解](https://mp.weixin.qq.com/s/Ubv-wbA8cOPR58GM50bXrA) ![](./img/shader_animation_sin.gif) ### loading 动画 [图文讲解](https://mp.weixin.qq.com/s/QhKzmtpwiQgOzsGPcBHSJQ) [视频讲解](https://b23.tv/BV1eg4y1873u) ![](./img/shader_animation.gif) ## [attacked](./attacked) [攻击闪白效果，shader入门](http://lamyoung.com/cocos-creator/2020/03/31/ccc-attacked/) cocos creator v2.2.2 ![](./img/attacked.gif) ## [water](./water) [欢乐水杯(happay glass)的流体实现！](https://mp.weixin.qq.com/s/8Kz0l46YWxcx6cLukAnt9w) cocos creator v2.2.2 ![](./img/water.gif) ## [splash](./splash) [物体随机飞溅运动！ Cocos Creator!](https://mp.weixin.qq.com/s/Qu9Uy55KvUX5sSLt_PTUJQ) 使用 box-muller 算法 产生正态分布。 cocos creator v2.2.2 ![](./img/splash.gif) ## [snake](./snake) cocos creator v2.2.2 [贪吃蛇大作战！蛇移动的思考与实现！](https://mp.weixin.qq.com/s/qZ7CGFRmncxvQZ0Hhs4g5g) ![](./img/snake.gif) [摇杆控制器！Cocos Creator!](https://mp.weixin.qq.com/s/XbmMXUuOmSL3IvAPp-ThNQ) ## [radar](./radar) 雷达图 [雷达图的一种实现](https://mp.weixin.qq.com/s/hgybmgTHlga0KgHfz1vIfg) cocos creator v2.2.2 ![](./img/radar.jpg) ## [fractal](./fractal) 分形着色器 [fractal-分形的奥秘-julia-mandelbrot-shader-文章](https://mp.weixin.qq.com/s/OuQaI18LwX3Lw7aRcKjDOw) cocos creator v2.2.2 ![](./img/fractal.gif) ![](./img/fractal.jpg) ## [gradient](./gradient) [图像渐变-shader - 文章](https://mp.weixin.qq.com/s/tN2Al3kfo4HwIBGXNjmEDA) cocos creator v2.2.2 ![](./img/gradient.gif) ## [convolutions](./convolutions) [利用卷积内核实现各种滤镜效果。模糊、锐化、浮雕效果 - 文章](https://mp.weixin.qq.com/s/WAajs8p69X8UJFvNiYuNDA) cocos creator v2.2.2 ![](./img/convolutions.jpg) ## [flag](./flag) [飘扬的旗帜 shader - 文章](https://mp.weixin.qq.com/s/E5ZjzIFozvPRIIytmtiuTQ) ![](./img/flag.gif) cocos creator v2.2.2 ## [meshTexture](./meshTexture) [mesh 多边形裁剪图片-文章](https://mp.weixin.qq.com/s/r1IEcFXdy4O2Fn4IPs1m_w) ![](./img/meshTexture.jpg) [用鼠标编辑的多边形裁剪-gizmo 插件入门-文章](https://mp.weixin.qq.com/s/YjH9PAWvtgPiDGxp9y7big) ![](./img/meshTexture.gif) cocos creator v2.2.2 ## [parabola](./parabola) [新增瞄准线-文章](https://mp.weixin.qq.com/s/Z-7zQuvjIaBzyQRJslH7bQ) ![](./img/parabola2.gif) [平抛高抛发射效果-文章](https://mp.weixin.qq.com/s/5GgL_pONl0bQPxFz4xtjmQ) ![](./img/parabola.gif) [在线预览](http://lamyoung.gitee.io/web/parabola/) 更新至 cocos creator v2.2.2 ## [aimLine](./aimLine) [反复横跳的瞄准线-文章](https://mp.weixin.qq.com/s/-zh_4SEd_QMk56T0yE01hQ) ![](./img/aimLine.gif) cocos creator v2.0.8 ## [runMan](./runMan) [蹦跑的小人-文章](https://mp.weixin.qq.com/s/DiB031FORp2JNmWXTdVzmw) ![](./img/runMan.gif) cocos creator v2.0.8 ## [ktvLabel](./ktvLabel) [KTV 歌词逐字效果-文章](https://mp.weixin.qq.com/s/os1_7hd3pZX32c128O7QGA) ![](./img/ktvLabel.gif) cocos creator v2.0.8 ## [shadow](./shadow) [残影拖尾效果-文章](https://mp.weixin.qq.com/s/iuoyQvCPryajMsfga2IofA) ![](./img/shadow.gif) cocos creator v2.0.8 --- ## 打赏奶茶🥤鸡腿🍗 ### 微信 ![](./img/wx.jpeg) ### 支付宝 ![](./img/alipay.jpg) ``` /* █████████████████████████████████████ █████████████████████████████████████ ████ ▄▄▄▄▄ █▀█ █▄██▀▄ ▄▄██ ▄▄▄▄▄ ████ ████ █ █ █▀▀▀█ ▀▄▀▀▀█▄▀█ █ █ ████ ████ █▄▄▄█ █▀ █▀▀▀ ▀▄▄ ▄ █ █▄▄▄█ ████ ████▄▄▄▄▄▄▄█▄▀ ▀▄█ ▀▄█▄▀ █▄▄▄▄▄▄▄████ ████▄▄ ▄▀▄▄ ▄▀▄▀▀▄▄▄ █ █ ▀ ▀▄█▄▀████ ████▀ ▄ █▄█▀█▄█▀█ ▀▄ █ ▀ ▄▄██▀█████ ████ ▄▀▄▄▀▄ █▄▄█▄ ▀▄▀ ▀ ▀ ▀▀▀▄ █▀████ ████▀ ██ ▀▄ ▄██ ▄█▀▄ ██▀ ▀ █▄█▄▀█████ ████ ▄██▄▀ █▀▄▀▄▀▄▄▄▄ ▀█▀ ▀▀ █▀████ ████ █▄ █ ▄ █▀ █▀▄█▄▄▄▄▀▄▄█▄▄▄▄▀█████ ████▄█▄█▄█▄█▀ ▄█▄ ▀▄██ ▄▄▄ ▀ ████ ████ ▄▄▄▄▄ █▄██ ▄█▀ ▄ █▄█ ▄▀█████ ████ █ █ █ ▄█▄ ▀ ▀▀██ ▄▄▄▄ ▄▀ ████ ████ █▄▄▄█ █ ▄▄▀ ▄█▄█▄█▄ ▀▄ ▄ █████ ████▄▄▄▄▄▄▄█▄██▄▄██▄▄▄█████▄▄█▄██████ █████████████████████████████████████ █████████████████████████████████████ */ ```