バーチャルyoutuberやってみたい。でも...
mac対応してない。ノートPCで動かない。お金ない。設定が複雑。カメラが怖い。スペックが低くてカクツク。

そこで、htmlで「バーチャル」を作ってみました！
デスクトップキャプチャーで、録画/配信してお使いください。

※このキャラは動作確認用です。SNS/動画投稿サイトにアップしないでください。
オリジナルのキャラに変更して頂ければ、大丈夫です！

β版のため、スマホは非対応です！
・パットにマウスを乗せると、視線が動きます。
・パットから外れると、元に戻ります。
・パットをクリックしている間、口が動きます。
・吹き出しは、5秒後に消えます。

700 x 1080px の画像を用意するだけ。

①必要なパーツの画像を描く。（透過pngで保存すること！）
サンプルpsdダウンロード
サンプルclipダウンロード
サンプルpng(zip)ダウンロード

保存するときに、複数のpng形式があったときは「png-32」にして下さい。
○png-32：透明、半透明が使える！！
△png-8 ：ドット絵のみ（透過できるが、半透明ができない）
×png-24：透過できないので使わない

②画像の名前を、下の表のようにします。

③フォルダーの名前を「virtual2d」にして、②の画像をいれます。

④下記に③のある場所を指定します。


パスの調べ方：
フォルダの「virtual2d」を選択し、
win：「パスのコピー」を押すとコピーできます。
mac：「⌘+option+C」を押すとコピーできます。

フォルダーをディスクトップに作った場合は、下記のようになります。
win：C:/Users/ユーザー名/Desktop/virtual2d
mac：file:///Users/ユーザー名/Desktop/virtual2d

ファイル名	備考	画像
0_body.png	身体
1_clothes.png	衣服（上）
1_clothes.png	衣服（下）
2_hear_behind.png	髪の毛（後ろ髪）	-
3_face_line.png	輪郭
4_mouth01.png	口（開き度：100%）
4_mouth01.png	口（開き度：70%）
4_mouth01.png	口（開き度：0%）
5_eyebrows.png	まゆげ
6_nose.png	鼻
7_right_ear.png	右耳
7_left_ear.png	左耳
8_left_eye01.png	右目（開き度：100%）
8_left_eye02.png	右目（開き度：70%）
8_left_eye03.png	右目（開き度：0%）
8_left_eye01.png	左目（開き度：100%）
8_left_eye02.png	左目（開き度：70%）
8_left_eye03.png	左目（開き度：0%）
8_right_eye.png	右目の瞳孔
8_left_eye.png	左目の瞳孔
9_hear_side.png	髪の毛（サイド）
10_hear_front.png	髪の毛（前髪）
11_left_hand.png	左腕
11_right_hand.png	右腕
12_hat.png	帽子など	-

SNS・動画投稿サイトなどアップする際は、オリジナルキャラでお願いします。
当サイトはキャラを動かすだけなので、著作権なの責任は負いかねます。

β版ため、仕様の変更があるかもしれません。
（正式版とは、ページを分けようと考えています）

今年中に、「nullでもわかるHTML講座」を動画投稿サイトにアップする予定です！
初回　：なんでページは表示されるの？自己紹介ページを作ろう！
最終回：このページが作って、自分用にカスタマイズする
…と構想しています。