限定特典付きの無料バトルパスをご用意しております。最終特典も無料パスには含まれていません。

さらに、プレイヤーは最終的なものを含むすべての特典を含むプレミアムパスを購入することができます。

バトルパスの進捗状況はレベルごとに分かれています。新しいレベルのロックを解除し、バトルパスの有効期限が切れる前に最後の特典を開ける時間を確保するには、プレイヤーは必要な経験値を得るか、レベルを購入する必要があります。

デモプロジェクトでは、エクソラ製品を使ってバトルパスを実装した例を紹介しています。バトルパスを試すには：

1. Xsollusデモシーンを起動します。
2. デモユーザーとしてログインするか、新規ユーザーを作成します。
3. サイドメニューでBattle passをクリックします。

バトルパスをプロジェクトに適合させるには：

1. プロジェクトにバトルパスのロジックを追加します。
2. リワードクーポンのセットを作成します。
3. バトルパスの設定を作成します。
4. バトルパスアイテムを作成します。
5. レベルアップアイテムを作成します。

プロジェクトにバトルパスロジックを追加する

バトルパスのロジックはすべてBattlepassPageプレハブに入っており、以下のブロックに分かれています：

• ScriptHolders — バトルパスの設定やアイテム、プレイヤーの情報を操作するスクリプト
• UIScriptHolders — プレイヤーのインタラクションのためのスクリプト

バトルパスロジックを追加するには：

1. プロジェクトでBattlepassPageプレハブをインスタンス化します。
2. インターフェースを変更します（任意）。
3. 情報ロジックの保存を修正します。

特典クーポンのセットを作成する

特典には、仮想アイテムや仮想通貨パッケージがあります。

現在のソリューションでは、クーポンの利用によってプレイヤーに特典が与えられます。クーポンセットを作成するには：

1. パブリッシャーアカウントのプロジェクトに移動します。
2. プレイヤーへの特典のために仮想アイテムや仮想通貨パックを作成します。
3. それぞれの特典について、以下の推奨事項に基づいてクーポン付きキャンペーンを設定します：

1. • バトルパスでのクーポン利用の予定量として、ユーザー1人あたりの利用回数を指定します。1つのクーポンをバトルパスの一部として複数回利用することができます（例：バトルパスのレベルが異なる場合、プレミアム版と無料版の場合）。
   • キャンペーンはバトルパスと同じ期間に有効である必要があります。

バトルパスの構成を構築するには、事前に特典のリストを作成し、各特典について以下の点を示すことをお勧めします：

• クーポンコード
• 仮想アイテムまたは仮想通貨パッケージSKU
• 特典がバトルパスの特定のレベルに属するかどうか
• 特典が無料版またはプレミアム版に属するかどうか

バトルパスの構成を作成する

バトルパスの設定は、次の内容がJSONファイル含む：

• バトルパスの名前
• バトルパスの有効期限
• 無料版とプレミアム版の特典を示すレベルの構造

JSONファイルの構造：

バトルパスの設定例：

{
  "Name": "BP2021JAN",
  "ExpiryDate": "29-03-2021",
  "Levels": [
    {
      "Tier": 1,
      "Experience": 1000,
      "FreeItem": {
        "Sku": "Sku",
        "Quantity": 10,
        "Promocode": "HELLO_WORLD"
      },
      "PremiumItem": {
        "Sku": "Sku2",
        "Promocode": "HELLO_WORLD2"
      }
    },
    {
      "Tier": 2,
      "Experience": 1000
    },
    {
      "Tier": 3,
      "Experience": 1000
    }
  ]
}

バトルパスアイテムを作成する

バトルパスアイテムは、バトルパスの設定を格納するコンテナであり、プレイヤーのプレミアムステータス（プレミアム版を購入しているかどうか）を判断するために使用されます。

バトルパスアイテムを作成するには：

1. パブリッシャーアカウントでのプロジェクトに移動します。
2. #BATTLEPASS#という名前の仮想アイテムグループを作成します。

