Introduction

In the world of game development, showcasing and distributing your creations is an essential step towards success. In addition, it can be a great way to quickly check a student’s work if you’re mainly wanting to see if specific features are implemented and are less worried about the scripting used to do it.

One popular platform that allows independent developers, educators, and students to share their games with a wide audience is itch.io. In this tutorial, we will explore the process of exporting Unity games to itch.io, providing educators with a comprehensive guide to help their students showcase their work and foster a sense of accomplishment. We will cover the necessary steps to export your Unity project, configure settings, and upload the game to itch.io, ensuring a seamless experience for both educators and learners.

Why itch.io?

There are quite a few reasons why you may wish to use itch.io:

Accessibility and Reach: itch.io provides a user-friendly platform that allows students to easily upload and share games with a wide audience. Itch.io has a large user base which increases the visibility and exposure of students’ work.
Community Engagement: itch.io fosters a supportive community of game developers, students, and enthusiasts. Educators can leverage this community to encourage students to share their games, receive feedback, and engage in discussions with like-minded individuals. The platform provides opportunities for students to collaborate, learn from others, and gain valuable insights into the game development process.
Portfolio Building: By uploading games to itch.io, students can create a personalized portfolio of their work. This portfolio can be shared with potential employers, college admissions officers, or other interested parties, showcasing the students’ skills and creativity. Having a portfolio of completed projects can significantly enhance students’ resumes and applications.
Motivation and Recognition: Uploading games to itch.io gives students a sense of accomplishment and recognition for their efforts. Seeing their games accessible to a wider audience and receiving feedback from players can motivate students to continue exploring game development and refine their skills.
Real-World Experience: itch.io offers an authentic platform for students to experience the process of publishing and distributing their games, mirroring the practices of professional game developers. This exposure to real-world game development practices helps students understand the importance of optimization, quality assurance, and user experience.

Overall, itch.io offers educators a versatile and accessible platform to showcase student game projects, engage with a vibrant community, and provide students with real-world experiences that foster their growth as game developers.

While it is possible to upload a ZIP file of our project build and people can run that; a WebGL build can be run on any computer, rather than just the particular platform that it is targeting. This can make our game played by a wider variety of people and lower the barrier of entry for people to be able to try out the project. However, there is some additional work that needs to be done on a student’s end to ensure that the project will work the way that they intend it to and that is what we will be discussing in this tutorial.

Technical Requirements

While I am using Unity 2022.2.1f1 this tutorial should work with minimal changes in future versions of the editor. If you would like to download the exact version used in this tutorial, and there is a new version out, you can visit Unity’s download archive at https://unity3d.com/get-unity/download/archive.

Please note that this is a beginner-level tutorial, but you should be familiar with Unity’s interface. If you are new to Unity or need a refresher on the basic concepts, check out Unity’s built-in documentation on the subject at: https://docs.unity3d.com/Manual/UnityOverview.html.

The project that I’m using to upload to itch.io is the end point of the Tilemap Tutorial that I created earlier that can be found on my website at:http://johnpdoran.com/UnityProjects/Tilemap-End.zip_

Project Setup

Now, before we can deploy our project to itch.io we need to have a project to deploy. I have designed a quick platformer character and level that we can use as a basis for this project.

First, have your project ready or download the starter project code listed above and open the project in Unity.

The art assets used for this tutorial were created by the incredibly talented Kenney. You can find more information about him as well as his art assets at: http://kenney.nl/

Once the project is loaded, hit the play button to verify the project is running correctly.

Setting up Unity for WebGL Build

Now that we have a project that is ready to be played online we have to first change the platform that we are targeting the project to be built for. We can do this through the use of Unity’s Build Settings menu.

From the Unity Editor, go to File | Build Settings.

By default, our project is set up for Windows, Mac, and Linux. And that’s not going to work for us because we want this to be for WebGL.

So you want to make sure to click on WebGL and then click Switch Platform. If you do not have the WebGL platform installed you’ll see a message that says “No WebGL Module loaded.”. If so, click on the Install with Unity Hub option.

Back at Unity Hub, scroll down and ensure that the WebGL Build Support option is checked. If it is, go ahead and then select the Install option.

