【pictSQUARE用アバター】プリキュアアバターセット①(ヒープリ＋キュアパイン)【フリー素材】
pictSQUAREで使用できるプリキュアのアバター素材を配布します。
ぴぽや様作成のキャラチップ素材をベースに、私（ヌル夫）が作成しました。
動作デモ
利用規約
◆ＯＫ事項
- pictSQUAREでのアバター＆内装素材としての利用を想定して作成されていますが、それ以外の利用も可能です。(例えばRPGツクール、WOLFRPGエディタ等のゲーム開発用の素材やSNSアイコン、Webサイト用の素材など)
- 改変して利用する事も問題ありません。
- 利用報告は必須ではありませんが、報告して頂けると作者のモチベアップにつながります。
- 使用の際に作者名を表記する事は必須ではありません。もし表記される場合は、例えば下記のような形でお願いします。
◆ＮＧ事項
- 素材の再頒布は有償、無償を問わず禁止とします。改変した場合の再頒布も禁止です。
- 素材そのものをコンテンツとする商品（イラスト集、グッズ等）を販売・頒布する事は禁止します。
免責
これらの素材を使用したことで発生した問題に、制作者は一切の責任を負いかねます。
↓ ヒーリングアニマルのアバターはこちら
【pictSQUARE用アバター】ちりぬるお本舗のけもフレアバターセット【フリー素材】
概要
pictSQUARE向けの、「けものフレンズ」の二次創作アバターです。
pictSQUAREの「アバター設定」でアップロードすれば、そのままアバターとして使用できます。
CarasOhmi氏作のけもフレアバターを改変して作成した素材です。
原作
けものフレンズプロジェクト
https://kemono-friends.jp/
（※）このアバターはファンアートであり、けものフレンズプロジェクト公式の展開とは関係ありません。
利用規約
クレジット
◆けものフレンズプロジェクト（原作）
site ： https://kemono-friends.jp/
◆CarasOhmi（ けものフレンズアバターパック vol.01 ）
site ： https://banrakufriends.web.fc2.com/
Twitter ： https://twitter.com/BanrakuFriends
◆奇々浦ヌル夫（ちりぬるお本舗のけもフレアバターセット）
site ： https://nulluo.hatenablog.com/
Twitter ： https://twitter.com/k_nulluo
免責
これらのアバター素材を使用したことで発生した問題に、当方は一切の責任を負いかねます。
ドット絵が描けない人のためのpictSQUAREアバターの作り方
オンライン即売会pictSQUAREとは？
ソーシャルディスタンスが叫ばれる昨今、同人イベントが中止になって嘆いている皆さんも多いのではないでしょうか？
「ああ、三密を避けつつ開催できる即売会があったらいいのに…」
そんな時代の声に答える即売会が…実はあるんですよ、そう、それがオンライン即売会です！
オンライン即売会とは、オンラインの即売会です。いや、まんまやんけ。すいません、ちゃんと説明すると、オンライン即売会はオンライン上で即売会イベントを再現したもので、同人誌のサンプルを見て通販機能を利用してポチっと購入したり、チャット機能で作家とコミュニケーションをとったりできます。今回紹介するのはpictSQUAREというサービスです。
文章で説明するより、実際に見た方がどんなものか手っ取り早いでしょう。pictSQUAREさんがデモ動画を公開されているのでこちらをご覧ください。
このように、pictSQUAREのオンライン即売会のビジュアルは2DRPG風のマップとなっていて、サークル参加者やイベント参加者はドット絵のアバターを使用して即売会に参加する形となっています。
しかもアバターは、一定の規格に沿う形であれば好きな画像を使用する事ができるのです！
「え～、でもドット絵の作り方なんて分からないからな～」と思ったアナタ！
ドット絵の知識はいりません！誰でもpictSQUAREで自分のイメージに合ったアバターを作れるやり方をご紹介しよう、というのが今回の記事です！
以下の 3種類の方法を紹介しますので、自分にあったやり方を選んでください。
- 既成の素材を探す
- パーツを組み合わせてアバターを作る
- がんばって自作する
①既成の素材を探す場合
アバターは縦32×横32ピクセルを1コマとして作成する必要があります。それを上下左右4種の方向と足踏みの動き3コマ分で、合計4×3=12コマ分用意し、それらを一枚にまとめた画像(縦128×横96ピクセル)をアバター画像として使用します。すなわち、下記のようなイメージです。*1
そして、この規格ですが実は都合のいいことに有名なゲーム制作ソフトであるRPGツクールとWOLF RPGエディタ(通称ウディタ)に近い仕様となっております。ということは、RPGツクールやWOLF RPGエディタ向けに作られたキャラドット絵素材を、アバターとして利用できるかも？ということです。
「かも？」と書いたのは完全に互換性のある規格じゃないからです。
各ソフトのドット絵仕様は下記の通りです。
-
RPGツクール
12コマで1セットなのはpictSQUAREと同じ。
1コマ分のサイズは様々だが、縦32×横32ピクセルの仕様の物もある。*2
後述するが、規約上ツクール以外では使用できないものがあるので注意！ - WOLF RPGエディタ
12コマで1セットな素材だけでなく、もっと多いコマ数の場合もある。でもコマ数が12コマより多い場合は、必要な分だけ切り抜いて使えばOKです。
1コマ分のサイズは様々だが、縦32×横32ピクセルの仕様の物もあるのはRPGツクールと同じです。
このように、両ツール向けの素材の中には、pictSQUAREで使用できるものが結構あります。探すときのコツですが、「キャラチップ」「歩行グラフィック」などのキーワードで検索するのが良いです。（「32×32ピクセル」を追加すると、より見つけやすいかも）
既成の素材をアバターに使えないケース
ただし、基本的に素材には利用規約が付属しています。その利用規約によっては、pictSQUAREで使用できないケースがありますので、1つずつ解説します。素材を使用する前によく読んで理解しておいてください。
以下に述べる注意事項を無視して、トラブルが起きたとしても筆者は責任を負いかねますので、くれぐれもご承知おき下さい。
ケース①：オンライン即売会で利用不可の素材
そもそも規約でオンライン即売会で利用する事を禁止されている場合、当然ながらアバターとしての利用はできません。
オンライン即売会自体が、近年になって生まれたものなので、規約上でオンライン即売会を狙い撃ちして禁止しているケースはあまり聞いた事が無いですが、例えば規約が「ゲーム以外での利用不可」となっている場合などが該当します。*3
ケース②：RPGツクール以外で利用不可の素材
RPGツクールで作られたゲームでしか使用できない素材というのが存在します。これは何故かというと、RPGツクールは（株）KADOKAWAが販売する有料のゲーム制作ソフトですが、ソフトには多数の素材が収録されており、それらの素材をユーザーが加工して独自の素材として配布する場合、「RPGツクールで作られたゲーム以外に使用させない事」というルールを守る必要があるからです。素材も含めてKADOKAWAの商品ですからね。
したがって、「ツクール以外で使用不可」「ツクールRTP*4改変素材です」などと書かれた素材は使用してはいけません。
ケース③：商用利用不可の素材（サークル参加の場合）
一般参加者のアバターとして使用する分には、商用利用には当たらないかと思いますが、サークル参加者の場合はお金を受け取る場で素材を使用している以上、商用利用と基本的には判断するしかないでしょう。*5一般参加者のアバターの場合も、イベント運営側がアバターとして素材配布するようなケースでは商用利用と見做される可能性があるので避けた方が無難と思われます。
ケース④：その他
上記以外のケースでも、アバターとして利用できない場合が素材によってはあるかもしれません。よく利用規約を読んで、定められた条件に適しているかどうか判断した上で素材は使用しましょう。
あと、補足として「製作者名の表記必須」という利用条件もあります。そういった場合、ゲームならばエンドクレジットや説明書などに素材製作者の名前を載せるのですが、pictSQUAREのアバターの場合、どこに製作者名を載せればいいでしょうか？
pictSQUAREのアカウント設定に自己紹介を載せる欄があるので、ここに「アバターのドット絵は●●様の素材をお借りしました」等と書くしかないでしょうが、それで製作者の方が納得されるかどうか、確認しておいた方が良いと思われます。あの自己紹介欄はアバターをクリックすると他ユーザーからも見えるのですが、ちょっと見方が分かりにくく、あまり知られてない気がするので…
なんだか、サクっと書き上げるつもりが、既成の素材を探す場合の説明だけで結構なボリュームになってしまいましたが、それだけ素材というのは利用規約に注意が必要なものなのです。ご理解ください。
「う～ん、利用規約とか調べながら探すのは時間かかって手間なので、もっと簡単な方法は無いの？」という方は、次の「②パーツを組み合わせてアバターを作る場合」をご覧ください。
②パーツを組み合わせてアバターを作る場合
「素材を探すのは面倒だから、髪や服などのドット絵パーツを組み合わせて、自分好みのアバターを作る手順がいい」という方にはこちらの素材がオススメです。
こちらのぴぽや32×32キャラチップ素材はパーツを組み合わせてキャラクターを作るツールであるキャラクターなんとかJと、多数のパーツ素材がセットになったもの*6で、こちらをダウンロードして解凍すればすぐアバターが作れるめっちゃ便利な仕組みになっています。素晴らしい！神ツール！
利用規約も「商用利用OK」「製作者名の表記不要」「デジタル・アナログいかなる環境でも使用可能」となっているので安心です。
操作方法については、上記のぴぽや氏のサイトを参照してください。
③がんばって自作する場合
既成の素材にぴったりの物が無い、パーツ合成で作ろうとしても、しっくりこない…という場合はもう自分で作るしかありませんね！
さあ！アナタもドット絵制作沼に嵌りましょう！
これは私が過去にRPGツクール用のドット絵の描き方を書いた記事ですが、pictSQUAREのアバター制作方法としても読むことができます。(pictSQUAREと違って、サイズが縦32×横32ピクセルではなく、48×横48ピクセル前提で説明している点だけご注意ください。)
nulluo.hatenablog.com最初はゼロから自作するのは難しいと思いますので、既存の素材を加工するのが良いと思われます。その際は加工利用OKの素材を使用するようにして下さい。*7
あと、以下は多少画像編集の心得がある人向けの説明となってしまいますが、背景を切り抜いて透過PNG画像が作成できる人であれば、ドット絵を扱わずに好きな画像からアバターを作る方法があります。適当な画像を縦32×横32ピクセルに縮小して背景を透明化し、最初に述べた12コマの規格に従って並べればOKです。
これは、犬のフリー写真素材を加工して作成しました。見本なので手を抜きましたが、実際にはちゃんと上下左右それぞれの向きの画像を用意しましょう。
pictSQUARE上で表示するとこんな感じです。写真を切り抜くのは多少手間ですが、縦32×横32ピクセルに縮小した後なら手動でぽちぽち削ってもそんなに時間はかからないです。
おしまい
解説は以上です。皆さんが自分の好きなアバターでイベントに参加する手助けとなれば幸いです。ではでは。
*1:後で紹介する「ぴぽや32×32キャラチップ素材」を使用して作成しました。
*2:最新バージョンより数世代前のバージョンである、RPGツクールVX(2007年発売)向け素材は1コマの解像度が縦32×横32ピクセルの物が多いので、ツクールVX向けと書かれた物を探すのが狙い目です。
*3:「SNSのアイコン等への使用不可」と書かれている場合はどうだろう…個人的にはオンライン即売会はSNSとは呼ばない気がしますが、微妙な場合は製作者に問い合わせて確認した方が良いでしょう。
*4:RTPとはRPGツクールに同梱して販売されている素材集のようなものです
*5:無料頒布のみのサークルは別。
*6:ツールと収録素材の作者は別の方です。キャラクターなんとかJはseraphy氏によって開発されたオープンソースソフトウェアで、収録素材を作成されたのがぴぽや氏です。
*7:前述の、ぴぽや32×32キャラチップ素材も加工利用OKなので加工元としてオススメです。
RPGツクール用キャラチップの作り方(5/5) キャラチップのアニメーション
nulluo.hatenablog.com 前回の記事はこちらです。
キャラチップを動かしてみよう
今回はキャラチップの歩行アニメーションの作り方を解説するとともに、EDGEのアニメーション機能の使い方などについて紹介します。
前回で説明した通り、キャラチップは横に並んだ３枚のキャラクター画像が１セットとなって、各方向の歩行アニメーションを表現します。
説明を簡単にするために、上図の超シンプルなキャラクターで歩行アニメーション（左向き）の作り方を説明していきます。
EDGEのグリッドは48×48px単位に合わせています。まず、静止状態のキャラクターを
描きます。
隣のグリッドにキャラをコピーします。（前回の記事で説明した通り、編集単位を使用してズレなくコピペしてください）
いったん編集単位を解除して１ドット足の長さを縮めます。
ここで「レイヤ機能」を使用します。
「レイヤ管理ウィンドウの表示/非表示」ボタンをクリックしてレイヤ管理ウィンドウを表示します。
レイヤ管理ウインドウが表示されるのでレイヤの新規作成をクリックして新規レイヤを追加してください。（今までのレイヤの上に追加されます）
足を縮めた画像をコピーして上のレイヤの同じ場所に張り付けてください。上図のような形になっていればOKです。
レイヤ管理ウィンドウのレイヤの〇印をクリックすると〇が×に変わり、そのレイヤが非表示になります。下のレイヤを非表示にして一歩踏み出す動作を描きましょう。もう一度下レイヤの×アイコンをクリックするとレイヤが表示されますので、動きが不自然でないか、腕の長さが極端に変わってないか等の確認ができます。このように下レイヤの表示⇔非表示を切り替えながらアニメーションの動きを描いていきます。
同様の手順で、一番右に3枚目の歩行アニメ用の画像を描きました。では実際にこのドット絵を動かして動作を確認しましょう。
EDGEでドット絵アニメーションを動かす方法
「アニメーションフレームの表示/非表示」をクリックします。
アニメーションフレームの「フレームの取り込み開始」をクリックします。
「編集単位を使用」にチェックを入れます。
この状態で①→②→③→②の順に各画像をクリックします。
すると、アニメーションフレームにフレームが4枚が追加されます。
「再生ウィンドウ表示/非表示」をクリックします。
すると、先ほどの４枚の画像がアニメーションプレイヤで再生されます。
画像サイズが小さすぎる（大きすぎる）ときは虫眼鏡アイコンをONにした後、画像をクリックしてサイズを変更してください。
アニメーションの速度が速すぎる（遅すぎる）ときはスライダでスピード調整ができます。
アニメーションで複数のレイヤを同時に再生する場合
さて、EDGEでアニメーションの再生をするときに１点注意すべき事があります。
それは次のようなケースです。
ドット絵の編集画面ではちゃんとキャラクターを仕上げたつもりでしたが、アニメーションさせると、上図のように首無しのキャラが歩くアニメになってしまいました。
どうしてこんな事になったのでしょうか。
これは、パーツごとにレイヤを分けて描いていたからです。服や頭など、パーツごとにレイヤを分けて絵を描くことは良くありますが、その場合デフォルトでは１つのレイヤしかアニメーションプレイヤでは再生されません。この場合は次のように設定を変更します。
まず、「フレーム＞全て選択」を実行して全フレームを選択します。
すべてのフレームが青色に反転すればOKです。
「フレーム＞プロパティ一括変更」を開きます。
レイヤの左のチェックボックスにチェックを入れて、「可視」を選択します。
これで可視レイヤがすべてアニメーションに反映されるようになります。
SNS等に歩行アニメーションをアップする場合
アニメーションフレーム画面で「ファイル＞動画をアニメーションGIF形式で保存」を実行すると、歩行アニメｰションをGIF動画として保存できます。
設定項目が色々ありますが、ここは筆者はあまりいじらないのでよく分かっていません。とりあえず上図のような設定で出力しています。
これでGIF動画ができますが、例えばこれをシェアするためにTwitterにアップすると…
こんな感じに劣化した画質になってしまい、かなり残念な見え方になります。
筆者もTwitterのGIF動画の詳しい仕様は分かっていませんが、小さいGIF動画は無理やりでかいサイズに引き伸ばされ、このような残念画質になってしまうようです。
TwitterやPixivにアップする場合は見栄えを意識して、GIF動画のサイズを拡大しましょう。でも、どうやって？
EDGEにもサイズ拡大機能はありますが、１フレームずつサイズ変更して、先ほど説明したアニメーション作成の手順を繰り返すのは面倒です。もしあなたがPhotoshopをお持ちであれば、GIF動画のサイズを超簡単に拡大することができます。
EDGEから出力したGIF動画ファイルをPhotoshopで開いてください。
それから、「イメージ＞画像解像度」を開きます。
幅と高さを400%まで拡大します。（大体このぐらいがTwitterでシェアする時の適正サイズ。用途に合わせて拡大サイズは変更可ですが、100％の整数倍になるようにしてください）
また、「ニアレストネイバー法」を選ぶのを忘れないようにして下さい。（ドット絵に最適な拡大アルゴリズムです）
画面下の各フレーム下の数値をクリックするとディレイ（何秒間そのフレームを表示するか）が選べます。0.2ぐらいが適切でしょう。
さて、画像サイズ変更、ディレイの調整も終わったので「ファイル＞Webおよびデバイス用に保存」を開いてGIF動画を出力しましょう。「保存」を押すとGIF動画として保存できます。
テスト（これで終わりです。おさわがせしました） pic.twitter.com/1bfORfvzJ2
— 奇々浦ヌル夫 (@k_nulluo) August 10, 2019
このぐらいのサイズであればTwitterに投稿しても元画質を維持したまま再生することができます。
長らくおつきあいいただき、ありがとうございました。今回のシリーズ記事「RPGツクール用キャラチップの作り方」は以上となります。皆さんもどんどんキャラチップを作って動かしまくってください。その際、この記事が参考になれば幸いです。
RPGツクール用キャラチップの作り方(4/5) MVキャラチップの改造時のポイント
- MVのデフォルトキャラチップ素材を改造する
- 基本は48×48ピクセル！
- 48×48pxのグリッドを編集単位に設定する
- デフォ素材は左に１ピクセル寄ってるよ！
- キャラの背面画像をつくるときの注意
- 完成した複数のキャラチップを１つの画像にまとめる
- 宣伝
nulluo.hatenablog.com前回の記事はこちらです。
MVのデフォルトキャラチップ素材を改造する
今回の記事ではRPGツクールMVのデフォルト素材である、キャラチップの仕様を確認しながら、デフォルトのキャラチップをベースに独自のキャラ素材を作成する時のポイントを解説します。(キャラチップにはモンスターや宝箱などのように、多種多様な素材がありますが、今回はそれらは扱わず、人間のキャラチップに限定して解説します。)
MVの素材を使用していない人には、今回の記事は参考にならないと思いますのでその点ご注意を。
デフォルトキャラチップ素材を改造するときは、筆者はだいたい下記のような手順で作成しています。
１．キャラクタージェネレータを使い、作りたいキャラのイメージに近いキャラチップを出力
↓
２．色変更してさらに完成形のイメージに近づける（色変更の手順は前回の記事参照）
↓
３．細かい部分を修正して完成
ツクールMV付属のキャラクタージェネレータは便利なもので、髪や服など、色んなパーツを組み合わせて用途に合わせたキャラチップを生成することができます。その仕組みは素体と呼ばれるドット絵に、パーツを乗っけていくことで実現されています。
MVのキャラチップ素体はこんな感じです。
左が女性、右が男性です。*1
基本は48×48ピクセル！
素体は上図の通り、横にアニメーション用の３コマ分の足踏み画像、縦に各方向（上下左右）を向いた時のキャラクターが描かれており、各キャラクターは48×48pxの正方形におさまるように描かれています。*2
そして、上記の画像を縦に2枚、横に4枚並べた（つまり、キャラクター8人分の）576×384pxのPNG画像がキャラチップ素材として使用できます。ここまではヘルプに載っているのでMVユーザの皆さんはよくご存じかと思います。
48×48pxのグリッドを編集単位に設定する
前回の記事で導入したEDGEには、編集単位という便利な機能があります。この編集単位機能が、筆者がドット絵作成にEDGEをオススメする主な理由です。*3
これを使うと、キャラチップ編集が格段に楽になります。
設定方法は、まずEDGEの「設定＞ｸﾞﾘｯﾄﾞ＆編集単位一発変更＞設定」を開きます。
「未使用」の欄をクリックして「使用する」にチェックを入れると、グリッド(大)の間隔と編集単位が入力可能になりますので、それぞれの縦幅横幅を12px、48pxに設定してください。
そして「設定＞ｸﾞﾘｯﾄﾞ＆編集単位一発変更」で先ほど登録した「ｸﾞﾘｯﾄﾞ：12×12 編集単位：48×48」を選択します。
メニューの「矩形領域の選択」（点線の四角のアイコン）を推して、「編集単位使用」にチェックを入れます。
すると、領域の選択、コピー、切り取り、貼り付けが編集単位を基準に実行されるようになります。１ドットもズレなくキャラチップのコピー＆ペーストができるようになるという事です！
どういう事かは文章で説明するより、実際に使ってみてもらった方が分かりやすいと思います。参考までに編集単位を使用してキャラチップをコピー＆ペーストしている動画を載せておきました。
これで、「静止状態の素材を一個作った後、それをコピーして差分を書き加える事で１歩足を踏み出している素材を作る」といった作業がかなり楽になります。
デフォ素材は左に１ピクセル寄ってるよ！
先ほど見た通り、キャラクターは48×48pxのマスを基準に描かれています。キャラクターを48×48pxのマス目に入れたところの拡大図を以下に示します。
１ドットで描かれている鼻を垂直につらぬく幅１ドットのライン（上図の赤い縦線）を対象の軸として、素体は左右対称となっています。*4
ということは、キャラクターの横幅は奇数個のドットでできているという事です。
すなわちマス目の横幅ドットは偶数個、キャラクター自体の横幅ドットは奇数個なので、マス目とキャラクターの中心線は一致しません。48×48pxのマス目に対し、キャラクターは左に１ドット分片寄っていることになります。
「１ドット程度の片寄りがあったからといって、それがどうかしたの？」と言われそうですが、この１ドットのズレが原因で筆者は大いに苦しんだことがあります。ご紹介しましょう。
まず「静止状態」と「左足を１歩踏み出す」の２つの素材を作成しました。このキャラクターは左右対称なので「右足を１歩踏み出す」コマはコピペして左右反転するだけでいけるな、と思い、まず「左足を１歩踏み出す」素材をコピーしました。
その後、左右反転して「右足を１歩前に踏み出す」のコマを作成したのですが、アニメーションをテストするとなんだか違和感がありました。歩かせてみるとキャラが左右にブレるのです。
上記の手順で作成したキャラチップを拡大した図です。48×48pxのマス目とその中心を通るグリッドを黒線で、人物の中心線（幅１ドット）を赤線で表示しています。キャラ①は中心から１ドット右に寄っているのに対し、キャラ②と③は１ドット左に寄っているのが分かりますか？(キャラ①の鼻は中心線より右、キャラ②、③の鼻は中心線より左にきている点に注目して見て下さい)
そうです。左右対称だからといって反転すると、片寄る方向が左右逆になり、結果としてキャラに１ドット分のズレが発生することになるのです。これは絵が完成した後で左右反転したからすぐ問題に気づけましたが、顔や服など、パーツごとに作成していた場合、顔は左にズレて、服は右にズレてしまい…といった風に気づかないままどんどん歪みが大きくなってしまう恐れがあります。というか筆者はそうなってしまい、原因が分かるまでかなり悩みました。
こうならないように左右反転をした場合は、キャラクターを１ドットだけ横に移動させてズレを元に戻してやる必要があります。コレがコピペと左右反転を使ってキャラチップを作成する場合の注意１つ目です。
キャラの背面画像をつくるときの注意
次はキャラクターの背面の画像を作るときのポイントです。
まず、正面向きの画像のキャラを作成してコピーします。
ラッキーなことに、このキャラは服の前後がよく似ている（リボンやセーラーカラーの違いだけ）ので正面向きをちょっと加工すれば背面向きが作れそうです。
そうやって加工して作った背面画像が上図なのですが…なんだかちょっと違和感があるような…
さて、違和感の原因は素体の上に作ったキャラを乗せてみるとはっきりします。
②はよいのですが、①、③は素体とキャラがぴったり重なっていないことがわかります。原因は、素体の背面向きと正面向きの腕の形は違うからです。
素体の形に合うように腕の形を修正するとこのようになります。
とはいえ、ぶっちゃけ、ここまで正確に素体の形に合わせることにこだわるより、素体数を量産することを優先したい！という方は別にここまでしなくてもよいです！
正直こだわりたい人だけがこだわってくださいというレベルの話なので…
ただ、このように素体の形に合わせておくと、制作した服がジェネレータ用のパーツとして流用できる、というメリットがあります。
完成した複数のキャラチップを１つの画像にまとめる
さて、キャラチップが完成したら、使いやすいように複数のキャラチップを１つの画像にまとめます。（前述の通り、MVのキャラチップには８人分のキャラチップを保存できます）
合成作業はEDGEでしてもいいのですが、前回説明した通り、EDGEはカラーパレットという仕組みを使う都合上、256色までしか使用できません。8人分のキャラチップの色を合わせたら256色を超えてしまった！という場合は、EDGEでは合成作業ができませんので他のツールの出番となります。ここでは、例としてPhotoshopを使用します。*5
EDGEで作成したキャラチップをPNGで保存し、PhotoshopでPNGファイルを開きます。「イメージ＞モード」が「インデックスカラー」の形式になっているはずなので「RGBカラー」に変更します。これで256色を超える色数が扱えるようになります。
後は各キャラチップを合成していけばよいのですが、ここでちょっとだけ作業を楽にするコツがあります。
まず、下準備としてPhotoshopでもEDGEと同様に編集単位の設定をしておきましょう。「編集>環境設定＞ガイド・グリッド・スライス」を開きます。グリッド線の単位を48pixelに設定します。
「表示>スナップ先＞グリッド」を選択してグリッドへのスナップを有効化します。
EDGEで作成したキャラチップの角にマークを「ここまでが編集単位の角の端」と分かるようにマークを入れておきます。
こうしておくと、Photoshopでキャラチップを合成するときに、スナップ機能によって、貼り付けたい場所にぴたりと画像がくっついてくれるので、貼り付け先がズレないのです。地味なテクですが、手動で正しい位置に合わせようとするとドット単位で微調整をしなければならないので、これは作業をだいぶ楽にしてくれます！（貼り付けた後、角のマークを消すことをお忘れなく。）
宣伝
さて、今回はキャラチップの仕様とそれにまつわるコツをいくつか紹介してみました。
ちなみに、今回説明で使用したドット絵は拙作のドキドキ！プリキュアキャラチップです。利用条件などは下記リンクを参照してください。
次回はキャラチップのアニメーションについて解説する予定です！
RPGツクール用キャラチップの作り方(3/5) Edgeを使った素材の色変更
前回の記事はこちら
今回はドット絵の色変更のやり方について解説します。記事タイトルは「RPGツクール用キャラチップの作り方」としましたが、今回の記事はRPGツクールに限らず、ドット絵の加工方法を学びたい人なら誰でも役に立つ内容になっていると思います。
素材の色を変更したい！
ドット絵素材を使用するとき、色を変更して使いたいという事がよくあります。
ドット絵の色を変更する方法は色々あります。ここでは、使用されている色数が少ないというドット絵の利点を活かして、画像中の色を一色ずつ置き換えていく方法を紹介します。*1
色を変えるときの注意
例えば、この赤い球を元の素材として、色を赤から緑に変更してみます。
色変更してみました。元の素材で使用されている赤系の色を一色ずつ緑系の色に変更したのですが、何か不自然ですね？
不自然に見える理由は、元素材にあった暗い赤色→明るい赤色というグラデーション構成が色変えによって崩れているからです。色を変える場合は、原則として元の絵でグラデーションになっている場所は、色変更後も同様のグラデーションにしましょう。*2
このように、ちゃんとグラデーションを保つように色変更すると自然に見えますね。
EDGEを導入しよう
以後、解説を進めるにあたって導入してほしいソフトがあります。EDGEです。
ドット絵は、Photoshopやその他の画像編集ツール、極端な話Windowsに付属のペイントでも描くことができます。しかし、EDGEはドット絵を描くことに特化しており、ドット絵を描くための便利な機能が詰め込まれた優秀なツールで、しかも無料です。ドット絵を描く人には是非オススメします。
EDGEの導入方法と基本的な使い方はすでに分かりやすく解説されている記事があるのでこちら（↓）をご参照ください。
EDGEの機能について、このシリーズ記事でいくつか紹介していく予定ですが、まずEDGEを使う上で理解しておいてほしい事があります。それはEDGEで絵を描くときにはカラーパレットというものを使うという事です。
EDGEの画面です。左がEDGEで編集している画像、右側がカラーパレットです。カラーパレットはドット絵で使用する色を保存しておく領域です。カラーパレットには最大256種の色を格納でき、色を保存しているそれぞれのマス目には、0番から255番までのパレット番号が振られています。EDGEでは、画像データは「どのピクセルが何番のパレット番号の色で塗られているか」というデータに「カラーパレットでは何番のパレットがどんな色を保持しているか」というデータが組み合わさることで、1枚のカラー画像を表現しています。この画像データの形式を、インデックスカラーと呼びます。
したがって、カラーパレットの色を変更すれば画像の方の色も連動して変わります。（↑の動画参照）
このように、カラーパレットをうまく操作すれば色変えが手軽にできる！という点が、私がEDGEをオススメする理由の一つです。
スライムの色を変えてみよう
では、いよいよ実践としてキャラチップ素材の色変えをやってみます。サンプルとして使用するのは、ツクールMV素材のスライムです。
Monster.pngからスライムだけを切り抜いてEDGEで開いたところです。カラーパレットにたくさん色がありますが、実はほとんどは画像で使用していない無駄な色です。まずはパレットを整理してきれいにしましょう。
「カラーパレット＞パレット＞未使用色の削除と整理」を実行します。
使用していない色がパレットから消えてすっきりしました。
ではここから青色を置き換えて緑色のスライムを作ってみます。
カラーパレットの右上のアイコンをクリックします。すると、パレットをドラッグで、色の位置が変更できるようになります。
青色のパレットをグラデーション順に並び変えます。
次に、青色グラデーションの下に緑色グラデーションのパレットを作ります。パレットに新しい色を追加するには、パレットを選択して下のスライダを操作してください。
ここまで来たらもう出来たも同然です。画面右上の右から二番目のアイコンをクリックすると、ドラッグでRGB値が交換できるようになります。
点線の四角のアイコン（領域の選択）をクリックします。
パレットの青色グラデーション部分をドラッグで選択し、作成した緑色グラデーションと入れ替えると……スライムの色が緑色に変わりました！
お疲れさまでした！色変更の手順解説は以上です！
このように、色の変更をすることで1枚の素材の使い道は何倍にもバリエーションが広がります。皆さんも是非、モンスターの色変えをしたり、キャラクターの髪をお気に入りの色に変更したりしてみて下さい。
補足
EDGEでPNG画像を開こうとすると、「PNGの、このパレットタイプには対応していません」というエラーが出て画像が編集できないことがあります。
これは、PNG画像が先に述べたインデックスカラーという形式になっていないからです。*3
PNG画像をインデックスカラー形式に変換するにはいくつか方法があります。筆者はPhotoshopを使っているので「イメージ＞モード＞インデックスカラー」から変換実行しています。
注：パレットを「使用中の色を全て割り付ける」にしておくこと。
Photoshop以外でも、フリーソフトでインデックスカラー形式への変換ができるソフトがいくつかあります。（例：Irfanviewの減色機能など）興味のある人は「PNG 減色」等のキーワードでググってみてください。
次回はMVデフォルトキャラチップ素材の解説です！
*1:他の方法としては、例えばPhotoshopなどの画像編集ソフトを用意して、色調補正機能で色相・彩度の変更をするといった手順が考えられます。本記事で説明しているパレットの色を１つずつ変更する方法とどちらが良いかは一長一短で、一般的にいって画像編集ソフトの色調補正機能の方が簡単な操作で色変えができますが、本記事で紹介している方法ではドット単位で色変更できるので細かい調整をきかせやすいという利点があります。
*2:「原則として」というただし書きを入れたのは、元素材のグラデーションを無視して色変えする場合もあるからです。実は無視したほうが良いケースも割と多い…。例えばグラデーション模様が描かれた服のドット絵であれば、グラデーションを無視して色変更しても、そういう模様の服なんだと思えば特に違和感はありません。つまり元絵のグラデーションを無視しても、ドット絵として破綻しないのであれば問題ありません。本記事でいう、元素材のグラデーションを保つようにすべきというのは「物体の光と陰のグラデーション等は色変更によってグラデーションが崩壊すると不自然に見える」というコトです。
*3:PNG画像がフルカラー形式と呼ばれるモードを使用しているとこのエラーが出ます。各ピクセルがパレット番号を保持し、パレットに色を格納して画像を表現するインデックスカラー形式に対して、フルカラーとは各ピクセルごとに直接色情報を保持する形式を意味します。使用できる色数がパレットの色数（255色）に制限されるインデックスカラーと異なり、一つの画像により多くの色を使用することができるのが特徴です。
RPGツクール用キャラチップの作り方(2/5) 【超基本】ドット絵の描き方
まずは、ドット絵を１から描く方法です。記事タイトルは「RPGツクール用キャラチップの作り方」としましたが、今回の記事はRPGツクールに限らず、ドット絵の描き方を学びたい人なら誰にでもオススメできる内容になっています。
といっても、人間キャラなど、いきなり複雑なドット絵を描くのは大変なので、わりと描きやすいモデルとしてプリキュアの妖精をキャラチップ化してみることにしました。
ドキドキ！プリキュアに登場する妖精ラケルのドットを打っていきます。
朝日放送テレビ｜ドキドキ！プリキュア｜キャラクター｜プリキュア
① まずはシルエットを描きます。いきなり細部を描くのではなく、まずはシルエットを描いて全体のバランスを確認しましょう。この例では水色で妖精のシルエットを描いています。
ただし、シルエットだけだとパーツの重なった部分の形状を把握するのが難しくなるので、そういう場合はパーツの境目に補助線を入れます。この例では妖精の耳と頭の境目などに入れている黒の線が補助線です。
② シルエットができたら細部を書き込んでいきます。
③ さらに色数を増やして輪郭線、カゲ、アンチエイリアス（※）のドットなどを打っていきます。
※アンチエイリアス…ドット絵の線がカクカクして見えるのを抑えるためにドットを追加する処理
④ 左上が光源である想定で、ハイライトを入れました。③と④の違いが分かりますか？
違いが分かりやすいように拡大しました。ハイライトを入れることで立体感が増しているのが分かるかと思います。
⑤ 仕上げです。輪郭と目の色を濃くしました。なぜこのような色調整をしたかというと、④をツクールでキャラチップとして使用して表示してみると次のような問題点が明らかになったためです。
・輪郭線が薄すぎて周囲とキャラとの境目がぼんやりして分かりにくい
・目がどこか、少し分かりにくい(気がする)
ツクール上で④、⑤を表示したところ
どれだけ画像単体で観たときにドット絵が綺麗に見えたとしても、キャラチップとして使用するためにはゲーム画面上で表示されたときにプレイヤーに、何のドット絵であるか伝わらなければ意味がありません。
上記の例でいうと④の方が目の色は原作に近いのですが、キャラクターの印象を決定づけるキーパーツである目を目立たせるために、あえて原作からカラーリングをずらした配色をしました。制作中は④の方がいいと思っていましたが、⑤の方がよりプレイヤーに伝わりやすいデザインであると判断して変更したのです。
このように、ドット絵制作ツールでの見え方と、ツクール上での見え方は結構異なることがあるので、最後の仕上げの際にはツクール上で使用して見え方をテストしたほうがよいでしょう。
ドット絵の描き方の基本は以上です。
次回は、ドット絵制作ツールEdgeを使ってキャラチップを作成する方法を解説します！