3. 以下のパラメータで仮想アイテムを作成します：
   • アイテム名 — 設定で指定されたバトルパスの名前。
   • SKU — バトルパスのID。設定で指定したバトルパスの名前を使用することをお勧めします。
   • アイテムプロパティ — 消耗アイテムまたは非消耗アイテム。

1. • 価格 — バトルパスのプレミアムバージョンの価格。仮想通貨や実際通貨で設定されています。

1. • グループ — #BATTLEPASS#。

4. 作成した仮想アイテムにバトルパスを追加するには：
   1. Get virtual item APIコールを使用して、アイテムの現在の説明をJSON形式で取得します。
   2. オンラインサービスまたはJSON.stringify()メソッドを使用して、バトルパス設定を文字列に変換します。
   3. アイテムの説明で、long_descriptionパラメータのenオブジェクトに結果の文字列を指定します。
   4. Update virtual item APIコールを使用して、リクエストボディに更新されたアイテムの説明を指定して、アイテムを修正します。

バトルパスのアイテム説明の例：

{
  "sku": "BP2021JAN",
  "name":{
    "en": "BP2021JAN"
  },
  "type": "virtual_good",
  "description":{
    "en": "BP2021JAN"
  },
  "image_url": "https://cdn3.xsolla.com/img/misc/images/7cb1c2b719af329a9bc1df994d58b749.png",
  "long_description": {
    "en": "{
                \"Name\":\"BP2021JAN\",
                \"ExpiryDate\":\"01-07-2021\",
                \"Levels\":
                    [
                        {
                            \"Tier\":1,
                            \"Experience\":100,
                            \"FreeItem\":
                                {
                                    \"Sku\":\"Bullets\",
                                    \"Promocode\":\"B2021S1FL1E100\",
                                    \"Quantity\":50
                                }
                        }
                    ]
            }"
  },
  "attributes":[
  ],
  "is_free": false,
  "order": 1,
  "groups":[
    "Battlepass"
  ],
  "regional_prices":[
  ],
  "prices":[
    {
      "amount": 1,
      "currency": "USD",
      "is_default": true,
      "is_enabled": true
    }
  ],
  "media_list":[
  ],
  "vc_prices":[
  ],
  "is_enabled": true,
  "is_show_in_store": true,
  "regions":[
  ],
  "inventory_options":{
    "consumable": false,
    "expiration_period": null
  }
}

レベルアップアイテムを作成する

現在のバトルパスソリューションでは、プレイヤーはリ実際または仮想通貨でレベルを購入することができます。レベルの価格は常に同じです。プレイヤーが現在のレベル内で得た経験値は、次のレベルに引き継がれます。

レベルアップアイテムを作成するには：

1. パブリッシャーアカウントでのプロジェクトに移動します。
2. 次のパラメータで仮想アイテムを作成します：
   • アイテム名 — <battlepassname>_levelup_util形式のレベルアップアイテムの名前で、そこで<battlepassname>は構成で指定されたバトルパス名。
   • SKU — 設定で指定されたバトルパスの名前を使用することをお勧めします。
   • アイテムプロパティ — 消耗アイテムまたは非消耗アイテム。
   • 価格 — 1つレベルの価格。仮想通貨や実際通貨で設定されています。

1. • グループ — #BATTLEPASS#。

現在のバトルパスソリューションの詳細

バトルパス表示のロジック

ロジックにより、このアプリケーションでは、1つのバトルパスのみが表示されます：

• すべてのバトルパスが期限切れの場合、アプリケーションは最後に期限切れになったバトルパスを表示します。
• すべてのバトルパスの有効期限が切れている場合、アプリケーションは最後に有効期限が切れたバトルパスを表示します。

例1

現在の日付：2021年03月04日。

バトルパスの有効期限：2021年03月01日、2021年04月01日、2021年05月01日。

このアプリケーションでは、有効期限が2021年04月01日のバトルパスが表示されます。

例2

現在の日付：2021年03月04日。

バトルパスの有効期限：2021年02月01日、2021年03月01日。

