pictSPACE店舗用のアカウント作成、頒布物登録を終えたので、pictSQUAREオリジナルアバター用のドット絵制作に挑戦します。
VOl.3 ヘッダーサイズの編集と店舗への頒布物登録
pictSQUARE内に入場する時はアバターを選択し、そのアバターをテンキーで操作して会場を進んでいきます。サイト上で用意されたアバターを選択することもできますが、自分で制作したオリジナルのアバターを使用することもできます。
アバター用キャラクターの準備
抽選漏れにより未だ入手できていませんが、かねてより和遊湘南ではどうぶつの森をプレイしてみたいと思っており、特にマイデザインに興味があります。どうぶつの森のマイデザインにもドット絵の方式が採用されていますが、その温かみのある表現は現実のファッションにも取り入れられる事が増え、レトロかわいい日本文化の一つになりつつあります。良い機会なので今回はゼロからドット絵制作に挑戦してみることにしました。
まずはキャラクター制作の為に必要な資料を用意します。いきなり洋服を着たアバターを作るのは陰影表現が難しいので、初級編としてpictSQUAREのことを教えてくれた身内の漫画家、夜桜左京のキャラクター”さぬき“をつくります。(さきょうのタヌキ=さぬきというキャラクターです）最新のオタク文化を我が家（和遊湘南）に伝えてくれる重要人物です。
最初はできるだけ色数の少ないデザインから始めるのがオススメです。
ドット絵初挑戦のため無駄な部分があると思いますが、備忘録として作成します。ドット絵エディタEDGE、編集にphotoshopを使用しました。
ドット絵の制作には無料・有料のソフトがあり、有名なところではEDGE（無料版有）というソフトがあります。
EDGEは10年以上使用されている高機能ドット絵エディタです。有料版もありますが、pictSQUAR用アバターは無料版で作成可能です。実は上のアバターの絵には失敗している点があります。どこだかわりますか？
ドット絵エディタ「EDGE」をダウンロードしにいく
正解は32ピクセルの枠全体まで書き込んでしまっていることです。最低でも周囲に1ピクセルずつ余白がないと、動いたときに見切れる部分が出てきたり何かと問題が起きます。縦横の中心を意識して、左右対称を意識したほうが無難に制作できます。
アップロードデータサイズ
画像サイズについての記載（pictSQUARE公式）
- 基本の描写32(px)×32(px)キャラクター描写用（1枚のサイズ）
- w96(px)×h128(px)アップロード用png背景透過データ）
ＧＩＦ出力もできる便利なソフトを使う
32pxの正方形におさまるドット絵でアバターを描写します。これはpictSQUAREがWOLF RPGエディター（※以下ウディタ）のマップチップを利用している為だそうです。ユーザー制作の様々な素材が配布されています。本格的にドット絵アニメーションの動作確認を行いたい方はウディチップビューアーの使用がオススメです。編集中の描写ソフトと連携してくれるので、保存するごとにリアルタイムで変更点が確認できます。このように、動かしながら確認するので修正箇所がよくわかります
ウディチップビューアーをダウンロードしにいく
pictSQUAREのドット素材について
公式のアナウンスによると、素材はぴぽや倉庫さんからお借りしているそうです。ぴぽさんはtwitterでも素材についての情報他、様々な制作についてのお話をされていますので、ドット絵制作に悩む前にサイトを見に行くといいかもしれません。
制作サイズの確認
公式で案内されている画像は12枚の歩行アニメーション用データなので32ピクセルの正方形のデータが12枚必要です。グリッド線を引いてそこに32ピクセルで描写したドット絵を配置していきました。12枚の画像を指定サイズに並べた状態が以下の画像です。
背景透過のグリッド配置済みpsdデータです（ご自由にお使い下さい/再配布不可）
- 正面、右向き、左向き（右向きの反転で可）後ろ向きが必要
- 32ピクセルの画像が12枚で歩行（アニメーション）データになる
12枚と聞くと大変そうに感じるかもしれませんが、画像の多くは反転などを使用して流用することができます。構造を理解すれば歩行以外のモーションもできそうです。
自己流制作手順
作る前に読めばよかった！
初回公開時にあまりにも知識不足だったので、EDGEについて少し検索し、追加素材を作りました。クリーチャーズの現役クリエイターさんによるこの講座がEDGEの操作のみならず、ドットについての解説として大変勉強になったのでオススメです。作ってみてなかなか時間がかかるなぁと思っていたのですが、ドット絵って根気よく描くやつ、であってるようです。
作業ウィンドウ
絵を参考に下絵を準備する
32×32の72dpi,RGB,pngを制作して、隣に画像をおきながら目検討であたりを描きます
カラー情報の共有
photoshopなどから取得したカラー情報は青、赤、緑の数値を入力してEDGEと共有できます。
あらかじめ使いそうな色を下絵にのせておく
EDGEのパレットは慣れないと操作が難しい印象なので、先に使いたい色を下絵にのせておくといいように思います。
photoshopでの作業
真正面（②の位置）を1枚描く
まずはphotoshopで下絵を制作します。
32ピクセルの下絵をざっくり書きます
色味を多く使いたい場合はこの時点で影色をおくといいです
インデックスカラーに変更します
EDGEで開けるように設定変更します
透明にチェックを入れます
webを選択します
PNG（最小ファイルサイズ）で保存します
8bit256色以内
EDGEで開き、半分だけ整えていきます
主にペンツールを使い、スポイトでカラーを選択していきます。これを基準にすべての方向を作りこんでいくので、この時点で使いたい配色などを入れ込んだ方がその後の作業がラクです。
半分整った時点で赤の範囲を選択します
EDGEでもshift+Cでコピー、ctrl+Vで貼り付け、右クリックで反転などの操作選択ができます。また、ctrl+Dで選択解除できますので、このあたりのショートカットは他の描写ソフトと似ている部分が多い印象です。
ペーストして確認します
足りない部分があればペンツールで追加します。整えるときのポイントは左右対称であるかという部分と、頭と体のサイズが1：1くらいにおさまっているかという部分です。顔の情報量が多いほうがカワイイので、体は小さ目でＯＫ。
頭の毛とペンを足して正面絵の完成です
この画像を96×128のpsdデータに12枚配置し、EDGEで開ける色数で保存後に同じ方法で上下左右方向に描き替えていきます。初日に作った時より2回目のほうが勝手がわかってきたので、チャームポイントの毛も3本いれることができました。アンチエイリアス、中間色をどの程度入れるかはお好みで描きこんで下さい。
画像枚数を減らしたアバターの表示実験
ほとんど消えている点滅するアバターになりました。
画像を1回配置 点滅アバター
どちらの方向を向いても変化のないアバターになりました。
1つの画像を12回配置 固定アバター
テンキー入力分岐のあるアバターになりました。
4つの画像を3回繰り返し配置 4方向
12枚も画像を作成するのが大変な方は、1枚または4枚の画像の組み合わせでもオリジナルアバターが作れます。点滅表示はバグに見えてしまうので、オススメできません。また、サーバ側に思わぬ負荷がかかってしまうことも無いとは言えないので、できるだけ公式の案内に準ずるデータを用意したほうがよさそうです。この表示のクセを生かして浮遊系アバターを作ったり、アバターのデザインに沿った動きを考えるのも楽しそうです。
アバターのアップロード方法
pictSQUARE（以下ピクスク）は購入者として参加する場合、店舗の設定などは必要ありません。出展希望の方は、アナウンスに沿ってアカウント作成を進めて下さい。ピクスクにログインし、制作したオリジナルアバターのアップロード方法について記載します。
pictSQUAREに移動してアバター設定をクリックします。
アバターを変更したい場合は現在のデータを削除し、再度別のデータをアップするだけでOKです。アバター設定の保存を忘れずにクリックしてください。保存が完了するとプレビューが表示されます。
デモ会場でアバターを確認
正常にアップロードが完了したアバターデータは左上に表示されます。
ニックネームを入力してアバターをクリックします。アバターにアニメーションが設定されていれば、選択しているアバターが動きます。名前の入力は必須項目になっていますが、デモ会場の場合は会場を出てしまうと毎回入力を要求される項目なので、気軽につけてＯＫです。
アバターが正常に配置されました
デモ会場ではテキストで制作されたアバターや、1色のみで制作された四角アバター、2人1組のアバターなど個性的なデザインが数々見受けられました。固定概念にとらわれず、好きなアバターで会場に赴くのも良いですね。
アバターの表示名とプロフィールについて
ピクスクに登録するとニックネームの入力が必要になります。
イベント会場内でアバターをクリックするとプロフィールという項目が表示され、アイコンとプロフィールが表示されます。プロフィールの登録ページには3つの活動サイト入力欄があり、ここにtwitterやサイトURLなどを入力できます。初回登録時にはデモページ内でもこのプロフィールが確認できましたが、09.07現在ではデモ会場にてプロフィールは表示されない仕様のようです。イベント参加者であっても一般参加者と同様に買い物をしたい場合、名称が固定されていると不便なのと、すべての登録内容が全体公開されるのはプライバシー的にやや問題があります。アバターの複数登録や名称の切り替えも現状はできませんので、アバターを変更したい場合はデータを差し替えなければいけません。プロフィール情報の公開状況やアバターの設定項目については引き続き検証してみます。
イベント参加時のアバター表示名
一般参加の場合は会場入場口でニックネームを入力、サークルとして参加する際のアバターの表示名はログイン時のニックネームと同一で固定されるようです。こちらについてもプロフィール表示と同じくイベント出店時に検証してみます。
サークル参加後にわかったことを追記しました 09.14
会場内の動作操作方法についての記述はこちら
まだ開発中β版であるため仕様変更の可能性があります。イベント会場内では操作方法の他にもチャットなどの操作があるので、確認が必要です
- 店舗内で会話しないとお互いにしゃべっている内容が確認できない
- 誰かが店舗に入店してくると店主にだけピコンと音が聞こえる（端末をミュートしていると聞こえない）
- ＠をつけると固定発言になる（自分の店舗か広場でのみ使用可）
- 広場での発言は全体に表示されている
- ログは5つまでしか残らない
- 固定発言は動くと消える（固定発言中は自動でアバターが消えない）
- 会場から出るときはブラウザを閉じるではなく、入口出口を使用しないとアバターが残ってしまう等
開発ログを追えないとルール違反をしていないか少し心配になりますね。これからのサービスだと思うので、普段イベントに慣れていない制作者にとっても、参加していける空間だと嬉しいです。
ピクスペログイン画面左下の使用方法内、会場内の操作方法に基本操作詳細が記載されています。
アバター入場口にも操作方法へのリンクがありますので、慣れないうちは別窓表示しながら歩くのもよさそうです
実用性の高そうなコンバーターの紹介
サイトにアップロードすることでドット変換してくれるサイトが便利そうでした！
オススメ ドット絵ナニカ
イラストから32ピクセルのドット絵を制作可能（どうぶつの森でも使用できる）
次回は店舗用外観編集とイベント検索、サークル参加方法についてを記述します。
vol.5 pictSQUARE店舗カスタムとイベント参加申し込み
オンライン即売会サービスpictSQUAREにサークル参加する方法 全5回
- オンライン即売会サービスpictSQUAREにサークル参加する方法vol.1/pictSPACEの解説
- オンライン即売会サービスpictSQUAREにサークル参加する方法vol.2/pictSPACEアカウント作成
- オンライン即売会サービスpictSQUAREにサークル参加する方法vol.3/pictSPACEヘッダーの編集と店舗への頒布物の登録
- オンライン即売会サービスpictSQUAREにサークル参加する方法vol.4/pictSQUARE用アバター制作
- オンライン即売会サービスpictSQUAREにサークル参加する方法vol.5/pictSQUARE店舗カスタムとイベント参加申し込み
ピクスク番外編① プロフィール欄のリンクを使ってアバター用着せ替え素材を無料配布する方法
コメント