【png画像のキャラクター】似顔絵メーカーCHARAT(キャラット)の使い方




<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🏖️WebVR👯‍♀️Aframe<br>360度全天球のテンプレートを作って🌸<br>png画像をアニメーション表示してみたよぉ🍬<br>ハンズオン勉強会資料に「おまけページ」追加してみた☺️<br><br>似顔絵メーカーCHARAT(キャラット)💕でオリジナルのキャラクターpng画像で作ってみた😍<a href="https://t.co/bdam5d9OX1">https://t.co/bdam5d9OX1</a> <a href="https://t.co/tVgAscRY9B">pic.twitter.com/tVgAscRY9B</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1223924629904883712?ref_src=twsrc%5Etfw">February 2, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

できたpng画像を使って、WebVRで使ってみました。
【WebVR】[Aframe]image画像のアニメーション
https://qiita.com/nonkapibara/items/9b3f2800d6c736b880de

【Aframe】Aframe星型パーティクルを試してみた
https://qiita.com/nonkapibara/items/25d30d5beda2e866377b


似顔絵メーカーCHARAT(キャラット)は、オリジナルのキャラクターが作れるキャラメーカーで、作ったキャラクターはpng保存出来ます。

↓完成形
<img width="401" alt="001.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/37969182-e3dc-754c-926f-079527b8bb40.png">

こんな感じで保存やShareできる
<img width="646" alt="002.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/11002198-7e3f-4d87-509e-d957c62a7217.png">

# 作り方

CHARAT(キャラット)
https://charat.me/

<img width="1269" alt="003.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/467bd446-bd8d-2ddc-f79a-467d2fdb431a.png">

今回は、「CHART ORIGIN」を使います

<img width="298" alt="004.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ec164201-c9b8-5d85-fd70-b0d2e480e6e3.png">

作成開始する
<img width="802" alt="005.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9bdb9ac0-c093-59d1-96c2-999a0458edee.png">


デフォルトで、キャラクターが表示されます
<img width="566" alt="006.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/96d73e46-936a-25fe-c33c-63396bc8125c.png">

※途中で、もう一度最初からやりなおしたい時は、「デフォルトA」を選択すると元に戻ります。
<img width="727" alt="007.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d534903c-fcab-56f5-3d09-8366ec2c0822.png">

ランダムに、キャラクターを作ることもできます。
<img width="624" alt="000-1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/671c03aa-d4b0-2b81-136c-ef8bb267723e.png">

メニューから「ランダム作成」を選びます
<img width="624" alt="000-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a770e4f9-ee96-1bdb-6c36-bdd18924ad9f.png">

<img width="623" alt="000-3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/75c6abb6-6248-31a3-e105-4a8ad3e64ffd.png">


# 自分でパーツを組み合わせる
顔など、いろいろパーツを選択する
<img width="604" alt="008.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/51e94bc7-50e1-4af9-a4d5-fae58136c449.png">


<img width="712" alt="スクリーンショット 2020-02-02 13.54.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/490162ed-0c2d-1286-9268-95379335c139.png">
<img width="717" alt="010.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7c98650f-2b21-9747-3ba7-5e51482cec25.png">

色を変更するには、パレットを表示して、色を選択する
<img width="630" alt="011.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ad1108cb-0078-68a6-e661-d355455e40b4.png">

<img width="708" alt="012.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/27537a8a-2a5e-4b0e-8768-c516ea5a36d0.png">

# 名前をつける

出力したpngの下のクレジット箇所に、名前をつける事ができます。
<img width="703" alt="スクリーンショット 2020-02-02 14.24.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b5ffe546-9c83-cc73-c220-6a382bcda77d.png">

「MENU」を選択して、「名前をつける」を選択します

<img width="702" alt="014.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d1a676c1-d20f-6dea-b36f-4e869456076f.png">

<img width="434" alt="015.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/3e0127b2-3f10-9dfa-8acf-39b8d614efe0.png">

名前を入れます
<img width="614" alt="016.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5546c335-6d15-7263-9154-3a6dcd756151.png">


# png保存（Share）する

FINISHを選択する
<img width="702" alt="017.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/300f6c8e-d8e5-0a56-8bfe-3608b5e9d5c3.png">

「保存」を選択して、png保存する
<img width="646" alt="002.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/11002198-7e3f-4d87-509e-d957c62a7217.png">

<img width="401" alt="001.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/37969182-e3dc-754c-926f-079527b8bb40.png">

完了！