このアプリケーションでは、有効期限が2021年03月01日のバトルパスが表示されます。

情報ロジックの保存

現在のソリューションでは、バトルパスでのプレイヤーのの進捗状況に関するすべての情報（レベル、経験値、受け取った特典など）は、ユーザーが編集可能な属性に保存されます。デモの一環として、Characterページ上でこれらの属性の読み取りと編集が可能です。

必要な属性が見つからない場合は、自動的に新しい属性が作成されます。システムが、現在のバトルパスではない属性を見つけた場合、それらの属性は自動的に削除されます。

プレイヤーのプレミアム状態を判断するには、プレイヤーのインベントリにバトルパスというアイテムがあるかどうかを確認します。

このSDKには、UIビルダーが含まれています。UIビルダーでは、アプリケーションのUIの視覚を設定することができます。

色、スプライトとフォントのUI要素の視覚プロパティを編集することで、UIを変更することができます。これらのプロパティは1つのテーマにまとめられます。Unityのテーマと視覚コンポーネントはデコレーターによって接続されます。視覚プロパティを変更すると、デコレーターがUnityコンポーネントの視覚を変更します。

ウィジェットを使用して、UI要素を同じタイプの他の要素に置き換えることができます。これらのウィジェットは、独立した、簡単に交換可能なパーツで、プレハブの形式をしています。

UIは2つの独立したパーツで構成されています：

• 視覚の操作を担当するテーマエディター。
• プレハブの操作を担当し、UI要素を完全に置き換えるウィジェットエディター。

テーマを操作する

テーマエディター

テーマエディターを開くには、UnityエディターのメインメニューからWindow > Xsolla > UI Themes Editorを開きます。

テーマエディターのUIには、以下のコンポーネントが含まれています：

• テーマの選択と適用に使用されるテーマ名のボタン。

• Refreshボタン — テーマのプロパティやその変更をアプリケーションのUIに適用することができます。
• Auto Refreshボックス — テーマのプロパティやその変更をアプリケーションのUIに適用することができます。
• Themesセクション — 既存のテーマのリストが含まれています。
• Colorsセクション — テーマの色のリストが含まれています。
• Spritesセクション — テーマスプライトのリストが含まれています。
• Fontsセクション — テーマフォントのリストが含まれています。

リストに対して次のアクションを実行できます：

• 新しい要素を追加するには、リストの下部にある+アイコンをクリックします。
• 選択した要素を削除するには、リストの下部にある-アイコンをクリックします。
• 順番を変更するには、=アイコンをクリックしたまま、要素をリストの必要な位置にドラッグします。
• 要素の名前を変更するには、フィールドのテキストを要素名に変更します。

プロパティ値は、標準的なUnityの方法で変更されます：

• 色を変更するには、プロパティのフィールドをクリックして、新しい値を選択します。
• フォントやスプライトの変更は、以下のいずれかの方法で行うことができます：
  • アセットをプロパティフィールドにドラッグします。
  • ⊙アイコンをクリックして、アセットを選択します。

テーマライブラリ

テーマライブラリは、ScriptableObjectクラスから継承され、Resources/UIBuilder/ThemesLibraryディレクトリにあります。

UI要素をテーマに接続する

適用されたテーマに応じて、UI要素の視覚を変化させるには：

1. オブジェクトにデコレーターを追加して設定します。
2. プロパティプロバイダコンポーネントをオブジェクトに追加して設定します。

デコレーター

デコレーターとは、Unityの標準的なUI要素にテーマのプロパティ（カラー、スプライト、フォント）を適用し、それらを変更するコンポーネントです。

デコレーターには、プロパティの値ではなく、プロパティIDと、UI要素へのリンク（画像やテキスト）が含まれます。一般的にデコレーターは、テーマとUI要素をつなぐコネクターのようなものです。デコレーターの設定は、Inspectorパネルで行います。

デコレーターのリスト：

• ImageColorDecorator — 画像の色を変更する
• ImageSpriteDecorator — 画像のスプライトを変更する
• TextFontDecorator — テキストの色を変更する
• TextColorDecorator — テキストのフォントを変更する

