Cocos Creator动画的几种创建方式

最新推荐文章于 2024-05-25 09:16:24 发布
最新推荐文章于 2024-05-25 09:16:24 发布
阅读量1.7w 收藏 13
点赞数 1
分类专栏： Cocos Creator JavaScript 文章标签： 动态创建Animation  Cocos Creator
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tom_and_Jerry_zhao/article/details/80195523
版权


Cocos Creator动画的几种创建方式


1.  骨骼动画：以动画文件格式为altas json为例，在节点上面添加组件Spine Skeleton，将资源为atlas的文件直接拖进Skeleton     Data选项：注意Premultiplied Alpha的预乘参数不用勾选，关掉颜色预乘效果

                                                                


2. Cocos Creater添加帧动画Animation组件后，则在动画编辑器里面可以看到新建Animation Clip的选项，创建Clip,右键+号添加cc sprite frame, 直接将帧动画资源拖进下面时间帧里面，具体操作参考官方介绍视频。

                                                                    


3. 纯代码添加Animation Clip动画，类似于2dx, 缓存精灵帧，运行Animate，下面例子步骤是创建节点，节点添加精灵纹理，动画组件，加入帧动画，播放动画过程


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  木的感情的杀手
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    13
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  4
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
cocos2dx 创建动画的几种方式

				
			

			

				

					strivero的博客
				

				

					03-21
					
					8474
					
				

			

		

		

			
				
