{"id":1622,"date":"2020-12-11T11:56:50","date_gmt":"2020-12-11T11:56:50","guid":{"rendered":"https:\/\/smartfoxserver.com\/blog\/?p=1622"},"modified":"2020-12-11T11:56:50","modified_gmt":"2020-12-11T11:56:50","slug":"how-to-deploy-a-game-in-overcast","status":"publish","type":"post","link":"https:\/\/smartfoxserver.com\/blog\/how-to-deploy-a-game-in-overcast\/","title":{"rendered":"How to deploy a game in Overcast"},"content":{"rendered":"\n<p>In this third article in the series dedicated to <a rel=\"noreferrer noopener\" aria-label=\"Overcast (opens in a new tab)\" href=\"https:\/\/overcast.smartfoxserver.com\" target=\"_blank\">Overcast<\/a>, the cloud solution for SmartFoxServer 2X, we will focus on the deployment of your games onto a cloud server.<\/p>\n\n\n\n<p>For this purpose we will use one of the existing SFS2X examples, the <strong>Tris game<\/strong> (aka Tic-Tac-Toe), which we released for almost all supported platforms. We will refer to the <strong>Unity<\/strong> version of the example, but all the concepts relevant to the purpose of this article apply to any version.<\/p>\n\n\n\n<p>If you are new to SmartFoxServer, don&#8217;t worry: we will also provide some context and guidance to get started!<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2>Getting started with SmartFoxServer<\/h2>\n\n\n\n<p>For those who landed on this article looking for a cloud-based multiplayer server for their game, but have never explored SmartFoxServer before, keep reading this section. All the others can skip to the <a href=\"#tris\">next chapter<\/a>.<\/p>\n\n\n\n<p>First of all, what is SmartFoxServer? As stated on the homepage of our website, SmartFoxServer is an SDK for rapidly developing multiplayer games and applications based on a choice of technologies, the most prominent currently being HTML5 (web) and Unity (desktop, mobile devices and web \u2014 the latter thanks to WebGL). In other words it consists of a <strong>server-side middleware<\/strong> and a number of <strong>client-side API<\/strong> to develop any kind of multiplayer experience, from turn-based games to realtime games, from collaborative applications to virtual communities and MMO worlds.<\/p>\n\n\n\n<p>SmartFoxServer was born in 2004 and has followed the evolution of the multiplayer games market since then, powering a number of very successful projects (a few of which you will find listed in this <a rel=\"noreferrer noopener\" aria-label=\"showcase (opens in a new tab)\" href=\"https:\/\/www.smartfoxserver.com\/showcase\/projects\" target=\"_blank\">showcase<\/a>). The current version (called 2X) has seen the light in 2010 and we kept improving it since then. The latest iteration of such improvements is the release of <strong>Overcast<\/strong>, our first-party solution to deploy SmartFoxServer in the cloud.<\/p>\n\n\n\n<p>If you are new to SmartFoxServer and possibly to multiplayer game development, the first step before proceeding &#8220;to the cloud&#8221; is to become familiar with the product and its API. You should start by <strong>downloading and installing the Community Edition<\/strong>, which is a free version of SFS2X, offering 100% of its features and supporting up to 100 concurrent users.<\/p>\n\n\n\n<div class=\"wp-block-button aligncenter custom-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/www.smartfoxserver.com\/download\/sfs2x\" target=\"_blank\" rel=\"noreferrer noopener\">Go to the download page<\/a><\/div>\n\n\n\n<p>We then recommend to skim through some of the main introductory topics in our online documentation. Our suggestion is to read at least:<\/p>\n\n\n\n<ul><li>the description of <a rel=\"noreferrer noopener\" href=\"http:\/\/docs2x.smartfoxserver.com\/Overview\/zones-room-architecture\" target=\"_blank\">Zones and Rooms architecture<\/a> \u2014 to understand how an &#8220;application&#8221; and its users are represented inside SmartFoxServer;<\/li><li>the introduction to the <a rel=\"noreferrer noopener\" aria-label=\"The Administration Tool (opens in a new tab)\" href=\"http:\/\/docs2x.smartfoxserver.com\/GettingStarted\/admintool\" target=\"_blank\">Administration Tool<\/a> \u2014 the SFS2X admin console you will need to configure the server for the game&#8217;s needs;<\/li><li>the first 4 documents in the <a rel=\"noreferrer noopener\" aria-label=\"Development Basics (opens in a new tab)\" href=\"http:\/\/docs2x.smartfoxserver.com\/DevelopmentBasics\/introduction\" target=\"_blank\">Development Basics<\/a> section of the documentation, which describe the very basic concepts which are also at the core of the Tris game we want to deploy later on.<\/li><\/ul>\n\n\n\n<p>Finally keep in mind that SmartFoxServer is fully extensible via server side code (called <strong>Extensions<\/strong>) allowing to create custom game logic, integrating with other services and building complex interactions.<\/p>\n\n\n\n<div class=\"wp-block-button aligncenter custom-block-button\"><a class=\"wp-block-button__link\" href=\"http:\/\/docs2x.smartfoxserver.com\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the documentation<\/a><\/div>\n\n\n\n<p>As the last step in your initial approach to SmartFoxServer, you may want to take a look at the examples we provide for your platform of choice, in particular those discussing how to connect, join a Room, send messages, etc. They are all preparatory to the development of a full game.<\/p>\n\n\n\n<p>Check the <a rel=\"noreferrer noopener\" aria-label=\"Unity (opens in a new tab)\" href=\"http:\/\/docs2x.smartfoxserver.com\/ExamplesUnity\/introduction\" target=\"_blank\">Unity<\/a> examples section in the documentation.<\/p>\n\n\n\n<h2 id=\"tris\">The Tris game<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"730\" height=\"411\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/tris.jpg\" alt=\"\" class=\"wp-image-1631\" srcset=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/tris.jpg 730w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/tris-300x169.jpg 300w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/tris-624x351.jpg 624w\" sizes=\"(max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<p>Tic-tac-toe is a relatively simple game that well suited our need to provide an example to beginner SmartFoxServer developers. We could focus on a number of features, often common to multiplayer games (a lobby, dedicated game Rooms, players and spectators, in-game chat, server-side logic, etc), and still have an easy to implement core logic. For this reason we implemented our version of the game, called Tris, for almost all the platforms supported by SmartFoxServer. And what&#8217;s cool is that all versions of the game can interoperate too!<\/p>\n\n\n\n<p>In particular, it is important to note that the game features a&nbsp;<strong>server-side Extension<\/strong>&nbsp;which is in charge of implementing the game logic, as opposed to keeping the logic on the client-side. In general, using a server-side Extension is a more flexible and secure option for any game. Even if SmartFoxServer provides powerful tools for developing the application logic on the client, this approach can be limiting when your games start getting more complex. Also keeping sensitive game data on the server-side allows overall better security from hacking attempts, cheating, etc.<\/p>\n\n\n\n<p>We will leave the details of the implementation to the in-depth tutorial available in the documentation (<a rel=\"noreferrer noopener\" aria-label=\"here the Unity version (opens in a new tab)\" href=\"http:\/\/docs2x.smartfoxserver.com\/ExamplesUnity\/tris\" target=\"_blank\">here the Unity version<\/a>), concentrating on the files organization to get ready for the deployment, as per scope of this article. But first of all you should download the game, which is part of the examples package for a given platform, together with other demo projects of increasing difficulty.<\/p>\n\n\n\n<div class=\"wp-block-button aligncenter custom-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/www.smartfoxserver.com\/download\/sfs2x#p=examples\" target=\"_blank\" rel=\"noreferrer noopener\">Go to the examples download page<\/a><\/div>\n\n\n\n<p>The Unity package contains a separate folder for each example. You can now extract the <strong>Tris<\/strong> game on your PC. This is divided into two subfolders: <strong><em>client<\/em><\/strong> and <strong><em>server<\/em><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"968\" height=\"426\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/tris_files.png\" alt=\"\" class=\"wp-image-1635\" srcset=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/tris_files.png 968w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/tris_files-300x132.png 300w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/tris_files-768x338.png 768w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/tris_files-624x275.png 624w\" sizes=\"(max-width: 968px) 100vw, 968px\" \/><\/figure>\n\n\n\n<p>The <em>server<\/em> folder has two more subfolders (and a <em>readme<\/em> file explaining why there are two folders) containing the server Extension of the game developed using two different languages: Java and JavaScript. The reason is that SmartFoxServer supports both languages on the server side, so we wanted to provide an example for both. We will deploy the content of the <em>deploy<\/em> folder of the Java version, which is the compiled version of the code (contained in the sibling <em>source<\/em> folder).<\/p>\n\n\n\n<p>The <em>client<\/em> folder contains a <em>Tris<\/em> folder with the source files for the Unity project. Open the Unity Hub and add a new project, selecting that folder. Then open the newly added project in the Unity Editor and wait for the game assets importing to complete. By default the project&#8217;s build should be configured to &#8220;PC, Mac &amp; Linux Standalone&#8221;. Open the Build Settings panel and switch the platform to <strong>WebGL<\/strong>. The game is compatible with all builds, but in this article we will use WebGL to show the deployment of the client to SmartFoxServer&#8217;s internal web server. You can now put the client side on hold; we will come back to the client in the next chapter.<\/p>\n\n\n\n<h2>Deploying to Overcast<\/h2>\n\n\n\n<p>As described in other articles and pages on our website, <strong>Overcast<\/strong> is our own dedicated&nbsp;<strong>cloud-based hosting service<\/strong>&nbsp;for SmartFoxServer 2X. It allows deploying any number of SFS2X and database (MySQL) instances in the cloud, world-wide, with a simple web-based interface. You can find a <a rel=\"noreferrer noopener\" aria-label=\"full introduction to the service (opens in a new tab)\" href=\"https:\/\/www.smartfoxserver.com\/overcast\" target=\"_blank\">full introduction to the service<\/a> in the cloud section of our website.<\/p>\n\n\n\n<p>In order to deploy the Tris game to Overcast, you need to execute the following steps.<\/p>\n\n\n\n<h3>1. Launch the cloud server<\/h3>\n\n\n\n<p>In order to launch SmartFoxServer in the cloud, simply follow the <a rel=\"noreferrer noopener\" aria-label=\"Creating a new server (opens in a new tab)\" href=\"http:\/\/docs-overcast.smartfoxserver.com\/BasicOperations\/create-server\" target=\"_blank\">Creating a new server<\/a> article in the Overcast documentation (or the <a href=\"https:\/\/smartfoxserver.com\/blog\/launching-smartfoxserver-in-the-cloud\/\">previous article in this blog series<\/a>). You can assign any name to the application and server; in this case, with very little imagination, you could use <strong>Tris App<\/strong> and <strong>Tris Server<\/strong>. \ud83d\ude42<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"301\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/server-1-1024x301.jpg\" alt=\"\" class=\"wp-image-1656\" srcset=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/server-1-1024x301.jpg 1024w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/server-1-300x88.jpg 300w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/server-1-768x226.jpg 768w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/server-1-1536x451.jpg 1536w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/server-1-2048x602.jpg 2048w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/server-1-624x183.jpg 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3>2. Create the game Zone and lobby Room<\/h3>\n\n\n\n<p>By default a SmartFoxServer instance launched in Overcast starts with no&nbsp;<strong>Zones<\/strong>&nbsp;defined, so you need to add one. Click the&nbsp;<strong>toolbox icon<\/strong> to access the AdminTool; login with username <em>sfsadmin<\/em> and the password specified during the server launch.<\/p>\n\n\n\n<p>After the login, select the<strong>&nbsp;Zone Configurator<\/strong>&nbsp;module and in the panel on the left click the&nbsp;<strong>+Z<\/strong>&nbsp;button to add a new Zone. In the <em>General<\/em> tab of the configuration form, set the following parameters:<\/p>\n\n\n\n<ul><li><span style=\"text-decoration: underline;\">Zone name<\/span>: <strong>TrisGame<\/strong><br>This is the name used on the client side to connect to the proper &#8220;application&#8221; (a.k.a. Zone) on the server.<\/li><li><span style=\"text-decoration: underline;\">Maximum length of Room names<\/span>: <strong>25<\/strong><br>The Unity version of the Tris self-generates the name of a game based on the name of the user starting it (i.e. &#8220;John&#8217;s game&#8221;), so the default length of 10 characters might be insufficient.<\/li><li><span style=\"text-decoration: underline;\">Public Room Groups<\/span> and <span style=\"text-decoration: underline;\">Default Room Groups<\/span>: <strong>default,games<\/strong><br>Every game of tic-tac-toe launched within Tris is represented by a Room, which is assigned to the &#8220;games&#8221; group. In order to allow the client to create Rooms in that group, and register to that group to receive notifications of new Rooms being created, we need to add the string &#8220;games&#8221; to these two parameters (comma-separated from the existing &#8220;default&#8221; group).<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"578\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-1-1-1024x578.jpg\" alt=\"\" class=\"wp-image-1657\" srcset=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-1-1-1024x578.jpg 1024w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-1-1-300x169.jpg 300w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-1-1-768x433.jpg 768w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-1-1-1536x867.jpg 1536w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-1-1-2048x1155.jpg 2048w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-1-1-624x352.jpg 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can then click the&nbsp;<strong>Submit<\/strong>&nbsp;button to store the configuration on the server side.<\/p>\n\n\n\n<p>The Tris game also requires an initial, static Room to exist, acting as a lobby where users meet before starting a new match, or participating to an existing one.<\/p>\n\n\n\n<p>Select the <em>TrisGame<\/em> Zone in the list on the left side of the module and click the <strong>+R<\/strong> button. Set the Room name specifically to <strong>The Lobby<\/strong> (which is the same name hardcoded on the client, which auto-joins the Room right after the login). In this simple example the other settings can be left unchanged, although actual games may need some fine-tuning (i.e. the maximum number of users).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"578\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-3-1024x578.jpg\" alt=\"\" class=\"wp-image-1666\" srcset=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-3-1024x578.jpg 1024w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-3-300x169.jpg 300w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-3-768x433.jpg 768w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-3-1536x867.jpg 1536w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-3-2048x1155.jpg 2048w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-3-624x352.jpg 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can then click the&nbsp;<strong>Submit<\/strong>&nbsp;button to save the Room configuration.<\/p>\n\n\n\n<p>Finally, as the Zone is not yet active, you must select it and click the \u25ba button to start up the Zone and its inner Room.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/Schermata-2020-12-10-alle-12.04.27.png\" alt=\"\" class=\"wp-image-1667\" width=\"261\" height=\"192\" srcset=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/Schermata-2020-12-10-alle-12.04.27.png 522w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/Schermata-2020-12-10-alle-12.04.27-300x221.png 300w\" sizes=\"(max-width: 261px) 100vw, 261px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Important note<\/strong><br>As you can see in the Zone Configurator images above, both Zone and Room configuration forms show tabs called respectively <em>Zone Extension<\/em> and <em>Room Extension<\/em>. You may ask: <strong>why aren&#8217;t we configuring the Extension now<\/strong>, as the game comes with one?<br>SmartFoxServer supports two types of Extensions: Zone Extensions and Room Extensions. First of all, the Tris game uses a Room Extension only, so the tab in the Zone configuration is not needed. Also, the game&#8217;s Extension is in charge of handling the actual game logic (player moves, validation, victory conditions, etc), while the lobby Room you just created has no &#8220;custom logic&#8221; attached (all its interactivity is based on standard SmartFoxServer features \u2014 public messaging, dynamic Room creation, etc); so that tab in the Room configuration is useless too for this game.<br>So, when does the game&#8217;s Extension come into play? Well, at runtime, whenever a game Room (representing \u2014 remember \u2014 a match started by a player) is created, <strong>the Extension is attached dynamically<\/strong>. For reference, you may check the game tutorial where we describe the behavior of the &#8220;Start new game&#8221; button.<\/p>\n\n\n\n<h3>3. Upload the server Extension<\/h3>\n\n\n\n<p>As discussed above, the Tris game comes with a Room Extension, which we need to deploy on the server so that it can be instantiated dynamically at runtime. In order to do this, open the AdminTool&#8217;s <strong>Extension Manager<\/strong> module.<\/p>\n\n\n\n<p>Click on the root folder (<em>extensions<\/em>), then click the <img loading=\"lazy\" width=\"33\" height=\"24\" class=\"wp-image-1661\" style=\"width: 24px;\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/button-1.png\" alt=\"\"> button to add a folder called <em>Tris<\/em>. Select the newly created folder and click the <img loading=\"lazy\" width=\"30\" height=\"24\" class=\"wp-image-1663\" style=\"width: 24px;\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/button-2.png\" alt=\"\"> button to upload the <strong>TrisExtension.jar<\/strong> file contained under the <em>\/server\/Extension_Java\/deploy\/Tris<\/em> folder of the folder you previously extracted from the Unity examples package. The following image shows the end result of the operation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"300\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-2-1024x300.jpg\" alt=\"\" class=\"wp-image-1664\" srcset=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-2-1024x300.jpg 1024w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-2-300x88.jpg 300w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-2-768x225.jpg 768w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-2-1536x449.jpg 1536w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-2-2048x599.jpg 2048w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-2-624x183.jpg 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3>4. Build the game client<\/h3>\n\n\n\n<p>You can now go back to the Unity Editor to configure and build the client. In the Project panel, browse the folders tree down to <em>\/Assets\/TrisAssets\/Scenes<\/em> and open the Login scene. Click on the <em>Controller<\/em> object in the Hierarchy panel and take a look at the Inspector panel: it shows the <strong>SmartFoxServer connection parameters<\/strong> exposed by the game&#8217;s <em>LoginController<\/em> script.<\/p>\n\n\n\n<p>In the <strong>Host<\/strong> field, enter the public IP address of the server displayed in the Overcast interface. In the <strong>Zone<\/strong> field, enter the Zone name set during the configuration (<em>TrisGame<\/em>). Leave the other settings unchanged, as they are already set to the default values for the Overcast environment.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/unity-1.png\" alt=\"\" class=\"wp-image-1674\" width=\"367\" height=\"161\" srcset=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/unity-1.png 734w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/unity-1-300x132.png 300w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/unity-1-624x274.png 624w\" sizes=\"(max-width: 367px) 100vw, 367px\" \/><\/figure><\/div>\n\n\n\n<p>You can now immediately test the game from inside the Unity Editor: click on the \u25ba button, enter a username (or leave it empty to have one being generated automatically) and you will join the lobby Room, as logged in the Lobby Chat panel of the game&#8217;s UI. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"590\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/unity-2-1024x590.png\" alt=\"\" class=\"wp-image-1675\" srcset=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/unity-2-1024x590.png 1024w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/unity-2-300x173.png 300w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/unity-2-768x443.png 768w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/unity-2-1536x885.png 1536w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/unity-2-624x360.png 624w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/unity-2.png 1714w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can then stop the execution, go to the Build Settings panel and click the <strong>Build<\/strong> button to generate the WebGL version of the game.<\/p>\n\n\n\n<h3>5. Upload the game client<\/h3>\n\n\n\n<p>As soon as the build process is over, go back to the AdminTool and open the <strong>Servlet Manager<\/strong> module. Select the <em>ROOT<\/em> folder and click on the <img loading=\"lazy\" width=\"33\" height=\"24\" class=\"wp-image-1661\" style=\"width: 24px;\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/button-1.png\" alt=\"\"> button to add a folder called \u2014 guess what? \u2014 <em>tris<\/em>.<\/p>\n\n\n\n<p>Under the newly created folder, rebuild the folders&#8217; structure generated by Unity (subfolders <em>Build<\/em> and <em>TemplateData<\/em>) and upload the game files to the appropriate folders using the <img loading=\"lazy\" width=\"30\" height=\"24\" class=\"wp-image-1663\" style=\"width: 24px;\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/button-2.png\" alt=\"\"> button (you can select multiple files at once). You should end up with the following structure:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"631\" src=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-4-1024x631.jpg\" alt=\"\" class=\"wp-image-1677\" srcset=\"https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-4-1024x631.jpg 1024w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-4-300x185.jpg 300w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-4-768x474.jpg 768w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-4-1536x947.jpg 1536w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-4-2048x1263.jpg 2048w, https:\/\/smartfoxserver.com\/blog\/wp-content\/uploads\/2020\/12\/admintool-4-624x385.jpg 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Please note that this last step is not mandatory, as you are not forced to host your game client on SmartFoxServer itself.<\/p>\n\n\n\n<h2>Playing the game<\/h2>\n\n\n\n<p>You are now ready to play Tris! Open a WebGL-compatible browser (Firefox or Chrome for example) and enter the following URL:<\/p>\n\n\n\n<p><strong>http:\/\/<em><span style=\"text-decoration: underline;\">server-public-ip-address<\/span><\/em>:8080\/tris<\/strong><\/p>\n\n\n\n<p><em>(note that the path is the exact \u2014 case-sensitive \u2014 name of the top folder created in the AdminTool&#8217;s Servlet Manager module)<\/em><\/p>\n\n\n\n<p>As soon as the game is loaded, perform the login and click the <strong>Start new game<\/strong> button at the bottom of the Current Games panel. You can now open the same URL in another browser window, login with a different username and join the available game for a compelling challenge against yourself at tic-tac-toe! \ud83d\ude42<\/p>\n\n\n\n<p>If you have further questions get in touch with us directly using the support email found on our website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this third article in the series dedicated to Overcast, the cloud solution for SmartFoxServer 2X, we will focus on the deployment of your games onto a cloud server. For this purpose we will use one of the existing SFS2X examples, the Tris game (aka Tic-Tac-Toe), which we released for almost all supported platforms. We [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,1,5],"tags":[56,47,125,132,7,67,42],"_links":{"self":[{"href":"https:\/\/smartfoxserver.com\/blog\/wp-json\/wp\/v2\/posts\/1622"}],"collection":[{"href":"https:\/\/smartfoxserver.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/smartfoxserver.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/smartfoxserver.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smartfoxserver.com\/blog\/wp-json\/wp\/v2\/comments?post=1622"}],"version-history":[{"count":20,"href":"https:\/\/smartfoxserver.com\/blog\/wp-json\/wp\/v2\/posts\/1622\/revisions"}],"predecessor-version":[{"id":1692,"href":"https:\/\/smartfoxserver.com\/blog\/wp-json\/wp\/v2\/posts\/1622\/revisions\/1692"}],"wp:attachment":[{"href":"https:\/\/smartfoxserver.com\/blog\/wp-json\/wp\/v2\/media?parent=1622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/smartfoxserver.com\/blog\/wp-json\/wp\/v2\/categories?post=1622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/smartfoxserver.com\/blog\/wp-json\/wp\/v2\/tags?post=1622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}