DEV Community: Matthew Connelly

Compiling an SDL2 Game to WASM

Matthew Connelly — Sat, 12 Mar 2022 21:36:53 +0000

Originally published 7/13/20 on my personal blog.

I have a Snake clone written in C++ and SDL2, and while it's not just-add-water (yet) to compile a game to WASM with emscripten, it's pretty close. There was just some minor refactoring to be done, but it didn't affect the desktop version.

Infinite loop error

My game loop spins forever or until a quit event occurs. Infinite loops don't fly in the browser however, and this is the biggest change that had to be made to my game.

I had to move some code around, and what once sat in a while loop now lives in a function.

Before (no good):



// main.cpp

int main()
{
    <init code...>

    while(running)
    {
        <game loop code...>
    }

    return 0;
}

After (good):



// main.cpp

<declarations, defined later during init...>

void mainloop()
{
    <game loop code...>

    if(quit)
    {
        emscripten_cancel_main_loop(); 
        // ^ Add this to your close and destroy code 
        <close sdl subsystems and destroy...>
    }
}

int main()
{
    <init code...>

    emscripten_set_main_loop(mainloop, 0, 1);

    return 0;
}

My main routine now ends with the emscripten_set_main_loop call, whereas prior to this WASM refactor, it ended with a closing of SDL2 subsystems, meaning my game now handles quitting at the end of the game loop.

Later on I'll add define guards to make sure this all still compiles for desktop.

Build Flags

There were some build troubles. To be fair, I didn't read all that much on what these build flags mean, but that's alright because it builds now and that's all that matters (just kidding). It does build though.

`RuntimeError error: unreachable`

A Google search led to a suggestion that this resulted from control flow not being able to reach code due to a missing return statement? I then tracked it down to a SDL_RenderPresent call. I'm wrapping most SDL things in my own namespace and functions so I though that might be the problem. It turns out it was the asyncify flag which I thoughtlessly and needlessly added to the build flags.

Bad:



em++ *.cpp -o snake.html -g -lm --bind -s USE_SDL=2 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS='["png"]' --preload-file assets/ --use-preload-plugins -s ASYNCIFY

Good:



em++ *.cpp -o snake.html -g -lm --bind -s USE_SDL=2 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS='["png"]' --preload-file assets/ --use-preload-plugins

No asyncify.

Handling Images

-s SDL2_IMAGE_FORMATS='["png"]' --preload-file assets/ --use-preload-plugins

These flags will let SDL2_image load PNG's. Also, a trailing slash must be used to preload an entire directory with preload-file.

Maintaining Interoperability

Makefile targets look like this, snake-game being for desktop and snake.html for wasm:



snake-game: *.cpp
        clang++ -std=c++11 -I /usr/include/SDL2/ -l SDL2 -l SDL2_image $^ -o $@

snake.html: *.cpp
        em++ $^ -o $@ -g -lm --bind -s USE_SDL=2 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS='["png"]' --preload-file assets/ --use-preload-plugins

I also added define guards around emscripten function calls and the header as well.
At the top of main.cpp:



.
.
.

#ifdef __EMSCRIPTEN__
#include "emscripten.h"
#endif

.
.
.

and, towards the end of mainloop():



.
.
.

if(quit) {
    #ifdef __EMSCRIPTEN__
    emscripten_cancel_main_loop();
    #endif

    <close SDL subsystems and destroy...>
}

.
.
.

and at the bottom of main():



.

.

.

    #ifdef __EMSCRIPTEN__
    emscripten_set_main_loop(mainloop, 0, 1);
    #endif

    #ifndef __EMSCRIPTEN__
// repeatedly calling mainloop on desktop
    while(!quit) mainloop();
    #endif

    return 0;



}

Game Development with WASM in Mind

I will probably separate my code like the above in the future to keep it open for WASM compilation, much like we now develop webpages mobile-first.

If you've made it this far, you'd may as well play my Snake clone here: http://mattconndev.com/snake-wasm/

Sources

Code restructuring for emscripten: https://medium.com/@robaboukhalil/porting-games-to-the-web-with-webassembly-70d598e1a3ec

Define guards for interoperability: https://dev.to/kibebr/i-made-a-game-in-c-run-in-a-web-browser-and-so-can-you-4deb

Comparing Array-Based Stacks in C and Go

Matthew Connelly — Fri, 05 Feb 2021 04:40:54 +0000

This was originally published on my blog on July 5th, 2020. Now I'm publishing it here! I hope you find it interesting.

I'll be comparing stack-based arrays in C and Go. There are many ways to implement a stack, but the aim here is for simplicity.

Stacks in C

Non-Functionial Approach

Filling a stack with integers 1 through 10.

#include <stdio.h>

int main()
{
        int stack[10];
        int top = -1; 

        int i = 1;
        while(top+1 < 10) 
        {   
                stack[++top] = i;
                i++;
        }   

    // print 
        for(int i=0; i < 10; i++) printf("STACK[%d]=%d\n",i,stack[i]); 


        return 0;
}

In need of a stack, this will do. The big deal here is stack[++top]=i which is our push functionality. Pop can be achieved similarly, and peek is stack[top].

Functional Approach

Things get more interesting with functions involved. The code is more resuable, unlike the code above which is more of a one-off.

#include <stdbool.h>
#include <stdio.h>

bool push(int arr[], int size, int *top, int element);

int main(){
        int stack[10];
        int top = -1; 

        int i = 0;
        while(push(stack, 10, &top, ++i)){}

    // print 
        for(int i=0; i < 10; i++) printf("STACK[%d]=%d\n",i,stack[i]); 

        return 0;
}

