A Hat in Time Guide

帽子(Hat Flair)のつくりかた for A Hat in Time

帽子(Hat Flair)のつくりかた

Overview

このガイドでは帽子スキン(Hat Flair)の作成と+αを解説します。

はじめに

このガイドでは、Blenderで自作したモデルを元にして解説します。そのため別のモデリングソフトを使用している場合はそれに準ずる機能を各自で補完してください。
また、作成には

  1. A Hat in Time Modding Tools
  2. 画像編集ソフト (フォトショやGIMPなど)
  3. モデリングソフト (BlenderやMaya)
  4. コーディングソフト (Notepad++がおすすめ)

のインストールが必要となりますのであらかじめ導入をしておいてください。
基本的にこちらのガイド(英語)を元としているので先行的に読んでいただければより理解が深まると思います。

その1:モデル編

イントロ

まずEditorに作成したモデルを読み込ませる条件として

  • ポリゴン数が大きすぎないこと(EditorはUnreal Engine 3;Unreal Development Kitなので重くなるのと多すぎても対応できないため)
  • 必ずアーマチュアを一本仕込み、モデルと自動ウェイトでペアレント関係に置くこと

があります。そのため作成する際にはこれらの点に注意を払ってください。

作成・エクスポート準備編

作成編とか打っておいて難ですが、あらかじめ作った以下のものを使用します。

このモデルにはジグルボーン(ボーンの動きにをってモデルを動かす機能、たいていアッチ系に使われたりするもの)を適用させるためにボーンを以下のように仕込みました。

モデルを読み込ませるためにはこの二本以外にもう一本必要になるので、新しく配置したそのままの位置、つまり原点へこのようにして置きます。

この後はジグルボーンの導入の有無により一部ステップが変わります。

ジグルボーンを導入している場合

もしモデルを色々揺らしたい場合には、以下の順で関連付けを行います。

  1. 揺らしたいボーンとモデルをペアレント>自動のウェイトで の順に関連付ける

  2. 原点にあるアーマチュアとモデルに関連しているボーンを同様に関連付ける


    (最終的な階層順序)

また、ウェイトペイントなども必要に応じて行います。

ジグルボーンを導入していない場合

そのまま原点のアーマチュアを、上述した場合と同様にしてモデルと関連付けます。

エクスポート編

ファイル形式は.fbxのみに対応しているため、これに従いエクスポートを行います。

右側にあるオプションのうち、ジオメトリの項目にある「スムージング」を「辺」に、アーマチュア項にある「リーフボーン追加」をチェック解除にしてエクスポートを行います。

モデリングソフトは後のプロセスでも使用するので、スペックがあるなら開いたままにしておくと便利です。

その2:エディター編

イントロ

A Hat in Timeを購入した時点で、インベントリにModding Toolsがソフトウェアとして追加されているのでインストールしましょう。
また一挙手一投足にフリーズしたりクラッシュしたりするので、データはこまめに保存しておくとベターです。

読み込み編

Modding ToolsからLAUNCH EDITORでエディターを起動したら、最初に出てくるコンテンツブラウザー下部にあるインポートから作成したモデルを読み込みます。

そこで出てきたウィンドウのうち、Packageを好きな名前(1バイト文字のみ対応)に変更をし、OptionsにあるMaterialの項目では状況に応じてImport MaterialsやTexturesにチェックを入れたりします。


なお、テクスチャについてはモデル作成時にUV展開などで関連付けられている場合には自動でインポートされます。今回はインポート時にエラーが出てしまったので、テクスチャは別途インポートを行いました。
この時点でアイコンに使用する画像を別途作成している場合は、同時にインポートすると便利です。

テクスチャ・マテリアル編

手動でpngファイルをインポートした場合など、テクスチャがマテリアルを自動生成していない場合は、読み込まれたTexture2Dファイルを右クリックして、Create New Materialを選択するとファイル名_matとして新規にマテリアルが作成されます。

