Added INTRO-emscripten.md

This commit is contained in:
Sam Lantinga 2025-01-13 15:49:47 -08:00
parent 21b433536a
commit 0eaa8c6d81
3 changed files with 85 additions and 39 deletions

38
docs/INTRO-emscripten.md Normal file
View File

@ -0,0 +1,38 @@
# Introduction to SDL with Emscripten
First, you should have the Emscripten SDK installed from:
https://emscripten.org/docs/getting_started/downloads.html
We'll start by creating a simple project to build and run [hello.c](hello.c)
## Building SDL
Once you have a command line interface with the Emscripten SDK set up and you've changed directory to the SDL directory, you can build SDL like this:
```sh
mkdir hello
cd hello
emcmake cmake ..
emmake make
```
## Building your app
In this case we'll just run a simple command to compile our source with the SDL library we just built:
```sh
emcc -o index.html ../docs/hello.c -I../include -L. -lSDL3
```
## Running your app
You can now run your app by pointing a webserver at your build directory and connecting a web browser to it.
## More information
A more complete example is available at:
https://github.com/Ravbug/sdl3-sample
Additional information and troubleshooting is available in [README-emscripten.md](README-emscripten.md)

View File

@ -239,13 +239,13 @@ If you want to build with thread support, something like this works:
```bash
mkdir build
cd build
emcmake cmake -DSDL_THREADS=On ..
emcmake cmake -DSDL_THREADS=ON ..
# you can also do `emcmake cmake -G Ninja ..` and then use `ninja` instead of this command.
emmake make -j4
```
To build the tests, add `-DSDL_TESTS=On` to the `emcmake cmake` command line.
To build the examples, add `-DSDL_EXAMPLES=On` to the `emcmake cmake` command line.
To build the tests, add `-DSDL_TESTS=ON` to the `emcmake cmake` command line.
To build the examples, add `-DSDL_EXAMPLES=ON` to the `emcmake cmake` command line.
## Building your app

View File

@ -9,52 +9,60 @@
including commercial applications, and to alter it and redistribute it
freely.
*/
#define SDL_MAIN_USE_CALLBACKS 1 /* use the callbacks instead of main() */
#include <SDL3/SDL.h>
#include <SDL3/SDL_main.h>
int main(int argc, char *argv[])
static SDL_Window *window = NULL;
static SDL_Renderer *renderer = NULL;
/* This function runs once at startup. */
SDL_AppResult SDL_AppInit(void **appstate, int argc, char *argv[])
{
/* Create the window */
if (!SDL_CreateWindowAndRenderer("Hello World", 800, 600, SDL_WINDOW_FULLSCREEN, &window, &renderer)) {
SDL_Log("Couldn't create window and renderer: %s\n", SDL_GetError());
return SDL_APP_FAILURE;
}
return SDL_APP_CONTINUE;
}
/* This function runs when a new event (mouse input, keypresses, etc) occurs. */
SDL_AppResult SDL_AppEvent(void *appstate, SDL_Event *event)
{
if (event->type == SDL_EVENT_KEY_DOWN ||
event->type == SDL_EVENT_QUIT) {
return SDL_APP_SUCCESS; /* end the program, reporting success to the OS. */
}
return SDL_APP_CONTINUE;
}
/* This function runs once per frame, and is the heart of the program. */
SDL_AppResult SDL_AppIterate(void *appstate)
{
SDL_Window *window = NULL;
SDL_Renderer *renderer = NULL;
const char *message = "Hello World!";
int w = 0, h = 0;
float x, y;
const float scale = 4.0f;
bool done = false;
/* Create the window */
if (!SDL_CreateWindowAndRenderer("Hello World", 0, 0, SDL_WINDOW_FULLSCREEN, &window, &renderer)) {
SDL_Log("Couldn't create window and renderer: %s\n", SDL_GetError());
return 1;
}
/* Center the message and scale it up */
SDL_GetRenderOutputSize(renderer, &w, &h);
SDL_SetRenderScale(renderer, scale, scale);
x = ((w / scale) - SDL_DEBUG_TEXT_FONT_CHARACTER_SIZE * SDL_strlen(message)) / 2;
y = ((h / scale) - SDL_DEBUG_TEXT_FONT_CHARACTER_SIZE) / 2;
while (!done) {
SDL_Event event;
/* Draw the message */
SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
SDL_RenderClear(renderer);
SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255);
SDL_RenderDebugText(renderer, x, y, message);
SDL_RenderPresent(renderer);
/* Handle events */
while (SDL_PollEvent(&event)) {
if (event.type == SDL_EVENT_KEY_DOWN ||
event.type == SDL_EVENT_MOUSE_BUTTON_DOWN ||
event.type == SDL_EVENT_QUIT) {
done = true;
}
}
/* Center the message and scale it up */
SDL_GetRenderOutputSize(renderer, &w, &h);
SDL_SetRenderScale(renderer, scale, scale);
x = ((w / scale) - SDL_DEBUG_TEXT_FONT_CHARACTER_SIZE * SDL_strlen(message)) / 2;
y = ((h / scale) - SDL_DEBUG_TEXT_FONT_CHARACTER_SIZE) / 2;
/* Draw the message */
SDL_SetRenderDrawColor(renderer, 0, 0, 0, 255);
SDL_RenderClear(renderer);
SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255);
SDL_RenderDebugText(renderer, x, y, message);
SDL_RenderPresent(renderer);
}
SDL_Quit();
return 0;
return SDL_APP_CONTINUE;
}
/* This function runs once at shutdown. */
void SDL_AppQuit(void *appstate, SDL_AppResult result)
{
}