2024-09-14 18:00:00

Unity でマージパズルゲーム「将棋くっつきんぐ」を作りリリースしました

Unityでマージパズルゲーム「将棋くっつきんぐ」を作りリリースしました。ゲームの概要や、開発の経緯、開発のポイント、作ってみた感想について記載していきます。

目次

ゲームの概要

Unityでマージパズルゲーム「将棋くっつきんぐ」を作成しました。

将棋の駒をくっつけて、同じ駒をマージしていくゲームです。

上からランダムに生成される駒を、ユーザーの操作で落としていきます。

同じ駒をくっつけると、マージされて強力な駒になります。 例えば 歩と歩をくっつけると、香車になります。

王将と王将をくっつけると、消えます。

ゲームオーバーになる条件は、容器に入れた駒が上まで溜まり、スポナーが持っている駒と接触するとゲームオーバーとなります。

駒をくっつけていくと、スコアがたまるので、ハイスコアを目指して遊びます。

将棋くっつきングので遊んでみたい方はこちらで公開しています。

将棋くっつきング

開発の経緯

昔からゲームを作ってみたいと思っていたので、これから本格的にゲーム開発をしてみようと思い、Unityでゲームを作成しました。

Unityで以前フリーズ将棋というアプリを一度リリースしましたが、だいぶ時間が経ってのと、 フリーズ将棋はそれほどゲームらしいゲームという感じではなかったので、

改めてゲーム開発をしてみようと思い、まずは簡単な「将棋くっつきんぐ」というマージパズルゲームを作成しました。

開発のポイント

今回Unityでゲーム制作を行うことで意識した点はこちら

  • アプリとしてリリースできる程度の完成度を目指す
  • タイトル画面、設定などゲームのコア以外の部分も作成すること
  • エフェクトなど、演出を入れる
  • UIToolkitを使ってUIを作成する

アプリとしてリリースできる程度の完成度を目指す

よくゲーム制作の初心者向けの解説などで見かけるのは、ゲームのコア部分だけを作成してそこで終わりというものが多い気がします。

ただ、ゲームの要素はコア部分だけではなく、タイトル画面、設定画面、ゲームオーバー画面なども重要な要素です。

そのため、今回は、アプリのリリースできる程度の完成度を目指し、タイトル画面、設定画面、エフェクトなどの演出も入れてアプリとしてリリースできる程度の完成度を目指しました。

UIToolkitを使ってUIを作成する

今回UnityでUIを作る際に、UIToolkitを使ってUIを作成しました。

Unity でUIを作るには、 Unity UI(uGUI)を使うことが今まで多かったと思います。(特にランタイム)

しかしUnityから提供されているUIの最新のフレームワークはUIToolkit、 Unity自体も、開発の方針としてUI Toolkitに力を入れているので、今後採用が増えていくと思われるUI Toolkitをこの機に利用してみたいと思いました。

UI Toolkitは初めて使ってみましたが、UI Toolkitでは、USSというスタイルシートを使ってUIのスタイルを設定することができ、 私は、普段からWeb開発をすることが多いので、USSというCSSと似たような記述方法でスタイルを設定できるのは使いやすかったです。

エフェクトなど、演出を入れる

ゲームの面白さを引き出すためには、エフェクトなどの演出が重要です。 今回はアプリとしてリリースできる完成度を目指すため、エフェクトなどの演出も入れるようにしました。

例えば、駒をくっつけたときにエフェクトを入れるなど、演出を入れることでゲームの面白さが引き出せると思います。

実際に入れたエフェクトは下記の通りです。

  • 駒をくっつけたときのエフェクト
  • スコアの増加時にインクリメンタルに増えるエフェクト
  • 駒を定期的に光らせるエフェクト

駒をくっつけたときのエフェクトや、駒を光らせるエフェクトはシェーダーを使って作成しました。

こういったエフェクトをいれるだけでも、シェーダーの使い方を学ぶ必要があり、ゲーム制作を通じて学ぶことが多かったです。

作ってみた感想

