nulluoの制作日誌(仮)

ゲーム制作、プログラミング、グラフィック(特にドット絵)関連

【pictSQUARE用アバター】プリキュアアバターセット②(ヒーリングアニマル)【フリー素材】

pictSQUAREで使用できるプリキュアアバター素材を配布します。今回はヒーリングっどプリキュアよりヒーリングアニマル達です。

 

f:id:nulluo:20200906130711p:plain

ヒーリングアニマルズ

ラテはぴぽや様作成のキャラチップ素材をベースに、私(ヌル夫)が作成しました。

f:id:nulluo:20200906130303p:plain

ラビリン

f:id:nulluo:20200906130403p:plain

ペギタン

f:id:nulluo:20200906130428p:plain

ニャトラン

f:id:nulluo:20200906130451p:plain

ラテ

※歩いているペギタンが欲しいという要望があったので置いときます

f:id:nulluo:20200906130623p:plain

ペギタン(歩き)


動作デモ

f:id:nulluo:20200906133020g:plain

動かしたところ


利用規約

◆OK事項

  • pictSQUAREでのアバター&内装素材としての利用を想定して作成されていますが、それ以外の利用も可能です。(例えばRPGツクール、WOLFRPGエディタ等のゲーム開発用の素材やSNSアイコン、Webサイト用の素材など)
  • 改変して利用する事も問題ありません。
  • 利用報告は必須ではありませんが、報告して頂けると作者のモチベアップにつながります。
  • 使用の際に作者名を表記する事は必須ではありません。もし表記される場合は、例えば下記のような形でお願いします。

    奇々浦ヌル夫
    https://nulluo.hatenablog.com 

◆NG事項

  • 素材の再頒布は有償、無償を問わず禁止とします。改変した場合の再頒布も禁止です。
  • 素材そのものをコンテンツとする商品(イラスト集、グッズ等)を販売・頒布する事は禁止します。

   

免責

これらの素材を使用したことで発生した問題に、制作者は一切の責任を負いかねます。

 

【pictSQUARE用アバター】プリキュアアバターセット①(ヒープリ+キュアパイン)【フリー素材】

pictSQUAREで使用できるプリキュアアバター素材を配布します。

 

f:id:nulluo:20200902042716p:plain

プリキュアアバターセット

ぴぽや様作成のキャラチップ素材をベースに、私(ヌル夫)が作成しました。

 

f:id:nulluo:20200902232742p:plain

キュアグレース

f:id:nulluo:20200902232805p:plain

キュアフォンテーヌ

f:id:nulluo:20200902232833p:plain

キュアスパークル

f:id:nulluo:20200902232854p:plain

キュアアース

f:id:nulluo:20200902232914p:plain

キュアパイン



動作デモ

f:id:nulluo:20200902043222g:plain

動かしたところ

 



利用規約

◆OK事項

  • pictSQUAREでのアバター&内装素材としての利用を想定して作成されていますが、それ以外の利用も可能です。(例えばRPGツクール、WOLFRPGエディタ等のゲーム開発用の素材やSNSアイコン、Webサイト用の素材など)
  • 改変して利用する事も問題ありません。

 

  • 利用報告は必須ではありませんが、報告して頂けると作者のモチベアップにつながります。
  • 使用の際に作者名を表記する事は必須ではありません。もし表記される場合は、例えば下記のような形でお願いします。

    奇々浦ヌル夫
    https://nulluo.hatenablog.com 

◆NG事項

  • 素材の再頒布は有償、無償を問わず禁止とします。改変した場合の再頒布も禁止です。
  • 素材そのものをコンテンツとする商品(イラスト集、グッズ等)を販売・頒布する事は禁止します。

   

免責

これらの素材を使用したことで発生した問題に、制作者は一切の責任を負いかねます。

 

【pictSQUARE用アバター】ちりぬるお本舗のけもフレアバターセット【フリー素材】

f:id:nulluo:20200820115529j:plain

