2Dアクションゲーム「センメツコースター」の開発で使ったもの
先日「センメツコースター」の開発が完了しました。そこで開発に使ったものを紹介したいと思います。
- 制作ツール
- 制作サポートツール
- バージョン管理 : Git + Source Tree
- バックアップ : Dropbox, Time Machine(Mac)
- クリップボード拡張 : Clipy(Mac)
- 動画キャプチャ : QuickTimePlayer(Mac)
- 動画編集 : iMovie(Mac)
- カラーピッカー : Sip(Mac)
- 画像コンバート : XnConvert
- パフォーマンス、メモリリーク調査 : Instruments(Mac)
- 汎用スクリプト : Python
- スクリプト実行ボタン(メニューバー作成) : rumps(Mac)
- ブラウザ : Vivaldi
- タスク(Todo)管理 : Trello(Webサービス)
- 使用ライブラリ
- 使用素材
- 最後に
制作ツール
IDE : QtCreator
QtCreator : Mac, Windows
テキストエディタ : Visual Studio Code
Visual Studio Code : Mac, Windows
C++のコードはIDEでコーディングしていましたが、Luaやその他のテキストはVisual Studio Codeを使っていました。最初はSublime Text2を使っていたのですが、次にAtomを使い始め、最終的にVisual Studio Codeにたどり着きました。
ドット絵作成 : Aseprite
Aseprite(有料) : Mac, Windows
ドット絵作成にはAseprite(v1.1.3)を使いました。Asepriteは有料ですが、使い勝手がよくアニメーションの作成も可能です。Asepriteの良いところはゲーム開発での利用に特化した機能が備わっていることです。具体的には以下のような機能です。
パック化は例えばこんな感じでびっちりと敷き詰めてくれます。
スプライトアニメーション作成 : DarkFunctionEditor
DarkFunctionEditor(Java製) : Mac, Windows
DarkFunctionEditorは、スプライトのアニメーションデータを作成するためのツールです。複数のスプライトを組み合わせてセルを作り、それを並べてアニメーションを作ります。Asepriteにもアニメーション機能はありますが、このツールのようにスプライトを組み合わせてアニメーションを作るということができません。DarkFunctionEditorはタイムラインや各種補間と言った機能がありませんが、2Dのドット絵なゲームなら十分な機能を持っていると思います。ただし、DarkFunctionEditorをゲーム開発に使うにはちょっと手間が必要です。まず、DarkFunctionEditorが読み取るスプライトシートリスト(xml)を作らなくてはいけません。これはAsepriteのスプライト情報の吐き出し機能を使って、自動生成するPythonスクリプトを書きました。次に、DarkFunctionEditorで作成したアニメーションデータ(xml)を読み込んで表示されるプログラムを実装する必要があります。つまりDarkFunctionEditorのローダーを実装する必要があるわけです。
作業フローとしてはこんな感じでやってました
スプライトアニメーションツールは他にも探したのですが、高機能過ぎたり(高機能すぎるとゲーム側でローダーを実装するのが大変になる)、値段が高かったりで、今回のプロジェクトに一番合っていたのがDarkFunctionEditorでした。
絵素材作成、アイコン作成、企画書作成 : Sketch(Mac)
Sketch(有料) : Mac
Sketchはベクターグラフィックソフトです。グラフィックソフトですが、「センメツコースター」では主に企画書として使いました。テキストエディタと違ってテキストを自由な位置に配置できる上に色や大きさを変えることもできる、枠で囲ったり画像を張り付けたりもできる、1つのファイル内でいくつもページ分けができるなど企画書やアイデア出しに便利でした。他にもiOSアプリアイコンを作成したり*1、このサイトでも利用している「センメツコースター」のバナー画像もSketchで作成しました。99ドルと少し高いですがその価値はあります。ただし、販売モデルが変わってしまい、買い切りではなく1年単位のサブスクリプションとなってしまいました。買い切りモデル時に買った人はアップデートを行わなければそのまま使えますが、アップデートを行ってしまうと即ライセンス切れとなってしまい新たにライセンスを買わないと使えなくなってしまいます。ご注意を*2。
音楽作成 : GarageBand(Mac)
GarageBand : Mac
「センメツコースター」ではBGMはPANICPUMPKINさんのフリー素材を使用させていただきましたが、ゲーム成功時と失敗時にジングル(短い音楽)だけどうしてもマッチするものが見つからず、ためしにGarageBandで作ってみたらそれっぽいのができたのでそのまま採用しました。
また、GarageBandでファミコン風サウンドを利用するためにMagical 8bit Plugを利用しました。
フォント作成 : bitfontmaker2(Webサービス)
bitfontmaker2 : Webサービス
最初はゲーム中のUI用のテキストをAsepriteで描いて使用箇所ごとにテクスチャ化していました。ところがだんだん面倒になってきたので、フォントを自分で作れないか調べていたところ、このWebサービスを発見しました。ブラウザ上でぽちぽちとドットを打って自分だけのフォントを作ることができます。ちなみに私が作ったフォントはここからダウンロードできます。収録されているのは英大文字小文字数字といくつかの記号だけです。一応英小文字も描きましたがサイズの都合上、見た目が悪いです。
制作サポートツール
バージョン管理 : Git + Source Tree
Source Tree : Mac, Windows
ソフトウェア開発には必須なバージョン管理。ソースコードだけでなくリソース(アセット)含めて全部Gitでバージョン管理してました。クライアントはSource Treeを利用。
バックアップ : Dropbox, Time Machine(Mac)
Dropbox : Mac, Windows
Time Machine : Mac標準搭載(ただし外付けHDDなどが必要)
Dropboxはバックアップのためのツールではありませんが、実質的にバックアップにもなります。ただし、Dropboxが対象としているフォルダのみです。Time MachineはMac標準搭載のバックアップソフトウェアです。システム全体の復旧だけでなく、ファイルを1つだけ選んで復旧なんてこともできます。
クリップボード拡張 : Clipy(Mac)
Clipy : Mac
クリップボード履歴を扱えるクリップボード拡張はコーディングでほぼ必須とも言えるものです。昔はClipMenuを使っていたのですが、頻繁にハングするようになってしまったのでClipyに乗り換えました。
動画キャプチャ : QuickTimePlayer(Mac)
動画キャプチャはゲーム開発の進捗動画や、AppStore用の動画を撮るときに必要になってきます。幸いなことにMacデスクトップの動画キャプチャもiPhone実機の動画キャプチャも無料のQuickTimePlayerで行うことができます。ただしデスクトップの動画キャプチャは標準では音声を撮ることができないので注意が必要です。
動画編集 : iMovie(Mac)
iMovie : Mac
AppStore用の動画は最大30秒までしか許可されていないので、動画を編集する作業が発生します。今回、動画編集ツールとしてはiMovieを利用しました。iMovieは無料な上になんとAppStore用のテンプレートもあります。iMovieは今回初めて使いましたが、そんなに苦労せずに動画を編集することができました。
カラーピッカー : Sip(Mac)
Sip(有料) : Mac
Sipはカラーピッカーです。デスクトップ上の色を見たり、RGB値としてコピーできたりします。カラーピッカーはMacに標準で用意されているものがありますが、色をコピーするのにキーボードショートカットが必要だったりフォーマットを指定できないなど不満があります。Sipは簡単に色をコピーできたり、フォーマットを指定することができます。カラーピッカーを使うことで、ペイントソフトで画面デザインを試行錯誤したあとにそのままカラーピッカーで色をコピーしてソースコードにペーストということができるようになります。ソースコード内で直接色を指定する場面が結構あったので重宝しました。
画像コンバート : XnConvert
XnConvert : Mac, Windows
XnConvertは強力な画像コンバータです。複数のファイルをまとめて、しかも複数の処理を行うことができます。リサイズ、クリッピング、回転、フォーマット変換、やりたいことだいたい用意されています。補間なしでリサイズを行うこともできるのが2Dゲーム開発的にポイント高いです。
パフォーマンス、メモリリーク調査 : Instruments(Mac)
InstrumentsはXcodeに付属するツールでプログラムのパフォーマンス調査ツールです。またメモリリークの調査も行うことができます。ソースコードではなく実際に動いているプログラム(プロセス)にアタッチして使います。Xcodeから起動しなくても単体で起動しますし、Xcodeでビルドしたプログラムでなくてもアタッチすることができます(ただし、デバッグモードでビルドする必要がある…気がします)。「センメツコースター」はPC(Mac)上ではQtCreatorでビルドして動作確認をしていましたが、このQtCreatorでビルドしたプログラムでもアタッチして調査することができました。Instrumentsの仕組みが良くわかっていないので予想でしかないのですが、QtCreatorでのビルドに使っていたコンパイラがXcode付属のClangコンパイラだったからかなと思っています。ちなみにInstrumentsはiOS実機のアプリの調査も行うことができます。
汎用スクリプト : Python
Python : Mac, Windows
AsepriteやDarkFunctionEditorで作成したデータをコンバートするのに、Pythonを利用しました。その他いろいろちょっとしたコマンドラインツールとして利用しています。
スクリプト実行ボタン(メニューバー作成) : rumps(Mac)
rumps : Mac
rumpsはMacのデスクトップ上部のメニューバーにメニューを追加できるようにするPythonのライブラリです。Pythonライブラリなので、メニューの追加もPythonコードで書くことになります。「センメツコースター」の開発では、各Asepriteファイルのコンバートや各ステージの直接起動、ステージエディタの起動のためのランチャーとして使っていました。この仕組みを用意することでたいぶ開発効率が上がったと思います。
ブラウザ : Vivaldi
Vivaldi : Mac, Windows
プログラミングをしていると、ネットで検索する必要が必ず出てきます。しかも必要な情報はすぐに得られるとは限らないので大量のタブを開くことになります。前はブラウザとしてFirefoxを使っていましたが、タブを閉じる動作があまりにも遅かったのでVivaldiに乗り換えました。Vivaldiの良いところはタブの動作が高速なことはもちろん、標準でタブの縦並びに対応していることです。さきほど言ったようにプログラミングをしていると調べ物で大量のタブを開くのでタブは縦に並べたいのです。VivaldiはChromeと同じ内部エンジンを使っているためChrome拡張が使えたりします*3。最近まで日本語入力バグがありましたが、それも解消され最強のブラウザになりました(個人の感想です)。ただしメモリは大量に喰います。
タスク(Todo)管理 : Trello(Webサービス)
Trello : Webサービス
Trelloはタスク(Todo)管理のためのツール(Webサービス)です。ブラウザ上で動いているとは思えないくらい使いやすいツールです。タスク(カード)をリストに分けたりタグをつけた、詳細説明をmarkdownで書けたりと機能も申し分ないです。さらに複数のボードを利用できるのもポイントが高いです。あまりタスク数が多いと破綻してしまいそうですが、個人〜少人数で使う分には問題なさそうです。Trelloは「センメツコースター」の開発の終盤から使い始めたのですが、もっと早く知りたかったです。
使用ライブラリ
- OpenGL
- OpenAL
- ALURE
- GLFW(PC上での開発中のみ)
- Lua
- PicoJson
使用ライブラリに関しては詳しくはこちらの記事で。
ゲームエンジンを使わずにC++とOpenGLでゲームを作った話 - Flat Leon Works
使用素材
- フォント : PixelMplus
- 音楽 : PANICPUMPKIN
上でフォントを自作したと書きましたがあれは英数字だけなので、ひらがなだけでなく漢字まで含まれているPixelMplusはとても助かりました。音楽はファミコン風の音楽素材を公開してくださっているPANICPUMPKINさんのものを利用しました。やっぱりドット絵にはピコピコなサウンドが良いのです。
最後に
今回紹介した中でとくに良かったのがAsepriteです。Asepriteのスプライト情報出力機能とパック機能のおかげでだいぶ楽できたかなと思います。ところで、「センメツコースター」の開発では今回紹介したツールだけでなく、自分で作ったツールもいくつかありました。その紹介はまた今度ということで。