子どものころからゲームを作ってみたいという思いがあったので、今回Unityでゲームを作成してリリースできたことはとても嬉しいです。

かなり簡単なゲームでしたが、アプリとしてリリースできるようにするには思ったよりも多くの要素が必要で、少し大変でしたが、その分学ぶことも多かったです。

今回アプリリリースできる程度の完成度まで、で必要になった技術要素は下記の通りです。

  • ゲームロジック(ゲームのコア部分)の作成
  • シェーダーを使ったエフェクトの作成
  • UIToolkitを使ったUIの作成
    • 設定画面等のUIの作成
    • ボタンなどの連携
    • UIToolkit を利用したバインディング
  • 効果音、BGM周りの管理・設定

よくある簡単なゲーム制作の解説などでは、「ゲームロジック(ゲームのコア部分)の作成」のみが解説されていて、その他の部分はあまり解説されていないことが多いです。

今回は、アプリとしてリリースすることを目標としたため、UIやエフェクト、効果音、BGMなど、ゲームのコア部分以外の多くを学ぶことができました。

今回の記事では紹介できませんでしたが、具体的な技術要素の実装方法は、今後の記事で紹介していきたいと思います。

2023-07-16 18:00:00

Nuxt3 でgithub pagesにデプロイする方法

Nuxt3 でGitHub Actionsを利用して GitHub Pagesにデプロイしたときに、いくつかハマるポイントが有ったので対応について記載していきます。

目次

ハマりポイント

GitHub PagesにNuxtJSで作った静的サイトをデプロイしたところいくつかハマりポイントがありました。

  • 「_」(アンダーバー)始まりのディレクトリを読み込めない
  • 独自ドメインを使わない場合、ディレクトリのルートがずれる

詳しく説明していきます

「_」(アンダーバー)始まりのディレクトリを読み込めない

Nuxt.jsを使うと_nuxtというディレクトリにジェネレート後にバンドルされたJSやCSSが入ります。

しかし、GitHub Actions を使ってGitHub Pageを公開してもデフォルトでは_nuxt以下を読み込むことができず、Nuxtのページが上手く表示されません。

GitHub Pagesではデフォルトではjekyllを利用しているためのようです。こちらを無効にする必要があります。

無効にするには、公開ディレクトリのルートに .nojekyll を置けばいいようです。

具体的にはNuxt.jsの場合publicディレクトリ以下に置きます。 ファイルだけあればいいので中身は空のファイルです。

独自ドメインを使わない場合、ベースのURLががずれる

GitHub Pagesは独自ドメインを使っていない場合公開URLは https://<ユーザ名>.github.io/<リポジトリ名>/ となります。

例: https://naginagisa.github.io/nagiHP/

実際に配置されるファイルも https://<ユーザ名>.github.io/<リポジトリ名>/ 以下になるのですが、 デフォルトではソースコード上でドメインルートからのパスで、アセットのパスなどが記載されているため、ズレてしまいファイルが読み込めず表示されなくなってしまいます。

例:

ズレてる例: `https://<ユーザ名>.github.io/_nuxt/entry.84900e01.js`
正しいURL: `https://<ユーザ名>.github.io/<リポジトリ名>/_nuxt/entry.84900e01.js`

ずれないようにnuxt.config.tsで baseURLを指定して上げる必要があります。

