RPGツクールのキャラチップの作成方法(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ツクールのキャラチップの作成方法(4) 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

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

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

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

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

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

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

RPGツクールのキャラチップの作成方法(3) Edgeを使った素材の色変更

 前回の記事はこちら

nulluo.hatenablog.com

今回はドット絵の色変更のやり方について解説します。記事タイトルは「RPGツクールのキャラチップの作成方法」としましたが、今回の記事はRPGツクールに限らず、ドット絵の加工方法を学びたい人なら誰でも役に立つ内容になっていると思います。

 

素材の色を変更したい!

ドット絵素材を使用するとき、色を変更して使いたいという事がよくあります。

ドット絵の色を変更する方法は色々あります。ここでは、使用されている色数が少ないというドット絵の利点を活かして、画像中の色を一色ずつ置き換えていく方法を紹介します。*1

 

色を変えるときの注意

f:id:nulluo:20190807170414p:plain

 例えば、この赤い球を元の素材として、色を赤から緑に変更してみます。

 

f:id:nulluo:20190807170436p:plain

色変更してみました。元の素材で使用されている赤系の色を一色ずつ緑系の色に変更したのですが、何か不自然ですね?

不自然に見える理由は、元素材にあった暗い赤色→明るい赤色というグラデーション構成が色変えによって崩れているからです。色を変える場合は、原則として元の絵でグラデーションになっている場所は、色変更後も同様のグラデーションにしましょう。*2

f:id:nulluo:20190807171950p:plain

このように、ちゃんとグラデーションを保つように色変更すると自然に見えますね。

 

EDGEを導入しよう

 以後、解説を進めるにあたって導入してほしいソフトがあります。EDGEです。

takabosoft.com

ドット絵は、Photoshopやその他の画像編集ツール、極端な話Windowsに付属のペイントでも描くことができます。しかし、EDGEはドット絵を描くことに特化しており、ドット絵を描くための便利な機能が詰め込まれた優秀なツールで、しかも無料です。ドット絵を描く人には是非オススメします。

 

EDGEの導入方法と基本的な使い方はすでに分かりやすく解説されている記事があるのでこちら(↓)をご参照ください。

yuzuyu3.com

 EDGEの機能について、このシリーズ記事でいくつか紹介していく予定ですが、まずEDGEを使う上で理解しておいてほしい事があります。それはEDGEで絵を描くときにはカラーパレットというものを使うという事です。

 

f:id:nulluo:20190808001624p:plain

 EDGEの画面です。左がEDGEで編集している画像、右側がカラーパレットです。カラーパレットはドット絵で使用する色を保存しておく領域です。カラーパレットには最大256種の色を格納でき、色を保存しているそれぞれのマス目には、0番から255番までのパレット番号が振られています。EDGEでは、画像データは「どのピクセルが何番のパレット番号の色で塗られているか」というデータに「カラーパレットでは何番のパレットがどんな色を保持しているか」というデータが組み合わさることで、1枚のカラー画像を表現しています。この画像データの形式を、インデックスカラーと呼びます。

 

f:id:nulluo:20190808004816g:plain

したがって、カラーパレットの色を変更すれば画像の方の色も連動して変わります。(↑の動画参照)

このように、カラーパレットをうまく操作すれば色変えが手軽にできる!という点が、私がEDGEをオススメする理由の一つです。

 

スライムの色を変えてみよう

f:id:nulluo:20190808221754p:plain

では、いよいよ実践としてキャラチップ素材の色変えをやってみます。サンプルとして使用するのは、ツクールMV素材のスライムです。

 

f:id:nulluo:20190808222257p:plain

Monster.pngからスライムだけを切り抜いてEDGEで開いたところです。カラーパレットにたくさん色がありますが、実はほとんどは画像で使用していない無駄な色です。まずはパレットを整理してきれいにしましょう。

 

f:id:nulluo:20190808222340p:plain

「カラーパレット>パレット>未使用色の削除と整理」を実行します。

f:id:nulluo:20190808222403p:plain

使用していない色がパレットから消えてすっきりしました。

ではここから青色を置き換えて緑色のスライムを作ってみます。

 

f:id:nulluo:20190808191300p:plain

カラーパレットの右上のアイコンをクリックします。すると、パレットをドラッグで、色の位置が変更できるようになります。

 

f:id:nulluo:20190808191521p:plain

青色のパレットをグラデーション順に並び変えます。

 

f:id:nulluo:20190808191628p:plain

次に、青色グラデーションの下に緑色グラデーションのパレットを作ります。パレットに新しい色を追加するには、パレットを選択して下のスライダを操作してください。

 

f:id:nulluo:20190808192007p:plain

ここまで来たらもう出来たも同然です。画面右上の右から二番目のアイコンをクリックすると、ドラッグでRGB値が交換できるようになります。

 

f:id:nulluo:20190808192511p:plain

点線の四角のアイコン(領域の選択)をクリックします。

 

f:id:nulluo:20190808193155g:plain

パレットの青色グラデーション部分をドラッグで選択し、作成した緑色グラデーションと入れ替えると……スライムの色が緑色に変わりました!

f:id:nulluo:20190808222019g:plain

お疲れさまでした!色変更の手順解説は以上です!
このように、色の変更をすることで1枚の素材の使い道は何倍にもバリエーションが広がります。皆さんも是非、モンスターの色変えやキャラクターの髪をお気に入りの色に変更してみて下さい。

 

補足

EDGEでPNG画像を開こうとすると、「PNGの、このパレットタイプには対応していません」というエラーが出て画像が編集できないことがあります。

f:id:nulluo:20190808194555p:plain

これは、PNG画像が先に述べたインデックスカラーという形式になっていないからです。*3

 

PNG画像をインデックスカラー形式に変換するにはいくつか方法があります。筆者はPhotoshopを使っているので「イメージ>モード>インデックスカラー」から変換実行しています。

f:id:nulluo:20190808200243p:plain

注:パレットを「使用中の色を全て割り付ける」にしておくこと。

 

Photoshop以外でも、フリーソフトでインデックスカラー形式への変換ができるソフトがいくつかあります。(例:Irfanviewの減色機能など)興味のある人は「PNG 減色」等のキーワードでググってみてください。

*1:他の方法としては、例えばPhotoshopなどの画像編集ソフトを用意して、色調補正機能で色相・彩度の変更をするといった手順が考えられます。本記事で説明しているパレットの色を1つずつ変更する方法とどちらが良いかは一長一短で、一般的にいって画像編集ソフトの色調補正機能の方が簡単な操作で色変えができますが、本記事で紹介している方法ではドット単位で色変更できるので細かい調整をきかせやすいという利点があります。

*2:「原則として」というただし書きを入れたのは、元素材のグラデーションを無視して色変えする場合もあるからです。実は無視したほうが良いケースも割と多い…。例えばグラデーション模様が描かれた服のドット絵であれば、グラデーションを無視して色変更しても、そういう模様の服なんだと思えば特に違和感はありません。つまり元絵のグラデーションを無視しても、ドット絵として破綻しないのであれば問題ありません。本記事でいう、元素材のグラデーションを保つようにすべきというのは「物体の光と陰のグラデーション等は色変更によってグラデーションが崩壊すると不自然に見える」というコトです。

*3:PNG画像がフルカラー形式と呼ばれるモードを使用しているとこのエラーが出ます。各ピクセルがパレット番号を保持し、パレットに色を格納して画像を表現するインデックスカラー形式に対して、フルカラーとは各ピクセルごとに直接色情報を保持する形式を意味します。使用できる色数がパレットの色数(255色)に制限されるインデックスカラーと異なり、一つの画像により多くの色を使用することができるのが特徴です。

RPGツクールのキャラチップの作成方法(2) 【超基本】ドット絵の描き方

まずは、ドット絵を1から描く方法です。記事タイトルは「RPGツクールのキャラチップの作成方法」としましたが、今回の記事はRPGツクールに限らず、ドット絵の描き方を学びたい人なら誰にでもオススメできる内容になっています。

といっても、人間キャラなど、いきなり複雑なドット絵を描くのは大変なので、わりと描きやすいモデルとしてプリキュアの妖精をキャラチップ化してみることにしました。

ドキドキ!プリキュアに登場する妖精ラケルのドットを打っていきます。

 

f:id:nulluo:20190806231344j:plain

朝日放送テレビ|ドキドキ!プリキュア|キャラクター|プリキュア

 

f:id:nulluo:20190806230515p:plain

① まずはシルエットを描きます。いきなり細部を描くのではなく、まずはシルエットを描いて全体のバランスを確認しましょう。この例では水色で妖精のシルエットを描いています。

ただし、シルエットだけだとパーツの重なった部分の形状を把握するのが難しくなるので、そういう場合はパーツの境目に補助線を入れます。この例では妖精の耳と頭の境目などに入れている黒の線が補助線です。

 

 

f:id:nulluo:20190806230518p:plain

② シルエットができたら細部を書き込んでいきます。

 

f:id:nulluo:20190806230522p:plain

③ さらに色数を増やして輪郭線、カゲ、アンチエイリアス(※)のドットなどを打っていきます。

アンチエイリアス…ドット絵の線がカクカクして見えるのを抑えるためにドットを追加する処理

 

 

f:id:nulluo:20190806230527p:plain

④ 左上が光源である想定で、ハイライトを入れました。③と④の違いが分かりますか?

 

f:id:nulluo:20190806232711p:plain

違いが分かりやすいように拡大しました。ハイライトを入れることで立体感が増しているのが分かるかと思います。

 

f:id:nulluo:20190806230533p:plain

⑤ 仕上げです。輪郭と目の色を濃くしました。なぜこのような色調整をしたかというと、④をツクールでキャラチップとして使用して表示してみると次のような問題点が明らかになったためです。

 ・輪郭線が薄すぎて周囲とキャラとの境目がぼんやりして分かりにくい

 ・目がどこか、少し分かりにくい

f:id:nulluo:20190806233255p:plain

ツクール上で④、⑤を表示したところ


どれだけ画像単体で観たときにドット絵が綺麗に見えたとしても、キャラチップとして使用するためにはゲーム画面上で表示されたときにプレイヤーに、何のドット絵であるか伝わらなければ意味がありません

上記の例でいうと④の方が目の色は原作に近いのですが、キャラクターの印象を決定づけるキーパーツである目を目立たせるために、あえて原作からカラーリングをずらした配色をしました。制作中は④の方がいいと思っていましたが、⑤の方がよりプレイヤーに伝わりやすいデザインであると判断して変更したのです。


このように、ドット絵制作ツールでの見え方と、ツクール上での見え方は結構異なることがあるので、最後の仕上げの際にはツクール上で使用して見え方をテストするのは必須といえます。

 

ドット絵の描き方の基本は以上です。

次回は、ドット絵制作ツールEdgeを使ってキャラチップを作成する方法を解説します。

RPGツクールのキャラチップの作成方法(1) はじめに

記事を書こうと思ったきっかけ

先日、RPGツクールMVで、ドキドキ!プリキュアの二次創作ゲーム「岡田ハザード」を制作しました。

freegame-mugen.jp

ゲームで使用するドット絵をいくつか作成したのですが、ドット絵の制作は普通の絵を描くのとは違う独自のテクニックが必要であることが分かってきました。

f:id:nulluo:20190811084230g:plain

↑ゲームで使用したドット絵の例

 

しかし、せっかく習得したテクニックも忘れてしまっては意味がありません。特に、私はそんなに頻繁にドット絵を描く人間ではないので、次にドット絵を描くまでにそれらのテクニックを忘れるのではないかと心配になりました。

そこで、今回のドット絵制作で習得したノウハウを記録に残しておこう!と思い立ったのがこれから公開する一連の記事(全6回予定)を書こうと思った理由です。

このような事情ですので、私個人のための覚書きの性格が強い記事になると思いますが、私と同じような境遇の人の参考になるかもしれないと思い、公開します。

 

この記事の想定読者

以下の2つにあてはまる人が読むと、役に立つ内容が書いてある(かもしれません)

  • RPGツクールMVで使用するキャラチップ(※)を作りたい人
  • MV付属のキャラクタージェネレータでは満足できない。もっと自分が作りたいゲームにぴったりと合うキャラチップを作りたい人

※キャラチップ…RPGツクールで使用するキャラクターの歩行アニメーション用のドット絵のこと。歩行グラフィックとも呼ばれる

 

それでは、下記リンクから記事をご覧ください。

 

nulluo.hatenablog.com

 

キュアジャン開発記録-非同期処理がうまく実装できない件(続き)-

先日の、こちらのエントリについてですが、Twitterのフォロワーさんのアドバイスで無事解決することができました。

nulluo.hatenablog.comエラーの原因は「XMLファイルをオープンせずにデータを取り出そうとしていた」という非常に初歩的なウッカリでした。お騒がせした皆さんすみません。

 

さて、非同期処理によるオンラインアップデート機能については、参考にしたコードがVisual Studio2005時代の古いコードであり、VB6時代の空気が色濃く残ったコードでした。(モジュールにグローバル変数を宣言してるとか、色んな所でオブジェクト指向設計があまり意識されてない感じでした)

そこで、もう少し現代のコードに近づけようと思って、クラス設計を整理し、グローバル変数を廃止するなどの改善を行いました。

 

改善後のクラス図

f:id:nulluo:20180930215354p:plain

 

他にもAsyncの使い方で不適切なところがありました。戻り値を返さないAsyncメソッドを定義していたのですが、「基本的にイベントハンドラ以外はAsync Subにするのダメ。呼び出し元が処理終了の検知できないから。」というのを教わって、その点も修正しました。

参考:neue cc - asyncの落とし穴Part3, async voidを避けるべき100億の理由

 

上記の改善後、コードはこんな感じになりました。

github.com

Async, Await のキーワードはすごく便利ですね!本来なら非同期処理終了後のコールバック処理をラムダ式書いてまとめなきゃいけないところを、Await HogeSync~と書けば、その後の処理が全てコールバック処理としてTaskに登録されるとか、記述のシンプルさに感動しました。

とはいえ、まだ非同期処理の中でも単純なパターンしかやっていない感はあるので更に濃い理解を今後深めていきたいです。

キュアジャン開発記録-非同期処理がうまく実装できない件-【解決済】

キュアジャンの事を書き始めて2記事目ですが、早くもコーディングで行き詰りました…読者の皆さん、知恵をお貸しください…

 

やりたいこと:オンラインアップデート機能の実現

ゲーム起動時にサーバに接続し、最新バージョンがリリースされていれば最新バージョンの実行ファイル(および付随して必要となる設定ファイルやdll等)をダウンロードしてきてローカルのファイルを上書きし、ゲームを起動する。

この機能さえ実現しておけば、最初のリリース時点では盛り込めなかった機能も、後から追加でリリースしていく事が可能です。だから、他の機能は後回しでもいいから、このオンラインアップデート機能だけはなんとしても実装しておきたいのです。

 

※正確には、オンラインアップデータとゲームアプリケーション本体を別exeファイルに分割し、下記のような流れで実現する予定です。

  1. ユーザーがオンラインアップデータを起動
  2. オンラインアップデータは最新バージョンの有無をサーバに問合せする
  3. 最新バージョンが存在した場合、ダウンロードする
  4. オンラインアップデータはゲームアプリケーション本体を起動して、自身は終了する。

※ こういう構成にしたため、オンラインアップデート機能以外は最悪、バグっていてもアップデートで後から修正可能なのですが、オンラインアップデート機能自体はバージョンアップできないので、この機能だけは着実に堅牢に構築してリリースしておかないといけないという事になります。

試したこと

CodeZineで「VB.NETによるオンラインアップデート」というそのものズバリな記事を見つけたのでこちらのサンプルコードを参考に、自分のアプリに組み込みました。

codezine.jpテストすると、ちゃんとオンラインアップデート機能が実現できていたのですが、その後で1つ問題点が浮上しました。

上記記事は会員登録が必要なので、簡単にサンプルコードの内容を説明しておくと、サーバにアクセスしてアップデートの有無の確認や、最新バージョンファイルのダウンロードをする間にUIスレッドが応答不能になるのを防ぐために「Forms.Application.DoEvents」を使っていました。しかし、調べたらDoEvents関数でメインスレッドを中断してWindowメッセージを処理するのは現在では非推奨の方法らしいです。

 

.NET系のエンジニアにどうしたらいいでしょう?と聞くと「最新の.NET FrameworkならAsync/Awaitが使えるから、それ使ってマルチスレッド処理を実現するのが最近の主流ですし、書くの楽だよ」と複数の方からアドバイスいただけました。

Async および Await を使用した非同期プログラミング (C# および Visual Basic)

 

そこで、上記のDoEventsを使用するバージョンのコードを、AsyncとAwaitを使った形に書き直したのですが、「最新バージョンがあるかどうかチェックする」確認まではちゃんと非同期的処理が実現できていましたが、「最新バージョンをダウンロードしてくる」処理の実行中にTargetInvocationExceptionが発生してしまいました。

f:id:nulluo:20180924200339p:plain

 

今のソースコードはこんな感じです。(GitHubのページへ飛びます)

1) ダウンロード処理本体のクラス

https://github.com/nulluo/ChiriNulluo.Mahjong/blob/master/OnlineUpdaterTest/DownLoader.vb

2) 1)を非同期的に呼び出ししているFormクラス

https://github.com/nulluo/ChiriNulluo.Mahjong/blob/master/OnlineUpdaterTest/View/DownloadNewVersionForm%20.vb

 

最新のソースコードから、オンラインアップデート機能に関するところだけ抜き出したものをReleaseに置きましたので手元の環境で動作確認される方は下記のページから「OnlineUpdaterTest-Ver-0.1.1.25.zip」クリックしてダウンロードしてお使いください。(スタートアッププロジェクトはOnlineUpdaterTestです)

 

github.com

 質問内容

.NETで、ファイルのダウンロード処理をAsync/Await使って書く場合、どういう形で書くべきなんでしょうか?有識者の方のご意見お待ちしています。

 

不足している情報などありましたらコメント欄にお寄せください。