初识ngCore之简单的多帧动画实现

最新推荐文章于 2025-08-09 00:00:19 发布

pobi

最新推荐文章于 2025-08-09 00:00:19 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： NgCore 文章标签： function 引擎游戏

本文链接：https://blog.youkuaiyun.com/tu_bingbing/article/details/7233726

NgCore 专栏收录该内容

3 篇文章

订阅专栏

本文通过分析SamplesSprites示例，探讨如何在ngCore游戏引擎中创建一个基本的多帧动画。通过加载和操作动画帧，实现动态效果。

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

学习一个新的游戏引擎最好的办法莫过于多看示例代码了,本文主要是学习 \Samples\Sprites 示例后自己写的一个简单的多帧动画。

代码片段如下：

加载动画:

var PIAnimation = Core.Class.singleton({
	 initialize: function(){
	 
		var coinEffect = new GL2.Animation() ;
		coinEffect.pushFrame(new GL2.Animation.Frame('Content/ui/effect/coin01.png', 
				300, [40, 26], [0.5, 0.5], [0,0,1,1])) ;
		coinEffect.pushFrame(new GL2.Animation.Frame('Content/ui/effect/coin02.png',
		300,[40,26],[0.5,0.5],[0,0,1,1])) ;		
		this._coinAnim = coinEffect ;
		
	 },
	 
	 getCoinAnim: function(){
	 
	     return this._coinAnim ;
	 
	 }

}) ;

动画实现:

/**金币动画*/
var Coin = Core.MessageListener.subclass({

      initialize: function(){
	     // anim
             var coinAnim = PIAnimation.getCoinAnim() ;
	     // node
             this._node = new GL2.Node() ;
             this._node.setPosition(110,27) ;			 
	     // sprite
	     this._sprite = new GL2.Sprite();
	     this._sprite.setAnimation(coinAnim) ;
             this._node.addChild(this._sprite) ;			
			Core.UpdateEmitter.addListener(this, this.onUpdate);
	  },
	  onUpdate: function(delta){
	     
	  },
	  getCoinNode: function(){
	  
	     return this._node ;
	  
	  },
         destroy: function(){
            this._sprite.destroy() ;
            this._node.destroy() ;
         }

}) ;

添加到父节点:

/**金钱动画*/
var coinNode = new Coin() ;
this.sBackground.addChild(coinNode.getCoinNode()) ;

按上述三个步骤就可以实现简单的多帧动画了。