SivPSD

この記事はSiv3D Advent Calendar 2023の21日目の記事として執筆いたしました。

OpenSiv3Dのゲーム開発でPSDファイルを利用したいと思い、PSD読み込みライブラリをpsd_sdkを用いて作成してみました。以下に導入方法と使い方を説明いたします。

要件

Windows
Visual Studio 2022 (v143)

導入方法

📝 導入するOpenSiv3Dのプロジェクトを新規作成または開いてください。ここでは、HelloPSDというプロジェクトで進めます。

📗ターミナルで以下のコマンドを実行し、SivPSDとpsd_sdkをサブモジュールとして追加します。

git submodule add https://github.com/sashi0034/SivPSD
git submodule update --init --recursive

gitを用いない場合は、代わりにSivPSDをダウンロードしてプロジェクト直下に配置してください。

📝 SivPSDは現在v0.6.12のSiv3Dが設定されています。ご自身のプロジェクトのバージョンと違う場合は手動またはスクリプトを実行してSivPSDで使うSiv3Dのバージョンを変更してください。例えば、v0.6.10に変更する場合は以下のように実行すれば簡単に変更できます。

cd .\SivPSD\SivPSD\
python .\s3d_switch.py 0_6_10

📗 SivPSDをソリューションに追加します。ソリューションエクスプローラーのルートから右クリックをして、追加 / 既存のプロジェクトを選択します。プロジェクトルートからSivPSD/SivPSD/SivPSD.vcproj を探して追加します。

📝 同様の手順で SivPSD/psd_sdk/build/VS2022/Psd.vcxproj も追加します。

📗 プロジェクトからSivPSDを参照します。自身のプロジェクトを右クリックして、追加 / 参照 をクリックします。SivPSDにチェックマークを入れてOKを押してください。

🎉お疲れ様でした。これで導入は終わりです。

使い方

基本的なコード

📝 以下のようPSDを読み込んで使用できます。

PSDImporter psdImporter{U"path/to/file.psd"}; // 読み込み
if (const auto e = psdImporter.getCriticalError()) throw e; // エラー
PSDObject psdObject = psdImporter.getObject(); // 読み込んだデータの取得
while (System::Update())
{
    psdObject.draw(); // PSDを描画
}

📗 psdObject.layers[index] でレイヤー単体にもアクセスが可能です。以下にサンプルコードを掲載するのでご参考ください。イラスト miko15.psd はSivPSD/Test/App/psd にございます。

gist.github.com

非同期処理にして実行

📝 このPSDImporterですが、以下のようにコンストラクタで細かな設定が可能でございます。

storeTarget でレイヤーを Image として格納、DynamicTexture として格納するかの設定が可能です。
storeTarget で読み込み時に用いるスレッド数を決められます。適切なスレッド数を決めることで高速な読み込みが実現できます。
asyncStartでバックグラウンドとして非同期実行ができます。

PSDImporter psdImporter{
    {
        .filepath = U"psd/miko15.psd",
        .storeTarget = StoreTarget::MipmapTexture,
        .maxThreads = 4,
        .asyncStart= true
    }
};

📗 非同期処理にしたサンプルコードは以下をご確認ください。

gist.github.com

PSD形式の注意について

今回実装したライブラリではレイヤーのマスク処理やクリッピング機能をあえて対応しませんでした。

また、カラーモードやカラーチャンネルについてもRGB、8ビット/チャンネルと制限しました。

理由としまして、今回はゲーム用に利用する目的であり、マスク処理やクリッピングといったリアルタイムでレンダリングに負荷がかかることを避けたいということがあります。

また、CLIP STUDIO PAINTでイラストを作成するときは基本的にこのカラーモードやカラーチャンネルになっているように思います。

実際、Live2D Cubismのマニュアルを確認しますとこのような細かい制約が確認できます。

今回の開発においてもこの規則に則っていくことにしました。

🤖しかし、このようなレイヤーの統合作業は大変だろうということで、今回次のようなクリスタで使えるレイヤー自動統合スクリプトを作ってみました。ぜひご活用ください。

https://gist.github.com/sashi0034/5addacc2c0a89785eb84146c71370671

おしまい

PSDを利用して素敵なゲームを作ってみてくださいね。

蛇足でございますが、先頃のゲームジャムにて大変ありがたいことに賞を頂いています。楽しく遊んでいただけましたら幸いです。

siv3d.github.io

sashi0034のブログ

OpenSiv3DでPSDファイルを読み込む