けもフレアバターセット

 概要

 pictSQUARE向けの、「けものフレンズ」の二次創作アバターです。
 pictSQUAREの「アバター設定」でアップロードすれば、そのままアバターとして使用できます。

 CarasOhmi氏作のけもフレアバターを改変して作成した素材です。

f:id:nulluo:20200902224055p:plain

コツメカワウソ

f:id:nulluo:20200902224122p:plain

ジャガー

f:id:nulluo:20200902224152p:plain

スナネコ

f:id:nulluo:20200902224222p:plain

ブラックジャガー

 

f:id:nulluo:20200902230858p:plain

ミライ

原作

 けものフレンズプロジェクト
 https://kemono-friends.jp/

 (※)このアバターはファンアートであり、けものフレンズプロジェクト公式の展開とは関係ありません。


利用規約

↓こちらのけもフレアバターの規約に従って下さい

note.com


クレジット

 ◆けものフレンズプロジェクト(原作)
  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.net

文章で説明するより、実際に見た方がどんなものか手っ取り早いでしょう。pictSQUAREさんがデモ動画を公開されているのでこちらをご覧ください。

 


pictSQUAREへようこそ!

 

このように、pictSQUAREのオンライン即売会のビジュアルは2DRPG風のマップとなっていて、サークル参加者やイベント参加者はドット絵のアバターを使用して即売会に参加する形となっています。

 

しかもアバターは、一定の規格に沿う形であれば好きな画像を使用する事ができるのです!

「え~、でもドット絵の作り方なんて分からないからな~」と思ったアナタ!

ドット絵の知識はいりません!誰でもpictSQUAREで自分のイメージに合ったアバターを作れるやり方をご紹介しよう、というのが今回の記事です!

以下の 3種類の方法を紹介しますので、自分にあったやり方を選んでください。

  1. 既成の素材を探す
  2. パーツを組み合わせてアバターを作る
  3. がんばって自作する

①既成の素材を探す場合

アバターは縦32×横32ピクセルを1コマとして作成する必要があります。それを上下左右4種の方向と足踏みの動き3コマ分で、合計4×3=12コマ分用意し、それらを一枚にまとめた画像(縦128×横96ピクセル)をアバター画像として使用します。すなわち、下記のようなイメージです。*1

f:id:nulluo:20200808045021p:plain

pictSQUAREのアバター規格

そして、この規格ですが実は都合のいいことに有名なゲーム制作ソフトである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のアバターの場合、どこに製作者名を載せればいいでしょうか?

f:id:nulluo:20200808085827p:plain

ここに製作者名表記できるんだけど…

pictSQUAREのアカウント設定に自己紹介を載せる欄があるので、ここに「アバターのドット絵は●●様の素材をお借りしました」等と書くしかないでしょうが、それで製作者の方が納得されるかどうか、確認しておいた方が良いと思われます。あの自己紹介欄はアバターをクリックすると他ユーザーからも見えるのですが、ちょっと見方が分かりにくく、あまり知られてない気がするので… 

 

 なんだか、サクっと書き上げるつもりが、既成の素材を探す場合の説明だけで結構なボリュームになってしまいましたが、それだけ素材というのは利用規約に注意が必要なものなのです。ご理解ください。

「う~ん、利用規約とか調べながら探すのは時間かかって手間なので、もっと簡単な方法は無いの?」という方は、次の「②パーツを組み合わせてアバターを作る場合」をご覧ください。

②パーツを組み合わせてアバターを作る場合

「素材を探すのは面倒だから、髪や服などのドット絵パーツを組み合わせて、自分好みのアバターを作る手順がいい」という方にはこちらの素材がオススメです。

pipoya.net

こちらのぴぽや32×32キャラチップ素材はパーツを組み合わせてキャラクターを作るツールであるキャラクターなんとかJと、多数のパーツ素材がセットになったもの*6で、こちらをダウンロードして解凍すればすぐアバターが作れるめっちゃ便利な仕組みになっています。素晴らしい!神ツール!

利用規約も「商用利用OK」「製作者名の表記不要」「デジタル・アナログいかなる環境でも使用可能」となっているので安心です。

操作方法については、上記のぴぽや氏のサイトを参照してください。

 