bool push(int arr[], int size, int *top, int element)
{
        if((*top)+1 == size) return false;
        arr[++(*top)] = element;

        return true;
}

Now the function will all the work in a while loop like while(push(stack, 10, &top, ++i)){}.

Stacks in Go

Without Functions

Nearly identical to C:

package main

import "fmt"

func main(){
        var stack [10]int                         
        top := -1 

        i := 1
        for top+1 < 10 {
                top++
                stack[top] = i
                i++
        }                     

    // print
        for i := range stack {fmt.Printf("STACK[%d]=%d\n",i,stack[i])}
}

There are some syntax differences such as Go's lack of a prefix increment operator which would make a terse statement like stack[++top] = i; possible in C.

It's also worth noting that the array declared as var stack [10]int is automatically zeroed-out.

With Functions

package main

import "fmt"

func push(arr []int, top *int, element int) bool {
        if *top + 1 == len(arr) {return false}
        *top++
        arr[*top] = element

        return true
}

func main(){
        var stack [10]int
        top := -1

        i := 1
        for push(stack[:],&top,i) != false {i++}

        // print
        for i := range stack {fmt.Printf("STACK[%d]=%d\n",i,stack[i])}

}

We can put what is essentially a while loop to work again but this time, in Go syntax as for push(stack[:],&top,i) != false {i++}. We cannot increment our i variable here in our function call like we can in C unfortunately, so the body of our loop gets a single line.

There is a greater difference here, however. When passing the array to the push function, it must be passed as a slice (a dynamic subarray pointing to the actual array). The expression stack[:] creates this slice with the endpoints omitted.

To not pass in a slice, the function signature would look like func push(arr [10]int, top *int, element int) bool, where the size of the array must be explicitly stated and therefore only size 10 arrays would be allowed in this function.

Go's Built-In Dynamic Arrays

Go will let you append to a slice with a statement like stack = append(stack, i), which would manage the top of the stack for you, the catch being that this can only be done with slices and not statically sized arrays.

Text-based Level Editing and Phaser JS

Matthew Connelly — Mon, 26 Nov 2018 19:41:56 +0000

I originally published this on my website on 4/7/17.

If you are familiar with roguelikes (turn-based dungeon crawlers) such as Nethack, then you are no doubt familiar with the idea of a game's elements being displayed entirely as ASCII characters.

Here I will explain how I use a similar approach to create the layout of rooms in a game I am working on and how I use Phaser (JS game engine) to render the rooms based on my layouts.

The following array of strings represents a single room:

   [
    //1         12             25
    'ppppppppppppppppppppppppp',//1
    'p------------------------',//2
    'p------------------------',//3
    'pppppppppp---------------',//4
    'p----------------E-------',//5
    'p--------------pppppppppp',//6
    'p------------------------',//7
    'p------E-E---------------',//8
    'pppppppppp---------------',//9
    'p------------------------',//10
    'p----------------E-E-E---',//11
    'p--------------pppppppppp',//12
    'p-----------------------p',//13
    'p-----------------------p',//14
    'p-----------ppppppppppppp',//15
    'p---------ppppppppppppppp',//16
    'p------pppppppppppppppppp',//17
    'ppppppppppppppppppppppppp',//18
    'ppppppppppppppppppppppppp' //19
    ]

"E" represents an enemy, and "p" represents an immovable block that can be used as a platform or wall. A dash represents empty space, simply because I find it easier to read than whitespace, although I am not exactly counting dashes to find any kind of distance.

The commented-out numbers on top and on the right represent columns and rows respectively; I have divided a canvas 800 pixels wide and 600 pixels high into 25-by-19 32-pixel squares.

How and when a room is rendered

The player collides with the edge of the world (canvas)
The player's x-position is then changed to the position of the edge opposite of the collision (right edge collision, player moved to far-left of canvas; left edge collision, player moved to far-right of canvas); this gives the appearance of entering a new room
The room is then cleared, using Phaser's sprite.kill() method
A variable integer is then increased or decreased by 1 depending on the edge of collision (right, +1; left, -1), and this integer is then used as our room's index in our level array.
- So if our current room's index is 0 (the first room in the level array), and the player collides with the right edge of the canvas, our integer increases to 1, and we render the room who's index is 1 (our second room in the level array)
After getting the room we want by index, we check each string within the room array; each of these strings can be looked at as a row of things that can be rendered onto the canvas, from the top of the canvas to the bottom.
For each row (string) in the room array, we check each character by its index using String.charAt().
Using a switch statement, the character can be matched to a case; if and after being matched, we will call Phaser's group.create() method to render the matched sprite or image.

So using the room layout above, level1[0][8].charAt(4) would match a case of p in our switch statement:
- 0 is the index of the room (it is the only room shown, but typically there would be multiple rooms), 8 is the index of the row, and the 4th character of the 8th row is a p.

The room-rendering function (abridged)

(To be called on collision.)

function renderRoom(room){
    for(var row in room){
        for(var column=0; column <=  room[row].length; column++){
            switch (room[row].charAt(column)){
                case 'p':
                    platform = platforms.create(column*32, row*32, 'platform-image');
                    break;
            }
        }
    }
}

This room-rendering function currently only works with one level but should scale to accommodate multiple levels and work similarly if not identically.

The room system works as detailed in pseudo-code below, with each "column" actually representing a single character in a string:

level1 [
    room1 [ 
        row1 'column1 column2 column3',
        row2 'column1 column2 column3',
        row3 'column1 column2 column3'
    ],
    room2 [ 
        row1 'column1 column2 column3',
        row2 'column1 column2 column3',
        row3 'column1 column2 column3'
    ]
]