Bot3D 1.0
ToolKit TIPS (6) HTML/JavaScriptの書き方
Bot3D 1.0 ToolKit を使っての「３Ｄトーキングヘッド」作成を支援するための、より具体的な「チップス」を、このコーナーで連載しています。
第6回目はHTML/JavaScriptの書き方をご紹介します。
HTMLにBot3Dを埋め込む
前回、ツールを使ってPAKファイルを作成するところまでを、駆け足でご説明しました。
今回は最終的にデータをアップロードしてインターネット公開するやり方をご紹介します。
Bot3DのトーキングヘッドをHTMLに埋め込むには、次のような<OBJECT>タグが必要です。
<OBJECT ID="Bot3DCtl"
HEIGHT=500
WIDTH=360
CLASSID="CLSID:DA5CEA40-B03C-40F8-8DCF-6E72793492AF"
CODEBASE="http://www.atom.co.jp/bot/contents/src/Bot3D.cab#version=1,0,0,33"
>
<PARAM NAME="LocalDir" VALUE="test">
<PARAM NAME="ReadLocal" VALUE="FALSE">
<PARAM NAME="Source" VALUE="http://www.atom.co.jp/test.pak">
<PARAM NAME="BackColor" VALUE="0.2,0.2,0">
<PARAM NAME="Trans" VALUE="0,-4,-15">
<PARAM NAME="Rotate" VALUE="0,0,0">
<PARAM NAME="LightPos" VALUE="1.0,0,20">
<PARAM NAME="ViewAngle" VALUE="45,1,300">
</OBJECT>
ちょっとややこしいですが、これはいろんなウェブブラウザプラグインでおなじみだと思うのですが、いかがでしょうか？
ID --- コントロールの名前。JavaScriptで使います。
HEIGHT / WIDTH --- 表示領域のピクセルサイズです。
CLASSID / CODEBASE --- 重要！ Bot3Dプラグインを示しています。
<PARAM> はBot3Dの表示に関するさまざまなパラメーターを設定しています。
特に重要なのは、Source です。これでアップロードしたPAKファイルのURLを指定しているのです。
BackColorは背景の色、Trans/Rotateはキャラクターの位置/回転、LightPosは光源の位置、ViewAngleは視点をそれぞれ設定しています。これ以外にもたくさんのパラメーターが用意されています。
Character3Dファイルを表示する
まず、Character3Dファイルをアップロードしてみましょう。このレベルでは、キャラクターの個々のターゲットモーフと、個々のボーンアニメーションをプレイバックできます。
サンプルにもある、シンプルなWolfmanに登場してもらいます。
- - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
モーション モーフ |
function javaMotion1()
{
Bot3DCtl.Motion = "yes,0.3,1.0";
};
これは、動作のためのJavaScriptです。Motionプロパティを使います。
形式は、[動作名, 動作秒数, 遷移期間]です。遷移期間とは、ひとつの動作が終了しない前に、別の動作のトリガーが入った時の処理です。Bot3Dでは、遷移期間秒でふたつの動きの間をスムーズに中割ってつなぎます。
function javaMorph1()
{
Bot3DCtl.Morph = "mouth,normal,lip_a,0.5";
};
これは、リップシンクのための、「あ」の口の動きのためのJavaScriptです。
Morphプロパティを使います。
形式は、[クラスター名, 始まりのターゲット, 終わりのターゲット, 動作秒数]です。
指定されたクラスター領域のみ、動作秒数で、始まりから終わりまで形が変化します。
function javaMorph7()
{
Bot3DCtl.Morph = "mouth,normal,angry,0.5";
Bot3DCtl.Morph = "eyes,normal,angry,0.5";
Bot3DCtl.Morph = "ears,normal,angry,0.5";
};
これは、表情(怒り)のためのJavaScriptです。これも、Morphプロパティを使っています。上と違うところは、三つのクラスター領域を同時に動作させていることです。この場合、口、目、耳のクラスターを同時に変化させて表情を作っています。
さて、Bot3Dを使ったトーキングヘッドの作り方なんとなくイメージできましたでしょうか？ よしやってみよう！という方、Bot3D 1.0 ToolKit をダウンロードして試してみてください。じっくり取り組めば必ず自分の作りたいキャラクターが作成できるはずです。