③がんばって自作する場合

既成の素材にぴったりの物が無い、パーツ合成で作ろうとしても、しっくりこない…という場合はもう自分で作るしかありませんね!

さあ!アナタもドット絵制作沼に嵌りましょう!

 

これは私が過去にRPGツクール用のドット絵の描き方を書いた記事ですが、pictSQUAREのアバター制作方法としても読むことができます。(pictSQUAREと違って、サイズが縦32×横32ピクセルではなく、48×横48ピクセル前提で説明している点だけご注意ください。)

nulluo.hatenablog.com最初はゼロから自作するのは難しいと思いますので、既存の素材を加工するのが良いと思われます。その際は加工利用OKの素材を使用するようにして下さい。*7

 

あと、以下は多少画像編集の心得がある人向けの説明となってしまいますが、背景を切り抜いて透過PNG画像が作成できる人であれば、ドット絵を扱わずに好きな画像からアバターを作る方法があります。適当な画像を縦32×横32ピクセルに縮小して背景を透明化し、最初に述べた12コマの規格に従って並べればOKです。

f:id:nulluo:20200808081452p:plain

犬写真提供元:フリー素材ドットコム

これは、犬のフリー写真素材を加工して作成しました。見本なので手を抜きましたが、実際にはちゃんと上下左右それぞれの向きの画像を用意しましょう。

f:id:nulluo:20200808082348p:plain

アバターでオンライン即売会に参加

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なので加工元としてオススメです。

自作ゲームまとめ

色んなところで作ったゲームの情報が散逸してきたのでまとめます。

・全年齢
フリーゲーム夢現「奇々浦ヌル夫」のページ
https://freegame-mugen.jp/cms/mt-cp.fcgi?__mode=view&blog_id=1&id=2992


・R-18
うらポジ神経衰弱
http://nulluo.x.fc2.com/App/UrapojiPelmanism1.html


他にもアップしたら追加していきます。

RPGツクール用キャラチップの作り方(5/5) キャラチップのアニメーション

 

nulluo.hatenablog.com 前回の記事はこちらです。

 

キャラチップを動かしてみよう

今回はキャラチップの歩行アニメーションの作り方を解説するとともに、EDGEのアニメーション機能の使い方などについて紹介します。

 

f:id:nulluo:20190810220359p:plain

前回で説明した通り、キャラチップは横に並んだ3枚のキャラクター画像が1セットとなって、各方向の歩行アニメーションを表現します。

 

f:id:nulluo:20190810220740p:plain

説明を簡単にするために、上図の超シンプルなキャラクターで歩行アニメーション(左向き)の作り方を説明していきます。

 

f:id:nulluo:20190810220913p:plain

EDGEのグリッドは48×48px単位に合わせています。まず、静止状態のキャラクターを

描きます。

 

f:id:nulluo:20190810221259p:plain

隣のグリッドにキャラをコピーします。(前回の記事で説明した通り、編集単位を使用してズレなくコピペしてください)

 

f:id:nulluo:20190810223727p:plain

いったん編集単位を解除して1ドット足の長さを縮めます。

 

f:id:nulluo:20190810221723p:plain

ここで「レイヤ機能」を使用します。

「レイヤ管理ウィンドウの表示/非表示」ボタンをクリックしてレイヤ管理ウィンドウを表示します。

 

f:id:nulluo:20190810222547p:plain

レイヤ管理ウインドウが表示されるのでレイヤの新規作成をクリックして新規レイヤを追加してください。(今までのレイヤの上に追加されます)

 

f:id:nulluo:20190810224747p:plain

足を縮めた画像をコピーして上のレイヤの同じ場所に張り付けてください。上図のような形になっていればOKです。

 

f:id:nulluo:20190810225747p:plain

レイヤ管理ウィンドウのレイヤの〇印をクリックすると〇が×に変わり、そのレイヤが非表示になります。下のレイヤを非表示にして一歩踏み出す動作を描きましょう。もう一度下レイヤの×アイコンをクリックするとレイヤが表示されますので、動きが不自然でないか、腕の長さが極端に変わってないか等の確認ができます。このように下レイヤの表示⇔非表示を切り替えながらアニメーションの動きを描いていきます。

 

