はじめに
今回は、Roblox Studioにてデフォルトで用意されている画像の使用方法について紹介します。
Robloxバージョン: 0.660.692.6600698
設定できるコンテンツID
まずは、Robloxにおける画像の表示について軽く説明します。
ImageButtonやImageLabelなどに画像を設定するには、プロパティのImageに指定の文字列を設定する必要があります。
今回この記事では、公式のクラス説明にある記載に習ってこの文字列をコンテンツIDと称します。
プロパティのコンテンツIDを設定する項目
このコンテンツIDは、表示したい画像によって複数存在します。
下記のリンクのガイドから一部抜粋します。
rbxassetid
自身でインポートした画像の場合は、下記のようなコンテンツIDを設定します。
〇〇にはAssetIdが入ります。
rbxassetid://〇〇
画像だけでなく、自身でアップロードしたSound.SoundIdなども同様の形式になります。
rbxthumb
アセットのサムネイルを取得したい場合は下記のようなコンテンツIDになります。
☆☆にはサムネイルタイプ、〇〇にはAssetId、◇◇はサムネイルの横幅、△△にはサムネイルの立幅が入ります。
rbxthumb://type=☆☆&id=〇〇&w=◇◇&h=△△
サムネイルタイプに応じてサムネイルのサイズ（◇◇、△△）に制限があります。
詳しくは前述したリンクをご確認ください。
https / http
Robloxが承認したドメインでのみ動作する、URLを基軸としたコンテンツIDもあります。
Creator StoreからインポートしたDecal.Textureなどから取得したコンテンツIDは下記にようになります。
〇〇にはAssetIdが入ります。
http://www.roblox.com/asset/?id=〇〇
このように自身でインポートした画像だけでなく、AssetIdからコンテンツIDを作成して表示することも可能です。
デフォルトで用意されている画像
ImageLabelなどを配置した際に、最初から設定されている画像を見たことがあると思います。
初期で設定されている画像
この画像のコンテンツIDは下記のようになっています。
rbxasset://textures/ui/GuiImagePlaceholder.png
自身でインポートした画像のコンテンツIDに似ていますが、rbxassetid://ではなくrbxasset://になっており、以降もAssetIdではないです。
これはユーザーのデバイス上の Roblox のコンテンツフォルダーと連動しています。
実際にWindowsのエクスプローラーでは、フォルダをたどることで上記画像を見つけることができます。
Windows エクスプローラーから画像を取得しコンテンツIDに変換する
Roblox のコンテンツフォルダー内の画像を取得してコンテンツIDに変換する方法をまとめました。
今回は主にWindowsを例に紹介します。
1. Roblox Studioのexeファイルがあるフォルダを探して開く
まずはRoblox関連がまとめられているWindowsのエクスプローラー内のフォルダを探します。
デスクトップにRoblox Studio ショートカットがある方は、マウス右クリックから「ファイルの場所を開く」をクリックしましょう。
ショートカットがない方は、Roblox Studioのexeファイルがあるフォルダを探しましょう。
特に移動などをしていなければ、ファイルのパスは下記になります。
Windowsの場合: %localappdata%\Roblox\Versions\現在のバージョン
Macの場合: Applications/RobloxStudio.app/Contents/Resources
2. contentフォルダを開く
Roblox Studioのexeファイルと同じ階層に「content」というフォルダがあると思います。
このcontentフォルダ以下には、デフォルトで使用されているサウンドやフォント、画像がまとめられています。
contentフォルダ以下のパスを「/」で区切り、先頭にrbxasset://を付けることで画像のコンテンツIDを作成することができます。
3. 使用したい画像を探し、パスからコンテンツIDを作成する
今回はテスト用に、content以下のtexturesフォルダ内のface.pngを使用します。
画像を選択し、右クリックメニューの『パスのコピー』をクリックします。
実際のパスは下記になります。（contentより前は省略）
~\content\textures\face.png
このパスをコンテンツIDに変換すると下記になります。
rbxasset://textures/face.png
4. 実際に使用する
後は、ImageLabelなどにコンテンツIDを設定するだけで表示できます。
▼ Roblox Studioでは問題なく表示されている
また、これらはRoblox Playerでも表示されます。
PC
スマートフォン
すべての画像が正しく表示されるとは限らないため、使用するデバイスで正しく表示されるかは必ず確認しましょう。
まとめ
- Roblox Studioのexeファイルと同じ階層にあるcontentフォルダには、デフォルトで使用されているサウンドやフォント、画像がまとめられている。
- 使用したい画像のパスからコンテンツIDを作成する。
- コンテンツIDの作成方法は、先頭に
rbxasset://を付けcontentフォルダ以下のパスを「/」で区切ることで作成できる。
contentフォルダ以下には多数の画像の素材があり参考になると思います。
実際のゲームでは本格的なUI素材を用意することが多いと思いますが、モック段階やα版など制作段階初期などでこれらを利用することで、イメージをつかみやすくなり本番用素材までの足掛かりになると思います。
ぜひこれらを利用して、スムーズなゲーム開発を進めましょう！！
参考
当社ではRobloxを活用したゲームの開発、 また企業の商品やサービスの認知度拡大に寄与する3Dワールドの制作など、 Robloxにおける様々な活用支援を行っております。 Robloxのコンテンツ開発をご検討されている企業様は、お気軽にご相談ください。 landho.co.jp/
Discussion