デコレーターは、以下のイベントが発生した場合に、要素のプロパティを変更します：

• オブジェクトは、テーマエディターやゲームの実行中に有効になります。
• 現在のテーマは、エディターまたはゲームの実行中に変更されます。
• オブジェクトプロパティとテーマ間の接続は、Inspectorパネルで変更されます。
• プロパティの値はテーマエディターで変更されます。
• オブジェクトのプレハブがテーマエディターで編集できるようになります。

UI要素とテーマの間に関連性を持たせるには、次のようにします：

1. デコレーターコンポーネントをオブジェクトに追加します。
2. テーマから物件のIDを選択します。

デコレーターがオブジェクトに追加されると、このオブジェクト上で必要なUI要素を探し、それをComp変数に割り当てようとします。

デコレーターの応用例：

画像オブジェクトにImageColorDecoratorのデコレータを追加します。この例では、色のMain Button IDを指定しています。その結果、Main Buttonのテーマで指定された色が画像に使用されます。

デコレーターは、ゲームがプレイされ、ユーザーがカーソルでオブジェクトを指したり、オブジェクトをクリックしたりしている間に、コンポーネントの視覚を動的に変更することができます。

UI要素の視覚を動的に変更するこには：

1. デコレーターコンポーネントをオブジェクトに追加します。
2. テーマから物件のIDを選択します。
3. DecoratorPointerEventsコンポーネントをオブジェクトに追加します。このコンポーネントは、オブジェクトをクリックしたり、カーソルをポイントしたりするイベントをトラッキングします。
4. デコレーターコンポーネントで、TransitionModeの変数値をOverrideに変更します。
5. 追加されたDecoratorPointerEventsコンポーネントを、デコレータのPointerEvents変数に割り当てます。
6. カーソルでポイントしたときの視覚を変更するには：
   1. Override on hoverボックスにチェックを入れます。
   2. ボックスの近くのフィールドで、テーマからプロパティのIDを選択します。
7. 以下をクリックした時、視覚を変更します：
   1. Override on pressにチェックを入れます。
   2. ボックスの近くのフィールドで、テーマからプロパティのIDを選択します。

視覚をダイナミックに変化させるデコレーターの応用例：

ImageColorDecoratorのデコレーターを画像オブジェクトに追加します。この例では、色のMain Button IDと、カーソルをポイントした時の色のMain Button Hover IDを指定しています。その結果、Main Buttonのテーマで指定された色が画像に使用されます。カーソルをポイントする時、Main Button Hoverのテーマで指定された色に変更されます。

プロパティプロバイダー

プロパティプロバイダーは、テーマプロパティのコンテナの形をしたクラスです。ユーザーコードとテーマの間の接続をより便利にするために使用されます。

プロパティプロバイダーのリスト：

• ColorProvider — 色のプロパティへのリンクが含まれています。
• SpriteProvider — スプライトのプロパティへのリンクが含まれています。
• FontProvider — フォントのプロパティへのリンクが含まれています。

すべてのプロパティプロバイダーには、Inspectorパネルを介したより便利な設定のためのPropertyDrawerがあります。

プロパティプロバイダーを構成し、コードでプロパティ値を取得するには：

1. オブジェクトにプロパティプロバイダーコンポーネントを追加します。
2. テーマからプロパティのIDを選択します。

プロパティプロバイダの設定例：

3. スクリプトの中で、変数を宣言し、プロパティプロバイダーコンポーネントを割り当てます。
4. 色の値を取得するには、GetValueメソッドを呼び出します。

スクリプトの例：

public class ProviderExample : MonoBehaviour
{

  [SerializeField] private ColorPrivider ColorPrivider;

  private void Start()
  {
      Color color = ColorProvuder.GetValue();
  }

}

ウィジェットを操作する

ウィジェットエディター

ウィジェットエディターを開くには、Unityエディターのメインメニューに移動し、Window > Xsolla > UI Widgets Editorを開きます。

ウィジェットエディターUIには、次のコンポーネントが含まれています：