生成されたマテリアルをダブルクリック、もしくは右クリック>Edit Using Material Editorからマテリアルエディターに入ることができます。

マテリアルエディターでは下部にあるBlend ModeをMaskedに、Lighting ModelをPBRに変更し、そこから下へスクロールした先のUsageにてUsed With Skeletal MeshとUsed With Static Lightingにチェックを入れた状態にします。

また、右部分にあるMaterial Function Libraryから適当なファンクションを一つドラッグアンドドロップし、下部に表示されるMaterial Functionに

MaterialFunction’HatInTime_CharacterShading.Templates.PlayerShader’

を入力します。

そうすると上部が変化するので、以下のようにマテリアルと接続します。

最後に左上のチェックボタンを押したら、マテリアルの設定は完了です。

また、Hat Kidの服に使われているノーマルマップなどゲーム内にあるマテリアル要素を持ってくる場合は、コンテンツブラウザー上部にあるすべてのアセットから検索を行い、使いたい要素があるマテリアル上で同様にマテリアルエディターを開きます。そこで該当部分を選択した後にctrl+cでコピー、適用させたいマテリアルエディター上でctrl+vを行うと貼り付けられるので、PlayerShaderに接続します。

アイコン用の画像は、使用するテクスチャをダブルクリックもしくは右クリック>Edit Using Texture Viewer…からエディターを開き、右部分にあるLODGroupからUIを選択する必要があります。

モデル調整編

インポートしたモデルは、SkeletalMeshとしてインポートされているので、それをダブルクリックもしくは右クリック>Edit Using Anim Set Viewer…よりエディターに入ります。

ここでUV・マテリアルを別途インポートしていた場合は左下部にあるこの部分より

Materials>コンテンツブラウザー上でマテリアルを選択した状態にし、緑色の左矢印をクリックでマテリアルを適用することができます。

以下のプロセスでは帽子のモデル位置・サイズ調整を行いません。その1でも記したように、Blenderやモデリングソフトは起動したままにしておくと便利です。

キャラモデルに対して帽子がどこに存在するかを調べるには、コンテンツブラウザーよりすべてのアセット>オブジェクトタイプ>Skeletal MeshesにチェックをするとSkeletal Meshのみが検索できます。そこからheadなど検索をかけてHatKidHeadもしくはbowkid_head_skmから同じくエディターを起動します。

そこから上部にある赤い逆台形型の図形に下矢印が乗っているアイコンからSocket Managerに入ります。Socket Managerでは様々なSocketsがありますが、経験上thorhatが一番おすすめなのでそれを使用します。

右側をスクロールするとPreview Skel Compという項目があるので、マテリアルを適用した時と同じ要領で帽子も適用します。

そうするとインターフェイスで帽子が表示されます。

もし表示された帽子が大きい、逆に小さい場合はモデリングソフト内でモデルの調整・エクスポートを納得がいくまで行います。幸いにも、コンテンツブラウザー内でSkeletal Meshを右クリックしたときのメニューにあるReimport Skeletal Meshから即座に読み直しができるので手間は省けます。
Bow Kidの場合はやや特殊で、エディター左部分にあるSection Groupから髪型の形を一つ選択する必要があります。

また基本的にHat Kidと比べてサイズが小さいので、Hat Kidとは別途にモデルを作成する必要が出てきやすいことをご留意ください。

Blender上でサイズの目安を付けたい場合、Hat KidやBow Kidの頭部モデルをエクスポートすることができます。
コンテンツブラウザー上でHat KidやBow Kidのモデルを右側にある空白部分へドラッグアンドドロップし、右クリック>SkeletalMeshActor Properties…でプロパティを表示します。

そこでMovement>Locationで全数値を0にした後、もう一度空白部分にあるモデルを右クリックし、Export .FBXでモデルを作成することができます。

もし右クリックをしてExport .FBXのオプションが表示されなかった場合、エディター最上部にあるPreferencesからSimplified Editorのチェックを外します。それによりオプションが表示されます。

