制作 小林

javascriptによる着せ替え実装


javascriptによる着せ替え実装

制作の小林です。

朝目覚めるとき、瞼がぱりぱりと音を立てて目覚める度に春だなぁと感じる今日この頃

そんなこんなで今日も花粉に負けじとヨーグルトを飲みながら記事を書いていこうと思います。

今回は3Dはちょっとお休み

参考サイト「JavaScriptによる画像切り替え(別サイト)」を基にキャラクターの着せ替えが出来る仕組みを作っていきます。

差分絵の用意

本体とインナー、上着を3種類用意。
画像はすべて同じサイズで書き出しインナー、上着は服の部分以外は透過しPNGで書き出す。

差分絵の用意

本体、インナー、アウターの順に画像を並べてCSSのpositionで画像を重ね合わせる
この時インナーとアウターの画像にはnameを付けておく、ついでに服の説明文も用意。

[html]
<style type="text/css">
#dress {
position:relative;
height: 500px;
}
#dress img {
position:absolute;
left:0;
top:0;
}
</style>
<div id="dress">
<img src="images/body.gif">
<img src="images/inner01.png" name="innerLink">
<img src="images/outer01.png" name="outerLink">
</div>
<div id="inner_message">インナーを選択してください。</div>
<div id="outer_message">アウターを選択してください。</div>
[/html]

切り替えボタン設置

ラジオボタンで切り替え用のボタンと、javascriptで切り替えの命令を書いていきます。

[html]
<p>■服を選択してください。</p>
<p>
□インナー<br>
<input type="radio" name="inner" onClick="inner01()" value="タンクトップ" checked>タンクトップ
<input type="radio" name="inner" onClick="inner02()" value="Yシャツ">Yシャツ
<input type="radio" name="inner" onClick="inner03()" value="七分丈">七分丈
</p>
<p>
□アウター<br>
<input type="radio" name="outer" onClick="outer01()" value="パーカー" checked>パーカー
<input type="radio" name="outer" onClick="outer02()" value="コート">コート
<input type="radio" name="outer" onClick="outer03()" value="ノースリーブ">ノースリーブ
</p>
[/html]
[js]
<SCRIPT type="text/javascript">
<!–
//inner
function inner01(){
document.innerLink.src = "images/inner01.png";
document.getElementById("inner_message").innerHTML = "タンクトップです。";
}

function inner02(){
document.innerLink.src = "images/inner02.png";
document.getElementById("inner_message").innerHTML = "Yシャツです。";
}
function inner03(){
document.innerLink.src = "images/inner03.png";
document.getElementById("inner_message").innerHTML = "七分丈です。";
}

//outer
function outer01(){
document.outerLink.src = "images/outer01.png";
document.getElementById("outer_message").innerHTML = "パーカーです。";
}

function outer02(){
document.outerLink.src = "images/outer02.png";
document.getElementById("outer_message").innerHTML = "コートです。";
}
function outer03(){
document.outerLink.src = "images/outer03.png";
document.getElementById("outer_message").innerHTML = "ノースリーブです。";
}
–>
</SCRIPT>
[/js]

以上で服の着せ替えができるようになりました!

デモはこちら

なにに使うかはさておきポチポチしているだけでもちょっとたのしいです。
今回は服の着せ替えでしたかパーツとか部品とかにして自分の好きな組み合わせで作ってみてはいかがでしょうか
それではお疲れ様でした。


PAGE TOP

CONTACT

サービスについてのご相談やご質問など、
お気軽にお問い合わせ下さい。