• Refreshボタン — プレハブでウィジェットの変更を適用できます。
• Auto Refreshボックス — プレハブでウィジェットの変更を自動的に適用できます。
• Widgetsセクション — ウィジェットのリストが含まれています。

ウィジェットのリストに対して次のアクションを実行できます：

• 新しいウィジェットを追加するには、リストの下部にある+アイコンをクリックします。
• 選択したウィジェットを削除するには、リストの下部にある-アイコンをクリックします。
• 順番を変更するには、=アイコンをクリックしたまま、要素をリストの必要な位置にドラッグします。
• ウィジェットの名前を変更するには、フィールドのテキストを要素名に変更します。
• 次のいずれかの方法でフォントまたはスプライトを変更できます：

• プレハブをウィジェットを使用してフィールドにドラッグします。
• ⊙アイコンをクリックして、プレハブを選択します。

ウィジェットライブラリ

ウェジェットライブラリは、ScriptableObjectクラスから継承され、Resources/UIBuilder/WidgetsLibraryディレクトリにあります。

UI要素をウィジェットに接続する

UIの要素を簡単に他の要素に置き換えるには、UIを構築する際にウィジェットを直接使用するのではなく、ウィジェットコンテナを使用する必要があります。そうすれば、コンテナで作られたウィジェットが、同じタイプのUI要素を変更するように単純に構成することができます。標準的なアプローチでは、すべてのウィジェットを手動で交換する必要があります。

コンテナは、子オブジェクトとしてウィジェットオブジェクトを作成し、RectTransformクラスのプロパティを設定することで、ウィジェットがコンテナ内のスペース全体を埋めるようにします。

UIエレメントオブジェクトにコンテナコンポーネントを追加する際、このオブジェクトはウィジェットを作成する際の親オブジェクトとして使用されます。

コンテナは、以下のイベントが発生すると、ウィジェットのプロパティを変更します：

• Inspectorパネルで、オブジェクトのプロパティとウィジェットの接続が変更されます。
• ウィジェットエディターでウィジェットのプレハブを変更します。

UI要素とウィジェットを接続するには：

1. WidgetContainerコンポーネントをオブジェクトに追加します。
2. ウィジェットIDを選択します。

ウィジェットコンテナの使用例：

WidgetAオブジェクトでは、例としてRed Button IDを持つウィジェットを指定しています。その結果、WidgetAオブジェクトは、エディターでRed Buttonウィジェットに指定されたプレハブを使用して作成されます。

UIビルダーの構造

動作中、UIビルダーは以下のコンポーネントを使用しています：

• UIProperty — 次のデータを持つオブジェクト：
  • プロパティのID
  • プロパティ名
  • 視覚データ（色、スプライト、フォントなど）

• Theme — テーマコンポーネント。テーマは、UIの視覚を変更することができ、異なるグループ（色、スプライト、フォント）のプロパティのコレクションを表します。すべてのテーマには、名前と固有の識別子があります。テーマのプロパティには、プロパティのIDを使ってアクセスすることができます。
• ThemesLibrary — プロジェクトに存在するすべてのテーマのライブラリ。また、現在のテーマの値が含まれており、この値を変更するためのメソッドを提供します。
• ThemeDecorator — テーマのプロパティを参照し、そのプロパティの値を標準のUnity UIコンポーネントに適用するMonoBehaviourクラスのコンポーネント。例えば、ImageColorDecoratorデコレーターは、画像の色を変更するものです。
• UIPropertyProvider — テーマのプロパティにアクセスするためのクラス。これらのコンポーネントを使用して、ユーザーコードとテーマのデータを簡単に接続します。例えば、ColorProviderクラスは、色に関するデータを提供します。
• WidgetContainer — ウィジェット全体を変更できるMonoBehaviourクラスコンポーネント。
• WidgetsLibrary — プロジェクトに存在するウィジェットのコレクション。このコンポーネントは、すべてのウィジェットのリストを含み、そのIDでウィジェットを取得するためのメソッドを提供します。