f:id:nulluo:20190810230244p:plain

同様の手順で、一番右に3枚目の歩行アニメ用の画像を描きました。では実際にこのドット絵を動かして動作を確認しましょう。

EDGEでドット絵アニメーションを動かす方法

f:id:nulluo:20190810230535p:plain

「アニメーションフレームの表示/非表示」をクリックします。

 

f:id:nulluo:20190810230833p:plain

アニメーションフレームの「フレームの取り込み開始」をクリックします。

 

f:id:nulluo:20190810231306p:plain

「編集単位を使用」にチェックを入れます。

 

f:id:nulluo:20190810231421p:plain

この状態で①→②→③→②の順に各画像をクリックします。

 

f:id:nulluo:20190810233042p:plain

すると、アニメーションフレームにフレームが4枚が追加されます。

 

f:id:nulluo:20190810233246p:plain

「再生ウィンドウ表示/非表示」をクリックします。

 

f:id:nulluo:20190810233650g:plain

すると、先ほどの4枚の画像がアニメーションプレイヤで再生されます。

 

f:id:nulluo:20190810233910p:plain

画像サイズが小さすぎる(大きすぎる)ときは虫眼鏡アイコンをONにした後、画像をクリックしてサイズを変更してください。

アニメーションの速度が速すぎる(遅すぎる)ときはスライダでスピード調整ができます。

 

アニメーションで複数のレイヤを同時に再生する場合

さて、EDGEでアニメーションの再生をするときに1点注意すべき事があります。

それは次のようなケースです。

f:id:nulluo:20190810234555g:plain

ドット絵の編集画面ではちゃんとキャラクターを仕上げたつもりでしたが、アニメーションさせると、上図のように首無しのキャラが歩くアニメになってしまいました。

どうしてこんな事になったのでしょうか。

 

f:id:nulluo:20190810234333p:plain

これは、パーツごとにレイヤを分けて描いていたからです。服や頭など、パーツごとにレイヤを分けて絵を描くことは良くありますが、その場合デフォルトでは1つのレイヤしかアニメーションプレイヤでは再生されません。この場合は次のように設定を変更します。

 

f:id:nulluo:20190810235141p:plain

まず、「フレーム>全て選択」を実行して全フレームを選択します。

すべてのフレームが青色に反転すればOKです。

 

f:id:nulluo:20190810235305p:plain

「フレーム>プロパティ一括変更」を開きます。

 

f:id:nulluo:20190810235438p:plain

レイヤの左のチェックボックスにチェックを入れて、「可視」を選択します。

これで可視レイヤがすべてアニメーションに反映されるようになります。

 

SNS等に歩行アニメーションをアップする場合

f:id:nulluo:20190811000003p:plain

アニメーションフレーム画面で「ファイル>動画をアニメーションGIF形式で保存」を実行すると、歩行アニメーションをGIF動画として保存できます。

f:id:nulluo:20190811002423p:plain

設定項目が色々ありますが、ここは筆者はあまりいじらないのでよく分かっていません。とりあえず上図のような設定で出力しています。

 

これでGIF動画ができますが、例えばこれをシェアするためにTwitterにアップすると…

 

f:id:nulluo:20190811002555p:plain

こんな感じに劣化した画質になってしまい、かなり残念な見え方になります。

筆者もTwitterのGIF動画の詳しい仕様は分かっていませんが、小さいGIF動画は無理やりでかいサイズに引き伸ばされ、このような残念画質になってしまうようです。

TwitterやPixivにアップする場合は見栄えを意識して、GIF動画のサイズを拡大しましょう。でも、どうやって?

 

EDGEにもサイズ拡大機能はありますが、1フレームずつサイズ変更して、先ほど説明したアニメーション作成の手順を繰り返すのは面倒です。もしあなたがPhotoshopをお持ちであれば、GIF動画のサイズを超簡単に拡大することができます。

 

f:id:nulluo:20190811002648p:plain

EDGEから出力したGIF動画ファイルをPhotoshopで開いてください。

