会跳舞的骨骼小人

　　前不久，在一本讲Matlab的书上看到一个例子，用绘图函数画一个小人。

　　效果如下:

点击这里下载源文件

　　就像下面这样的:

　　既然这个小人可以画出来，那么可否让他动呢，我想这个很显然是没有问题的，只要把的身体的各个组成部分分解开就可以了。
　　组成这个小人的只有两种组件成分，一个是圆形，一个是线条.
　　代码分别如下:

class skelectonCircle
{
　　　 private var x:Number=0;
　　　 private var y:Number=0;
　　　 private var r:Number=0;
　　　 private var lineStyleNum:Number=0x3399FF;
　　　　
　　　 static private var mId:Number=0;
　　　 private var mMcHolder:MovieClip;
　　　　　　　
　　　 public function skelectonCircle(inX:Number,inY:Number,inR:Number,inStyle:Number)
　　　 {
　　　　　　　init(inX,inY,inR,inStyle);
　　　 }
　　　　
　　　 public function init(inX:Number,inY:Number,inR:Number,inStyle:Number):Void
　　　 {
　　　　　　　reset(inX,inY,inR,inStyle);
　　　　　　　
　　　　　　　mMcHolder=_root.createEmptyMovieClip("__SKELETONC__"+mId,_root.getNextHighestDepth());
　　　　　　　mId++;
　　　 }
　　　　
　　　 public function reset(inX:Number,inY:Number,inR:Number,inStyle:Number):Void
　　　 {
　　　　　　　x=inX;
　　　　　　　y=inY;
　　　　　　　r=inR;
　　　　　　　
　　　　　　　if(inStyle!=null||inStyle!=undefined)lineStyleNum=0x3399FF;
　　　　　　　else lineStyleNum=inStyle;
　　　 }
　　　　
　　　 public function draw():Void
　　　 {
　　　　　　　//draw a cicle:　　　　
　　　　　　　　　　 mMcHolder.lineStyle(1,lineStyleNum,100);
　　　　　　　　　　 //beginFill(0x6666FF);
　　　　　　　　　　 //move to the circle’s center.
　　　　　　　　　　 mMcHolder.moveTo(x+r,y);
　　　　　　　　　　　
　　　　　　　　　　 var fi:Number=0;
　　　　　　　　　　 var cX:Number=0;
　　　　　　　　　　 var cY:Number=0;
　　　　　　　　　　 var detaFi:Number=0.1;
　　　　　　　　　　　
　　　　　　　　　　 while(fi<=2*Math.PI+0.2)
　　　　　　　　　　 {
　　　　　　　　　　　　　　cX=x+r*Math.cos(fi);
　　　　　　　　　　　　　　cY=y+r*Math.sin(fi);
　　　　　　　　　　　　　　mMcHolder.lineTo(cX,cY);
　　　　　　　　　　　　　　fi+=detaFi;
　　　　　　　　　　 }
　　　　　　　　　　 //endFill();
　　　 }
　　　　
　　　 public function clean():Void
　　　 {
　　　　　　　mMcHolder.clear();
　　　 }
　　　　
　　　 public function toString():String
　　　 {
　　　　　　　var reString:String=new String();
　　　　　　　
　　　　　　　reString=String("x:"+String(x)+"y:"+String(y)+"r:"+String(r)+"\n");
　　　　　　　
　　　　　　　return reString;
　　　 }
　　　　
　　　 public function finallize():Void
　　　 {
　　　　　　　mMcHolder.removeMovieClip();
　　　　　　　mMcHolder=null;
　　　　　　　delete this;
　　　 }
}

