2007年11月30日金曜日

アバターの仕組み



アバターって、自分のキャラクターに容姿を自由に変更できるあれね。


Yahooのアバターってどうなってるんだろうと、興味本位からちょっとみてみると


透過画像を重ねて、部分的に入れ替えれるようにしてる。


GDとか使って、まるまる画像生成ってしてるのかとおもったら


意外と単純。(よく考えたらアニメーションGIFとか、そのまま合成できないからあたりまえか。。。)






<style>
div{
width :100px;
height: 100px;
position:absolute;
window. }
#img1 {background: url(img1.gif) transparent no-repeat; z-index:10;}
#img1 {background: url(img2.gif) transparent no-repeat; z-index:20;}
#img1 {background: url(img3.gif) transparent no-repeat; z-index:30;}
#img1 {background: url(img4.gif) transparent no-repeat; z-index:40;}
#img1 {background: url(img5.gif) transparent no-repeat; z-index:50;}
</style>

<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
<div id="img5"></div>



こんな感じのHTMLに img1.gif ~ img5.gif の同じサイズの透過GIFでも用意したら


できあがり。


要は、その画像の組み合わせが大変だってことやね。


コンテンツ生成に高額な費用がかかるのがネック!





0 件のコメント: