itemstore BLOG

アプリ内課金(IAP)の実装・運用にかかる時間を大幅に削減してアプリの収益性を高めるサービス「itemstore(アイテムストア)」が、アプリ内課金に関する様々な話題や企画をお届けする公式ブログです。

ドット絵キャラを簡単に作れる!『グラフィック合成器』の紹介

f:id:cayto_pr:20190604012008p:plain

こんにちは。

今回はドット絵キャラを簡単に作れる無料のツール『グラフィック合成器』について紹介します。

 

ツールの使い方だけではなく、作ったキャラをゲームの中で動かす方法も紹介しますので、お楽しみに!

 

『グラフィック合成器』とは

『グラフィック合成器』は、頭・服・装飾などのパーツごとに画像を組み合わせ、新しい1つの画像を生成するツールです。

ツールには初めからたくさんのパーツ画像が同梱されているので、ダウンロードして起動するだけですぐに使えます。

 

※後述の『WOLF RPGエディター』同様に.exe形式のため基本的にWindowsでのみ実行可能です。

 

f:id:cayto_pr:20190604011847g:plain

同梱されているデータには、8方向に移動するアニメーション用のキャラチップ画像の他に、顔のイラスト画像を作るための画像セットも用意されています。

 

f:id:cayto_pr:20190604011637g:plain

使用する画像セットを切り替えることで、さまざまな画像を合成することが出来ます。

 

作ったキャラの利用用途は自由

『グラフィック合成器』に同梱されているデータを組み合わせて作った画像ファイルは、ゲームに限らず、どのような用途にも利用することができます。

 

ツールやパーツ素材を提供してくださった方たちに感謝しつつ、自分で組み合わせたキャラチップ画像や顔イラストを好きな用途で活用しましょう。

 

利用用途の説明は、同梱の「説明書・パーツ規格について.txt」に書かれています。

 

f:id:cayto_pr:20190604011635p:plain

他にも、合成の仕組み、パーツの追加方法、開発者・協力者情報、履歴なども記載されているので、参考にしてみてください。

 

『グラフィック合成器』の入手方法

『グラフィック合成器』は、RPG作成フリーソフト『WOLF RPGエディター』(通称ウディタ)の付属ツールです。

 

筆者も以前に『WOLF RPGエディター』を使いましたが、画像や音楽などのデータも同梱されていて、情報も豊富なので、初心者でもゲームを作ることができました。

 

▼筆者が過去に『WOLF RPGエディター』を使って作った作品

f:id:cayto_pr:20190604011608g:plain

https://www.freem.ne.jp/win/game/9313

 

『WOLF RPGエディター』をダウンロードするには、WOLF RPGエディター公式サイトの「【 WOLF RPGエディターのダウンロード 】」リンクをクリックします。

 

f:id:cayto_pr:20190604011606p:plain

リンク先の「WOLF RPGエディターのダウンロード」ページでは、『WOLF RPGエディター』本体と併せて『グラフィック合成器』もダウンロードすることができます。

 

f:id:cayto_pr:20190604011604p:plain

この場合、解凍した「WOLF_RPG_Editor2」フォルダの「データ集」フォルダの中に『グラフィック合成器』のzipファイルがあります。

 

f:id:cayto_pr:20190604011422p:plain

『グラフィック合成器』のみをダウンロードしたい場合は、同ページの下側のリンクから付属ツールのみをダウンロードすることもできます。

 

f:id:cayto_pr:20190604011419p:plain

ダウンロードした「グラフィック合成器.zip」を解凍し、フォルダの中の「GraphicMaker.exe」を実行すれば、『グラフィック合成器』が起動します。

 

f:id:cayto_pr:20190604011416p:plain

 

キャラチップ画像を作ってみよう!

さっそく『グラフィック合成器』でキャラチップ画像を作ってみましょう。

 