それから、「イメージ>画像解像度」を開きます。

 

f:id:nulluo:20190811002722p:plain

幅と高さを400%まで拡大します。(大体このぐらいがTwitterでシェアする時の適正サイズ。用途に合わせて拡大サイズは変更可ですが、100%の整数倍になるようにしてください)

また、「ニアレストネイバー法」を選ぶのを忘れないようにして下さい。(ドット絵に最適な拡大アルゴリズムです)

 

f:id:nulluo:20190811003312p:plain

画面下の各フレーム下の数値をクリックするとディレイ(何秒間そのフレームを表示するか)が選べます。0.2ぐらいが適切でしょう。

 

f:id:nulluo:20190811003702p:plain

さて、画像サイズ変更、ディレイの調整も終わったので「ファイル>Webおよびデバイス用に保存」を開いてGIF動画を出力しましょう。「保存」を押すとGIF動画として保存できます。

 

 このぐらいのサイズであればTwitterに投稿しても元画質を維持したまま再生することができます。

 

長らくおつきあいいただき、ありがとうございました。今回のシリーズ記事「RPGツクール用キャラチップの作り方」は以上となります。皆さんもどんどんキャラチップを作って動かしまくってください。その際、この記事が参考になれば幸いです。

RPGツクール用キャラチップの作り方(4/5) MVキャラチップの改造時のポイント

 

nulluo.hatenablog.com前回の記事はこちらです。

 

MVのデフォルトキャラチップ素材を改造する

今回の記事ではRPGツクールMVのデフォルト素材である、キャラチップの仕様を確認しながら、デフォルトのキャラチップをベースに独自のキャラ素材を作成する時のポイントを解説します。(キャラチップにはモンスターや宝箱などのように、多種多様な素材がありますが、今回はそれらは扱わず、人間のキャラチップに限定して解説します。)

MVの素材を使用していない人には、今回の記事は参考にならないと思いますのでその点ご注意を。

デフォルトキャラチップ素材を改造するときは、筆者はだいたい下記のような手順で作成しています。

 

1.キャラクタージェネレータを使い、作りたいキャラのイメージに近いキャラチップを出力

 ↓

2.色変更してさらに完成形のイメージに近づける(色変更の手順は前回の記事参照)

 ↓

3.細かい部分を修正して完成

 

f:id:nulluo:20190809204256p:plain

ツクールMV付属のキャラクタージェネレータは便利なもので、髪や服など、色んなパーツを組み合わせて用途に合わせたキャラチップを生成することができます。その仕組みは素体と呼ばれるドット絵に、パーツを乗っけていくことで実現されています。

 

f:id:nulluo:20190809164020p:plain

MVのキャラチップ素体はこんな感じです。

左が女性、右が男性です。*1

 

基本は48×48ピクセル

f:id:nulluo:20190809165942p:plain

素体は上図の通り、横にアニメーション用の3コマ分の足踏み画像、縦に各方向(上下左右)を向いた時のキャラクターが描かれており、各キャラクターは48×48pxの正方形におさまるように描かれています。*2

 

f:id:nulluo:20190809170842p:plain

そして、上記の画像を縦に2枚、横に4枚並べた(つまり、キャラクター8人分の)576×384pxのPNG画像がキャラチップ素材として使用できます。ここまではヘルプに載っているのでMVユーザの皆さんはよくご存じかと思います。

48×48pxのグリッドを編集単位に設定する

前回の記事で導入したEDGEには、編集単位という便利な機能があります。この編集単位機能が、筆者がドット絵作成にEDGEをオススメする主な理由です。*3

これを使うと、キャラチップ編集が格段に楽になります。

 

f:id:nulluo:20190809181724p:plain

設定方法は、まずEDGEの「設定>グリッド&編集単位一発変更>設定」を開きます。

 

f:id:nulluo:20190809183005p:plain

「未使用」の欄をクリックして「使用する」にチェックを入れると、グリッド(大)の間隔と編集単位が入力可能になりますので、それぞれの縦幅横幅を12px、48pxに設定してください。