また必要な段階として、帽子につけるバッチ用のSocketを作成する必要があります。
帽子のエディターからSocket Managerを開き、New SocketよりBadgeA、B、Cと3つ分作成します。作成した各ソケットをクリックすると、右側のインターフェイスで位置操作ができるようになるので、お好みの位置に移します。

実際のバッチのサイズ感を確かめる場合には、Hat KidやBow Kidに帽子をかぶせたのと同じ方法でバッチを表示させます。モデル名は

StaticMesh’HatInTime_Items.models.badge_standard’

です。
バッチを表示させたくない場合は、位置をモデル内部に移動させてからRelative Scaleをすべて最小値の0.000001にします。それ以下の数値の場合は1として変換されるので注意してください。

物理演算編 ~帽子にアクセントが欲しい方のために~

ここでは物理アセット作成と、モデルに組み込んだボーンのジグルボーン化を行います。
まず、物理アセットを作成したいskeletalmeshを選択し、右クリック>Create New Physics Asset… を選択すると、いくつかのウィンドウの後に物理アセットが作成されます。


作成された物理アセットを開き、右下部にある各ボーンを選択すると調整などができます。そして揺らしたいボーンを選択し、右上部にあるJiggleboneにチェックを入れると動くようになります。

揺らす度合いにより数値を適宜変更します。また過剰に緩くしすぎるとモデルがねじれたりビジュアルに影響が出るので気を付けましょう。

エクスポート編

この時点で全ての準備が整いました。コンテンツブラウザー左下部にある「パッケージ」から、読み込み編で付けたフォルダーの名前を右クリックし保存します。

その3:Modding Tools編①

イントロ

ここではModフォルダーの作成と必要なフォルダー構築のみを行いますので短いです。

フォルダー作成編

Modding Toolsを起動して、右下部にあるNew Modをクリックします。
そうすると以下のような画面が表示されますので、Modの名前とフォルダー名、(すでに決まっているのであれば)説明を書き左下部のSave Changesをクリックするとフォルダーが作成されます。

フォルダ構築編

作成したら、下部にあるBrowse Modをクリックすると

C:Program Files (x86)SteamsteamappscommonHatinTimeHatinTimeGameMods作成したMod

がエクスプローラーで表示されるので、フォルダ内にContentとClassesという名前のフォルダを作成します。
ここで作成したフォルダーは後に使用するのでそのままにして次のセクションに移ります。

その4:スクリプト・エクスプローラー編

イントロ

ここではUnrealscriptを使用したスクリプティングを行います。そのためNotepad++などのソフトの使用を推奨します。

Classes編

その3で作成したClassesフォルダー内にクラスファイルを作成します。自分もプログラミングには疎いのでこれをコピペしてください。

class umi_shark_HK extends Hat_CosmeticItemQualityInfo; defaultproperties { CosmeticItemWeApplyTo = class’Hat_Ability_Help’ ItemQuality=class’Hat_ItemQuality_Rare’ SupportsRoulette=false HUDIcon = Texture2D’umi_sharkhead.sharke_HK_icon’ MeshOverride = SkeletalMesh’umi_sharkhead.sharkehat’ Materials(0)= Material’umi_sharkhead.SAME_uv_Mat’ PhysicsAssetOverride = PhysicsAsset’umi_sharkhead.sharkehat_Physics’ SocketName=”thorhat” bHasPhysicsAssetInstance = CIQ_On BowKidOnly = CIQ_Off HatKidOnly = CIQ_On HidePonytail=CIQ_Off }

ここからは各項目の解説になります。

class

一行目にある”class umi_shark_HK”はこの帽子を定義するクラス名になります。この名前を変更する際にはファイル名も合わせる必要があります。ちなみにこの場合のファイル名はumi_shark_HK.ucです。

CosmeticItemWeApplyTo