作り方は簡単で、頭・服・装飾などのパーツごとにパーツ画像を選択していくだけです。

プレビューで確認して、ファイルに保存したらキャラチップ画像の出来上がりです。

 

f:id:cayto_pr:20190604011414p:plain

ランダム合成ボタンで、一瞬でランダムな組み合わせのキャラチップ画像を作ることもできます。

パーツ全部を自分で選ぶことが難しいときや、たくさんのキャラチップ画像を手軽に作りたいときは、ランダム合成で偶然できた好みのものを使うのも良いでしょう。

 

f:id:cayto_pr:20190604011331g:plain

ランダムに選ぶかどうかは、パーツごとにある「ランダム」のチェックボックスで指定できます。

「ランダム」のチェックボックスは最初は全てオフなので、「ランダム合成」ボタンをクリックしても何も変わりません。

ランダム合成をしたい場合は、パーツごとに「ランダム」チェックボックスにチェックを入れましょう。

 

f:id:cayto_pr:20190604011248p:plain

全ての「ランダム」チェックを設定したい場合は、メニュー「ランダム」→「ランダムチェック」から設定することもできます。

 

f:id:cayto_pr:20190604011246p:plain

キャラチップ画像ができたら、「ファイルを保存」ボタンでファイルに保存しましょう。

 

画像セットを切り替えてさまざまな合成をしよう

『グラフィック合成器』では、キャラチップ画像だけではなく顔イラストのデータも用意されています。

 

f:id:cayto_pr:20190604111024g:plain

起動直後は、キャラチップ画像向けの画像セット「デフォルト規格」が選択されていますが、ウィンドウ左上のプルダウンリストから画像セットを切り替えることで、顔イラストなどさまざまな合成ができます。

 

パーツ画像を追加してバリエーションを増やそう

『グラフィック合成器』では、自作したパーツ画像などを新たに追加して、組み合わせのバリエーションを増やすことができます。

 

今回は、素材サイト「尾羽の小屋」から可愛い「赤ずきん」パーツ画像をダウンロードし、それを追加してみましょう。

 

f:id:cayto_pr:20190604011029p:plain

http://obane.tuzikaze.com/material/gousei.html#akazukin

 

今回はファイル名を「赤ずきん.png」とし、それを『グラフィック合成器』の「Graphics」→「デフォルト規格」→「頭追加」フォルダに追加します。

 

f:id:cayto_pr:20190604011027p:plain

その後、『グラフィック合成器』を起動すると、頭追加のパーツに「赤ずきん.png」が追加されています。

 

f:id:cayto_pr:20190604011003p:plain

追加する画像のフォーマットなどは、『グラフィック合成器』の「Graphics」→「デフォルト規格」フォルダなどの「Setting.txt」を参照してください。

 

作ったキャラを動かしてみよう!

それでは、作ったキャラをゲームの中で動かしてみましょう。

例として先ほど作った赤ずきんを被ったキャラチップ画像「赤ずきんちゃん.png」を使います。

 

ゲーム制作環境は先ほど紹介した『WOLF RPGエディター』を使います。

『WOLF RPGエディター』には最初からサンプルゲームが入っているので、その主人公の見た目を「赤ずきんちゃん.png」に変更して動かしてみましょう。

 

まずは、「赤ずきんちゃん.png」ファイルを『WOLF RPGエディター』の「Data」→「CharaChip」フォルダに追加します。

 

f:id:cayto_pr:20190604011001p:plain

次に、サンプルゲームを変更するために『WOLF RPGエディター』の「Editor.exe」を起動しましょう。

 

f:id:cayto_pr:20190604010959p:plain

マップ選択ダイアログを見るといくつかマップが作られています。

下図は「マップ選択」ダイアログの「1:サンプルマップA」を選択したあとの『WOLF RPGエディター』の画面になります。

 

f:id:cayto_pr:20190604010957p:plain

