Constructing a Net Recreation in C

2023-12-11 23:28:29

Christmas is developing. After I used to work at a financial institution all the month of December and a little bit of January we have been positioned below “Change Freeze”. We weren’t allowed to deploy updates to our purposes throughout this era. The pondering was:

Lots of people are away over Christmas
Utility modifications can result in crashes
Individuals who know repair these crashes is perhaps away

To stop this they only stopped us from deploying updates. That meant December was a reasonably enjoyable time to be working at a financial institution, and it was additionally a very good time to do large refactors, clear up //TODOs or fiddle with some new know-how. So how about studying to code a sport in C and construct it out to WebAssmebly?

1. Set up Raylib

Go here to get Raylib put in in your working system. On Home windows I used the installer which is accessible on itch.io and for MacOS I used Homebrew.

2. Create foremost.c

#embrace "raylib.h"

int foremost(void) {
    InitWindow(512, 512, "Raylib WASM Instance");
    Texture2D texture = LoadTexture("sources/smile.png");

    whereas (!WindowShouldClose()) {
        BeginDrawing();
        ClearBackground(BLACK);
        DrawTexture(texture, 0, 0, WHITE);
        EndDrawing();
    }

    UnloadTexture(texture);
    CloseWindow();
    return 0;
}

Create this file and place it in src/foremost.c

3. Copy this picture

Copy this picture and place it in src/sources/smile.png

4A. Construct MacOS

gcc -Wall -fcolor-diagnostics -fansi-escape-codes -g src/foremost.c `pkg-config --libs --cflags raylib` -o out/foremost.out

4B. Construct Home windows

gcc src/foremost.c -lraylib -lopengl32 -lgdi32 -lwinmm -g -o out/foremost.exe

Run the Construct

# Must run from the src folder as a result of the code desires the sources folder to be within the present working listing.
cd src

# MacOS
../out/foremost.out

# Home windows
../out/foremost.exe

It is best to see this should you did it proper. If not, dangle your head in disgrace.

5. Obtain Emscripten

Now that we’re constructing efficiently on Home windows or Mac, we are able to get able to construct out to Net Meeting. I like to recommend you clone emsdk into the identical listing the place your sport listing lives. You don’t must but it surely’ll make working the construct script we’re going to create simpler.

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that listing
cd emsdk

# Fetch the most recent model of the emsdk (not wanted the primary time you clone)
git pull

# Obtain and set up the most recent SDK instruments.
./emsdk set up newest

# Make the "newest" SDK "lively" for the present person. (writes .emscripten file)
./emsdk activate newest

# Activate PATH and different surroundings variables within the present terminal
supply ./emsdk_env.sh

6. Create shell.html

Download this HTML file and place it in /shell.html. It’s going to wrap round our internet meeting sport.

7. Create the construct script

#!/bin/bash
set -euo pipefail

# Get EMSDK on the PATH
cd ../emsdk
supply emsdk_env.sh

# Get into the /src folder
cd ../raylib-wasm-example
cd src

# Construct to Net Meeting
emcc -o ../out/index.html 
    foremost.c -Os -Wall /Customers/anguscheng/workspace/raylib/src/libraylib.a 
    -I. -I /usr/native/Cellar/raylib/4.5.0/embrace 
    -L. -L /Customers/anguscheng/workspace/raylib/src 
    -s USE_GLFW=3 
    -s ASYNCIFY 
    --shell-file ../shell.html 
    --preload-file sources 
    -s TOTAL_STACK=64MB 
    -s INITIAL_MEMORY=128MB 
    -s ASSERTIONS 
    -DPLATFORM_WEB

# Get into /out
cd ../out

# Run the sport
emrun index.html