Using Git to Add Custom Assets - Runpython-IntroProgramming/Course-Syllabus GitHub Wiki

As you begin working on a final project, you may want to add asset files (images, sounds, etc.) that are not included in the default final project repository. Fortunately, Github has an online feature (the "Upload files" button) for uploading or creating files in a repository that aren't simply text files.

If you want to introduce resources to your Git repository the old way, then use the following guide. But seriously... use Upload files instead.

Adding Files to a Github Repository the Hard Way

There are several steps in the process:

  1. Create a copy or clone of your Github repository on your local computer, or a virtual computer on the Internet (e.g. at Cloud 9).
  2. Working on the command line or terminal for your computer, synchronize your local copy with the Github repository.
  3. Add your asset files to your local copy of the repository.
  4. Commit the new files to the repository and push the changes back up to Github.

Cloning your Github Repository

To clone your repository you will need command line or terminal access to a computer with Git installed. If you own or use a Macbook or other OSX device, Git is either already installed, or will be installed if you install the free OSX developer tools. Otherwise, I recommend using an online virtual PC from Cloud 9.

Cloning Using OSX

To clone your repository on OSX, do the following:

  1. Search for the "terminal" application and run it. You can now type commands directly on the terminal. Note that this user interface will not behave the way you are accustomed to in most computer applications.

  2. You can clone your repository in a specific directory on the machine by changing the current directory. For example, to switch to the Desktop type:

    cd Desktop

  3. Back on the Github page for your project, find the "Clone URL" edit control (location varies on the page). It should contain text that begins: "https://github.com/...". Copy this to your clipboard.

  4. Back in the terminal, type:

    git clone and then paste the contents of your clipboard. So, for example:

    git clone https://github.com/tiggerntatie/Final-Project.git

  5. You now have a full copy of the Github repository you are working with, stored on your local computer. Move in to the directory by typing:

    cd Final-Project

Cloning Using Cloud 9

If Git did not work on your Macbook, or you are working strictly in a browser, or with a Chromebook, then you should usea virtualized computer over the Internet.

There are several free services that provide a virtualized computing environment. One popular option is from a company called Cloud 9. Visit their web site and log in using your Github credentials. You will use this service to create a virtual computer that has a copy of your Github project:

  1. Once logged in to Cloud 9, click on repositories in the left-hand pane. This will bring up a list of your Github repositories. Find the one you want to work with and click its "Clone to edit" button.
  2. After a short pause, you should see the online editing environment for your project, with a view of the files and directories (plus some extras) from your Github repository showing up on the left.
  3. At the bottom of the screen there is a terminal window under a tab called "bash - ...". Click in the window if you want to start typing commands on the terminal.

Add Your Asset Files

Once you are connected to a terminal session on your local computer or on Cloud 9, you will need to synchronize with Github and add your own assets to the repository.

  1. From the terminal window type:

    git pull

    This will synchronize the local (OSX or Cloud 9) version of your repository with Github.

  2. Cloud 9: Use the "File/Upload local files..." menu to upload your asset files (i.e. images, jpg, png, etc.). OSX: Download your asset files and/or copy them in to the local repository directory on your desktop. Make sure you have placed asset files in the correct folder! Don't continue with the next step until all of your assets have been uploaded or copied to the correct location.

  3. Type:

    git status

    This should show a list of the new files, in red.

  4. Type:

    git add .

    This will allow all of the new files in the local (Cloud 9 or OSX) version of the repository to be tracked by git. If you want to add only specific files, then you may use the file name in place of the period in the command.

  5. Type:

    git commit -m "Added asset files"

    This will permanently add the new files to your repository, with a comment describing the files ("Added asset files" -- you can insert any comment you want here).

  6. Type:

    git push

    You may be asked to supply your Github username and password. Git will "push" your changes up to the Github repository.

Important: If you return to make additional insertions to your Github repository, you will need to repeat this process, starting with step #1. If you are using Cloud 9, you will not need to clone the repository again; your repository should appear as an available "workspace" that you can reactivate at will.

Editing Your Assets

If you want to crop, resize or otherwise modify your image assets, use an application like Photoshop to do so. If you are working in a strictly browser-based environment (i.e. Chromebook) then there are Chromebook or online friendly image editors, such as Pixlr.

If you are using Cloud 9 to update your image assets, note that Cloud 9 includes rudimentary image editing software in the workspace. If you open an image in the workspace, you will be able to easily identify the size of your image and the pixel coordinates of any position in the image. This is useful when, for example, trying to locate the size and position of a single sprite image in a larger "sprite sheet".