Arcade Menu

This is the menu system used in Pong Royale.

Installation

  • Install the Arcade Menu package
  • Drag the Arcade Menu template onto the User template

Usage

image

Adding Stats and leaderboards

Stats and leaderboards are added in the same way. Under the Menu → Pages → Leaderboards, add a menuLeaderboardEntryScript for each leaderboard and stat you want to display.

image

The id property should correspond to the leaderboard ID.
The name property will be the text that is displayed on the stats panel, and the leaderboards page.

Starting and ending the game

The Arcade Menu package is designed for games you can freely drop in and out of.
By default, the key to press to go back to the menu is extra1. You can change this by changing the exitButton value on the menuScript, or turn it off entirely by unchecking the exitOnButtonPressed property.

When a user joins the game, the onUserJoinGame is fired.
When a user leaves the game, the onUserLeaveGame is fired.

Both of these events pass the user entity as the first parameter.

Usage with Crayta's GameScript

Crayta’s game script assumes that every player logged into the game is actively playing the game.
In order to accommodate the fact this isn’t the case when using this package, you will need to modify the gameScript.

The menuScript defines a property inGame. This can be used to filter the users that are in the game vs those that aren’t.

In the gameScript, define a new function called GetUsers() that returns the users that are currently in the game, as well as a new ForEachUser function that iterates the users in the game.

function GameScript:GetUsers()
	local users = {}
	
	GetWorld():ForEachUser(function(user)
		if user:FindScriptProperty("inGame") then 
			table.insert(users, user)
		end
	end)
	
	return users
end

function GameScript:ForEachUser(fn)
     local users = self:GetUsers()
     for _, user in ipairs(users) do 
         fn(user)
     end
end

Now hit CTRL+F and search for instances of GetWorld():GetUsers() and replace them with self:GetUsers(). Do the same thing for GetWorld():ForEachUser( and replace it with self:ForEachUser(

Creating Buttons

image

The index property determined where it’s drawn on the screen. A lower index will be drawn on top of a higher index.
The label property determines the text that will be displayed on the button.
The onClick event determines what happens when the button is clicked. In this example case, we’re showing the leaderboard page.

Creating Pages

Unfortunately, custom pages will have to be created by hand. The Arcade Menu package includes the main menu, as well as a Leaderboards page that you can use as a reference.

Duplicate the Arcade Menu Example Page template, and then duplicate the script and widget attached to it.

This will give you the base styling you will need to get a coherent look-and-feel between the leaderboard and main menu pages.

The example script defines the ShowMainMenu method which hides your page when the Go Back button is clicked.
The example widget defines the base styles including .button, .container, .title, etc that are used as the basis of the page. In addition, a Go Back button is placed on the bottom left of the page.

2 Likes