この状態で右上の「テストプレイ開始」ボタンを押せば、サンプルゲームがプレイできます。

 

f:id:cayto_pr:20190604010853g:plain

今回は、この主人公の画像を「赤ずきんちゃん.png」に変更してみましょう。

 

始めに「可変データベースを開く」ボタンを押します。

 

f:id:cayto_pr:20190604010608p:plain

開いた「可変データベースエディタ」ウィンドウで、タイプの「0:主人公ステータス」、データの「12:ウルファール」を選択します。

その後、歩行グラフィック画像の「File」ボタンを押し、先ほど追加した「赤ずきんちゃん.png」を選択して、「OK」ボタンを押します。

 

f:id:cayto_pr:20190604010605p:plain

これで、主人公の歩行グラフィック画像が「赤ずきんちゃん.png」に変更されました。

さっそく「テストプレイ開始」ボタンでゲームを実行してみましょう。

 

f:id:cayto_pr:20190604010515g:plain

出来ました!

『グラフィック合成器』で作ったキャラ「赤ずきんちゃん」がゲームの中で動いています!

 

ちなみに今回の手順は、「WOLF RPGエディター パーフェクトガイド」の「◆主人公の歩行グラフィックを設定したい」を参考にしました。

この他にもさまざまな説明が掲載されているので、『WOLF RPGエディター』で開発する際は参考にすると良いでしょう。

 

作った画像を投稿サイトでシェアしよう

『グラフィック合成器』で作った画像をシェアしたい場合、共用できるフリー素材として投稿できるサイトがあります。

 

おまけ グラフィック合成器で作成したキャラクター画像の投稿 | グラフィック合成器を使ってみよう - はじめてのウディタ 挫折して再び Wiki*

 

実験的なコーナーとされていますが、いくつもの画像が投稿されていて、コメントでの交流も行われています。

『グラフィック合成器』やキャラチップ画像に興味がある方は、チェックしてみると良いでしょう。

 

キャラチップ画像のフォーマットを理解しよう

『グラフィック合成器』に同梱されているキャラチップ画像は、『WOLF RPGエディター』の仕様に沿っているので、今回は簡単にサンプルゲームの主人公の画像と差し替えることができました。

 

もちろん、キャラチップ画像のフォーマットを知っていれば、他のゲーム制作環境でも利用することができます。

今回作成したキャラチップ画像は、下図のような移動方向とアニメーションの順番( B→A→B→C→B→…)になっています。

 

f:id:cayto_pr:20190604010513p:plain

引用:https://www.silversecond.com/WolfRPGEditor/Guide/MAKEMAT_002.html

 

以前に筆者がUnityで作ったゲームでも、味方キャラとしてたくさん使わせてもらいました。

 

f:id:cayto_pr:20190604010449g:plain

https://unityroom.com/games/fairybravers

 

まとめ

今回はドット絵キャラなどを簡単に作れるツール『グラフィック合成器』を紹介しました。

作ったキャラがゲーム中で動くとさらに嬉しくなりますね。

 

パーツ画像の追加方法の説明で利用した素材サイト「尾羽の小屋」については、以前に詳しく紹介していますのでそちらも是非ご覧になってください。

 

ゲーム制作に役立つ!素材サイト『尾羽の小屋』の紹介 - itemstore BLOG

 

ドット絵が描けない人も、『グラフィック合成器』を使ってドット絵キャラが歩き回るゲームを作ってみてはいかがでしょうか。

 

 

アプリ内課金を今すぐ始められる簡単実装サービス「itemstore(アイテムストア)」

 

 

文:さくらくらうど(@SakuraCrowd)

個人でゲームを開発しています。アプリ内課金については初心者ですが、itemstoreを利用することで簡単に課金ゲームアプリが作れることを、実際の開発を通して伝えられたら良いなと思っています。

Blog : http://sakuracrowd.blogspot.jp/

Twitter : https://twitter.com/SakuraCrowd