export default defineNuxtConfig({
    app: {
        baseURL: '/nagiHP/',
    }
~ 省略 ~
}

参考: Nuxt Configuration Reference · Nuxt

サンプルのGitHub のリポジトリ、 ソースコード

こちらにサンプルのプロジェクトを用意しました。

GitHub Actionsを使ってデプロイしているので、 Settings => Pages => Source を GithHub Actions にリポジトリの設定は必要です。

NagiNagisa/GitHubPagesSample: GitHub Pages Sample

まとめ

Nuxt3でGitHub Pagesで公開するときのハマりポイントを紹介しました。

私の場合はこの2点を解決することで通常通りのデプロイができました

  • /public/.nojekyll の空ファイルを置く
  • nuxt.config.tsbaseURLの設定に /<リポジトリ名>/ を設定する
2023-06-04 10:00:00

RVC ボイスチェンジャーでGoogle Colabを使って自分で学習モデルを作成する方法!

話題の高性能なAIボイスチェンジャー RVC で自分で任意の声を学習して使う方法ににいてまとめています。

Google Colabを使うことで自分のPCに複雑な環境構築を行うことなく、誰でも簡単にRVCの学習モデルの作成ができます。 また、学習にはGPUやハイスペックなPCが通常は必要ですが、Google Colabなら無料の範囲で十分利用することができます。

対象読者

  • RVCで自分の声など、任意の声からボイスチェンジャーを作りたい方
  • 自分のPCでのGPUを使った環境構築が難しい方

目次

RVCって何?

RVCはRetrieval-based-Voice-Conversionの略です。

どんな事ができるのかというと、いわゆるボイスチェンジャーの機能になります。

従来のボイスチェンジャーというと声にフィルターやエフェクトを掛けて声を変換するという感じで、 別の人の声に成り代わるみたいなことはむずかしく、コナンに出てくる蝶ネクタイ型変声期のように誰の声にでもなれるみたいなことはできませんでした。

しかし、RVCはこれが実現できてしまいます。

またRVCの優れている点はリアルタイム性も挙げられると思います。 非常に軽く、変換には1秒もかかりません、高性能なGPUを積んだ環境では0.2秒くらいの遅延で変換が可能なため、会話なども普通にできます。

変換に関しては例を見たほうがわかりやすいと思います。

つくよみちゃんの声から私の声のRVCモデルを使った変換例

・変換前のつくよみちゃんの声

・変換後の声(つくよみちゃん => 私の声)

つくよみちゃんの声は下記を利用させていただきました ■つくよみちゃんコーパス(CV.夢前黎)

完全に別人の声になっていますが、違和感なく変換できているのがわかるかと思います。

男性の声から私の声のRVCモデルを使った変換例

・変換前の男性の声

・変換後の声(男性の声 => 私の声)

変換前音声データははJVS corpusを利用させていただきました Shinnosuke Takamichi (高道 慎之介) - jvs_corpus

Google Colabを使って自分の声(任意の声)のRVCモデルを作る

Google Colaboratory を使うことで、 自分のPCにPythonのインストールなど複雑な環境構築をすることなく、

また高性能なGPUを持っていなくとも、簡単に機械学習が行なえます。

RVCのモデルであれば無料の範囲でも十分利用できます。

Google Colaboratory は Googleのアカウントさえ持っていれば簡単に利用できます。

事前準備

Google Colaboratory を使ってRVCのモデルを学習ための準備として下記が必要になります。

  • Googleアカウントの取得
  • 学習元の声(音声データの準備)

Googleアカウントの取得に関しては、すでに持っている人が多いと思うのと、取り方も色々情報が出回ってると思うので詳細は割愛します。 Googleのトップページログインからアカウントを取得してください。

学習元の声(音声データの準備)

RVCのモデル作成には、元となる声の音声データが必要です。 10分以上のノイズの少ない音声が必要になります。

音声の内容自体は割と何でもいいようです、私はVtuber活動をやっているのでそういう方は普段の雑談の配信などを使ったり、普段の会話を録音しておくなどで利用する方もいるようです。

ただそういうデータは必ずしも声だけのデータにならならず、ノイズが入ることもあると思うので(お茶飲んだ音、コップおいた音、生活音..etc) 、 品質の良いモデルを作りたいのであればそれ用に録音したほうが良いかと思います。

私は、今回はたまたま机の上にあった本を30分ほど音読して録音しました。

音声形式は mp3 でも wav でも色々な形式に対応しています。

内部的にはffmpegを利用しているそうなので、そちらに対応しているフォーマットであれば何でも大丈夫ですが、 最終的にはwavで利用されるので最初からwavにしておけばトラブルは起きづらいと思うので、私の場合はwavを用意しました。

音声のカットや、無言、無音部分のカットなどは、RVC学習時に自動でやってくれていそうなので、自分でやる必要はありません。

RVC出始めの頃は自分で発話ごとに区切って、無音部分は削除が必要といった情報をTwitterやいろんな記事で見かけましたが、公式に下記記述があるため今は不要かと思われます。

入力した音声はまず、一定期間(max_sil_kept=5秒?)より長く無音が続く部分を検知して音声を分割します。無音で音声を分割した後は、0.3秒のoverlapを含む4秒ごとに音声を分割します。4秒以内に区切られた音声は、音量の正規化を行った後wavファイルを/logs/実験名/0_gt_wavsに、そこから16kのサンプリングレートに変換して/logs/実験名/1_16k_wavsにwavファイルで保存します。

参照: https://github.com/RVC-Project/Retrieval-based-Voice-Conversion-WebUI/blob/2280f3e392771c1002020c3dd26a4cae7ce1e049/docs/training_tips_ja.md#%E9%9F%B3%E5%A3%B0%E3%81%AE%E5%88%86%E5%89%B2

また、音声データは複数のデータになっても構いません。特定のディレクトリ以下に複数の音声ファイルがあれば全て読み取ってくれます。

作成した音声データを入れたディレクトリはGoogle Colabから使えるようにGoogle Driveに格納しておいてください。

まとめると次の様なデータが必要になります。

  • トータル10分以上のノイズの少ない音声データ
  • ファイル形式は mp3, wav 等 一般的な音声ファイル形式ならほとんど利用可能
  • 音声のカットや、無言、無音部分のカットなどは不要
  • 音声データは複数のファイルになっていてもOK
  • 音声データは1つのディレクトリに入れておく
  • 音声データはGoogle Colabから利用できるようにGoogle Driveに格納しておく

Google ColaboratoryのNotebookを用意

それでは実際にモデルを作っていきます。

Google Colaboratory の NoteBook を作成したのでこちらを使ってもらって構いません。

https://colab.research.google.com/drive/1_193AbviTHAM95Nh7x2bROJxQ03tUiPU

私が使っていた時点ではv2に対応しているNotebookがなかったので自分で作成したのですが、現在は公式の方でもNoteBookが用意されているのでそちらを使っても大丈夫かと思います。

内容的にはほとんど一緒なので、どちらを使っても構わないと思います。

今回は上記のNoteBookを使って進めます。

NoteBookは自分のドライブにコピーしてから使ってください

「ファイル」=>「ドライブにコピー」

WebUIを開く

コードの実行

基本的には上から順番にコードを実行して行ってください。

環境構築、 必要なパッケージインストール、 git clone と順番にコードを実行していきます。

ランタイムのリスタート

Pythonの依存関係インストールのところだけ注意が必要で、コード実行後に次のようなWarningが出てきますので Runtime の再起動をしてください。

WARNING: The following packages were previously imported in this runtime: PIL,numpy You must restart the runtime in order to use newly installed versions.

「RESTART RUNTIME」 というボタンが出ていると思うのでこちらをクリックすれば大丈夫です

google driveのマウント

「google driveのマウント」の部分ではクリックすると

このノートブックに Google ドライブのファイルへのアクセスを許可しますか?

というメッセージが表示されますが、こちらは「Google ドライブに接続」に接続してください。

これで google colaboratory から google driveのファイルを参照できるようになります。

プログラムを起動して Web UI を開く

「launch webui」のコードを実行すると、次のようなリンクが表示されますので、クリックするとWebUIが立ち上がります。

Running on public URL: https://xxxxxxxxxxxxx.gradio.live

クリックして立ち上がったページは次のようになります。

これ以降学習などは、このWebUI上の操作から行います。

RVCのモデルを学習を学習する

WebUIからTrainのタブをクリックしてください。

編集の必要があるポイントだけ今回は説明いたします。

番号説明
モデルの名前です。任意の名前をつけてください。ここでは 「nagisa_sample」 としました
RVCのモデルのバージョンです、v2のほうが精度がいいとされていますので、今回はv2を使います。
学習元の音声ファイルの入ったフォルダのパスを指定してください。Colaboratory側からパスをコピーするとわかりやすいです。
学習データを使って、何回学習を繰り返すかを指定します。
この値は学習元のデータ量やbatch数などにもよって最適な値は変わってきます。学習を繰り返せば学習元のデータには近くなるはずですが、やりすぎると過学習となってしまって、不自然になることもあるのでepochは単純に増やせばいいというものではありません。
今回は20回でやってみます。やってみて学習が足りないと感じたら40に増やすなどして試してみてください。
One-click training をクリックすると、学習元の音声データの加工(Process data)、 特徴抽出(Feature extraction), モデルの学習(Train model)、 インデックス作成(Train feature index) をすべて一括でやってくれます。
個別にやりたい場合はそれぞれ個別のボタンを押すことでできます。 今回は One-click trainingをクリックしてみます。
学習にはかなり時間がかかるので、webui上で動いているように見えなくても、colab側のログを見ることで動いていることを確認できます。

③のフォルダはGoogle Drive上の学習元のモデルのパスを指定してください。

パスはcolab側のディレクトリツリーからパスをコピーできます。

今回私の環境では /content/drive/MyDrive/AI/RVC/dataset/naginagisaという風にしています。

設定が完了したら ⑤の「One-click training」をクリックてモデルの作成をします。 このあと特に操作をする必要はありませんが、時間がかかります。20epochで20分くらいかかりました。

学習中のログなどは、colab側の方にログも出ますので、そちらで進捗や何をやっているのか、確認もできます。

学習にはかなり時間がかかるので、webui上で動いているように見えなくても、colab側のログを見ることで動いていることを確認できます。

完了したらモデルが出力されています。 作成させたモデルを使って、RVCを試してみましょう。

生成されたファイルで必要なファイルは、下記の②ファイルになります。

/content/Retrieval-based-Voice-Conversion-WebUI/weights/nagisa_sample.pth

/content/Retrieval-based-Voice-Conversion-WebUI/logs/nagisa_sample/added_****.index

作ったモデルを試す

「Model Inference」タブをクリックしてください。こちらの画面から作成したモデルは試すことができます。

Google driveに相手ある任意の音声データを使って、先ほど作成したモデルで変換してみる例をここでは紹介します。

番号説明
Model Inferenceをクリックして遷移する
Refresh voice list and index path をクリックすることで、先程学習したモデルをこちらのUIから利用できるようになります。
学習がうまく行っていればドロップダウンから先程学習して作成したモデルが表示されるはずなので 選択します。
変換元に使う音声データのピッチをどれだけ上げる、もしくは下げるかを指定します。
例えば男性の音声を、そのまま女性のモデルで変換してもじつはうまくいきません、事前に元の男性の音声のピッチを上げることできれいに変換ができます。
大体男性の音声から女性のモデルを使って変換する場合は 12 程度を指定すればうまくいくかと思います。
女性=>女性 への変換や 男性 => 男性 への変換の場合はそれほどいじらなくてもいいと思います。
なんにせよピッチを合わせるとうまくいくので、そちらを意識して設定するとよいかと思います。
変換元の音声データのパスです、今回は自分のドライブの直下にファイルを置いたのでそちらを指定しています。 任意のデータをdriveにおいて利用してください。
harvest が品質が良いようなのでこちらを使います。
indexファイルを指定します。 学習がうまく行っていればドロップダウンで added_xxxx.index というファイルが選択できるはずなので、そちらを選択してください。
Convertをクリックすると設定に基づいて変換が行われます。
変換結果の音声を再生することができます。 ②のtransposeの設定などで結構変わってくると思うので、色々試すと良いかと思います。

試してみて作ったモデルの学習が足りないなと感じたりした場合は、再度trainのタブに戻って学習し直したりすることができます。

学習が足りなければepoch数を増やして調整したりすることになります。

作ったモデルを保存する

作ったモデルはこのままGoogle Colaboratory を閉じてしまったりすると、消えてしまいますので、

Google Driveに保存しておきましょう。

Colaboratoryの画面側に戻って、 必要な情報を入れて「モデルをDriveにコピー」のコードを実行すればOKです。

Google Colaboratoryは並列実行はできないようので、webuiのコードを実行中の場合は一度停止してからコピーのコードを実行してください。

項目説明
DSTPATHDriveの格納先のディレクトリの指定。/content/drive/MyDrive/ がドライブ以下になるので、以下は自分で任意のパスを指定して大丈夫です。
MODELNAMEモデル作成時のモデル名と合わせてください。 今回の場合であれば nagisa_sample
MODELEPOCHエポック毎のトレーニング途中のファイルになります、学習を再開したい場合などに使えるのでこちらもバックアップできるようにしています。 EPOCH数は /content/Retrieval-based-Voice-Conversion-WebUI/logs/モデル名 以下にD_XXXX.pthやG_XXXX.pth などがあると思うのでこのXXXXの部分の数字を入れてください。 基本的には一番学習が進んでいるもの(数値が一番大きいもの)を選べば良いと思います。

コピーが完了すると、 Google DriveからDSTPATHに指定したディレクトリが作成されており、中には次のようなファイルがコピーされて格納されます。

この中で RVC の Client ソフトで必要になるファイルは、下記2ファイルです。

  • モデル名_エポック数.pth 例) nagisa_sample_1300.pth
  • added_*****.index 例) added_IVF1607_Flat_nprobe_1_nagisa_sample_v2.index