これは帽子の能力を定義する項目です。この場合は女の子の帽子/リボン(Helper)ですが、Helpの以外の能力は以下のようになります。

  • スプリントの帽子:Hat_Ability_Sprint
  • 薬品の帽子:Hat_Ability_Chemical
  • 氷の帽子:Hat_Ability_StatueFall
  • 住人の仮面:Hat_Ability_FoxMask
  • 時間停止の帽子:Hat_Ability_Timestop
ItemQuality

アイテムのレア度を定めます。インベントリにある背景色や星の数が変わります。

  • コモン(透過・☆なし):Hat_ItemQuality
  • レア(青・☆):Hat_ItemQuality_Rare
  • エピック(紫・☆☆):Hat_ItemQuality_Epic
  • レジェンダリー(赤・☆☆☆):Hat_ItemQuality_Legendary
  • 完了主義(浅葱・☆なし):Hat_ItemQuality_Completionist
  • ゴールド/デスウィッシュ(黄・スタンプ):Hat_ItemQuality_Gold
  • サポーター(黄緑・キックスターターの支援者限定):Hat_ItemQuality_Supporter
  • メトロ/DLC2(オレンジ・☆なし):Hat_ItemQuality_Metro
SupportsRoulette

タイムリフトのクリア後やHub内にあるスロットマシーンから獲得するか、もしくはインストール時に即入手できるかを決めます。trueが正=スロットから獲得、falseが偽=即獲得になります。ここでfalseに規定した場合はアンロックに別途スクリプトファイルを作成する必要があります。

HUDIcon

ゲーム内で使用するアイコンを定義付けます。コンテンツブラウザー内で使用するテクスチャを右クリック>Copy Full Name to Clipboardで名前をコピーできるようになります。また、これ以降PhysicsAssetOverrideまで設定は同様の手順となります。

MeshOverride

表示させるSkeletalMeshを選択します。

Materials(数字)

モデルに適用するマテリアルを選択します。上記のMeshOverrideとともに、これらによってHat KidとBow Kidと分けて使用するモデルやマテリアルを変更することができます。(別途作成の必要あり)

PhysicsAssetOverride

その2で作成した物理アセットを定義します。

SocketName

その2・モデル調整編で基準としたソケットを設定します。

bHasPhysicsAssetInstance

物理アセットのオンオフの定義です。CIQ_Onによってジグルボーンが動くようになります。

BowKidOnly

このクラスをBow Kid専用にするかどうかを定義付けます。同じくCIQ_OnにてBow Kid専用になります。

HatKidOnly

これはBowKidOnlyの逆になります。BowKidOnlyをCIQ_Offにしていた場合でも念のためにしておくとベターです。

HidePonytail

Hat Kidが使用した場合にポニーテールを隠すかを設定できます。主にヘルメットなど、デザイン的に隠したい場合に有効です。

この他、Bow Kid専用の項目としてHatSectionGroupがあります。その2で調整の基準としたHat Sectionを決めるもので、

HatSectionGroup = “Witchhat”

のようになります。

アンロック編

例のごとくコピペしてください。

class umi_shark_settings extends GameMod config(Mods); event OnModLoaded() { HookActorSpawn(class’Hat_Player’, ‘Hat_Player’); GiveItem(true); } event OnHookedActorSpawn(Object NewActor, Name Identifier) { if (Identifier == ‘Hat_Player’) GiveItem(true); } function GiveItem(bool b) { if (b) { Hat_PlayerController(GetALocalPlayerController()).GetLoadout().AddBackpack(class’Hat_Loadout’.static.MakeLoadoutItem(class’Hat_Ability_Help’, class’umi_shark_BK’), false); Hat_PlayerController(GetALocalPlayerController()).GetLoadout().AddBackpack(class’Hat_Loadout’.static.MakeLoadoutItem(class’Hat_Ability_Help’, class’umi_shark_HK’), false); } else { Hat_PlayerController(GetALocalPlayerController()).GetLoadout().RemoveBackpack(class’Hat_Loadout’.static.MakeLoadoutItem(class’Hat_Ability_Help’, class’umi_shark_BK’)); Hat_PlayerController(GetALocalPlayerController()).GetLoadout().RemoveBackpack(class’Hat_Loadout’.static.MakeLoadoutItem(class’Hat_Ability_Help’, class’umi_shark_HK’)); } } event OnModUnloaded() { GiveItem(false); }

