トップ > PxB > PxB Map Editor　自作スキン作成方法（仮）

PxB Map Editor　自作スキン作成方法（仮）

PxB

PxB Map Editor はv0.4.0系から自作のスキンを使用できるようになりました。
割と上級者向きな内容ですが、作り方を簡単に記しておきます。

必要なもの

スキンの適用方法

pxb-editor v0.4.0を初めて起動した際に、PCの「ドキュメント」にあたるフォルダに「PxB Map Editor」なるフォルダが 自動的に作成されているはずです。

その中の「skins」フォルダにダウンロードした素体フォルダをぶっ込みます。 そしてとりあえず素体フォルダ名を「Oreskin」に変えてみます。

pxb editorを起動するとSIMULATOR OPTIONのGame Skin内に「Oreskin」があるはずです。

f:id:pentamania:20181207154129p:plain
他にも色々あるけど気にせず

ここまで確認できたら実際に改変をします。

各パーツの作成

スキンには以下の画像が必要となります。

  • foundation-lower.png（UI部背景、上のほう）
  • foundation-upper.png（UI部背景、下のほう）
  • pause-button.png（ポーズボタン）
  • tap-arrow.png（タップノートの矢印）
  • flick.png (フリック)
  • tap-base.png（タップノートガイドライン基部）
  • tap-line.png（タップノートガイドライン線部）
  • LN-head.png（ロングノート先端部）
  • LN-body.png（ロングノート胴体部）
  • LN-base.png（ロングノートガイドライン基部）
  • LN-line.png（ロングノートガイドライン線部）
  • multi-marker.png（同時タップのときに出るアレ）
  • (※)seekbar-thumb.png（シークバーのつまみの部分、必須ではない）

素体ファイルのtexturesフォルダ内に全て揃っているはずです。
拡張子含め、名前は必ず揃えるように。

基本的にはこれらのファイルを改変して使用することをおすすめします。

スプライトアトラスの作成

画像編集に区切りがついたら、textures/atlas.tpsをtexture packerで開きます。 何もいじってなければSpritesに全ての画像が追加された状態となっていると思います。 （足りないファイルがあったらドラッグアンドドロップで画像を追加してください）

つぎに右ペインのOutputのFrameworkが「JSON(Hash)」もしくは「Pixi.js」であることを確認して、 「Publish sprite sheet」ボタンを押してください。 （ファイル名はatlasから変えないようにしてください。）

f:id:pentamania:20181207145550p:plain

（素体ファイルと同様に）スキンフォルダ内にatlas.pngとatlas.jsonが生成されていればOK。

画像を変更したら、その都度「Publish sprite sheet」をしてatlasを更新してください。

スタイルの編集

スキン素体データのskin-style.yamlを編集することでスキンの細かい挙動を指定できます。 こちらも一から書かず、素体ファイルのものを書き換えて使用することをおすすめします。

編集時の約束毎はあまりないですが、スペース・インデントだけは変えないように注意してください。 yaml形式に対応したテキストエディタがあると便利です。

基本的には数字や色の設定のみ書き換えるようにするのがオススメ。

フォントの読み込み

独自にフォントを読み込ませたい場合は以下のように指定します。 そしてスキンフォルダにフォントを追加するのを忘れずに。
（フォントファイルの形式はotf, ttf, woffなど）

fonts:
  my-font-one: myfont1.ttf
  my-font-two: myfont2.otf

読み込んだフォントを使用するには

comboNumber:
  fontStyle:
    fontFamily: my-font-one #ここに追加
    fontSize: 20
    fontAlign: left
    fill: "#FFFFFF"
  anchor:
    x: 0.5
    y: 1.0
  positionRatio:
    x: 0.5
    y: 0.97

のように、fontFamilyという項目にフォント名を追加してください。

フォントやそのサイズを変えるとレイアウトがずれることがままあるので、その場合はpositionRatio（画面全幅、全高を１とした場合の位置比率。基本的には0 ~ 1で指定） のx、y値を細かく編集して調整します。

その他、素体ファイルにコメントを載せているので、そちらを参考に改変を行ってください。

動作確認

ここまでの作業でOreskinフォルダの中身には以下のファイルが揃っているはずです。

  • atlas.png
  • atlas.json
  • myfont1.ttf
  • myfont2.otf

  • skin-style.yaml

  • (texturesフォルダは直接は使いません)

この状態で、editorでオプションに自作スキンを選択していることを確認、シミュレーターを起動して反映されていればOK。 （スキンフォルダ名を変えていなければアプリケーションのほうの再起動は不要です。）

その他メモ

  • 足りない画像パーツがあった場合、市松模様のダミーが代わりに表示されます。
  • texture packerは単にスプライトシート化で必要なだけでちょっと冗長なので、将来的には不要にできたらと思っています。
  • 何かおかしかったらアプリケーション再起動で治るかも。
  • skin-styleでは行初めに半角の#から始めることでコメントアウトできます。
  • 画像パーツを透明化することもでき、以下のようなこともできます。