f:id:nulluo:20190809185153p:plain

そして「設定>グリッド&編集単位一発変更」で先ほど登録した「グリッド:12×12 編集単位:48×48」を選択します。

 

f:id:nulluo:20190809185501p:plain

メニューの「矩形領域の選択」(点線の四角のアイコン)を推して、「編集単位使用」にチェックを入れます。

 

すると、領域の選択、コピー、切り取り、貼り付けが編集単位を基準に実行されるようになります。1ドットもズレなくキャラチップのコピー&ペーストができるようになるという事です! 

f:id:nulluo:20190809191641g:plain
どういう事かは文章で説明するより、実際に使ってみてもらった方が分かりやすいと思います。参考までに編集単位を使用してキャラチップをコピー&ペーストしている動画を載せておきました。

 

f:id:nulluo:20190809210015p:plain

これで、「静止状態の素材を一個作った後、それをコピーして差分を書き加える事で1歩足を踏み出している素材を作る」といった作業がかなり楽になります。

 

デフォ素材は左に1ピクセル寄ってるよ!

先ほど見た通り、キャラクターは48×48pxのマスを基準に描かれています。キャラクターを48×48pxのマス目に入れたところの拡大図を以下に示します。

f:id:nulluo:20190810203126g:plain

1ドットで描かれている鼻を垂直につらぬく幅1ドットのライン(上図の赤い縦線)を対象の軸として、素体は左右対称となっています。*4

ということは、キャラクターの横幅は奇数個のドットでできているという事です。

すなわちマス目の横幅ドットは偶数個、キャラクター自体の横幅ドットは奇数個なので、マス目とキャラクターの中心線は一致しません。48×48pxのマス目に対し、キャラクターは左に1ドット分片寄っていることになります。

 

「1ドット程度の片寄りがあったからといって、それがどうかしたの?」と言われそうですが、この1ドットのズレが原因で筆者は大いに苦しんだことがあります。ご紹介しましょう。

 

f:id:nulluo:20190809210642p:plain

まず「静止状態」と「左足を1歩踏み出す」の2つの素材を作成しました。このキャラクターは左右対称なので「右足を1歩踏み出す」コマはコピペして左右反転するだけでいけるな、と思い、まず「左足を1歩踏み出す」素材をコピーしました。

 

f:id:nulluo:20190809211312p:plain

その後、左右反転して「右足を1歩前に踏み出す」のコマを作成したのですが、アニメーションをテストするとなんだか違和感がありました。歩かせてみるとキャラが左右にブレるのです。

 

f:id:nulluo:20190810203440g:plain

上記の手順で作成したキャラチップを拡大した図です。48×48pxのマス目とその中心を通るグリッドを黒線で、人物の中心線(幅1ドット)を赤線で表示しています。キャラ①は中心から1ドット右に寄っているのに対し、キャラ②と③は1ドット左に寄っているのが分かりますか?(キャラ①の鼻は中心線より右、キャラ②、③の鼻は中心線より左にきている点に注目して見て下さい)

 

そうです。左右対称だからといって反転すると、片寄る方向が左右逆になり、結果としてキャラに1ドット分のズレが発生することになるのです。これは絵が完成した後で左右反転したからすぐ問題に気づけましたが、顔や服など、パーツごとに作成していた場合、顔は左にズレて、服は右にズレてしまい…といった風に気づかないままどんどん歪みが大きくなってしまう恐れがあります。というか筆者はそうなってしまい、原因が分かるまでかなり悩みました。

 

こうならないように左右反転をした場合は、キャラクターを1ドットだけ横に移動させてズレを元に戻してやる必要があります。コレがコピペと左右反転を使ってキャラチップを作成する場合の注意1つ目です。

 

キャラの背面画像をつくるときの注意

次はキャラクターの背面の画像を作るときのポイントです。

 

f:id:nulluo:20190809220712p:plain

まず、正面向きの画像のキャラを作成してコピーします。

  

f:id:nulluo:20190810203924p:plain
ラッキーなことに、このキャラは服の前後がよく似ている(リボンやセーラーカラーの違いだけ)ので正面向きをちょっと加工すれば背面向きが作れそうです。

