2015年05月04日

ACT OverlayPluginにジョブアイコンを表示する方法

OverlayPlugin(記事投稿時の最新版3.3.6)では、デフォルトでジョブ名が英字3文字で表示されますが、これをジョブアイコンに変更する方法です。
ffxiv_act_overlayplugin.png

「もの」と「テクノロジー」の新情報サイト【ものテク】オープン!


【Step1】ジョブアイコンの準備
ジョブアイコンの画像ファイルは、スクリーンショットから自分で加工、あるいはインターネットからダウンロードするなどして用意します。ファイル名は以下のように接頭語"Job"に続けて英字3文字のジョブ名にします。拡張子はpngを例にしていますが、jpgやbmpで加工した場合は、適宜、合わせてください。
・剣術師⇒"JobGld.png"
・格闘師⇒"JobPgl.png"
・斧術師⇒"JobMrd.png"
・槍術師⇒"JobLnc.png"
・弓術師⇒"JobArc.png"
・幻術師⇒"JobCnj.png"
・呪術師⇒"JobThm.png"
・巴術師⇒"JobAcn.png"
・双剣師⇒"JobRog.png"
・ナイト⇒"JobPld.png"
・モンク⇒"JobMnk.png"
・戦士⇒"JobWar.png"
・竜騎士⇒"JobDrg.png"
・吟遊詩人⇒"JobBrd.png"
・白魔導士⇒"JobWhm.png"
・黒魔導士⇒"JobBlm.png"
・学者⇒"JobSch.png"
・召喚師⇒"JobSmn.png"
・忍者⇒"JobNin.png"

また、ペットやバディ、リミットブレイクもアイコン表示したい人はこちらも。(Option)
・フェアリー・エオス⇒"JobEos.png"
・フェアリー・セレネ⇒"JobSelene.png"
・カーバンクル⇒"JobEmerald.png"
・むーたん⇒"JobTopaz.png"
・タイタン・エギ⇒"JobTitan.png"
・イフリート・エギ⇒"JobIfrit.png"
・ガルーダ・エギ⇒"JobGaruda.png"
・バディチョコボ⇒"JobChocobo.png"
・リミットブレイク⇒"JobLimitBreak.png"

以下は必要な人だけ。クラフターやギャザラーで戦闘はしないと思いますが、絡まれた場合など不意の戦闘でもアイコンを表示したい人向けです。
・木工師⇒"JobCrp.png"
・鍛冶師⇒"JobBsm.png"
・甲冑師⇒"JobArm.png"
・彫金師⇒"JobGsm.png"
・革細工師⇒"JobTan.png"
・裁縫師⇒"JobWvr.png"
・錬金術師⇒"JobAlc.png"
・調理師⇒"JobCul.png"
・採掘師⇒"JobMin.png"
・園芸師⇒"JobBtn.png"
・漁師⇒"JobFsh.png"

さらに、NPCや敵など、ジョブがないキャラクターのために無色透明の空画像ファイルを用意します。通常はなくても大丈夫ですが、エラー表示が気になる人向けです。
・NPC⇒"Job.png"

【Step2】前提プラグインの追加
ペットやリミットブレイクを区別するために、MiniParseNameToHankaku.csで追加されるJobOrName要素を利用しています。Wikiにこのプラグインについて説明が書いてありますので、詳しくはそちらをご覧ください。

【Step3】HTMLの編集
プラグインのresourceフォルダに入っている"miniparse.html"を編集します。なお、以下の説明では、Step1で用意したジョブアイコンの画像ファイルがminiparse.htmlのあるフォルダ(resourcesフォルダ)の下の"jobicon"というフォルダに格納されているものとします。

(フォルダ構成例)
[resources]
├ miniparse.html
└[jobicon]
 ├ Job***.png

(HTML編集前)
{ text: "{Job}", width: "8%", align: "center" },

(HTML編集後)
{ html: "<img src='./jobicon/Job{JobOrName}.png' width='19' height='19' />", width: "8%", align: "center"},
※下線の部分の数値はジョブアイコンの画像サイズや画面サイズに合わせて設定してください。

また、Step1でペットのアイコンも準備した方は以下の箇所にのstart〜endの記述を追加してください。
// tbody の内容を作成
var combatantIndex = 0;
for (var combatantName in data.Combatant) {
var combatant = data.Combatant[combatantName];

/* ペットのアイコン表示用の設定 start */
combatant.JobOrName = combatant.Job;
if (combatantName.search("エオス") != -1) {
var combatantName = 'Eos';
combatant.JobOrName = combatantName;
}
  if (combatantName.search("ガルーダ") != -1) {
var combatantName = 'Garuda';
combatant.JobOrName = combatantName;
}
if (combatantName.search("タイタン") != -1) {
var combatantName = 'Titan';
combatant.JobOrName = combatantName;
}
if (combatantName.search("イフリート") != -1) {
var combatantName = 'Ifrit';
combatant.JobOrName = combatantName;
}
if (combatantName.search("セレネ") != -1) {
var combatantName = 'Selene';
combatant.JobOrName = combatantName;
}
if (combatantName.search("エメラルド") != -1) {
var combatantName = 'Emerald';
combatant.JobOrName = combatantName;
}
if (combatantName.search("トパーズ") != -1) {
var combatantName = 'Topaz';
combatant.JobOrName = combatantName;
}
if (combatantName.search("Limit Break") != -1) {
var combatantName = 'Limit Break';
combatant.JobOrName = combatantName;
}
if (combatantName.search(/\)$/) != -1) {
var combatantName = 'Chocobo';
combatant.JobOrName = combatantName;
}
/* ペットのジョブ画像読み込み用の設定 end */

以上、長文お疲れ様でした。


ラベル:FF14 ACT
posted by わんこ at 06:50| Comment(3) | 小ネタ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
(HTML編集後)
{ html: "<img src='Job{JobOrName}.png' width='19' height='19' />", width: "8%", align: "center"},
※下線の部分の数値はジョブアイコンの画像サイズや画面サイズに合わせて設定してください。

この画像アドレスの指定部分ですが、<img src='jobicon/Job{job}.png'....としなければ動きませんでした。
確認なのですが、jobiconフォルダを新たに作ったことによる階層を違えて指定することと、{JobOrName}が使用できなかったことについてなにかわかりませんでしょうか

Posted by at 2015年05月04日 20:39
ご指摘ありがとうございます。

まず、jobiconフォルダのパスは誤記でしたので、記事内のコードを訂正しました。

また、JobOrNameについては前提プラグインが必要でしたので、記事内に追記しました。お手数ですが、ご確認いただけないでしょうか?
Posted by わんこ at 2015年05月05日 05:29
もしわかりそうなら教えてください。
JobLimitBreak.pngで保存した画像だけ実際の画面で反映されず、画像の標準マーク?見たいなものになってしまいます。
JobLimit Break.pngとしても試してみたのですがダメでした。
元画像でダメなものもあるのでしょうか
Posted by at 2015年07月07日 19:57
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。