なんと…ピグのイベントで知り合った、りるさんが！
すっっっっっっっっっごいの作ってくれました！
これはまだイメージ画像なんですが、スッキリしててかっこいい！
いつメニュー部分の実装に取り掛かれるか、謎ですが…モチベーションあがりますね！！
フゥー！
ベクター画像を描くソフト、いっぱいありますが、フリーだとInkscapeというのが一番有名っぽいので、とりあえず試してみました。
このページを参考にさせていただいて。
https://www.iscle.com/web-it/illustrator-inkscape.html
ダウンロードして、インストールして、ファイルを新規作成して、適当に絵を描いて、SVG形式で保存。
ここまでは問題なくできます。
SVGは、多数の点の座標と、点と点をつないだ直線や曲線と、線で囲まれたエリアの塗りつぶしデータを、文字で保存してます。
画像をブラウザで開いてソースを見てみると、実際に文字列が保存されていることが分かります。
で、このSVGファイルをアップロードしようと思ったんですが、アメブロはGIF, JPEG, PNGの3種類の画像ファイルしか上げられない仕様になってるので、残念ながら公開できません。つら。。。
プログラミングが進んで、SVG画像を実際に表示できるようになるのをお待ちください。
ピグでは、ものすごく沢山の絵 (画像データ) を使っています。
・各種メニュー (枠、ボタン等)
・アバターの体の各基本パーツ (頭、導体、上腕、前腕、手、脚、足)、その他のパーツ (髪の毛、目、鼻、口、ヒゲ、ホクロ等)
・コスメ
・着せ替えアイテム (トップス、ボトムス、くつ、アクセ、小物、その他)
・模様替えアイテム (背景、建物、壁、窓、床、家具、雑貨、家電、その他)
これらの絵 (画像データ) を、このアバターチャットゲームでも、用意する必要があります。
インテル1人では到底、用意できないので、以下の手助けが必要です。
1. 各画像に対して、最低限必要な数と内容の洗い出し (Excelとかでまとめて貰えると…)
2. 上記1で洗い出された画像データの作成 (実際に絵を描く作業)
画像データは、ベクター形式での作成をお願いします。
以下がベクター形式の画像フォーマットです。
・AIファイル
・EPSファイル
・SVGファイル
まだ、どの形式を使うか、プログラム側の細かい仕様を決めていませんが、上記3つであれば相互に変換できるみたいなので、どれでもOKです。
→2019-08-31追記：ブラウザに描画しやすいSVGファイルを使用することにしました。
ベクター形式の画像を作成できるソフトのリンクをまた貼っておきます。
Illustrator (イラストレーター)とか、無料のInkscape (インクスケイプ) とかが有名ですが、他にもいっぱいあるみたいです。
https://mrzw-design.com/svg-tool/
もし、「手伝いたいけど絵はメチャクチャ苦手…」という人がいたら、以下の記事を読んでもらえればと思います。
ということで、絵はマジで助けが必要なので、なにとぞよろしくお願いします。
突然ですが、絵を上手く描くコツについて書きます。
お手本があって、それをソックリ写すときだけ使えるテクニックです。
コツは簡単で、
１．お手本を分割する線を描き入れる。(4分割、16分割、64分割とか)
２．自分が絵を描く紙にも、分割する線を描き入れる。
３．分割したそれぞれのマス目の中を、できるだけソックリに映す
これだけです！センスは要りません。
そんなので本当に上手く描けるの…？とお思いの方もいるでしょう。
ということで、ピグ友のSさんに協力してもらいました。
分割なし、16分割、64分割で描いて貰ったのがこちら。
1回目、分割なし
2回目、16分割
3回目、64分割
どうでしょうか？
本人は初め、「めちゃくちゃ下手だよ」とか「周りからピカソって呼ばれてるよ」とか言ってましたが、分割すればかなり上手に描けていると思います。
紙の方に描いている分割線を定規で使って、ボールペン一発描きをエンピツで何回か描いて消して…にすれば、完全にソックリな絵がすぐにでも描けそうです。
このテクニックを使って、分割数をどんどん増やしていけば、写真そっくりな絵も簡単に描けます。(分割が多い分、時間は掛かりますが)
逆に、お手本がないオリジナルイラストなんかは、ちょっと難しいです。
でも、お手本の代わりに、描きたいイメージに対して脳内で分割線を引けるようになれば、イラストにも使えます。
みなさんも興味があったら、是非やってみて下さいね。