株式会社バサラ

こんなアバターが作りたい！というイラストをザックリ描いておくと進めやすいです。（前面＋後ろ・横のデザインも決めておくとスムーズです。）
すでにイラストがある方は、アバターにするとどんな感じになるかなとイメージしてみてください。

だいたいの等身を決めてください。他のアバターを参考にしてみるのもいいと思います。参考にしたいアバターがあれば用意しておきましょう。

チャットでアバターを実際に使ってみると、
アバターの絵の部分と、透明になっている部分があります。

作成するときに、透明にしたい部分はアバターで使用していない色（抜き色）で塗りつぶしておきます。（※左の例は、黄緑色が抜き色）

こうしておくと、抜き色の部分が透明になります。

※MetaGateでは、左上の角に使用されている色が、自動的に抜き色と判断されるので、画像の左上角には絵を置かないでください。

MetaGateのチャットに入ると、アバターの抜き色の部分は透明になります。

抜き色と似た色をアバターにも使用していると、間違えやすいのでさけた方がいいでしょう。

今回は一番簡単な1コマ横32×縦64、上下左右の歩き2コマ、Ctrlキー対応なしで、バサラのアノニマスアバター・タコヤキ君を例に説明していきます。（←タコヤキ君）

線画を描く
鉛筆ツールを使い、デザインイラストを見ながら、アバターの元になる線画を描いていきましょう。（イラストをスキャニングして読み込んでおくと、よりわかりやすいです。）消しゴムを使わず、２色で描いていくと作業が楽です。

ベタ塗り
色を決めて塗りつぶしツールで塗りましょう。（中間色で塗っています。）
※塗りつぶしの際、アンチエリアスはOFFにしてください。

※色の例
各色３階調（明るい部分の色・中間の色・暗い部分の色）、用意しておくとわかりやすいと思います。

簡単に塗りわける
明るい部分、暗い部分をザックリ塗り分けましょう。

描き込む
ここは自由に描き込んでクオリティアップさせましょう。
よくわからない方は、この工程を抜かしてもカタチになると思うので抜かしちゃっても構いません。

前面のレイヤーを複製し、左右を反転させます。
それを元に、後ろ向きに描きかえます。（目や口を塗りつぶすなど。）

大きさや、頭・肩・腰などの高さを、前面・後面と合わせて作成すると違和感が出ません。バランスを見ながら描きましょう。

左右どちらかを作成し終わったら、レイヤーを複製して左右反転させます。
左右でデザインや光の向きを変える方は、反転させたレイヤーを元に描きかえてください。

ここまでは静止の絵を作成してきました。ここからはアバターに歩く動きをつけていきたいと思います。アニメーションのコマ数は任意ですが、ここでは簡単な２コマで説明をします。

１コマ目
先程、作成した前面の静止絵レイヤーを複製し、それを元に１コマ目を作成していきます。
右足左手を手前に、左足右手を奥に描きかえましょう。

２コマ目
終わったらレイヤーを複製し、左右反転します。
左右でデザインや光の向きを変える方は、反転させたレイヤーを元に描きかえてください。

前面完成
２コマ目の足辺りを１ドット下に詰めると、絵が上下し歩いてる感じが出ます。これで前面は完成です。
１コマ目・２コマ目を合わせるとこんな感じになります。

１コマ目
先程、作成した後面の静止絵レイヤーを複製し、それを元に前面のアニメーションと同様に作成していきます。

２コマ目
終わったらレイヤーを複製し、左右反転します。
左右でデザインや光の向きを変える方は、反転させたレイヤーを元に描きかえてください。

後面完成
２コマ目の足辺りを１ドット下に詰めると、絵が上下し歩いてる感じが出ます。これで後面は完成です。
１コマ目・２コマ目を合わせるとこんな感じになります。

１コマ目
前面・後面と違う点は、先程作成した静止絵が、そのまま１コマ目になるところです。

左面２コマ目
左面の静止絵レイヤーを複製し、それを元に２コマ目を作成していきます。

左面完成
２コマ目の足辺りを１ドット下に詰めると、絵が上下し歩いてる感じが出ます。これで左面は完成です。
１コマ目・２コマ目を合わせるとこんな感じになります。

