Init skeleton project using emscripten/raylib

This commit is contained in:
Stephen Seo 2023-07-30 21:34:38 +09:00
parent d99362b5ed
commit 9c6f805697
11 changed files with 1817 additions and 0 deletions

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
/demo_0
/objdir/

32
Makefile Normal file
View file

@ -0,0 +1,32 @@
ifdef DEBUG
COMMON_FLAGS = -g -O0
else
COMMON_FLAGS = -DNDEBUG -O3
endif
CXX_FLAGS = -Wall -Wextra -Wpedantic -Weffc++ ${COMMON_FLAGS}
LINKER_FLAGS = -lraylib
OBJDIR = objdir
SOURCES = \
src/main.cc
OBJECTS = $(addprefix ${OBJDIR}/,$(subst .cc,.cc.o,${SOURCES}))
all: demo_0
demo_0: ${OBJECTS}
${CXX} -o demo_0 ${LINKER_FLAGS} $^
.PHONY: clean format
clean:
rm -rf ${OBJDIR}
rm -f demo_0
.SECONDEXPANSION:
${OBJDIR}/%.cc.o: %.cc
@mkdir -p $(dir $@)
${CXX} -c ${CXX_FLAGS} -o $@ $^

3
src/.lvimrc Normal file
View file

@ -0,0 +1,3 @@
set tabstop=2
set softtabstop=2
set shiftwidth=2

22
src/ems.cc Normal file
View file

@ -0,0 +1,22 @@
#include "ems.h"
#ifdef __EMSCRIPTEN__
#include <emscripten.h>
#include <emscripten/fetch.h>
#include <emscripten/html5.h>
EM_JS(int, canvas_get_width, (),
{ return document.getElementById("canvas").clientWidth; });
EM_JS(int, canvas_get_height, (),
{ return document.getElementById("canvas").clientHeight; });
int call_js_get_canvas_width() { return canvas_get_width(); }
int call_js_get_canvas_height() { return canvas_get_height(); }
#else
int call_js_get_canvas_width() { return 800; }
int call_js_get_canvas_height() { return 800; }
#endif

7
src/ems.h Normal file
View file

@ -0,0 +1,7 @@
#ifndef JUMPARTIFACT_DOT_COM_DEMO_0_H_
#define JUMPARTIFACT_DOT_COM_DEMO_0_H_
extern int call_js_get_canvas_width();
extern int call_js_get_canvas_height();
#endif

58
src/main.cc Normal file
View file

@ -0,0 +1,58 @@
// emscripten includes
#ifdef __EMSCRIPTEN__
#include "ems.h"
#include <emscripten.h>
#include <emscripten/html5.h>
#else
#include <random>
#endif
// third party includes
#include <raylib.h>
// local includes
#ifdef __EMSCRIPTEN__
extern "C" {
EM_BOOL resize_event_callback(int event_type, const EmscriptenUiEvent *event,
void *ud) {
if (event_type == EMSCRIPTEN_EVENT_RESIZE) {
SetWindowSize(call_js_get_canvas_width(), call_js_get_canvas_height());
//((GameRenderer *)ud)->screen_size_changed();
}
return false;
} // resize_event_callback(...)
} // extern "C"
#endif
// Main loop frame
void jumpartifact_demo_update(void *ud) {
BeginDrawing();
ClearBackground(BLACK);
DrawText("Testing...", 100, 100, 30, RAYWHITE);
EndDrawing();
}
int main() {
InitWindow(800, 800, "Demo");
#ifdef __EMSCRIPTEN__
SetWindowSize(call_js_get_canvas_width(), call_js_get_canvas_height());
emscripten_set_resize_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, 0, false,
resize_event_callback);
emscripten_set_main_loop_arg(jumpartifact_demo_update, 0, 0, 1);
#else
SetTargetFPS(60);
while (!WindowShouldClose()) {
jumpartifact_demo_update(0);
}
CloseAudioDevice();
CloseWindow();
#endif
return 0;
}

4
wasm_build/.gitignore vendored Normal file
View file

@ -0,0 +1,4 @@
/jumpartifact.com_demo_0.html
/jumpartifact.com_demo_0.js
/jumpartifact.com_demo_0.wasm
/jumpartifact.com_demo_0.data

36
wasm_build/Makefile Normal file
View file

@ -0,0 +1,36 @@
ifdef RELEASE
OTHER_FLAGS = -DNDEBUG -O3
else
OTHER_FLAGS = -O0
endif
SOURCES = \
../src/main.cc \
../src/ems.cc
HEADERS = \
../src/ems.h
CXX = source ${HOME}/git/emsdk/emsdk_env.sh && em++
all: | format jumpartifact.com_demo_0.html
jumpartifact.com_demo_0.html: ${SOURCES} ${HEADERS}
${CXX} -o jumpartifact.com_demo_0.html \
-s USE_GLFW=3 -I../wasm_include -L../wasm_lib -lraylib \
--shell-file custom_shell.html \
-sEXPORTED_FUNCTIONS=_main \
-sEXPORTED_RUNTIME_METHODS=ccall \
${OTHER_FLAGS} \
${SOURCES}
.PHONY: clean format
clean:
rm -f jumpartifact.com_demo_0.html
rm -f jumpartifact.com_demo_0.js
rm -f jumpartifact.com_demo_0.wasm
rm -f jumpartifact.com_demo_0.data
format:
clang-format -i --style=file ${SOURCES} ${HEADERS}

View file

@ -0,0 +1,65 @@
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>jumpartifact.com demo</title>
<style>
body { margin: 0; background-color: black }
.emscripten {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: block;
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
</style>
</head>
<body>
<!-- <script src="https://cdn.jsdelivr.net/npm/rune-games-sdk@2.5.2/dist/browser.min.js"></script> -->
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script type='text/javascript'>
var Module = {
preRun: [],
postRun: [],
print: (function() {
return function(text) {
text = Array.prototype.slice.call(arguments).join(' ');
console.log(text);
};
})(),
printErr: function(text) {
text = Array.prototype.slice.call(arguments).join(' ');
console.error(text);
},
canvas: (function() {
var canvas = document.getElementById('canvas');
//canvas.addEventListener("webglcontextlost", function(e) { alert('FIXME: WebGL context lost, please reload the page'); e.preventDefault(); }, false);
return canvas;
})(),
setStatus: function(text) {
console.log("status: " + text);
},
monitorRunDependencies: function(left) {
// no run dependencies to log
}
};
window.onerror = function() {
console.log("onerror: " + event);
};
</script>
{{{ SCRIPT }}}
</body>
</html>

1588
wasm_include/raylib.h Normal file

File diff suppressed because it is too large Load diff

BIN
wasm_lib/libraylib.a Normal file

Binary file not shown.