使用大图创建帧动画// 首先将大图添加到缓存
SpriteFrameCache::getInstance()->addSpriteFramesWithFile(大图名.plist)；//  保存动画的数组 
 Vector{SpriteFrame*> sf2;  (是一对尖括号)// 通过名字的方式从缓存中查找到图片并创建精灵帧 
sf2.pushBack(SpriteFrameCache::get

			
		

	



                

              
                



	

		

			

				
					
Cocos Creator 3.x拖尾效果.zip

				
			

			

				

					09-08
				

			

		

		

			
				
Cocos Creator 3.x 拖尾效果

			
		

	



                


  
              

                


	

		

			

				
					
Cocos Creator 帧动画播放组件制作详解

				
			

			

				

					voidinit的专栏
				

				

					05-25
					
					634
					
				

			

		

		

			
				
Cocos Creator 是一个强大的游戏开发工具，提供了丰富的功能和组件，其中帧动画播放组件是游戏开发中常用的组件之一，通过帧动画播放组件可以实现角色动画、特效动画等效果。帧动画播放组件是游戏开发中常用的组件之一，通过设置帧动画的属性可以实现各种动画效果。帧动画是由一系列连续的静态图像（帧）组成的动画，通过快速播放这些帧可以形成连续的动画效果。在 Cocos Creator 中，帧动画播放组件可以实现这一效果，通过设置帧动画的帧率、循环播放等属性，可以实现各种动画效果。

			
		

	





	

		

			

				
					
cocos creator 手动创建动画

				
			

			

				

					caideb的博客
				

				

					05-07
					
					596
					
				

			

		

		

			
				
cc.Class({
    extends: cc.Component,

    properties: {
        resource:{
            default : null,
            type : cc.SpriteFrame,
        },
    },

    onLoad: function () {
		
		var nodeTe...

			
		

	



		

			
		



	

		

			

				
					
【CocosCreator入门】Animation动画的制作和使用（下）

				
			

			

				

					bark2003的专栏
				

				

					01-17
					
					1万+
					
				

			

		

		

			
				
原文地址：https://www.jianshu.com/p/9874f917602d

上一篇我们学习了怎么制作一个AnimationClip，现在我们来学习如何使用它。

为了演示一个完整的流程，我们来重新创建一个节点：bomb（炸弹），用他来播放上次制作的爆炸的动画。

1. 创建一个节点，并命名为bomb：






为了演示这次的内容，我们把上次的blast先

			
		

	





	

		

			

				
					
三种方式，浅谈 Cocos Creator 的动画添加

				
			

			

				

					北桥苏的博客
				

				

					03-18
					
					1105
					
				

			

		

		

			
				
虽然 Cocos 的官方文档对动画系统做了较详细的介绍，但是对于刚接触的同学（比如我）来说还是不太友好。尽管如此，我就按文档加社区帖子一起实践了一下。为了方便忘记后能快速捡起，所以就用我的方式结合使用场景，简单介绍一下 Cocos Creator 动画添加的三种方式。

			
		

	





	

		

			

				
					
CocosCreator-IOS 开发篇.zip

				
			

			

				

					01-11
				

			

		

		

			
				
CocosCreator以其直观的可视化编辑器和强大的脚本系统而闻名，支持JavaScript和TypeScript两种编程语言。它内置了物理引擎、粒子系统、动画编辑器等一系列工具，使得开发者可以快速创建复杂的游戏逻辑和视觉效果。在...

			
		

	





	

		

			

				
					
萌宠消消乐Cocos Creator小游戏

					
最新发布

				
			

			

				

					06-14
				

			

		

		

			
				
《萌宠消消乐》是一款基于Cocos Creator开发的益智类小游戏，它利用了Cocos Creator 2.4.x版本的特性，为玩家提供了一种轻松愉快的休闲娱乐方式。Cocos Creator是一款强大的跨平台游戏开发工具，支持2D和3D游戏制作...

			
		

	





	

		

			

				
					
cocos creator 黄金矿工项目源码

				
			

			

				

					11-14
				

			

		

		

			
				
Cocos Creator内置的动画编辑器使得创建和管理角色动画变得简单，例如，矿工的摆动、抓取等动作可以通过帧动画实现。  3. **物理引擎**：游戏中的碰撞检测和物理运动通常需要用到物理引擎。Cocos Creator内置了Box2D...

			
		

	





	

		

			

				
					
cocos creator 签到模块

				
			

			

				

					11-02
				

			

		

		

			
				
【cocos creator 签到模块】是游戏开发中常用的一种功能，用于增强用户粘性，提供每日奖励机制。Cocos Creator 是一个强大的2D和2.5D游戏开发框架，它提供了完整的编辑器工具链，支持跨平台的发布。在Cocos Creator...

			
		

	





	

		

			

				
					
cocosCreator圣诞节多种动画效果粒子特效Demo.zip

				
			

			

				

					11-29
				

			

		

		

			
				
cocosCreator圣诞节多种动画效果粒子特效Demo，包括了下雪，渐隐渐现，物理引擎，骨骼动画等等简单动画，通俗易懂

			
		

	





	

		

			

				
					
CocosCreator之小小PK帧动画学习

				
			

			

				

					04-05
				

			

		

		

			
				
CocosCreatorV2.0.5 有配套的CSDN博文，新手入门学习必备。

			
		

	





	

		

			

				
					
Cocos2D游戏之旅（五）：三种方法实现技能动画---源代码

				
			

			

				

					08-18
				

			

		

		

			
				
Cocos2D游戏之旅（五）：三种方法实现技能动画 博客讲解地址：
http://blog.csdn.net/qiulanzhu/article/details/47762633

			
		

	





	

		

			

				
					
Cocos Studio 创建帧动画

				
			

			

				

					04-10
				

			

		

		

			
				
使用Cocos Studio 创建的帧动画，使用Cocos Studio 创建帧动画可以提高开发效率，节约开发成本

			
		

	





	

		

			

				
					
cocos creator---动画制作

				
			

			

				

					赳赳万里鲲
				

				

					06-14
					
					5050
					
				

			

		

		

			
				
温馨提示：标准动画为24帧/秒；（即每秒播放画面24张） 
1、创建节点（该节点必须有Sprite组件） 
 
2、在1中创建的节点上添加动画组件，并创建动画保存动画 
 
3、开始编辑动画 
 
4、添加动画属性（添加图片） 


 
5、播放动画

let anim = cc.find('Canvas/test');// 步骤1中创建的节点
anim = anim.getComponent(c...

			
		

	





	

		

			

				
					
Cocos Creator - 制作精灵帧动画

					
热门推荐

				
			

			

				

					deverwh的博客
				

				

					03-16
					
					1万+
					
				

			

		

		

			
				
本文档主要根据官方文档上的图集资源、动画系统、音乐和音效等章节内容进行综合使用。

1、制作图集
制作图集有两种工具：

TexturePacker
Zwoptex（只能在Windows上使用）

我这里使用TexturePacker进行图集制作：
1.准备原始图片，如下图：
      这些都是单张的图，按顺序播放的话，能看出是佐助在释放千鸟技能的一个动画，我们现在就是要将这些图做成图集，并使用......

			
		

	





	

		

			

				
					
CocosCreator中使用Animation制作动画

				
			

			

				

					weixin_42547469的博客
				

				

					12-15
					
					4031
					
				

			

		

		

			
				
CocosCreator中使用Animation制作动画
大家好，今天给大家分享的是关于如何使用CocosCreator来制作动画效果的经验。
我们知道，一个游戏中不可或缺的元素就是动画，比如小鸟展翅动作，自行车咕噜转动，人物走路等。这些简单的动作是一个独立展示的元素，使用动画组件Animation来制作是做合适的。下面我们就来制作一个卡通人物走路的动画效果。
我们使用的工具CocosCreator版本是2.4.3，开发环境是windows10系统。先来创建一个空白的工程，取名AnimationTest。


			
		

	





	

		

			

				
					
CocosCreator 教你玩转Animation动画(第十四篇)

				
			

			

				

					程序员战胜
				

				

					03-07
					
					7925
					
				

			

		

		

			
				
前言：
Animation动画在游戏中是必不可少的，各种人物的走跑跳飞，以及各种表情动作，反正做游戏Animation动画是必修课了。
这一篇章可以学会制作和控制各种动画，主要从一下几个方面介绍：

动画制作流程；
使用Animation动画编辑器制作动画；
代码控制动画；


一、动画制作的流程
创建节点 ----> 挂载Animation组件 ----> 创建Animation C...

			
		

	





	

		

			

				
					
cocos creator shader uv动画

				
			

			

				

					05-10
				

			

		

		

			
				
在Cocos Creator中实现UV动画需要使用Shader技术。以下是一个简单的示例：

1. 创建一个新的材质。在材质上添加一个新的Shader，或者选择一个已经存在的Shader。

2. 在Shader中添加一个uniform变量来控制UV动画的速度。例如：

```
uniform float time;
```

3. 在Shader中添加一个varying变量来获取UV坐标。例如：

```
varying vec2 uv;
```

4. 在Shader中的顶点着色器中，将UV坐标传递给片段着色器。例如：

```
void main()
{
    uv = vec2(cc_vertex.x, cc_vertex.y);
    gl_Position = CC_PMatrix * CC_MVMatrix * vec4(cc_vertex, 1.0);
}
```

5. 在Shader中的片段着色器中，使用时间和UV坐标来计算新的UV坐标。例如：

```
void main()
{
    vec2 newUV = vec2(uv.x + time, uv.y);
    gl_FragColor = texture2D(cc_mainTexture, newUV);
}
```

6. 在代码中，将材质绑定到需要应用UV动画的节点上。例如：

```
let material = cc.Material.createWithShader(shader);
node.getComponent(cc.Sprite).setMaterial(0, material);
```

7. 在每一帧中更新时间变量，以控制UV动画速度。例如：

```
let time = 0;
cc.game.on(cc.game.EVENT_ENGINE_INITED, () => {
    cc.director.getScheduler().schedule(() => {
        time += 0.1;
        material.setProperty('time', time);
    }, this, 0);
});
```

以上是一个简单的示例，可以根据实际需求进行更多的调整。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 4

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值