NFT Image Display（NFT イメージ表示）

NFT Image （NFT イメージ）のコンポーネントを使うと体験の中に静止画のNFTをディスプレイすることができます。

体験内にNFTをディスプレイする方法

ここでは体験内にNFT を表示するための方法を下記のチュートリアルを使ってご紹介します。

必要なアセット、使用するコンポーネント、NFT をどこからリンクさせるのか、制限などに関して説明します。

概要

NFT Image のコンポーネントをフレームと互換性のあるアセットに追加することができます。OpenSea から使用したいNFT のURL をコピーしてコンポーネント内にあるURL 欄にペーストします。Playをクリックして再生し、どのようにディスプレイされているかを確認することができます。

制限

オブジェクトのNFT Image のコンポーネントを使ってNFT のURL をリンクさせることができますが以下にご注意ください。

まず、現状サポートされているプラットフォームはOpenSea のマーケットプレイスのみになります。

現在のコンポーネントは静止画のみを表示することができ、動画やgif フォーマットはサポートされていません。

OpenSea からNFTへのハイパーリンクをコンポーネントが確立するというプロセスを使用しており、NFT のアセット自体をインポートしているわけではありません。

フレームを使用する

まずはじめにフレームのあるアセットを選択します。NFT がディスプレイされるオブジェクトにはフレームを持つアセットが必要になります。

Frame Tool（フレームツール）を使用してVoxEdit で自分のフレームを作成するか、マーケットプレイスから使用可能なフレームを選択することもできます。

このチュートリアルではライブラリにあるBillboard Frame（ビルボード フレーム）を使用して説明していきます。

NFT Imageのコンポーネントを使用する

まずはじめにBillboard Frame のようなフレームと互換性のあるアセットをシーンに設置します。F

シーンにアセットを配置し、クリックすると画面右側にProperties Panel（プロパティパネル） が表示されます。

Behaviour のタブまでスクロールするとコンポーネントが表示されます。

NFT Image のコンポーネントはImage Display のコンポーネントと同時に使用することはできません。

Image Display のコンポーネントがプリセットとして設定されているオブジェクトを使用したい場合、X をクリックして削除してください。

削除したらAdd Component（コンポーネントを追加）をクリックします。

コンポーネントのライブラリが表示されるのでNFT Image を選択します。

次にNFT Image のコンポーネントがリンクしているURL を設定します。

URL の設定

OpenSea に移動して、ディスプレイしたいNFT のURL を検索し、画像をクリックします。

画像のページに移動したあとシェアを意味する不等号マークのアイコンをクリックし、Copy Link（リンクをコピー）をドロップダウンメニューより選択します。

Game Maker に戻りNFT Image のコンポーネントの下にあるAsset URL（アセットのURL）の右側の欄をクリックします。

NFT IMAGE のパネルが表示されるのでそこにURL をペーストします。

ペーストしたらValidate（認証）をクリックし、URL がサポートされているかを確認します。リンクが間違っている、もしくはサポートされていない形式であった場合にはエラーメッセージが表示されます。

URL が正しければNFT のプレビューがURL の下に表示されます。

Continue（次へ）をクリックし、NFT がどのように表示されるかを確認することができます。

URL のアドレスの最後にスラッシュ（/）がないことを確認してください。スラッシュがあるとエラーメッセージが表示されます。

NFT をテストする

Game Maker がEdit mode（編集モード）の場合にはNFT は表示されません。

Play mode（プレイモード）でPlay をクリックするか「Tab」キーを押すとNFT がどのように表示されるかを見ることができます。

もしディスプレイが希望するように表示されなかった場合、Scale Mode（スケールモード）を使用して以下の変更を行い、希望のディスプレイにすることができます。 Original（元のサイズ） Resize（サイズを変更する） Fit to Width（横幅に合わせる） Fit to Height（高さに合わせる） Repeat（繰り返す）

URL を使ってThe Sandbox Metaverse の中にNFTをディスプレイする方法をご紹介しました。

VoxEdit を使用してカスタム フレームを作成する方法に関しては互換性のあるNFT Frame の作成 をご覧ください。