Tangledeep スキンMODの作り方
はじめに
本記事はsteamで配信中の不思議のダンジョン風ハクスラｘローグライトRPG＜Tangledeep＞におけるスキンMOD作り方を解説する記事です。
より詳しいMODの解説は公式のガイドラインをお読みください↓
必要なもの
・Tangledeep
ゲームによっては本編無しでもMODを作れる作品がありますが、今回紹介するスキンMODは差し替え元となるデータがsteamのワークショップにあるため原作の購入が必要です。
・Aseprite
ドットエディターです。今回は同じくsteamで配信中のソフト<Aseprite>を使用します。他のエディタでも作成はできますが、後述するsprite sheet機能が非常に優秀なのでこちらを利用します。
・Atom
コードエディタです。XMLファイルを書き換える際に利用します。
スキンMODの作り方
1.元データの取得
↑こちらの"ColorSwap"MODのリンクから[+サブスクライブ]をクリックするとデータがPC上に保存されます。格納場所は"C:Program Files (x86)Steamsteamappsworkshopcontent28770 93031117"です（パスの数値は環境によって変更あるかも）。steamの設定でローカルデータの保存場所を変更している際はパスが異なります。ダウンロードされない場合は一度ゲームを起動して再度覗いてください。
2.画像ファイルの書き換え
データ書き換えに当たり、まずはジョブを選択します。本記事では日本名[義賊]、英語名[Brigand]を書き替えていきましょう。
データファイルが英語名になるので、MODを作る際は英語でプレイをお勧めします。
データを書き換えるジョブが決まったら、先ほどのColorSwapのローカルデータから対応するデータを別のファイルにコピーします。
ジョブ名*.png ４種類
ジョブ名*.xml ３種類
description.txt
PlayerFileDefs.txt
１ジョブにつき合計9ファイルをコピーします
ここからが本番です。pngファイルをAsepriteで開きましょう。
ジョブ名.png ジョブメニューに表示される画像
ジョブ名Top.png 後ろ向きの画像
ジョブ名Side.png 横向きの画像
ジョブ名Down.png 前向きの画像
となります。
これらの画像を編集することでスキンMODを作成していきます。
今回はBrigandDown.pngを書き換えていきます。
アニメーションが横一列に並んだいるためこれらをフレームに分割します。
右上のタブから[ファイル][スプライトシートのエクスポート] もしくは”Ctrl+I”を押してください。幅と高さを調整したらインポートを押します。
BrigandDown.pngの場合は幅:58 高さ:46となります。
インポートをしたデータがこちらです↓
下バーのフレームが18に増えました。この様にフレーム分割を行うことで前後のアニメーションを確認しながら画像の編集が行えます。
次にフレームのタグ付けを行います。
AtomエディターでBrigandDown.xmlを開き、＜AnimeData＞の部分に注目しましょう。
フレームごとにタグ付けがされています。
行9から31を見ると、フレーム0～5が"IDLE"と設定されていることがわかります。
行33からは"WALK"に対応するフレームが指定されています。こちらのデータから、Asepriteのフレームにタグ付けを行います。
フレーム番号0を右クリックして新規タグをクリックしましょう。
Tagの設定画面が出るので”1～6”フレームをIDLEと設定しましょう。（xml上ではフレームは0から数えているので番号が1つ繰り上がります。）
全部のフレームをタグ付けするとこの様になります。
タグの説明をすると、
IDLEは操作をしていない際の動作
WALKは前方に歩く動作
ATTACKは前方に攻撃する際の動作
USEITEMはアイテムを使った時の動作
です。名前の通りですね。フレーム数を1～6に指定すると、1～6フレームを繰り返しアニメーションします。フレーム数を変更して長い動作を指定することや、フレーム数を1にしてアニメーションさせないといった変更もできます。IDLE状態でしたら4フレームだけで充分かもしれません。
もしフレーム数を変更する場合は、その都度xmlの記述を変更してください。
ようやくスキン差し替えが行えます。
今回はBrigandをボイスロイドの2次創作キャラであるｾﾔﾅ-に書き換えていきましょう。
個人的な書き換え方法としては、
1.元のBrigandのレイヤーの透明度を下げる
2.新しいレイヤーを作成する
書き換えたデータがこちらです↓
IDLEを1～4フレーム、WALKを5～8フレーム、ATTACKを9～13フレーム、USEITEMは14フレームとしました。フレーム数とスプライトサイズは任意に増減が可能です。
ではデータを元の横並びのスプライトシートに戻しましょう。レイヤー名[Sprite Sheet]の目の部分をクリックして表示しない設定したのち、左上のタブから、[ファイル] [スプライトシートのエクスポート] もしくは"Ctrl+E"でエクスポート設定を開きます
Outputの項目から、出力ファイルとスプライトを生成して開くに☑を入れてエクスポートしましょう。
すると、Asepriteの独自規格である.aseにデータが作成されます。
その後[ファイル] [名前を付けて保存]を選択し、拡張子をpngにし、BrigandDown.pngとして上書きもしくはべつのファイルを作成しましょう。
残りのpngも書き換えを行いましょう。ジョブデータのこれで完成です。
3.xmlファイルの編集
次にMODファイルを作っていきます。
まずはxmlの編集から。この項目は、画像を差し替える際にフレーム数を変更した場合に実行しましょう。
先ほど書き換えたBrigandDown.pngに対応するBrigandDown.xmlを編集します。
書き換える項目は、
・<NumColumns> </NumColumns>の数字を総フレーム数に変更。今回は14となりました。
・<SpriteIndex> </SpriteIndex>の数字を書くAnimeTypeに対応する数に変更
<AnimType>IDLE</AnimType>の場合は、1～4フレームなので<SpriteIndex>0～3の項目を作ります。
ほかのAnimTypeにも同様の処理を施してください。
4.テキストファイルの編集
・description.txt
一言で構いませんので概要を記述しましょう。ワークショップでの説明に表示されます。このテキストファイルがなくてもMODは起動しますが、エラーが表示されるので作りましょう。
・PlayerFileDefs.txt
フォルダ内のデータの役割を記述しています。ColorSwapからコピーした場合はジョブに対応する部分を削除して保存しましょう。
5.追記
追記1
Mod workshopで表示される512x512の画像を追加できます。
追加方法は、Tangledeepに配置したフォルダ名と同じ名前の512x512の画像を作成します。フォルダ名が"seyanaMOD"なので"seyanaMOD.png"として保存します。
EnableModで表示されたら成功。
追記2
Bodokaの様なスプライトデータが横1列になっていない場合、一度フレームに分解したのち横並びのデータに変更します。その後xml上で呼び出すデータを編集すれば問題なく編集することができます。
左がColorSwapからのデータ。右が横一列に配置した際のデータです。
<NumRows> </NumRows>が縦のフレーム数に対応する部分。元が4だったのを1に変更します。
<NumColumns> </NumColumns>が横のフレームに対応する部分。4*7で28と変更します。
後はそれぞれのAnimeTypeに対応するフレーム番号を記述し保存すれば動作します。
xmlの編集に関しては、はじめに記載した公式ガイドラインに詳しく書かれていますのでそちらをお読みください。
実装方法
2分30秒ごろから動画での説明もあるのでこちらもご覧ください↑
作製したフォルダをTangledeepのローカルデータに配置します。パスは"C:Usersユーザー名AppDataLocalLowImpactGameworksTangledeep"となります。
検索するかもしくは、tangledeepを起動時に左下に表示されるMod WorkshopメニューのEnableMOD、View Local Mod Folderで開いてください。
フォルダの中身はこの様になります。
データを入れたらtangledeepを開いている場合再起動します。Mod WorkshopのEnable Modのフォルダに☑を入れてゲームを起動します。
データが置き換わってたら成功！！！ジョブMODというより、エネミーMODですね。こりゃ。。。
配布方法
ｾﾔﾅMODもしくはほかのMODが完成したら、steamでの投稿方法を記述します。
おわりに
分からない事があればボイスロイドドット絵部部室の"燻丸#4633"まで。もしくはTwitter:@ibushi_maru までご連絡ください。