クライアントによっては、 total_fea.npy も必要になるソフトもあるかもしれません。

これらのファイルと、 RVC モデルを読み込める クライアントソフトを使うことで、リアルタイムのボイスチェンジなどを試すことができます。

VC Client を使ってリアルタイムボイスチェンジを試す

RVCのモデルが使えるソフトはいくつか公開されています。

ここでは VC Client というものを紹介します

GitHub - w-okada/voice-changer: リアルタイムボイスチェンジャー Realtime Voice Changer

インストールと実行

インストールはリンク先に書いてあるとおりです。

GitHub - w-okada/voice-changer: リアルタイムボイスチェンジャー Realtime Voice Changer

こちらのページのリンクから、合うものを選んで、ダウンロードしzipファイルを展開します。

cuda と書いているはNvidia のGPUがあれば使えます、GPUがない場合はCPUと書いてあるものをダウンロードすると良いと思います。

Windows なら start_http.bat をクリックして実行

Mac なら startHttp.command をクリックして実行してください。

モデルのアップロードと利用

上記のコマンドで立ち上げると次のような画面が開きます。 VC Clientの選択画面が出た場合は「RVC」をクリックしてください。

モデルのアップロード

自分で作ったモデルをアップロードするには

「Model Setting」 のところを開いて、下記の項目を変更して「upload」クリックします。

