baiyuwubing / cocos-creator-examples

cocos creator 一些使用实例

cocos-creator-examples

cocos creator 一些使用实例 (刚体挖洞/流体效果/shader/纹理处理)

欢迎关注微信公众号 白玉无冰

导航：https://mp.weixin.qq.com/s/Ht0kIbaeBEds_wUeUlu8JQ

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

一个简单的广告播放器小游戏(可以点两下支持一下～)

折纸效果

cocos creator v3.0.0

https://mp.weixin.qq.com/s/1guPBbKkG6iWCcWa_uz6CQ

http://store.cocos.com/app/detail/2844

垂直文本Label

cocos creator v3.0.0

https://mp.weixin.qq.com/s/tMT9ZMFvYf9QoIdWaL8fOQ

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

demo01

brightness/saturation/constrast (亮度/饱和度/对比度 两种实现方式)

https://mp.weixin.qq.com/s/bKjJS3KX2rEI0F7_4QPJEw

demo02

多边形裁剪图片与gizmo

https://mp.weixin.qq.com/s/EkMP_UcFcWTlSn_4Ml8zsA

demo03

Cocos Creator Liquidfun

https://mp.weixin.qq.com/s/T-xkgkLonYqA_4yqPIYLSg

demo04

噪声纹理之消融效果！ shader 入门精要！ Cocos Creator Shader !

https://mp.weixin.qq.com/s/9od3cxdinGJ4q8Zjfc4qFQ

quadtree_collision

四叉树碰撞检测 https://mp.weixin.qq.com/s/gkvOd11kbZYcKXkBc7V8kQ

cocos creator v2.3.3

bg_scroll_3d

滚动背景图3d效果

cocos creator v2.3.3

图文: https://mp.weixin.qq.com/s/fJxE-Z0BEiQgAhFoJeHjlw

color_Assembler2D

渐变色图片/文字

cocos creator v2.3.3

图文: https://mp.weixin.qq.com/s/8pMNeD78fBvF480xiGJCVQ

graphics_sprite

画线-纹理

cocos creator v2.3.3

cc.Graphics + cc.Sprite 实现画线纹理。

main_rope.fire 有方向的纹理，类似绳子。

图文:
part-3: https://mp.weixin.qq.com/s/QvJ2DHFhUxO3doNviCqBIg

main.fire 普通纹理。

图文:
part-1: https://mp.weixin.qq.com/s/ozXjdpyid5f2Xwo7uo0MuQ
part-2: https://mp.weixin.qq.com/s/xniwz-a_FI0snWqqPd2NOg

前置教程: 初探精灵中的网格渲染模式 ！

dig_hole_3d

cocos creator v2.3.3

挖洞效果-3d 效果

图文：https://mp.weixin.qq.com/s/LJCdpdiRn9vZe83pf3ysUg

dig_hole

cocos creator v2.3.3

分块挖洞

Main_poly_piecewise.fire

图文: https://mp.weixin.qq.com/s/5JbIX7kHyZoGvJjGrXaZug

多边形刚体挖洞

Main_poly.fire

填坑篇: 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/

shader_animation

cocos creator v2.3.3

波纹式的摇摆卷动(旗子/水纹波动效果)

图文讲解

loading 动画

图文讲解
视频讲解

attacked

攻击闪白效果，shader入门

cocos creator v2.2.2

water

欢乐水杯(happay glass)的流体实现！

cocos creator v2.2.2

splash

物体随机飞溅运动！ Cocos Creator!

使用 box-muller 算法 产生正态分布。

cocos creator v2.2.2

snake

cocos creator v2.2.2

贪吃蛇大作战！蛇移动的思考与实现！

摇杆控制器！Cocos Creator!

radar

雷达图

雷达图的一种实现

cocos creator v2.2.2

fractal

分形着色器

fractal-分形的奥秘-julia-mandelbrot-shader-文章

cocos creator v2.2.2

gradient

图像渐变-shader - 文章

cocos creator v2.2.2

convolutions

利用卷积内核实现各种滤镜效果。模糊、锐化、浮雕效果 - 文章

cocos creator v2.2.2

flag

飘扬的旗帜 shader - 文章

cocos creator v2.2.2

meshTexture

mesh 多边形裁剪图片-文章

用鼠标编辑的多边形裁剪-gizmo 插件入门-文章

cocos creator v2.2.2

parabola

新增瞄准线-文章

平抛高抛发射效果-文章

在线预览

更新至 cocos creator v2.2.2

