MENU

ACTでbig-swangsを導入する方法

FF14 ACT big-swangs
GitHubよりお借りしています。

big-swangsの導入方法をまとめました。

目次

big-swangsとは?

collin-garveyさんが作られたデザインです。
ACTのオーバーレイを通じてゲーム画面上にDPSを表示してくれます。
フォントが特徴的で可読性も高いしデザインが好みでした。

big-swangsの導入方法

STEP
big-swangsのファイルをDLして解凍後、任意の所に設置します。
FF14 ACT big-swangs
STEP
ACTの「OverlayPlugin.dll」タブで「追加」から「Preset」をCustom、「種類」をMiniParseで任意の名前を付けて保存します。
FF14 ACT big-swangs
STEP
「オーバーレイを表示する」と「オーバーレイを有効にする」に✓、
「表示するURL」でbig-swangs.htmlを指定、
「オーバーレイの表示をリロード」を押します。
FF14 ACT big-swangs
STEP
左上に出てくると思います。
ドラッグで任意の所に動かして右下でサイズを変えられます。
FF14 ACT big-swangs

導入は以上です。

表示させるとこんな感じでした。

FF14 ACT big-swangs

big-swangsの設定方法

新規ジョブのアイコンと背景色が表示されません。

最終更新が2015年10月なのでジョブアイコンファイルの不足と記述が無い為です。
.imgファイルの追加と.cssファイルに追記をすればOKです。

水平スクロールバーが必ず表示されます。

paddingとかの問題だと思います。
.cssファイルに追記をしてゴリ押しで非表示にします。

big-swangsの設定方法(ジョブアイコンの追加)

.imgファイルの追加についてです。

STEP
不足しているジョブアイコンをDLします。
gamerescape.com
gamerescape.com FF14 アイコン

big-swangsは白く光ったアイコンを使っているので統一すると良いと思います。
RDM以下の5種類だと思います。(RDM│SAM│BLU│GNB│DNC)

STEP
class-iconsフォルダに追加します。

他ファイルと同じように小文字の略名で統一すると便利です。

FF14 ACT big-swangs

.imgファイルの追加は以上です。

.cssファイルの追記についてです。

STEP
big-swangs-master/dist/css/big-swangs.cssをメモ帳などで開いてジョブ名で検索します。
FF14 ACT big-swangs
STEP
今回追加するジョブ名を同じ規則で適当にどこかの間に追記して上書き保存します。
下記の内容をコピペでOKです。(青魔は適当にDPS枠にしています)
.gnb {
  background-color: rgba(41, 128, 185, 0.35); }
  .gnb .combatant__bar {
    background: linear-gradient(180deg, #2980b9 0%, #2472a4 100%); }
  .gnb .combatant__icon {
    background-image: url("../images/class-icons/gnb.png"); }

.sam {
  background-color: rgba(192, 57, 43, 0.35); }
  .sam .combatant__bar {
    background: linear-gradient(180deg, #c0392b 0%, #ab3326 100%); }
  .sam .combatant__icon {
    background-image: url("../images/class-icons/sam.png"); }

.dnc {
  background-color: rgba(192, 57, 43, 0.35); }
  .dnc .combatant__bar {
    background: linear-gradient(180deg, #c0392b 0%, #ab3326 100%); }
  .dnc .combatant__icon {
    background-image: url("../images/class-icons/dnc.png"); }

.rdm {
  background-color: rgba(192, 57, 43, 0.35); }
  .rdm .combatant__bar {
    background: linear-gradient(180deg, #c0392b 0%, #ab3326 100%); }
  .rdm .combatant__icon {
    background-image: url("../images/class-icons/rdm.png"); }

.blu {
  background-color: rgba(192, 57, 43, 0.35); }
  .blu .combatant__bar {
    background: linear-gradient(180deg, #c0392b 0%, #ab3326 100%); }
  .blu .combatant__icon {
    background-image: url("../images/class-icons/blu.png"); }
STEP
ACTを起動中に作業をした場合はオーバーレイの表示をリロードすると反映されます。

.cssファイルの追記は以上です。

これで新規ジョブのアイコンが正しく表示されるようになりました。

FF14 ACT big-swangs

src/scss/jobs.scssでジョブ名のロール指定が有ったけど上記だけで表示されたのでしませんでした。

big-swangsの設定方法(スクロールバーの非表示)

big-swangs-master/dist/css/big-swangs.cssに下記コードをどこかに追記します。

body{ overflow-x:hidden;overflow-y:hidden; }

拡大縮小は出来つつスクロールバーが非表示になりました。

FF14 ACT big-swangs

設定は以上です。
お疲れさまでした!

コメント

コメントする

目次
閉じる