class skelectonLine
{
　　　 private var x1:Number=0;
　　　 private var y1:Number=0;
　　　　
　　　 private var x2:Number=0;
　　　 private var y2:Number=0;
　　　　
　　　 private var lineStyleNum:Number=0x3399FF;
　　　　
　　　 static private var mId:Number=0;
　　　 private var mMcHolder:MovieClip;
　　　　
　　　 //static private var thisP:Object;
　　　　
　　　 public function skelectonCircle(inX1:Number,inY1:Number,inX2:Number,inY2:Number,inStyle:Number)
　　　 {
　　　　　　　init(inX1,inY1,inX2,inY2,inStyle);
　　　 }
　　　　
　　　 public function init(inX1:Number,inY1:Number,inX2:Number,inY2:Number,inStyle:Number):Void
　　　 {
　　　　　　　reset(inX1,inY1,inX2,inY2,inStyle);
　　　　　　　
　　　　　　　mMcHolder=_root.createEmptyMovieClip("__SKELETONL__"+mId,_root.getNextHighestDepth());
　　　　　　　mId++;
　　　　　　　
　　　　　　　//thisP=this;
　　　 }
　　　　
　　　 public function reset(inX1:Number,inY1:Number,inX2:Number,inY2:Number,inStyle:Number):Void
　　　 {
　　　　　　　x1=inX1;
　　　　　　　y1=inY1;
　　　　　　　
　　　　　　　x2=inX2;
　　　　　　　y2=inY2;
　　　　　　　
　　　　　　　if(inStyle!=null||inStyle!=undefined)lineStyleNum=0x3399FF;
　　　　　　　else lineStyleNum=inStyle;
　　　 }
　　　　
　　　 public function draw():Void
　　　 {
　　　　　　　//draw a line:
　　　　　　　mMcHolder.lineStyle(1,lineStyleNum,100);
　　　　　　　mMcHolder.moveTo(x1,y1);
　　　　　　　mMcHolder.lineTo(x2,y2);
　　　　　　　
　　　 }
　　　　
　　　 public function clean():Void
　　　 {
　　　　　　　mMcHolder.clear();
　　　 }
　　　　
　　　 public function toString():String
　　　 {
　　　　　　　var reString:String=new String();
reString=String("x1:"+String(x1)+"y1:"+String(y1)+"x2:"+String(x2)+"y2:"+String(y2)+"\n");
　　　　　　　return reString;
　　　 }
　　　　
　　　 public function finallize():Void
　　　 {
　　　　　　　mMcHolder.removeMovieClip();
　　　　　　　mMcHolder=null;
　　　　　　　delete this;
　　　 }
}

　　接着，我们定义一个小人类,一共有11个部分组成，具体是什么你一看便知:

class skelectonPerson
{
　　　 public var mHead:skelectonCircle;
　　　　
　　　 public var mLeftShoulder:skelectonLine;
　　　 public var mRightShoulder:skelectonLine;
　　　　
　　　 public var mUpBody:skelectonLine;
　　　 public var mDownBody:skelectonLine;
　　　　
　　　 public var mLeftHand:skelectonLine;
　　　 public var mRightHand:skelectonLine;
　　　　
　　　 public var mLeftThigh:skelectonLine;
　　　 public var mRightThigh:skelectonLine;
　　　　
　　　 public var mLeftLeg:skelectonLine;
　　　 public var mRightLeg:skelectonLine;
　　　　
　　　 public function skelectonPerson()
　　　 {
　　　　　　　mHead=new skelectonCircle();
　　　　　　　mLeftShoulder=new skelectonLine();
　　　　　　　mRightShoulder=new skelectonLine();
　　　　　　　mUpBody=new skelectonLine();
　　　　　　　mDownBody=new skelectonLine();
　　　　　　　mLeftHand=new skelectonLine();
　　　　　　　mRightHand=new skelectonLine();
　　　　　　　mLeftThigh=new skelectonLine();
　　　　　　　mRightThigh=new skelectonLine();
　　　　　　　mLeftLeg=new skelectonLine();
　　　　　　　mRightLeg=new skelectonLine();
　　　 }
　　　　
　　　 public function draw():Void
　　　 {
　　　　　　　mHead.draw();
　　　　　　　mLeftShoulder.draw();
　　　　　　　mRightShoulder.draw();
　　　　　　　mUpBody.draw();
　　　　　　　mDownBody.draw();
　　　　　　　mLeftHand.draw();
　　　　　　　mRightHand.draw();
　　　　　　　mLeftThigh.draw();
　　　　　　　mRightThigh.draw();
　　　　　　　mLeftLeg.draw();
　　　　　　　mRightLeg.draw();
　　　 }
　　　　
　　　 public function clean():Void
　　　 {
　　　　　　　mHead.clean();
　　　　　　　mLeftShoulder.clean();
　　　　　　　mRightShoulder.clean();
　　　　　　　mUpBody.clean();
　　　　　　　mDownBody.clean();
　　　　　　　mLeftHand.clean();
　　　　　　　mRightHand.clean();
　　　　　　　mLeftThigh.clean();
　　　　　　　mRightThigh.clean();
　　　　　　　mLeftLeg.clean();
　　　　　　　mRightLeg.clean();
　　　 }
}

