Graphics

It’s time to add some graphics to our game to make it look more like a real game. We will do it in three steps so that there won’t be too many changes at once. To begin with we’ll add code to load textures directly in our main function and change the draw function in the game loop. In a later chapter we will look at how to extract the texture loading into a separate function.

Before we make any code changes we need to download all necessary resources. Download this package with graphics and sound and extract it to a directory called assets in the root directory of your game.

Assets are available at this address: https://mq.agical.se/assets.zip

All the resources are public domain and are primarily from the website OpenGameArt.org which offers lots of different resources to develop games.

The file structure for your game should look like this:

.
├── Cargo.lock
├── Cargo.toml
├── README.md
├── assets
│   ├── 8bit-spaceshooter.ogg
│   ├── atari_games.ttf
│   ├── button_background.png
│   ├── button_clicked_background.png
│   ├── enemy-big.png
│   ├── enemy-medium.png
│   ├── enemy-small.png
│   ├── explosion.png
│   ├── explosion.wav
│   ├── laser-bolts.png
│   ├── laser.wav
│   ├── ship.png
│   └── window_background.png
└── src
    ├── main.rs
    └── starfield-shader.glsl

Update web publishing

If you chose to setup web publishing of your game to GitHub Pages in the first chapter you will need to update the file .github/workflows/deploy.yml to make sure the assets are included when publishing.

The assets directory needs to be created:

          mkdir -p ./deploy/assets

The asset files need to be copied into the assets directory:

          cp -r assets/ ./deploy/

The complete deploy configuration should now look like this:

name: Build and Deploy
on:
  push:
    branches:
      - main # If your default branch is named something else, change this

permissions:
  contents: write
  pages: write
  
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Install Rust
        uses: actions-rs/toolchain@v1
        with:
          toolchain: stable
          target: wasm32-unknown-unknown
          override: true

      - name: Build
        run: cargo build --release --target wasm32-unknown-unknown

      - name: Prepare Deployment Directory
        run: |
          mkdir -p ./deploy/assets
          cp ./target/wasm32-unknown-unknown/release/my-game.wasm ./deploy/
          cp index.html ./deploy/
          cp -r assets/ ./deploy/

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./deploy

Commit your changes and push to GitHub and verify that the game still works on:

  • https://<your-github-account>.github.io/<repository-name>.
Agical