そうやって加工して作った背面画像が上図なのですが…なんだかちょっと違和感があるような…

 

f:id:nulluo:20190810204159g:plain
さて、違和感の原因は素体の上に作ったキャラを乗せてみるとはっきりします。

 

f:id:nulluo:20190810204530p:plain

②はよいのですが、①、③は素体とキャラがぴったり重なっていないことがわかります。原因は、素体の背面向きと正面向きの腕の形は違うからです。

 

f:id:nulluo:20190810204900p:plain

素体の形に合うように腕の形を修正するとこのようになります。

とはいえ、ぶっちゃけ、ここまで正確に素体の形に合わせることにこだわるより、素体数を量産することを優先したい!という方は別にここまでしなくてもよいです!

正直こだわりたい人だけがこだわってくださいというレベルの話なので…

ただ、このように素体の形に合わせておくと、制作した服がジェネレータ用のパーツとして流用できる、というメリットがあります。

 

完成した複数のキャラチップを1つの画像にまとめる

 さて、キャラチップが完成したら、使いやすいように複数のキャラチップを1つの画像にまとめます。(前述の通り、MVのキャラチップには8人分のキャラチップを保存できます)

 

合成作業はEDGEでしてもいいのですが、前回説明した通り、EDGEはカラーパレットという仕組みを使う都合上、256色までしか使用できません。8人分のキャラチップの色を合わせたら256色を超えてしまった!という場合は、EDGEでは合成作業ができませんので他のツールの出番となります。ここでは、例としてPhotoshopを使用します。*5

 

f:id:nulluo:20190809231705p:plain

EDGEで作成したキャラチップをPNGで保存し、PhotoshopPNGファイルを開きます。「イメージ>モード」が「インデックスカラー」の形式になっているはずなので「RGBカラー」に変更します。これで256色を超える色数が扱えるようになります。

後は各キャラチップを合成していけばよいのですが、ここでちょっとだけ作業を楽にするコツがあります。

 

f:id:nulluo:20190809232422p:plain
まず、下準備としてPhotoshopでもEDGEと同様に編集単位の設定をしておきましょう。「編集>環境設定>ガイド・グリッド・スライス」を開きます。グリッド線の単位を48pixelに設定します。

 

f:id:nulluo:20190809232532p:plain

「表示>スナップ先>グリッド」を選択してグリッドへのスナップを有効化します。

 

f:id:nulluo:20190809233312p:plain

EDGEで作成したキャラチップの角にマークを「ここまでが編集単位の角の端」と分かるようにマークを入れておきます。

 

f:id:nulluo:20190809233638p:plain

こうしておくと、Photoshopでキャラチップを合成するときに、スナップ機能によって、貼り付けたい場所にぴたりと画像がくっついてくれるので、貼り付け先がズレないのです。地味なテクですが、手動で正しい位置に合わせようとするとドット単位で微調整をしなければならないので、これは作業をだいぶ楽にしてくれます!(貼り付けた後、角のマークを消すことをお忘れなく。)

 

宣伝

さて、今回はキャラチップの仕様とそれにまつわるコツをいくつか紹介してみました。

ちなみに、今回説明で使用したドット絵は拙作のドキドキ!プリキュアキャラチップです。利用条件などは下記リンクを参照してください。

www.pixiv.net

次回はキャラチップのアニメーションについて解説する予定です!

nulluo.hatenablog.com

*1:以降の解説は女性素体をサンプルとして説明していきますが、男性素体でも話は同じです。

*2:MVでは、任意のサイズのキャラチップが使えるので、48×48px以外の素材でもキャラチップとして利用可能ですが、デフォルトの人間素体はすべてこのサイズになっています。

*3:その他の理由としては、レイヤ機能とかパレット関連の操作とかです。

*4:厳密にいうと、光源が左にある想定で描かれている関係上、目のハイライト等、左右対称でない部分がいくつかあります

*5:サンプル画像はPhotoshopCS5のものです。バージョンによって画面構成が異なる可能性があります。