この記事は、Akashic Engine Advent Calendar 2019の14日目の記事です。

はじめに

今回は、akashic製ゲーム「泥棒バスター」の画像や音声データを差し替えて改造する方法について説明していきます。
泥棒バスターの改造については、以下のページで言及されていますが、この記事では素材の差し替えによりフォーカスした話をしていこうと思っています。

泥棒バスターを改造してみよう

この記事は、ゲームを作りたいけど以下のような状態・状況にいる方々向けに書いているつもりです。

ゲームを作ったことがない・作り方が分からない
photoshop等の高機能な画像編集ツールを使ったことがない
短期間(1日程度)でゲームを1本用意する必要がある

(3つめの状況に置かれている方がどの程度いるのかは疑問ですが。。)

泥棒バスターとは

泥棒バスターとは上記画像のようなゲームで、ルールは以下のようになっています。

プレイヤーは左端のゴンドラに乗ったキャラを操作します。画面をタップすると、攻撃と移動の両方を行います。
3種類の泥棒がいて、それぞれ特徴があり、泥棒を倒すと得点が入ります。
泥棒がドアまで到達すると減点になります。
ドアに到達する前に倒し続ければコンボボーナスが入ります。
途中でアイテムが現れることがあり、武器を当てると武器をパワーアップできます。

ゲーム自体は、RPGアツマールにアップロードされていて以下のページで遊べるようになっています。

泥棒バスター

ソースの取得方法については、こちらのページの「ソースの用意」の項目を参照してください。

画像の差し替え

ここでは、僕が実際に行った画像の差し替えを説明していきたいと思います。
画像差し替えのツールとして、Pixlr X を使っていきたいと思っています。
Pixlr X はWeb上でそのまま画像編集が可能な無料のオンラインサービスです。
以下が、Pixlr X 利用時のスクリーンショットなのですが、フォーカスしたアイコンについての日本語の説明がポップアップされたりと、画像編集ツールをあまり使ったことのない方でも分かりやすい感じになっています。

武器画像の差し替え

以下のように、ゲームで武器として使われる工具一式の画像をバナナ一式の画像に変更します。

変更前	変更後

上記のように変更するために、以下の作業が必要になります。

ベースになる画像(工具一式)を用意
差し替え対象画像(工具)と大体同じ大きさの画像(バナナ)貼り付け
差し替え対象画像(工具)の削除

ここでは、これらの具体的な方法について説明していきたいと思います。

ベースになる画像を用意

Pixlr X トップページで左側の「画像を開く」ボタンを押してベースになる画像(ここでは工具一式の画像)を選択します。
すると、以下のような画面に遷移します。

これでベースになる画像の用意は完了です。

差し替え対象画像と大体同じ大きさの画像貼り付け

次に、新しく画像を貼って、大きさを元の画像に合わせる処理を行います。手順は以下の通りです。

左側のメニュー欄から一番下の「画像の追加」アイコン=>「参照」を選択して、貼り付けたい画像を選択(右側のレイヤー欄からも追加できます)
「画像を開く」ダイアログが表示されるので、「編集中に追加」を選択
1で選択した画像を、差し替え対象の画像の位置に移動して、大きさをその画像と同じくらいに合わせる

以下が、1つの画像に対して上記作業を行った結果です。

この作業を、貼り付けたい画像の数だけ行います(若干面倒な作業ですが。。)

差し替え対象画像の削除

新しい画像の貼り付けが終わりましたら、次は差し替え対象画像の削除を行います。手順は以下の通りです。

右側のレイヤー欄からベース画像以外のチェックを外す
左のメニュー欄から「カットアウト」(ハサミアイコン)を選択
モードで「消去」を選択
消したい画像が表示されている領域をマウスドラッグで選択して消去
1で外したチェックを付けなおす

上記作業を行った結果が次の通りです。

ちなみに、ここで作った画像は画面下の「保存」ボタンを選択することによって取得することができます。

アイテム画像の差し替え

以下のように、ゲームでアイテムとして使われるアイコン一式のアニメーション画像を寿司画像に変更します。

変更前	変更後

上記のように変更するために、以下の作業が必要になります。

ベースになる画像(アイコン一式)を用意
差し替え対象画像(アイコン)と大体同じ大きさの画像(寿司)貼り付け
各新しい画像(寿司)の透明度の変更
差し替え対象画像(アイコン)の削除

1,2,4の方法については前述しましたので、ここでは3の方法についてのみ説明していきたいと思います。

各新しい画像の透明度の変更

泥棒バスターのアイテムアイコンは透明度の変更によるアニメーションが行われるので、透明度を画像(寿司)毎に変更してあげる必要があります。
大きさと表示内容が同じ画像は7つあるので、僕はそれぞれの透明度を高い方から順に100, 90, 80, 70, 60, 50, 40 (単位は%) という感じで設定しました(元の画像の透明度もそうなっているかは不明ですが。。)
画像の透明度の変更は以下の手順で行います。

レイヤー欄で透明度を変更する画像の上に表示されている「・・・」を選択
ダイアログが表示されるのでそこで透明度をバーで選択

音声の差し替え

akashicゲームでは音声データとして、ogg形式とaac形式の2つのファイルが必要ですが、わざわざ2つの形式のファイルを用意するのが面倒だったり、フリーで使える音声ファイルの形式がwavだったりmp3だったりするかと思います。
そのような時に、音声ファイルの形式を変換してogg形式とaac形式の2つのファイルを出力してくれるcomplete-audioというツールが存在します。
complete-audioは以下のようにインストールできます。

npm install -g @akashic/complete-audio

利用法は以下のように形式を変換したい音声ファイル名を指定するだけです。
ただし、予めFFmpegをインストールしておく必要があります。

complete-audio sound.wav

上記コマンドを実行することによってsound.aacとsound.oggが出力されます。
この出力されたファイル名を差し替えたいファイル名に変更して同じディレクトリに配置するだけで差し替えは完了です。

素材差し替え後にやること

Akashic Engineを使い慣れている人にとっては説明不要かもしれませんが、素材差し替え後は泥棒バスターのディレクトリで以下のコマンドを実行してください。

akashic scan asset

上記コマンドを実行することによって、音声データの再生時間や画像サイズが変更された場合でも自動でgame.json(ゲームの素材情報等が記載されたファイル)が更新されます。
これを更新しない場合、ゲームが正しく動かないことがあるので、この処理はほぼ必須と言えると思います。

おわりに

今回は、泥棒バスターの画像や音声データを差し替える方法について説明しました。
泥棒バスター以外にも以下のGithubページには多くのakashic製コンテンツのソースが置いてあります。

https://github.com/akashic-contents

今回の紹介した差し替え方法はそれらのコンテンツにも適用可能なものですので、ご興味がある方は是非トライしていただければと思います。

コード・ゲーム

素材の差し替えによって出来上がったゲームとコードを以下に載せておきます。
実際に遊んでいただり、akashic製ゲーム改造の参考にしていただけると幸いです。

コード：https://github.com/dera-/thiefBuster/tree/natalia_version
ゲーム：https://game.nicovideo.jp/atsumaru/games/gm10685