At which point Unity will install the WebGL support.

Restart the Unity Editor and now upon returning you should be able to go File | Build Settings. Select WebGL and then click on the Switch Platform button.

At this point Unity will reimport all of the assets in the project with the settings set for this particular platform. This may take a little bit of time depending on the size of your project.

If all goes well, you should see the Unity icon has moved and is now next to the WebGL option.

Setting a Resolution

One of the essential considerations when building games for online platforms is determining the optimal resolution for gameplay. For PC or console games, higher resolutions like 1920x1080 or 4K are typically desired. However, when developing online games, it’s important to consider that players may be using smaller screens. Therefore, it’s recommended to design these games with smaller resolutions to ensure a consistent and enjoyable experience for all players.

In Unity, the default game view may adjust based on the window size, making it challenging to gauge how the game will appear to players on different screen sizes. To address this, it’s crucial to specify the exact resolution at which you want your game to be played.

A commonly used resolution for web games that I recommend is 1280x720. By specifying this resolution to Unity, you can ensure that your game will consistently adapt to this specific size. This approach helps guarantee that players accessing your game online will have a uniform experience regardless of their device or screen size.

Setting a specific resolution allows educators to guide students in designing games with a targeted visual experience. By considering the limitations and preferences of online gameplay, educators can help students create games that are optimized for smaller screens, promoting accessibility and a seamless user experience.

Creating Custom Resolutions

Switch to the Game view and click on the arrow on the right hand side of the Aspect Ratio drop down (currently at Free Aspect).

You’ll notice while there are several options avaliable to us, 1280x720 isn’t there; but we can create our own custom resolutions by clicking on the + button. Once that’s done set the Width & Height by setting the X to 1280 and the Y to 720. Then click on the OK button.

Once you do that, now you’re going to see the game’s going to look a little different. And the reason why is that it’s going to scale it so that it all shows up on your screen. And this is exactly what the users are going to see when they play your game at 1280x720.

While this game doesn’t have any UI elements, that is likely the area where you’d need to make adjustments to have your game fit a new resolution. To see an example of how to handle this, check out: https://www.youtube.com/watch?v=eUy0zjDuiWA

Updating the Build Settings

Now that we’ve done that, we need to make sure the resolution for the Build Settings is correct as well. This was the resolution for our game settings, as seen inside of Unity. However, we also need to ensure that the exported game matches this resolution.

From the Unity Editor, go to File | Build Settings. From the Build Settings menu select the Player Settings button on the bottom left.

This will will show us all the different settings for publishing the game.

The important setting for us is under the Resolution and Presentation section , where we want to change the Default Canvas Width and Height to be 1280x720 instead of 960x600.
Under WebGL Template change the value from Minimal for crisper output.

Sean S. LeBlanc has created another Minimal WebGL Template which has some additional features that aren’t included in Unity’s base one. If you’d like to check it out do so at: https://seansleblanc.itch.io/better-minimal-webgl-template

I’ve also found that Unity will occasionally have issues with projects being exported with the Compression Format property enabled. For smaller projects, it is fine to set the Compression Format to Disabled.

For more information on WebGL Compression Formats check out: https://docs.unity3d.com/Manual/webgl-deploying.html

Creating the WebGL Build

Now that we’ve set up our project to be ready, it’s time to actually perform the build.

Return to the Build Settings menu and with WebGL selected, click Build and Run.

This will bring up a dialog window asking where you want to save the project.

Create a new folder for the build; I’ll normally call it Build. After it’s created go to it and then click on Select Folder.

The first time you build for WebGL for a project, it may take some time. Afterwards, as long as you build to the exact same folder, then it will usually be a lot faster.

If all goes well, you should see your web browser open up and the game should open there!

This is the difference between selecting the Build and Build and Run options. WebGL projects unfortuantely cannot be opened by just opening the .html file, they require a local host which can be done either by uploading it online somewhere or Unity can create a local host for us when we select the option.

Go to your file browser and open the folder the Build was created at you should see a .html file as well as two folders.

If you have your own web hosting you can just upload these files as given and run the game on your own site; but if you’d like to publish the project on itch.io there is one more step we will need to do.