　　然后就是将这个小人的各个部分组装起来了:

var testPerson:skelectonPerson=new skelectonPerson();
testPerson.mHead.init(180,30,20);
testPerson.mLeftShoulder.init(140,80,180,80);
testPerson.mRightShoulder.init(180,80,220,80);
testPerson.mLeftHand.init(110,40,140,80);
testPerson.mRightHand.init(250,40,220,80);
testPerson.mUpBody.init(180,50,180,80);
testPerson.mDownBody.init(180,80,180,120);
testPerson.mLeftThigh.init(180,120,150,150);
testPerson.mRightThigh.init(180,120,210,150);
testPerson.mLeftLeg.init(150,150,150,200);
testPerson.mRightLeg.init(210,150,210,200);

　　最后，让我们以一个小人的手在挥动的动作来结束实验1:
　　感觉这个实验里最让我头痛的就是Flash正切角的计算方式了，搞了半天才算ok,呵呵~~: )
//调用段代码

testPerson.draw();

/* ----test 1:data init.----*/
handLen=Math.sqrt((110-140)*(110-140)+(40-80)*(40-80));
//left hand data.
x0[0]=110;
y0[0]=40;
//left hand axes center
x1[0]=140;
y1[0]=80;

//right hand data.
x0[1]=250;
y0[1]=40;
//right hand axes center
x1[1]=220;
y1[1]=80;

fi0=eAtan2(x0[0]-x1[0],y0[0]-y1[0]);
fi1=eAtan2(x0[1]-x1[1],y0[1]-y1[1]);

detaFi0=0.05;
detaFi1=-0.05;

setInterval(handMove,200);
/*---end of test 1---*/

//主运动函数:
//skelecton person test1:
function handMove()
{
　　　 //left hand move.
　　　 if(fi0>=-2*Math.PI/3||fi0<=-5*Math.PI/6)
　　　　　　　detaFi0*=-1;
　　　　
　　　 x0[0]=x1[0]+_root.handLen*Math.cos(fi0);
　　　 y0[0]=y1[0]+_root.handLen*Math.sin(fi0);
　　　　
　　　 _root.testPerson.mLeftHand.reset(x0[0],y0[0],x1[0],y1[0]);
　　　　
　　　 _root.testPerson.mLeftHand.clean();
　　　 _root.testPerson.mLeftHand.draw();
　　　 fi0+=detaFi0;
　　　　
　　　 //right hand move
　　　 if(fi1>=-Math.PI/6||fi1<=-Math.PI/3)
　　　　　　　detaFi1*=-1;
　　　　
　　　 x0[1]=x1[1]+_root.handLen*Math.cos(fi1);
　　　 y0[1]=y1[1]+_root.handLen*Math.sin(fi1);
　　　　
　　　 _root.testPerson.mRightHand.reset(x0[1],y0[1],x1[1],y1[1]);
　　　　
　　　 _root.testPerson.mRightHand.clean();
　　　 _root.testPerson.mRightHand.draw();
　　　 fi1+=detaFi1;
　　　　
}

testPerson.draw();

/* ----test 1:data init.----*/
handLen=Math.sqrt((110-140)*(110-140)+(40-80)*(40-80));
//left hand data.
x0[0]=110;
y0[0]=40;
//left hand axes center
x1[0]=140;
y1[0]=80;

//right hand data.
x0[1]=250;
y0[1]=40;
//right hand axes center
x1[1]=220;
y1[1]=80;

fi0=eAtan2(x0[0]-x1[0],y0[0]-y1[0]);
fi1=eAtan2(x0[1]-x1[1],y0[1]-y1[1]);

detaFi0=0.05;
detaFi1=-0.05;

setInterval(handMove,200);
/*---end of test 1---*/

