Using version control for Cocos Creator with GitHub

Learn how to back up your files and collaborate with your team using Git as a version control solution for your Cocos Creator project.

George Neguceanu

August 22, 2024

8

min read

Content

In this tutorial, you will learn how to configure GitHub for a Cocos Creator project, using Anchorpoint as our Git client to push and pull files to and from GitHub. The free version of Anchorpoint supports all of this functionality.

Cocos Creator editor overview — Cocos Creator UI template project

Git and GitHub

Git is a widely used version control system, used in over 90% of all software development projects, and has a large ecosystem that includes services such as GitHub, GitLab, and Azure DevOps.

GitHub is one of the most popular cloud repositories that integrates with the Git version control system, and offers many additional features to help manage and automate tasks.

To upload your files to GitHub's cloud service, you can use Git's version control commands or take a simpler approach with a desktop application like Anchorpoint, which easily pushes and pulls files to and from GitHub.

Git and GitHub image — Git is the version control system. GitHub is a cloud service provider based on Git.

Why is version control essential

Cloud storage for your project files on platforms like GitHub, Azure DevOps, or GitLab
Seamless synchronization across your team and devices
Ability to document your changes
Work on and merge different branches

Is It Free?

Git is a free, open-source version control system, while GitHub offers several plans, including a free tier for unlimited users with 1GB of storage and 1GB of monthly bandwidth. For larger projects, Azure DevOps is an alternative that offers free access for up to 5 users with unlimited storage.

Git for game developers

Anchorpoint is a free and simplified version control solution that was made for non-technical users.

Learn about Anchorpoint

Setting Up GitHub

The first step is to set up GitHub, which will serve as the repository for our Cocos Creator project.

GitHub acccount creation webpage — Visit GitHub.com and create an account. Once completed, proceed with the steps below to create the repository.

Configuring your Git desktop application

In this example, we’ll use Anchorpoint, but any other Git client will work too. If you opt for a different Git client, you’ll need to create the repository on GitHub and then paste the remote URL into your Git client. With Anchorpoint, we’ll utilize the built-in GitHub integration.

Login page in Anchorpoint — Download and Install Anchorpoint. After installation, create an Anchorpoint account.

Projects overview in Anchorpoint — Scroll down to the Integration section and click "Connect Application." If you don’t see this page, open a new tab.

Integration page in Anchorpoint for GitHub connect — Locate GitHub and click "Connect."

Anchorpoint authorize window — Your web browser will open. Click "Authorize Anchorpoint Software."

Logging in to Github from Anchorpoint — A pop-up will appear for the Git credential manager, which verifies your access to the Git repository on GitHub. Click "Sign in with your browser."

Authorization of the Git ecosystem for Anchorpoint — Finally, authorize the Git credential manager on GitHub by clicking "Authorize git-ecosystem."

Test and Activate GitHub connection in Anchorpoint — Click "Test and Activate" to confirm the GitHub integration in Anchorpoint.

GitHub connected status in Anchopoint — If everything is set up correctly, the status will show "Connected." You can now close this pop-up.

Creating a new project in Anchorpoint — Create a new project.

Creating a new Git Repository with Anchorpoint — Select "Git Repository" and browse to your Cocos Creator project location. In the Remote Settings, choose "New GitHub Repository" and select "No .gitignore" for the template. Then, press "Continue."

Assign Members when creating a new project — In this section, you can add members to Anchorpoint. You’ll need to add them to GitHub later as well. Enter their email addresses and click "Send Invite."

Adding a team member on Github — Once the project is created, Anchorpoint will remind you to add your team members on GitHub.

Initial Commit of a Cocos Creator project with Anchorpoint — Go to the "Timeline" tab, then "Changed Files." Add a commit name like "Initial Commit," and click "Sync" to upload your files to GitHub.

GitHub Overview of a Cocos Creator project — After pushing your files, you’ll see your repository on GitHub.

Changed files ready to be pushed to GitHub — As soon as we make a change in our Cocos Creator project, it is automatically detected by Anchorpoint and we can push it to Github.

The Workflow

Making daily commits a regular part of your workflow is essential. Whenever you make a significant change, such as creating a new version of a character or implementing a major adjustment to a game mechanic, it’s important to commit those changes. Git commits are quick because they occur locally. Once the commit is done, you can keep working while all your files are pushed to GitHub in the background.

When using Anchorpoint, working with Git is essentially a two-step process. For instance, you can browse your Timeline, add a comment, and then press Push.

Here are the typical steps to follow:

Complete your work in Cocos Creator.
Open the Timeline in Anchorpoint, add a comment, and press Push.
Your team members must Pull to receive your changes.
Your team members execute their work in Cocos Creator.
Your team member adds a comment on their work and presses Push as well.

Branching, Merging, and File Locking

To prevent file conflicts, some teams work across multiple branches, such as one for programming and another for design/art. The programmers might then merge the branches at the end of the week. Other teams work on different copies of the same level—one for coding and one for design/art—and merge them later.

Desktop version control tools like Anchorpoint include a file locking feature that allows you to lock a file while you’re working on it, helping to avoid conflicts during the project.

‍

What Your Team Members Need to Do

GitHub: Team members need to create a GitHub account and accept your invitation.

Anchorpoint: After receiving an invitation email from Anchorpoint, they will need to download, install, and create an account. Upon their first login, they’ll need to accept the invitation, and the project will automatically be detected and opened.

Your team member has to click Join Git Repository.

When clicking “Join Git Repository,” Anchorpoint will ask for a location to download the files. In some cases, a popup may appear prompting your team members to install Git before Anchorpoint can proceed.

During the download process, a GitHub authentication pop-up will appear, requiring team members to log in to GitHub for Anchorpoint to download the files.

GitHub Limitations

GitHub's free plan has storage and bandwidth limits. If you exceed these limits, Anchorpoint will reject the push and you'll receive an error message. If your project is large, consider alternatives such as Azure DevOps or self-hosting your Git server with Gitea.

Individual file size limits

On GitHub's free tier, file sizes are limited to 2GB using the Git LFS. This limit increases to 4GB on a paid plan.

Repository limits

The free plan includes 1GB of repository space and 1GB of monthly bandwidth. For more, you'll need to purchase LFS storage packages, which will cost you $5 per 50GB per month.

‍

Frequently Asked Questions

How much storage do I get on GitHub?

Currently, the free tier on GitHub provides 1GB of storage. If you need more, you can purchase storage packs. However, if you anticipate needing more than 150GB, it may make more sense to switch to Azure DevOps, which currently has no storage limits.

What is a .gitignore file?

A .gitignore file plays a critical role in managing your Cocos Creator projects with Git. It contains a set of rules that tell Git which files to exclude from version control. When you create a Cocos Creator project, the .gitignore file is created automatically. Different game engines like Unity and Unreal have their own specific .gitignore settings.

What is Git LFS?

Git was originally designed to handle code that is mostly text files. However, game development involves a lot of binary files, such as 3D models, textures, and sound files. To maintain efficiency and avoid downloading the entire history of your 3D models and textures, Git introduced an add-on in 2014 called Git LFS (Large File Storage). This add-on is now integrated into nearly all Git products and services. With Anchorpoint, you don't have to worry about Git LFS commands because they are handled automatically in the background. If you're using other Git clients, you'll need to configure Git LFS at the start of your project.