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を使ってキャラチップを作成する方法を解説します！
RPGツクール用キャラチップの作り方(1/5) はじめに
記事を書こうと思ったきっかけ
先日、RPGツクールMVで、ドキドキ！プリキュアの二次創作ゲーム「岡田ハザード」を制作しました。
ゲームで使用するドット絵をいくつか作成したのですが、ドット絵の制作は普通の絵を描くのとは違う独自のテクニックが必要であることが分かってきました。
↑ゲームで使用したドット絵の例
しかし、せっかく習得したテクニックも忘れてしまっては意味がありません。特に、私はそんなに頻繁にドット絵を描く人間ではないので、次にドット絵を描くまでにそれらのテクニックを忘れるのではないかと心配になりました。
そこで、今回のドット絵制作で習得したノウハウを記録に残しておこう！と思い立ったのがこれから公開する一連の記事（全5回予定）を書こうと思った理由です。
このような事情ですので、私個人のための覚書きの性格が強い記事になると思いますが、私と同じような境遇の人の参考になるかもしれないと思い、公開します。
この記事の想定読者
以下の２つにあてはまる人が読むと、役に立つ内容が書いてある（かもしれません）
※キャラチップ…RPGツクールで使用するキャラクターの歩行アニメーション用のドット絵のこと。歩行グラフィックとも呼ばれる
それでは、下記リンクから記事をご覧ください。
キュアジャン開発記録－非同期処理がうまく実装できない件(続き)－
先日の、こちらのエントリについてですが、Twitterのフォロワーさんのアドバイスで無事解決することができました。
nulluo.hatenablog.comエラーの原因は「XMLファイルをオープンせずにデータを取り出そうとしていた」という非常に初歩的なウッカリでした。お騒がせした皆さんすみません。
さて、非同期処理によるオンラインアップデート機能については、参考にしたコードがVisual Studio2005時代の古いコードであり、VB6時代の空気が色濃く残ったコードでした。(モジュールにグローバル変数を宣言してるとか、色んな所でオブジェクト指向設計があまり意識されてない感じでした)
そこで、もう少し現代のコードに近づけようと思って、クラス設計を整理し、グローバル変数を廃止するなどの改善を行いました。
改善後のクラス図
他にもAsyncの使い方で不適切なところがありました。戻り値を返さないAsyncメソッドを定義していたのですが、「基本的にイベントハンドラ以外はAsync Subにするのダメ。呼び出し元が処理終了の検知できないから。」というのを教わって、その点も修正しました。
参考：neue cc - asyncの落とし穴Part3, async voidを避けるべき100億の理由
上記の改善後、コードはこんな感じになりました。
Async, Await のキーワードはすごく便利ですね！本来なら非同期処理終了後のコールバック処理をラムダ式書いてまとめなきゃいけないところを、Await HogeSync～と書けば、その後の処理が全てコールバック処理としてTaskに登録されるとか、記述のシンプルさに感動しました。
とはいえ、まだ非同期処理の中でも単純なパターンしかやっていない感はあるので更に濃い理解を今後深めていきたいです。
キュアジャン開発記録－非同期処理がうまく実装できない件－【解決済】
キュアジャンの事を書き始めて２記事目ですが、早くもコーディングで行き詰りました…読者の皆さん、知恵をお貸しください…
やりたいこと：オンラインアップデート機能の実現
ゲーム起動時にサーバに接続し、最新バージョンがリリースされていれば最新バージョンの実行ファイル(および付随して必要となる設定ファイルやdll等)をダウンロードしてきてローカルのファイルを上書きし、ゲームを起動する。
この機能さえ実現しておけば、最初のリリース時点では盛り込めなかった機能も、後から追加でリリースしていく事が可能です。だから、他の機能は後回しでもいいから、このオンラインアップデート機能だけはなんとしても実装しておきたいのです。
※正確には、オンラインアップデータとゲームアプリケーション本体を別exeファイルに分割し、下記のような流れで実現する予定です。
- ユーザーがオンラインアップデータを起動
- オンラインアップデータは最新バージョンの有無をサーバに問合せする
- 最新バージョンが存在した場合、ダウンロードする
- オンラインアップデータはゲームアプリケーション本体を起動して、自身は終了する。
※ こういう構成にしたため、オンラインアップデート機能以外は最悪、バグっていてもアップデートで後から修正可能なのですが、オンラインアップデート機能自体はバージョンアップできないので、この機能だけは着実に堅牢に構築してリリースしておかないといけないという事になります。
試したこと
CodeZineで「VB.NETによるオンラインアップデート」というそのものズバリな記事を見つけたのでこちらのサンプルコードを参考に、自分のアプリに組み込みました。
codezine.jpテストすると、ちゃんとオンラインアップデート機能が実現できていたのですが、その後で１つ問題点が浮上しました。
上記記事は会員登録が必要なので、簡単にサンプルコードの内容を説明しておくと、サーバにアクセスしてアップデートの有無の確認や、最新バージョンファイルのダウンロードをする間にUIスレッドが応答不能になるのを防ぐために「Forms.Application.DoEvents」を使っていました。しかし、調べたらDoEvents関数でメインスレッドを中断してWindowメッセージを処理するのは現在では非推奨の方法らしいです。
.NET系のエンジニアにどうしたらいいでしょう？と聞くと「最新の.NET FrameworkならAsync/Awaitが使えるから、それ使ってマルチスレッド処理を実現するのが最近の主流ですし、書くの楽だよ」と複数の方からアドバイスいただけました。
Async および Await を使用した非同期プログラミング (C# および Visual Basic)
そこで、上記のDoEventsを使用するバージョンのコードを、AsyncとAwaitを使った形に書き直したのですが、「最新バージョンがあるかどうかチェックする」確認まではちゃんと非同期的処理が実現できていましたが、「最新バージョンをダウンロードしてくる」処理の実行中にTargetInvocationExceptionが発生してしまいました。
今のソースコードはこんな感じです。(GitHubのページへ飛びます)
1) ダウンロード処理本体のクラス
https://github.com/nulluo/ChiriNulluo.Mahjong/blob/master/OnlineUpdaterTest/DownLoader.vb
2) １)を非同期的に呼び出ししているFormクラス
最新のソースコードから、オンラインアップデート機能に関するところだけ抜き出したものをReleaseに置きましたので手元の環境で動作確認される方は下記のページから「OnlineUpdaterTest-Ver-0.1.1.25.zip」クリックしてダウンロードしてお使いください。(スタートアッププロジェクトはOnlineUpdaterTestです)
質問内容
.NETで、ファイルのダウンロード処理をAsync/Await使って書く場合、どういう形で書くべきなんでしょうか？有識者の方のご意見お待ちしています。
不足している情報などありましたらコメント欄にお寄せください。
キュアジャン開発記録ーはじめにー
こんにちは。初めましての方もそうでない方もいらっしゃると思いますが、私は奇々浦ヌル夫という名前で、(主に二次創作の)同人マンガ活動や同人ゲーム開発を行っているものです。*1
現在、開発しているゲームは、プリキュア*2と麻雀をミックスしたオリジナルゲームです。ゲームタイトルはキュアジャンと名付けました。
ゲームの概要はこちらのゲーム紹介サイトで参照できます。(まだ書きかけのところもありますが…）↓
開発言語はVB.NET(.NET Framework 4.5)です。
開発状況としては、全体の７～８割は完了しており残り２～３割が実装できればリリース可能な状態になっています。
今後、当ブログでこのキュアジャンの記事を投稿するにあたって、書きたい内容は主に下記の３つです。
- 開発を通して得られた技術的知見のまとめ
- 開発中に直面した課題に対する(読者の皆さんへの)相談
- ゲームデザインに関する話題
1,2はソフトウェア開発面でのノウハウに関しての技術的なエントリ、3はソフトウェア開発技術とは直接関係ないゲーム自体に関するエントリとなります。
主に２がメインの内容となると思われますが、３のゲームデザインについても「ゲーム性を高めるためには、ゲームのルールや各種パラメータをどう設定するのが適切だろうか」といった相談をここに投稿する事があるかもしれません。
平たく言うと、一人でゲーム開発するのって大変なので…開発知識に長けた技術者の皆さまに指導してもらいたい、というのがこのブログにキュアジャンのことを書こうと思ったきっかけであります。
皆様、なにとぞご指導ご鞭撻いただけましたら幸いでございます。
翻訳テキスト管理システム(その1)
私はアメコミや洋画が好きなのでよく読んだり観たりしています。和訳されたテキストが出版されていない（もしくは出版していても入手困難な）場合は自分で翻訳する事もあります。しかし、翻訳した文章をどうやって管理するかしばし考えたところ、せっかくなのでDBシステム化してしまえば良いのではと思い至りました。
というわけで、勉強のために個人用システムを構築することにします。
メモとモチベ上げの意味を兼ねてこちらで進捗を報告していきます。
システム仕様
- 個人的に翻訳した外国語の文章をデータベース化し、記録・管理する。
- 翻訳する対象は、映画、ドラマ、コミック、曲、アニメ等とする。（Webページも対象にするか検討中）
- 翻訳する言語は、英語や中国語から日本語への翻訳。
上記の仕様からざっくりER図作りました。まだ追加すべきものがあるかもしれませんがとりあえずは今日はここまでとします。
懸案事項
- 翻訳文は「日本語」である前提で設計しちゃっていいものか・・・汎用的に作るなら任意の言語から任意の言語への翻訳を管理するのがよいけど…あと、ごく稀なケースだが「英語の文章の中にドイツ語が混ざる」のように、一つの作品の中に複数の言語が混在する事があり得るので、そういう場合、上記のDB設計では対応しきれない。かといって翻訳文に原文や訳文の言語が何かを表すフィールドを持たせるのは（必要になるのはごく稀なケースなので）ムダすぎると感じる。
- 多分不要だと思うけど、同じ本だけど「英語版」と「中国語版」両方入手したような場合は同管理するか？（後者については、英語版と中国語版を別の作品としてマスタに登録すればよいか）
何か「ここもっとこうした方がいい」とか、設計について意見がありましたら、どしどしお寄せください。