右面２コマ目
終わったら左面２コマ目のレイヤーを複製して左右反転します。
左右でデザインや光の向きを変える方は、反転させたレイヤーを元に描きかえてください。

右面完成
２コマ目の足辺りを１ドット下に詰めると、絵が上下し歩いてる感じが出ます。これで右面は完成です。
１コマ目・２コマ目を合わせるとこんな感じになります。

接地感を出すためにアバターの足元に影をつけましょう。
タコヤキ君の影はグレーですが、黒でも構いません。

透明にしたい部分を抜き色で塗りつぶしましょう。
ここまでの解説では、見やすくするために抜き色を使用していませんでした。
すでに抜き色を使用していた方もこの段階で必ず抜き色の確認しましょう。

・１色で塗りつぶされているかどうか（似たような色が混ざっていないか）
・アバターの絵に間違えて抜き色を使っていないかどうか
・左上角の１ドットは抜き色になっているかどうか

これで、２コマアニメーションに必要なアバターの絵が揃いました。
オリジナルアバター完成間近です。

MetaGateのチャットでは、アバターが前後左右に歩くだけではなく、その場に座ることもできます。（操作はCtrl＋↓です。）
PNGアバターでは上から５段目に画像を置くと「座るアニメ」として認識されます。
（MNGアバターでは特定のコマンドキーをつけることで追加されます。）
この５段目以降は必須ではありません。なくてもアバターとして問題なく使用することができます。（５段目以降がない場合には、Ctrl＋↓を押しても変化がありません。）
座る、といっても絵を変えれば違う機能になります。アバターがジャンプしたりしても面白いかもしれませんね。この５段目にどういう動きをつけるかはあなた次第です。

←PNGアバターで、右側にコマを足していくとコマ数を増やす事ができます。
４コマでアバターを作成したい方は、一緒に作成した静止絵と合わせるとわりと簡単に作成できます。
足を開いているコマで、１ドット詰めると、絵が上下し歩いてる感じが出ます。
この例は、
静止→右足左手を出す→静止→左足右手を出す
という流れのアニメーションになっています。

４コマアバター完成イメージ

まず、横６４px×縦２５６pxのファイルを新規作成します。

これに作成したアバターの絵をコピー＆ペーストしていきます。

上から、前面・後面・左面・右面の順に並べていきます。
左から、１コマ目・２コマ目の順になっています。

完成アバター画像

全部ペーストし終わったら、pngに変換して保存します。
保存したpngファイルをサーバへアップロードしましょう。

giamを起動します。
↓これがgiamの画面です。

↑の画面に作成した画像を一枚ずつドラッグ＆ドロップしていきます。
この例では、分かりやすくする為にまず「右歩きの動作（2コマ）」のみドラッグ＆ドロップしています。
慣れてきたら、上下左右の歩き画像（あれば、停止やCtrlキー対応の画像も）を一度に入れても大丈夫です。

右側の数値を設定します。

・透過色の使用にチェックを入れ、下の透過色の右側のボタンを押して、
透明にしたい色をスポイトで選択します。
・ウェイトにチェックを入れ、好みの数値を入力します。目安は20〜25です。
（数値が高くなるほど動きが鈍くなります。）
・消去手段を「背景色でつぶす」に変更します。

これで数値の設定は終了です。他のコマも同じように設定しましょう。

コマンドキーを設定します。
（各動作の始めのコマ＜上記画像では1コマ目、PNGアバターで見ると一番左側にあたる＞を選択しておいてください）

・上から2段目「Key追加」を押し、キー編集のウインドウを出します。
・既にある「Software」を「リストで選択したキーの削除」で消去します。
・「新規キー」に（※1）対応するコマンド（この例では「_move_6」）を入力し、「この新規キーを追加」を押します。

終了したら「閉じる」で、元の画面に戻ります。
各動作の始めのコマ以外は、既にある「Software」を「リストで選択したキーの削除」で消去しておきます。

全ての設定が終了したら下記のようにして保存します。
最大色数は作成したアバターの色数を把握していたら、それに合わせて下さい。