//主运动函数:
//skelecton person test1:
function handMove()
{
　　　 //left hand move.
　　　 if(fi0>=-2*Math.PI/3||fi0<=-5*Math.PI/6)
　　　　　　　detaFi0*=-1;
　　　　
　　　 x0[0]=x1[0]+_root.handLen*Math.cos(fi0);
　　　 y0[0]=y1[0]+_root.handLen*Math.sin(fi0);
　　　　
　　　 _root.testPerson.mLeftHand.reset(x0[0],y0[0],x1[0],y1[0]);
　　　　
　　　 _root.testPerson.mLeftHand.clean();
　　　 _root.testPerson.mLeftHand.draw();
　　　 fi0+=detaFi0;
　　　　
　　　 //right hand move
　　　 if(fi1>=-Math.PI/6||fi1<=-Math.PI/3)
　　　　　　　detaFi1*=-1;
　　　　
　　　 x0[1]=x1[1]+_root.handLen*Math.cos(fi1);
　　　 y0[1]=y1[1]+_root.handLen*Math.sin(fi1);
　　　　
　　　 _root.testPerson.mRightHand.reset(x0[1],y0[1],x1[1],y1[1]);
　　　　
　　　 _root.testPerson.mRightHand.clean();
　　　 _root.testPerson.mRightHand.draw();
　　　 fi1+=detaFi1;
　　　　
}

testPerson.draw();

/* ----test 1:data init.----*/
handLen=Math.sqrt((110-140)*(110-140)+(40-80)*(40-80));
//left hand data.
x0[0]=110;
y0[0]=40;
//left hand axes center
x1[0]=140;
y1[0]=80;

//right hand data.
x0[1]=250;
y0[1]=40;
//right hand axes center
x1[1]=220;
y1[1]=80;

fi0=eAtan2(x0[0]-x1[0],y0[0]-y1[0]);
fi1=eAtan2(x0[1]-x1[1],y0[1]-y1[1]);

detaFi0=0.05;
detaFi1=-0.05;

setInterval(handMove,200);
/*---end of test 1---*/

//主运动函数:
//skelecton person test1:
function handMove()
{
　　　 //left hand move.
　　　 if(fi0>=-2*Math.PI/3||fi0<=-5*Math.PI/6)
　　　　　　　detaFi0*=-1;
　　　　
　　　 x0[0]=x1[0]+_root.handLen*Math.cos(fi0);
　　　 y0[0]=y1[0]+_root.handLen*Math.sin(fi0);
　　　　
　　　 _root.testPerson.mLeftHand.reset(x0[0],y0[0],x1[0],y1[0]);
　　　　
　　　 _root.testPerson.mLeftHand.clean();
　　　 _root.testPerson.mLeftHand.draw();
　　　 fi0+=detaFi0;
　　　　
　　　 //right hand move
　　　 if(fi1>=-Math.PI/6||fi1<=-Math.PI/3)
　　　　　　　detaFi1*=-1;
　　　　
　　　 x0[1]=x1[1]+_root.handLen*Math.cos(fi1);
　　　 y0[1]=y1[1]+_root.handLen*Math.sin(fi1);
　　　　
　　　 _root.testPerson.mRightHand.reset(x0[1],y0[1],x1[1],y1[1]);
　　　　
　　　 _root.testPerson.mRightHand.clean();
　　　 _root.testPerson.mRightHand.draw();
　　　 fi1+=detaFi1;
　　　　
}

时间： 2024-08-01 22:04:30

会跳舞的骨骼小人的相关文章

【COCOSBUILDER 开发系列之一】COCOS2DX使用COCOSBUILDER(官方编辑器)完成基础骨骼动画

