In-Game Browser

Like what your seeing?

Support us as a GitHub Sponsor and get instant access to all our assets, exclusive tools and assets, escalated support and issue tracking and our gratitude. These articles are made possible by our GitHub Sponsors ... become a sponsor today!

Introduction

How you set up the UI is up to you, the UGC Query Manager manages the query and its results for you, its up to you to display those to the user how you see fit.

You can find a working example in the sample scenes names 7 Workshop Browser this sample is designed to work with App 480 Spacewars and emulates the browser in Steam's Workshop UI.

Set up

Step 1

The first thing you will want to do is add a UGC Query Manager to a game object related to your browser UI. This component provides the events your UI will listen on to update its display and the methods and values your UI will interact with to drive the query

Step 2

Create a UI controller that can listen on the Results Changed event of the UGC Query Manager and update your UI accordingly. That is write a new script to manage your browser UI and set it up such that it can listen on the Results Updated event of the manager

PSEDO CODE EXAMPLE

public void HandleResultsChanged()
{
    foreach(var result in manager.activeQuery.ResultsList)
    {
        // Instantate a new record
        // set its values based on the data present in result
    }
}

The above assumes you have a reference to your query manager in an attribute named manager

result will be of type UGC Read Community Item and contains all the details about that specific item.

Once defined you can reference this in the Unity Inspector

Step 3

Next you will want to connect UI controls such as a Back and Next button up so the user can iterate over the query pages.

Remember UGC Query doesn't return all the results in one batch. You will be querying "page 1" which will return a subset of items. To fetch the next set e.g. "page 2" you need to increment the Current Page value of the manager.

You should do the same for "Set Previous Search Page" so that the user can go back and forth. These methods are safe and will never step to a page that doesn't exist.

Step 4

Enabling search, you could do this in a few ways but the simplest is to trigger a search on the end edit of an InputField, this way when the user finished typing a search string and presses enter it will start the search.

That said it can be nice to have a Search Button that on click performed the searched using the text contained in the InputField. The choice is up to you

Whatever your choice your UI should call the SearchAll method which takes a string as an input parameters. That string is the filter string used by Valve to narrow results.