項目説明
Model(.onnx,.pt,pth)RVCのモデルファイルを指定、 今回は作成した nagisa_sample_1300.pth を選択
index(.index)インデックスファイルを指定(added_*.index)、
Default Tune声のピッチをどのくらい上げるかのデフォルト、あとから使うときに指定できるので、0でいいと思いますが、男性=>女性への変換が目的のときは12、 女性=>男性への変換が目的のときは-12、同性での変換の場合は0 といった感じに指定するとよいかと思います。

VC ClientでRVCモデルを利用する

利用は簡単です。

利用するには、「Server Control」の「Switch Model」から先程アップロードしたモデルを選択肢、 「Start」を推します。

「Device Setting」の「AudioInput」に利用するマイクのデバイス、 「AudioOutput」に利用するスピーカーなどをなど選んで、マイクに声を通すと変換された声が出力されます。

きれいに変換させるには声のピッチを合わせることが必要です。

「Tuning」を変更してみて、きれいに変換できるTuningになるように調整してください。

これでリアルタイムで誰でも任意の声にボイスチェンジができるようになります。

まとめ

  • RVCはAIを使った高性能な、リアルタイムで変換可能なボイスチェンジャー
  • RVCのモデルをGoogle Colaboratory で自分で学習して作成できる
  • 学習にはGoogle Colaboratoryを使うと簡単で便利!
  • RVCのモデルを VC Client で簡単に利用可能