ここで変更するのは、

class umi_shark_settings
class’Hat_Ability_Help’
class’umi_shark_BK(とHK)’

です。各ファイル名と能力に適宜合わせてください。もしクラスを一つしか作成していない場合は

class ファイル名 extends GameMod config(Mods); event OnModLoaded() { HookActorSpawn(class’Hat_Player’, ‘Hat_Player’); GiveItem(true); } event OnHookedActorSpawn(Object NewActor, Name Identifier) { if (Identifier == ‘Hat_Player’) GiveItem(true); } function GiveItem(bool b) { if (b) { Hat_PlayerController(GetALocalPlayerController()).GetLoadout().AddBackpack(class’Hat_Loadout’.static.MakeLoadoutItem(class’Hat_Ability_能力’, class’クラス名’), false); } else { Hat_PlayerController(GetALocalPlayerController()).GetLoadout().RemoveBackpack(class’Hat_Loadout’.static.MakeLoadoutItem(class’Hat_Ability_能力’, class’クラス名’)); } } event OnModUnloaded() { GiveItem(false); }

のようにシンプルにできます。

エクスプローラー編

今度はmodフォルダー内にあるContentフォルダーに、作成したパッケージファイル(.upk)を入れます。
最終的なファイル構造は以下になります。

その3で設定したModファイル名/  ┣ Classes/  ┃ ┣ 帽子クラス  ┃ ┗ アンロック用スクリプト(必要であれば)  ┗ Content/    ┗ その2で保存した.upkパッケージ

その5:Modding Tools編②

イントロ

直感的に操作ができるのであまり難しくないと思います。

アイコン画像編

ワークショップへ登録する際にアイコン画像が必要になります。条件は以下の通りです。

  • サイズが2の累乗 (512*512, 1024*1024)
  • 容量が1MB以下 (なのでPNGであれば512*512がベター)

登録は左上部にある?マークのポートレートから行います。

コンパイル編

ゲームにmodを読み込ませる場合、最初にスクリプトをコンパイルする必要があります。
左部分の上から二つ目にあるスクリプトボタンを押し、Compile Scriptsからコンパイルを行います。

下のように緑色で Successと表示されたら完了です。

黄色や赤色の文字の表示でエラーがあった場合、その部分に従ってスクリプトファイルなどを書き換える必要があります。

Cook編

エラーが出なければ、次にmodを「料理」する必要があります。
左部分にある一番下の宇宙船アイコンから、Cook Modをクリックしてお料理をします。

コンパイルと同じように、プロンプトからエラーがなければ完了です。

プレイテスト編

実際のゲーム内で挙動などを確かめたい場合は、Cookと同じ画面にあるTest Modの項目からゲームを起動して確認することができます。さらにその下にあるプルダウンメニューからは、タイトル画面、宇宙船(ハブマップ)とマフィアタウン(一番最初のミッション)のどこから開始するか選択することができます。特に帽子の色合いなどはライティングによって変わるので様々な環境で試してみましょう。

アップロード編

準備が整えばいよいよアップロードです。Cook Modの右側にあるSubmit to Steam Workshop as Playable Modをクリックして完了を待ちましょう。少し時間がかかりますが、プロンプトに成功の旨が表示されれば完了です。お疲れ様でした。

あとがき

日本語のModdingガイドがなかったので作ってみました。このガイドによって一人でも多くの方が始めてくれるようになれば幸いです。

あと宣伝にはなるのですがA Hat in Timeの日本コミュニティーサーバーなるものをDiscordで一応やってます。Moddingに関する質問をじゃんじゃん受け付けています。
また英語ができるのであれば、A Hat in Timeの公式Discordサーバーではより多くの人がModdingのヘルプをしてくれます。ぜひご活用ください。

SteamSolo.com