Select all of the files within the folder and then right click and select Send to | Compressed (zip) Folder.

Once the zip file is created, feel free to rename it to something that you will remember because we will need it shortly.

And with that we have our project ready to upload!

Uploading to itch.io

As an educator, when it comes to distributing the games your students create, there are various online platforms available for sharing and showcasing their work. In order to provide a comprehensive guide, I will focus on itch.io, a platform I am familiar with and have used extensively. Itch.io offers all the necessary features to publish basic games online.

Throughout this tutorial, I will guide you through the process of creating a new project on itch.io and uploading your games so they can be played online and easily shared with others.

Assuming you already have an itch.io account, please ensure you are signed in. If you haven’t created an account yet, you will need to sign up and complete the registration process.
Once you are signed in, you will find the dashboard on the home screen, which serves as the central hub for managing your projects and games.

The dashboard will show all the games that you’ve created.

Scroll down to the bottom and select the Create new project button. This will allow us to create a new project.
At the next page we will need to fill in details about the project. For instance, I’ll need a Title, which I’ll set to Unity WebGL Example. Afterwards, the Project URL will automatically fill in but I can create a custom one if I’d like.

And there’s a couple of settings you want to make sure to adjust here. Number one, we’re making a game that is playable online.

So under Kind of project set it to HTML.
Then go to the Uploads section. This is where we’re going to upload that zip file we made earlier so select Upload files and then select the zip file that we created in the last section. Afterwards check the This file will be played in the browser option.

Next scroll down and go to the Embed options section and under Viewport dimensions set the Width to 1280 and the Height to 720.

After this, go to the Details section and add the relevant details for your game. Things like instructions, features, and credits. This is also where I will tell students to add attributions for assets that they did not create if they used any in the creation of their project.

After finishing the details, tt’s time to actually see what the page actually looks like.

Scroll all the way down and then click on the Save button.

After hitting the Got it button you can then click on the play button to load the game for the first time!

Now, this isn’t avaliable for the whole world to play just yet because it’s just in Draft mode. And what that means is that nobody else is able to access it but the creator of the project.

Click on the Edit game button again to return to the edit menu

As an instructor, I advise students to set your project to either restricted or public. If students don’t want to make your projects public yet, that’s okay. They can create a password to view the page by clicking the Restricted option and then checking Also allow a password to view page and then giving a password. Then, you can share the link and password with others to view your game.

Conclusion

In conclusion, showcasing and distributing game projects are essential steps towards success in the world of game development. Itch.io provides a versatile and accessible platform for students to share their creations with a wide audience. By following the steps outlined in this tutorial, educators can guide their students through the process of exporting Unity games to itch.io, allowing them to showcase their work and foster a sense of accomplishment.

Uploading a WebGL build of the game to itch.io offers several advantages. It allows the game to be played on any computer with a web browser, expanding the potential audience and lowering the barrier of entry for people to try out the project. However, it’s important for students to ensure that their projects work as intended by configuring the Unity project settings appropriately.

By creating an itch.io account and uploading their games, students can engage with a vibrant community of developers and players. They can receive valuable feedback, iterate on their projects, and gain real-world experiences that contribute to their growth as game developers. Encouraging students to interact with the itch.io community helps them connect with like-minded individuals, learn from others, and establish a presence within the industry.

In the end, itch.io offers educators a valuable platform to showcase student game projects, promote collaboration and learning, and provide students with a tangible sense of achievement. By guiding students through the process of exporting Unity games and uploading them to itch.io, educators can empower their students to share their creations with the world and take their first steps towards a successful career in game development.

Feedback

Feedback from readers is always welcome. Let me know what you think about the tutorial- what you liked and what could be improved in this and future ones. If you would like to give me feedback and/or get support on any of the aspects of the tutorial, please feel free to e-mail me at john@johnpdoran.com and mention the tutorial’s title in the subject of your message.

If you do find an error, please send me an e-mail with the following information:

Name of the tutorial
The page the error was found.
What the error is and/or what you think the correction should be.

Once received, I’ll investigate the issue and correct it if necessary.