图片精灵sprite动画插件

原创 2016年08月29日 12:05:03

好久好久没有写博客了,最近写了俩个小插件,这是其中一个。

我想大家在玩游戏的时候会看到人物走动,这些不管在3d还是2d游戏都会有这些动画,这些动画都有一个小单元一个小单元拼凑吹来的,这个小单元就是精灵,用js或者一些游戏引擎或者是用一些制作游戏的工具不如unity3D会有自带动画制作工具,都可以实现,这里主要由js来实现这一点,毕竟我只是个小前端~

首先我们需要知道UI给到我们的图片是什么样子的,然后根据UI给过来的图进行参数的处理。

我们先来看看那js吧

var spriteDemo = {
        rowCount:0,
        lastColCount:0,
        param:{},
        currentCount:0,
        currentIndex:{rows:0,columns:0},
        inifiteSave:"",
        initFunc:function(option){
            this.param=option;
            this.rowCount=Math.floor((option.spriteLength-0)/(option.unitLength-0));
            this.lastColCount=(option.spriteLength-0)%(option.unitLength-0)==0?option.unitLength-0:(option.spriteLength-0)%(option.unitLength-0);//获取最后一行的个数
            var _this=this;
            this.inifiteSave = setInterval(function(){_this.aniFunc()},option.speed);
//            _this.aniFunc();
        },
        aniFunc:function(){
            this.currentIndex.columns+=1;
            if(this.param.count!=""&&this.param.count!="auto"){
                if(this.currentCount>this.param.count){
                    clearInterval(this.inifiteSave);
                    return false;
                }
            }
            if((this.currentIndex.columns>(this.param.unitLength-1)&&this.currentIndex.rows<this.rowCount-1)){
                this.currentIndex.rows++;
                this.currentIndex.columns=0;
            }else if((this.currentIndex.rows==this.rowCount-1)&&this.currentIndex.columns==this.lastColCount){
                this.currentIndex.rows=0;
                this.currentIndex.columns=0;
                this.currentCount++;
            }
            this.param.targetDom.style.backgroundPosition="-"+(this.currentIndex.columns*this.param.unitArea.width+this.param.initPos.x)+"px -"+(this.currentIndex.rows*this.param.unitArea.height+this.param.initPos.y)+"px";
        }
    };

这里就是全部的js了,你肯定会觉得,这么点js也算是一个插件了?您先别急,听我后面的给您介绍介绍这些参数哈。option代表需要传递的参数option={spriteLength:spriteLength,unitLength:unitLength,unitArea:unitArea,speed:speed,count:countinitPos:initPos,targetDom:targetDom}然后介绍一下里面具体参数,spriteLength总共的精灵个数,unitLength单行的精灵个数,unitArea指的是每一个精灵的大小,speed速度,count运行的次数,initPos初始的位置,targetDom当前元素。

  看了这些参数介绍大家应该都已经知道了这个函数的原理了,这里我就不在瞎比比了。希望此博客了对你有帮助。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

cocos2d-x 3.2 |如何实现图片显示和精灵动画 Sprite

cocos2d-x 3.2 |如何实现图片显示和精灵动画 Sprite

cocos2d-x 基本概念 骨骼动画 vs. 精灵表(sprite sheets)

创建动画又快又简单的方法是使用“精灵表”(sprite sheets).当你意识到游戏需要大量动画,内存消耗会涨上来,而且需要耗时去加载所有数据.此外,限于大小,你需要为了动画限制自己使用低FPS,这...

unity3d中使用精灵sprite创建并控制2d动画

这里明确几个概念 Animation是每一个动画,动画本身不能独立在场景中播放 Animator是动画控制器,一个动画控制器里可以包含多个动画,根据条件选择播放哪一个动画 精灵Sprite上...
  • jwxkk
  • jwxkk
  • 2016-08-15 13:51
  • 3278

cocos2d-x 3.x 精灵表单动画(Sprite Sheet Animation)实现思路

 cocos2dx文章翻译:          地址:http://www.cocos2d-x.org/wiki/Sprite_Sheet_Animation   精灵表单动...

02 Sprite 图片精灵

--图片精灵 --这是C++里面的接口 static Sprite* create(const std::string& filename); static Sprite* create(const ...

SDL入门教程(八):1、裁剪精灵图片(Clip Blitting and Sprite Sheets)

作者:龙飞         这两天下雨,所以就暂停了寻春的步伐,多写了点教程。绵阳的春天是美丽的,大家学习和写程序之余,还是应该多看看大自然。给大家推荐我拍的风景照啦,呵呵。http://pic...

NGUI研究之Sprite精灵与精灵动画的使用

 学习了几天Unity3D强大的NGUI插件,觉得NGUI中最大的亮点之一就是Sprite精灵。我们先说说精灵是什么东西?它可以在一张大图中去截取一部分(大图就是整体图像集合,而截取的小图就是一...

一起学习NGUI之Sprite精灵与精灵动画的使用(2)

学习了几天unity3d强大的NGUI插件,MOMO觉得NGUI中最大的亮点之一就是Sprite精灵。我们先说说精灵是什么东西?它可以在一张大图中去截取一部分(大图就是整体图像集合,而截取的小图就是一...

cocos2d-x使用TexturePacker打包图片及使用生成的plist文件创建精灵动画

在使用TexturePacker打包工具之前先对动画的每一帧图片命名,我这里选取的cocos2d-x实例程序里面的图片,为了方便只提取了前面4帧的图片 然后打开安装好的TexturePakcer,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)