aimLine

反复横跳的瞄准线-文章

cocos creator v2.0.8

runMan

蹦跑的小人-文章

cocos creator v2.0.8

ktvLabel

KTV 歌词逐字效果-文章

cocos creator v2.0.8

shadow

残影拖尾效果-文章

cocos creator v2.0.8

---

打赏奶茶🥤鸡腿🍗

微信

支付宝

/*
█████████████████████████████████████
█████████████████████████████████████
████ ▄▄▄▄▄ █▀█ █▄██▀▄ ▄▄██ ▄▄▄▄▄ ████
████ █   █ █▀▀▀█ ▀▄▀▀▀█▄▀█ █   █ ████
████ █▄▄▄█ █▀ █▀▀▀ ▀▄▄ ▄ █ █▄▄▄█ ████
████▄▄▄▄▄▄▄█▄▀ ▀▄█ ▀▄█▄▀ █▄▄▄▄▄▄▄████
████▄▄  ▄▀▄▄ ▄▀▄▀▀▄▄▄ █ █ ▀ ▀▄█▄▀████
████▀ ▄  █▄█▀█▄█▀█  ▀▄ █ ▀ ▄▄██▀█████
████ ▄▀▄▄▀▄ █▄▄█▄ ▀▄▀ ▀ ▀ ▀▀▀▄ █▀████
████▀ ██ ▀▄ ▄██ ▄█▀▄ ██▀ ▀ █▄█▄▀█████
████   ▄██▄▀ █▀▄▀▄▀▄▄▄▄ ▀█▀ ▀▀ █▀████
████ █▄ █ ▄ █▀ █▀▄█▄▄▄▄▀▄▄█▄▄▄▄▀█████
████▄█▄█▄█▄█▀ ▄█▄   ▀▄██ ▄▄▄ ▀   ████
████ ▄▄▄▄▄ █▄██ ▄█▀  ▄   █▄█  ▄▀█████
████ █   █ █ ▄█▄ ▀  ▀▀██ ▄▄▄▄ ▄▀ ████
████ █▄▄▄█ █ ▄▄▀ ▄█▄█▄█▄ ▀▄   ▄ █████
████▄▄▄▄▄▄▄█▄██▄▄██▄▄▄█████▄▄█▄██████
█████████████████████████████████████
█████████████████████████████████████
*/

cocos-creator-examples's Issues

mesh图片剪裁有bug

mesh图片剪裁有bug项目中.js组件有bug
js代码109行
builtinMaterial.copy(cc.MaterialVariant.createWithBuiltin("unlit", this)); 改成==> builtinMaterial=cc.MaterialVariant.createWithBuiltin("unlit", this)

graphics_sprite tutorial can't display multiple line/instances

I have tried (without success) to draw multiple lines but if I have more then one instance of GraphicsSpriteMesh all of them simply won't draw.

Any suggestion for me to have multiple GraphicsSpriteMesh?

Blend MeshPoligonSprite

當在 MeshPoligonSprite 的 SpriteFrame 中使用具有半透明區域的紋理並將一個帶有 MeshRenderer 的 Node1 覆蓋在另一個帶有 MeshRenderer 的 Node2 上時，將獲得遮罩效果而不是混合疊加。 同時，Sprite Node上的疊加是正確的。 在內置的無光照著色器中，啟用了混合模式 (true)。 此外，Src Blend、Dst Blend 的各種疊加選項已添加到著色器中。 但它沒有給出任何結果。
可能gfx.VertexFormat 中關於Color 的信息不夠多，但是如何應用它並不清楚。

When using a texture with translucent areas in a SpriteFrame for a MeshPoligonSprite and overlaying one Node1 with a MeshRenderer over another Node2 with a MeshRenderer, a mask effect is obtained instead of a Blend overlay. At the same time, the overlay on the Sprite Node is correct. In the builtin-unlit shader, the blend mode is enabled (true). Also, various overlay options for Src Blend, Dst Blend were added to the shader. But it didn't give any result.
Perhaps there is not enough information about Color in gfx.VertexFormat, but how to apply it is not clear.

请问3.0还能实现吗？

gradient with a sliced sprite.

hi,
i tried your gradient tool and it works well with simple sprites. however with sliced sprites, in ColorAssembler2D, the uintVerts.length is coming out to be 80, and only a tiny strip on the bottom of the sprite is getting the colors. please provide a solution for this problem.
Thanks!

水波浪能是不是只能作用图片？能作用与Graphics 么