Fusion Crazy Starter WebGL

Overview

Race against the clock to collect and return as many flags before the timer runs in Flagrant Disregard, a Photon Fusion WebGL sample, created for the Crazy Games platform, which can be played through the following gameplay link! This project demonstrates setting up Photon Fusion and Unity3D targeting WebGL as platform, featuring an obstacle course, capture-the-flag-inspired game integrated with the CrazySDK from Crazy Games.

Download

Version	Release Date	Download
2.0.5	Apr 24, 2025	Fusion WebGL Sample 2.0.5 Build 859

Technical Info

• Unity: 6000.0.27f1.
• Platforms: WebGL

To run the sample in online multiplayer mode, first create a Fusion AppId in the PhotonEngine Dashboard and paste it into the AppId field in PhotonAppSettings asset.
Then load the MainMenu scene in the Scenes menu and press Play.

How to Play

1. Stand on your starting position; once all players are, the game will start.
2. Race down one of four, randomized obstacle paths, collect the flag, and return it to you starting position.
3. The player(s) with the highest number of collected flags win!

Controls

Keyboard / Mouse

• W/A/S/D move;
• Mouse Movement: rotate camera
• Space jump

Controller

• Leftstick/Dpad movement;
• South Button jump
• Rightstick rotate camera

Photon Fusion & WebGL

This sample utilizes Photon Fusion's Shared Mode topology and allows players to connect quickly with smooth, reliable connections. It's important to keep best practices for WebGL development in mind, especially when working with Photon Fusion.

• Make sure the game Build Pipeline's Run In Background property is set to true. The CrazyGames Web Profile has this and other important settings defined already.
• Use sprite atlas's instead of many, individual textures when possible.
• Use Unity's Addressables and Streaming Assets systems to minimize the initial download size.

More details on how to optimize your game for WebGL can be found on Unity's documentation regarding the subject. For a more detailed explanation as to why Shared Mode topology is best for WebGL, refer to the Photon Fusion's documentation regarding network topology.

Tech Design

The following are the most important classes to take note of:

PlayerNetworkBehaviour

When a player joins, an avatar is spawned using the Player Character prefab, which contains a PlayerNetworkBehaviour Component. It also utilizes the NetworkCharacterController and NetworkMecanimAnimator Components, which are provided with Photon Fusion. The player who spawns this prefab will have State Authority over it, meaning their input reactions, movement, and collisions, all handled locally while any networked data is transferred to other players.

They, however, do not have State Authority over all objects; for example, the SharedModeMasterClient has State Authority over the flags, so when a player collides with them, the flag reacts locally, but waits for confirmation from the SharedModeMasterClient when collision occurs, sending an RPC to the player that collected the flag.

InGameManager

The InGameManager is a NetworkBehaviour who State Authority belongs to the SharedModeMasterClient. It tracks the state of the game, various TickTimers, and when players are ready to start playing. Because IsMasterClientObject is checked in the Shared Mode Settings for the Network Object Component, its State Authority will be transferred to another player if the SharedModeMasterClient were to get disconnected during gameplay, allowing for a smooth, uninterrupted network experience.

ObstacleCourseBehaviour

In this sample, there are four tracks or courses, made of three segments each. When a flag is collected and then deposited by a player, track descends and then picks different segments randomly before ascending back to the original position. The State Authority of these courses also belongs to the SharedModeMasterClient.

CrazySDK

The CrazySDK is integrated into this project, demonstrating the basic features required to have a multiplayer game approved for the CrazyGames platform.

The multiplayer requirements are handled by CrazyManager.cs, it is responsible for checking if the game needs to be treated as instantMuliplayer, generates invite link and trigger the invite button.
More info about these features can be found under CrazyGames documentation.

• Check for updates on the CrazyGames SDK.
• The CrazyGames SDK has other functionality available (user, game etc), documentation via docs.crazygames.com.

Initializing the CrazySDK

In CrazyManager, CrazySDK.Init is executed immediately. This is an asynchronous function that, once completed, executes FusionNetworkManager.SetPlayerName and FusionNetworkManager.CheckInstantMultiplayer.

SetPlayerName executes CrazySDK.User.GetUser; this function is also asynchronous, providing the username of the player when completed, which is displayed on the main menu and in game by the player's starting position.

CheckInstantMultiplayer checks the value of the invite parameters by calling CrazySDK.Game.GetInviteLinkParameter; this method uses a string key, returning a string value if it exists. If one does not exist, a warning is triggered and null is returned. If an invite parameters are found, the session, app version, and region will be defined by them and a session will start automatically by executing FusionNetworkManager.StartSession. For testing purposes, it's important to make sure that CrazySDK.Game.IsInstantMultiplayer will also start an online session if true.

CrazySDK Invites

The other requirement for the CrazySDK requires showing the invite button, which is part of the CrazyGames website, with the correct invite information. When a room is joined, this button is displayed by calling the static function, CrazyManager.ShowInviteButton, which then executes CrazySDK.Game.InviteLink, providing a Dictionary<string,string> with the following information:

• "session": the session or room name, which is used to connect to the current game session.
• "region": the region that the session is in; even if the session name is the same, providing a different region will prevent players from connecting.
• "appVersion": the game or app version. Similar to region, players with different app versions will not be able to connect.

When gameplay starts, however, the invite button should be hidden to prevent players from joining in the middle of gameplay. This can be done by calling CrazySDK.Game.HideInviteButton.

Starting and Ending a game

In addition to showing and hiding the invite button, it's important to indicate when gameplay has started, ended, and when victory has been achieved. These are done through the following functions:

• CrazySDK.Game.GameplayStart: indicates when gameplay has started.
• CrazySDK.Game.GameplayStop: indicates when gameplay has ended.
• CrazySDK.Game.HappyTime: used to indicate a moment of achievement or victory.

In this sample, when the game state changes in InGameManager, these are called, HappyTime only being called for the player(s) with the highest score.

Limitations

Currently, due to limitations of the CrazyGames platform, running applications in multithreaded mode is not supported. However, this feature can be utilized on platforms like itch.io. Please note that in order to run the sample on an itch.io page, the CrazySDK must be removed from the project.

The next image shows the Multithread disabled in the project:

Third Party Assets

This sample includes third-party free and CC0 assets. The full packages can be acquired for your own projects at their respective site:

• Star 01 by The Base Mesh
• Jump Run Duck by Luis Zuno from Happy Soul Music
• Retro Game Weapons Sound Effects from Happy Soul Music
• Universal Animation Library by Quaternius
• Platformer Game Kit by Quaternius

Back to top