本站文章均为 李华明Himi 原创,转载务必在明显处注明:  转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocosbuilder/1061.html 关于CocosBuilder 已经成为cocos2d.cocos2dx的官方编辑器,主要作用是场景编辑器.新版本中还已经支持了骨骼动画.[对于CocosBuilder Himi最新书籍中也有讲述] 对于骨骼动画,其实类似动作编辑器,将图的切片组成一帧,然后设置时间轴事件(序列动画),[动编里则是将

ps设计小人国大创意效果

  ps设计小人国大创意效果! 加大脑洞拍摄出了这些作品,微博里很多人问我咋做到的~现在教程在这里啦~主要就是前期构思,后期细心,没有拍不好的片子,喜欢可以参考借鉴 分类: PS入门教程

看诸葛亮是如何识别对付小人的~

诸葛亮的<心书>既是一部兵书,也是一部识人用人的权略之书.在书中,诸葛亮列举了于国于军有害的五种人,这五种人,现在通俗的说法叫"小人",也就是卑鄙猥琐上不了台面的人. 原文是这样的: 夫军国之弊,有五害焉:一曰结党相连,毁谮贤良:二曰侈其衣服,异其冠带:三曰虚夸妖术,诡言神道:四曰专察是非,私以动众:五曰伺候得失,阴结敌人.此所谓奸伪悖德之人,可远而不可亲也. 这段话的大意是:不论是治军还是理国,有五种人是需要时时注意的,他们是国家.军队发生混乱的祸根.这五种人是:私结朋党

PS打造妙趣横生的小人国创意人像

明媚的夏日,很多摄影师喜欢拍摄大量公园写真类型的人像作品,但是免不了落入过于雷同的怪圈.想要突破和创新吗?今天带来一组妙趣横生的人像作品,绝对让人过目难忘,我们一起来看看这组作品是如何打造出来的吧!希望能给大家的拍摄带来启发和帮助. 1.对比图与思路分析: 创意来源: 其实拍摄小人国主题的想法在看过<爱丽丝梦游仙境>的时后就有了,觉得场景非常的新奇和梦幻.特别是缩小的主角和现实中高大的背景形成的反差,让人觉得梦幻,惊奇又充满了童话色彩.前一段时间去参加摄影活动,正好遇到一位非常可爱的女孩,长得

Photoshop制作小人国场景图效果

Photoshop制作小人国场景图效果           第一步 楼下有一条上面铺着小石桥的小溪. 路过这条小溪无数次,却从没好好注意过它. 但是这一次决定近距离地观察它,看一看是否能获得一个新的视角. 第二步 首先,下到小溪边去观察是否有一些有趣的事物是我们曾经没注意到过的. 这时我们发现了这株从石头缝中生长出来的细小的植物. 它如此娇小柔弱又美丽. 第三步 凑近去观察这株植物,发现如果将相机放在顺着溪水流向的一块石头上拍,就找到了一个全新的视角. 还是原来那株植物,原来那些石头,原来那条流

PS打造小人国般的梦幻世界

  PS打造小人国般的梦幻世界         Photoshop--P出伪移轴效果 我们刚刚也说了一般单反的移轴镜头都很贵,那么强大的Photoshop就能来帮忙了,只需简单几步,就能实现伪移轴效果了,也颇为有趣. 首先我们在PS中打开一张图片: 图片最好选取俯拍视角 按下快捷键Q进入快速蒙板 选择渐变工具,并选择对称渐变 在画面中画一条直线选择区域,松开鼠标后,画面中会出现一块带有渐变的红色区域(蒙版).蒙版中央应该是保持清晰的范围,将从这里向边缘呈现出逐渐失焦的效果. 再次按下快捷键Q退出

Photoshop CS6新功能-倾斜位移(移轴)营造出小人国影像

关於此次Photoshop CS6所新增的新功能,而今天要来介绍什么呢?其实这一个功能,相信有iPhone/iPad的朋友,应该不感陌生,那就是移轴模糊, 透过移轴模糊,便可营造出小人国般的趣味影像,没想到这功能,现在Photoshop CS6也有了,其用法与iOS操作上差不多,唯一较不同的是,在Photoshop CS6与先前分享的浅景深一样,可製作多点移轴模糊效果,而这个模糊效果,在Photoshop CS6称为倾斜位移,翻的还真是一诀,让人看了傻傻分不清楚是 作啥用的,现在就一块来看看,这

Flash的骨骼工具制作皮影动画技巧

核心提示:Flash CS4的骨骼工具制作皮影动画技巧教程. 本例将使用Flash CS4新增的"骨骼工具"来创建反向运动,该工具可以在短时间里制作出复杂而自然的动画效果,这种制作方式很适合运用在皮影动画中. 本例思路 导入素材,然后分割好图形的各部分元素. 使用"骨骼工具"为老人添加好骨骼,然后为老人制作出行走动画. 使用"骨骼工具"为小狗添加好骨骼,然后为小狗制作出跳跃动画. Part 1 分割图形 (1)按Ctrl+R组合键导入素材/皮影.

Flash CS4中的3d工具,deco工具和骨骼工具

核心提示:Flash Cs4在界面上与其上一个版本cs3总体来说并没有特别大的区别,下面就让我们来介绍一下CS4中的工具吧. Flash Cs4在界面上与其上一个版本cs3总体来说并没有特别大的区别,下面就让我们来介绍一下CS4中的工具吧.在工具菜单中 添加了3d工具deco工具骨骼工具. 针对mc添加了一个动画编辑器. 脚本语言没有变化. 主要针对新版本中的3d功能以及骨骼工具做了相对的试用下面是具体的示例. 一.3d工具的使用以实例 cs4没有3dmax等3d软件强大的建模工具,但是在cs4