add separate WASM build for coolmath, separate JS from index page into pre-js files

This commit is contained in:
ohsqueezy 2023-12-26 20:18:49 -05:00
parent 48a9fdbad2
commit 0fd33ee924
12 changed files with 172 additions and 109 deletions

View File

@ -25,9 +25,6 @@ CXX := clang++
# Location of SDL config program. See README.md for how to compile the SDL library and this utility.
SDLCONFIG := $(HOME)/local/sdl/bin/sdl2-config
# Include BPmono.ttf in the project
CREATE_FONT_SYMLINK := ln -nsf $(SB_DIR)/"BPmono.ttf" .
#############################
# Based on above parameters #
#############################
@ -52,8 +49,10 @@ BUILD_ROOT := build
X86_64_DEBUG_BUILD_DIR := $(BUILD_ROOT)/x86_64_debug
X86_64_BUILD_DIR := $(BUILD_ROOT)/x86_64
WASM_BUILD_DIR := $(BUILD_ROOT)/wasm
WASM_DEBUG_BUILD_DIR := $(BUILD_ROOT)/wasm_debug
WASM_COOLMATH_BUILD_DIR := $(BUILD_ROOT)/wasm_coolmath
WINDOWS_BUILD_DIR := $(BUILD_ROOT)/win32
BUILD_DIRS := $(X86_64_BUILD_DIR) $(X86_64_DEBUG_BUILD_DIR) $(WASM_BUILD_DIR) $(WINDOWS_BUILD_DIR)
BUILD_DIRS := $(X86_64_BUILD_DIR) $(X86_64_DEBUG_BUILD_DIR) $(WASM_BUILD_DIR) $(WASM_DEBUG_BUILD_DIR) $(WASM_COOLMATH_BUILD_DIR) $(WINDOWS_BUILD_DIR)
$(BUILD_DIRS):
mkdir -p $@
@ -181,14 +180,12 @@ Cakefoot-linux.x86_64 : CFLAGS = $(LINUX_CFLAGS) -O3
Cakefoot-linux.x86_64 : CXXFLAGS = $(LINUX_CXXFLAGS)
Cakefoot-linux.x86_64 : LFLAGS = $(LINUX_LFLAGS)
Cakefoot-linux.x86_64 : $(LINUX_OBJ)
$(CREATE_FONT_SYMLINK)
$(CXX) $^ $(LFLAGS) -D__LINUX__ -o $(X86_64_BUILD_DIR)/$@
Cakefoot-linux_debug.x86_64 : CFLAGS = $(LINUX_CFLAGS) -g -Wall -Wextra -O0 -fsanitize=undefined
Cakefoot-linux_debug.x86_64 : CXXFLAGS = $(LINUX_CXXFLAGS)
Cakefoot-linux_debug.x86_64 : LFLAGS = $(LINUX_LFLAGS) -fsanitize=undefined
Cakefoot-linux_debug.x86_64 : $(LINUX_DEBUG_OBJ)
$(CREATE_FONT_SYMLINK)
$(CXX) $^ $(LFLAGS) -D__LINUX__ -o $(X86_64_DEBUG_BUILD_DIR)/$@
#############
@ -198,32 +195,37 @@ Cakefoot-linux_debug.x86_64 : $(LINUX_DEBUG_OBJ)
# Use Emscripten to output JavaScript
EMSCRIPTENHOME = $(HOME)/ext/software/emsdk/upstream/emscripten
EMSCRIPTEN_CFLAGS = -O2 -Wall -s USE_SDL=2 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS="['png', 'jpg']" -s USE_SDL_TTF=2 -s USE_SDL_MIXER=2 \
EMSCRIPTEN_CFLAGS = -Oz -Wall -s USE_SDL=2 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS="['png', 'jpg']" -s USE_SDL_TTF=2 -s USE_SDL_MIXER=2 \
-I $(SB_LIB_DIR) -I $(SB_SRC_DIR)
EMSCRIPTEN_LFLAGS = -s MIN_WEBGL_VERSION=2 -s EXPORTED_FUNCTIONS="['_main', '_malloc']" \
-s LLD_REPORT_UNDEFINED -s NO_DISABLE_EXCEPTION_CATCHING -s FULL_ES3=1 -lidbfs.js \
-s TOTAL_MEMORY=200MB -s ALLOW_MEMORY_GROWTH=0
# -s ALLOW_MEMORY_GROWTH=1
EMSCRIPTEN_PRELOADS = --preload-file "BPmono.ttf"@/ --preload-file "config.json"@/ --preload-file "config_wasm.json"@/ --preload-file "resource/"@/"resource/" \
--preload-file "src/shaders/"@/"src/shaders/"
EMSCRIPTEN_GAME_CONFIGS = config.json config_wasm.json resource/levels.json
WASM_OBJS = $(addprefix $(WASM_BUILD_DIR)/, SDL2_rotozoom.o SDL2_gfxPrimitives.o $(SB_O_FILES) $(SRC_O_FILES))
EMSCRIPTEN_LFLAGS = -s MIN_WEBGL_VERSION=2 -s EXPORTED_FUNCTIONS="['_main', '_malloc']" -s LLD_REPORT_UNDEFINED -s NO_DISABLE_EXCEPTION_CATCHING \
-s FULL_ES3=1 -lidbfs.js -s ALLOW_MEMORY_GROWTH=1
EMSCRIPTEN_PRELOADS = --preload-file "config.json" --preload-file "resource/" --preload-file "src/shaders/" --preload-file "src/config_wasm.json" \
--pre-js "src/pre_js.js"
EMSCRIPTEN_GAME_CONFIGS = config.json src/config_wasm.json resource/levels.json
cakefoot.js : CC = $(EMSCRIPTENHOME)/emcc
cakefoot.js : CXX = $(EMSCRIPTENHOME)/em++
cakefoot.js : CFLAGS = $(EMSCRIPTEN_CFLAGS)
cakefoot.js : CXXFLAGS = $(CFLAGS) --std=c++17
cakefoot.js : $(WASM_OBJS) $(EMSCRIPTEN_GAME_CONFIGS)
$(CREATE_FONT_SYMLINK)
$(CXX) $(filter-out $(EMSCRIPTEN_GAME_CONFIGS), $^) $(CXXFLAGS) $(EMSCRIPTEN_LFLAGS) $(EMSCRIPTEN_PRELOADS) -o $@
cakefoot.js : $(addprefix $(WASM_BUILD_DIR)/, SDL2_rotozoom.o SDL2_gfxPrimitives.o $(SB_O_FILES) $(SRC_O_FILES)) $(EMSCRIPTEN_GAME_CONFIGS)
$(CXX) $(filter-out $(EMSCRIPTEN_GAME_CONFIGS), $^) $(CXXFLAGS) $(EMSCRIPTEN_LFLAGS) $(EMSCRIPTEN_PRELOADS) --pre-js "src/pre_js_foam.js" \
-o $(WASM_BUILD_DIR)/$@
cakefoot_debug.html : CC = $(EMSCRIPTENHOME)/emcc
cakefoot_debug.html : CXX = $(EMSCRIPTENHOME)/em++
cakefoot_debug.html : CFLAGS = $(EMSCRIPTEN_CFLAGS) -g2
cakefoot_debug.html : CXXFLAGS = $(CFLAGS) --std=c++17
cakefoot_debug.html : $(WASM_OBJS) $(EMSCRIPTEN_GAME_CONFIGS)
$(CREATE_FONT_SYMLINK)
$(CXX) $(filter-out $(EMSCRIPTEN_GAME_CONFIGS), $^) $(CXXFLAGS) $(EMSCRIPTEN_LFLAGS) $(EMSCRIPTEN_PRELOADS) --memoryprofiler --cpuprofiler -o $@
cakefoot_debug.html : $(addprefix $(WASM_DEBUG_BUILD_DIR)/, SDL2_rotozoom.o SDL2_gfxPrimitives.o $(SB_O_FILES) $(SRC_O_FILES)) $(EMSCRIPTEN_GAME_CONFIGS)
$(CXX) $(filter-out $(EMSCRIPTEN_GAME_CONFIGS), $^) $(CXXFLAGS) $(EMSCRIPTEN_LFLAGS) $(EMSCRIPTEN_PRELOADS) --memoryprofiler --cpuprofiler -o \
$(WASM_DEBUG_BUILD_DIR)/$@
cakefoot_coolmath.js : CC = $(EMSCRIPTENHOME)/emcc
cakefoot_coolmath.js : CXX = $(EMSCRIPTENHOME)/em++
cakefoot_coolmath.js : CFLAGS = $(EMSCRIPTEN_CFLAGS)
cakefoot_coolmath.js : CXXFLAGS = $(CFLAGS) --std=c++17
cakefoot_coolmath.js : $(addprefix $(WASM_COOLMATH_BUILD_DIR)/, SDL2_rotozoom.o SDL2_gfxPrimitives.o $(SB_O_FILES) $(SRC_O_FILES)) $(EMSCRIPTEN_GAME_CONFIGS)
$(CXX) $(filter-out $(EMSCRIPTEN_GAME_CONFIGS), $^) $(CXXFLAGS) $(EMSCRIPTEN_LFLAGS) -D__COOLMATH__ $(EMSCRIPTEN_PRELOADS) -o $(WASM_COOLMATH_BUILD_DIR)/$@
cp src/index_coolmath.html $(WASM_COOLMATH_BUILD_DIR)/index.html
#################
# Android build #
@ -309,12 +311,11 @@ Cakefoot-win32.exe: LFLAGS = -lpthread -lstdc++fs \
-lSDL2_ttf -lSDL2_mixer -lSDL2main -lSDL2 -lopengl32 -static-libstdc++ -static-libgcc
Cakefoot-win32.exe: $(WINDOWS_OBJ) config.json
$(CREATE_FONT_SYMLINK)
$(CXX) $(filter-out config.json, $^) $(LFLAGS) -o $(WINDOWS_BUILD_DIR)/$@
mkdir ${basename $@}
cp $(SDL_MINGW)/bin/*.dll $(SDL_IMG_MINGW)/bin/*.dll $(SDL_TTF_MINGW)/bin/*.dll $(SDL_MIXER_MINGW)/bin/*.dll ${basename $@}
cp /usr/i686-w64-mingw32/lib/libwinpthread-1.dll ${basename $@}
rsync -arRL resource/ src/shaders/ config.json BPmono.ttf ${basename $@}
rsync -arRL resource/ src/shaders/ config.json ${basename $@}
cp $(WINDOWS_BUILD_DIR)/$@ ${basename $@}
zip -r ${@:exe=zip} ${basename $@}
mv ${basename $@} /tmp
@ -325,14 +326,14 @@ Cakefoot-win32.exe: $(WINDOWS_OBJ) config.json
# Make all builds #
###################
all : Cakefoot-linux.x86_64 Cakefoot-linux_debug.x86_64 cakefoot.js cakefoot_debug.html Cakefoot-win32.exe
all : Cakefoot-linux.x86_64 Cakefoot-linux_debug.x86_64 cakefoot.js cakefoot_debug.html cakefoot_coolmath.js Cakefoot-win32.exe
#########################
# Clean up object files #
#########################
clean :
-find $(BUILD_ROOT) -iname "*.o" -delete
rm -rf build/
#############
# compiledb #

View File

@ -5,6 +5,7 @@
"title": "c a k e f o o t",
"debug": false,
"render driver": "opengl",
"default font path": "resource/BPmono.ttf",
"show-cursor": true,
"fluid resize": true,
"fps": false,
@ -78,8 +79,10 @@
"configuration":
{
"auto-refresh": true,
"auto-refresh-interval": 1.0
"auto refresh": true,
"auto refresh interval": 1.0,
"wasm config path": "src/config_wasm.json",
"android config path": "src/config_android.json"
},
"recording":

View File

@ -1 +0,0 @@
Module.ASAN_OPTIONS = "sanitize-ignorelist=clang_sanitize_ignorelist.txt"

View File

@ -78,7 +78,8 @@
<canvas id="canvas"></canvas>
<div id="message">
Welcome to Cakefoot early access! Use &#x1F5B1;&#xFE0F;, &#x2328;&#xFE0F; or 🎮 to play. Send 🦋 bugs 🦋 and feedback to <i>mailbox at shampoo.ooo</i>. Visit the <a href="https://x.com/wondervillenyc/status/1735827245384572940" target="_new">custom arcade cabinet</a> 🕹&#xFE0F;
Welcome to Cakefoot early access! Use &#x1F5B1;&#xFE0F;, &#x2328;&#xFE0F; or 🎮 to play. Send 🦋 bugs 🦋 and feedback to <i>mailbox at shampoo.ooo</i>.
Visit the <a href="https://x.com/wondervillenyc/status/1735827245384572940" target="_new">custom arcade cabinet</a> 🕹&#xFE0F;
<br/>
@ -86,79 +87,27 @@
</div>
<script>
var databaseName = "/storage";
function collectData()
{
/* Open the database Emscripten's IDBFS library created. */
var open = indexedDB.open(databaseName);
var database;
open.onerror = (event) => {
console.error("Unable to open IndexedDB to read progress data.");
};
open.onsuccess = (event) => {
database = event.target.result;
/* Read the key created by Emscripten which corresponds to the file containing the progress data JSON. */
var path = databaseName + "/cakefoot_progress.json";
var read = database.transaction("FILE_DATA").objectStore("FILE_DATA").get(path);
read.onerror = (event) => {
console.error("Unable to read from", path);
};
read.onsuccess = (event) => {
/* Decode a string encoded as a UInt8Array of chars. The string is serialized JSON data. */
var contents = String.fromCharCode.apply(null, read.result.contents);
/* Pass play log to PHP script as JSON */
fetch("www/collect.php", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: contents
}).then((response) => {
if (!response.ok)
{
console.log("Error collecting progress to play history");
}
else
{
return response.json();
}
}).then((response) => {
document.getElementById("session").innerHTML = "Progress is automatically saved to your browser (session ID: " + response["id"] + ")";
});
}
};
}
/* Emscripten's Module object doesn't exist yet, so create it here */
var Module = {
/* Set Emscripten to use a canvas for display. */
canvas: document.getElementById("canvas"),
/* Turn off automatic call to main function */
noInitialRun: true,
/* Mount storage for the save file and run game */
onRuntimeInitialized: function()
/* Files are stored in a separate location on FOAM builds */
locateFile: function(path, prefix)
{
FS.mkdir("/storage");
FS.mount(IDBFS, {}, "/storage");
FS.syncfs(true, function(error) {
if (error !== null)
{
console.log("Error mounting storage with Filesystem API", error);
}
else
{
_main();
}
});
console.log(path, prefix);
/* The data file is loaded before the main JavaScript, so the prefix is empty. See the note at
* https://emscripten.org/docs/api_reference/module.html#Module.locateFile */
if (path.endsWith(".data"))
{
return "build/wasm/" + path;
}
else
{
return prefix + path;
}
}
};
</script>
<!-- This file is built by Emscripten when compiling the program -->
<script src="cakefoot.js"></script>
<script src="build/wasm/cakefoot.js"></script>
</body>
</html>

2
lib/sb

@ -1 +1 @@
Subproject commit 8e62f9e0a223deb5a48a67f401c6433257d6a936
Subproject commit 5d950387a872e6043ea40387bc31b80559084bc6

View File

@ -19,6 +19,6 @@
"configuration":
{
"auto-refresh": false
"auto refresh": false
}
}

34
src/index_coolmath.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<meta charset="utf-8">
<style>
body
{
margin: 0px;
background: #000;
}
canvas
{
margin: 0px;
width: 100%;
max-width: 100%;
max-height: 100%;
aspect-ratio: 16 / 9;
}
</style>
</head>
<body>
<!-- Emscripten's module object will update this canvas with WebGL content. -->
<canvas id="canvas"></canvas>
<!-- This file is built by Emscripten when compiling the program -->
<script src="cakefoot_coolmath.js"></script>
</body>
</html>

32
src/pre_js.js Normal file
View File

@ -0,0 +1,32 @@
/* _ _
* c/a`k-e'f`o^o~t-, | a single-button action game | by @ooofoam
* / _< | wow a living cake the sweet | play online: https://foam.ooo/cakefoot
* > `~_/ | taste of victory | open source: https://open.shampoo.ooo/shampoo/cakefoot
*
* Custom modifications to Emscripten's Module object and other JavaScript to be included in WASM builds.
*/
function collectData() {}
/* Set Emscripten to use a canvas for display. */
Module.canvas = document.getElementById("canvas");
/* Turn off automatic call to main function */
Module.noInitialRun = true;
/* Mount storage for the save file and run game */
Module.onRuntimeInitialized = function()
{
FS.mkdir("/storage");
FS.mount(IDBFS, {}, "/storage");
FS.syncfs(true, function(error) {
if (error !== null)
{
console.log("Error mounting storage with Filesystem API", error);
}
else
{
_main();
}
});
}

53
src/pre_js_foam.js Normal file
View File

@ -0,0 +1,53 @@
/* _ _
* c/a`k-e'f`o^o~t-, | a single-button action game | by @ooofoam
* / _< | wow a living cake the sweet | play online: https://foam.ooo/cakefoot
* > `~_/ | taste of victory | open source: https://open.shampoo.ooo/shampoo/cakefoot
*
* Custom modifications to Emscripten's Module object and other JavaScript to be included in the WASM build specific to the FOAM site.
*/
/* Collect user play data when running on the FOAM site */
function collectData()
{
/* Open the database Emscripten's IDBFS library created. */
var databaseName = "/storage";
var open = indexedDB.open(databaseName);
var database;
open.onerror = (event) => {
console.error("Unable to open IndexedDB to read progress data.");
};
open.onsuccess = (event) => {
database = event.target.result;
/* Read the key created by Emscripten which corresponds to the file containing the progress data JSON. */
var path = databaseName + "/cakefoot_progress.json";
var read = database.transaction("FILE_DATA").objectStore("FILE_DATA").get(path);
read.onerror = (event) => {
console.error("Unable to read from", path);
};
read.onsuccess = (event) => {
/* Decode a string encoded as a UInt8Array of chars. The string is serialized JSON data. */
var contents = String.fromCharCode.apply(null, read.result.contents);
/* Pass play log to PHP script as JSON */
fetch("www/collect.php", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: contents
}).then((response) => {
if (!response.ok)
{
console.log("Error collecting progress to play history");
}
else
{
return response.json();
}
}).then((response) => {
document.getElementById("session").innerHTML = "Progress is automatically saved to your browser (session ID: " + response["id"] + ")";
});
}
};
}

View File

@ -1,6 +1,6 @@
#version 300 es
/* >> Cakefoot by https://foam.shampoo.ooo/ << */
/* https://foam.ooo/cakefoot */
/* The precision declaration is required by OpenGL ES */
precision mediump float;
@ -18,14 +18,6 @@ out vec4 output_color;
void main()
{
/* Use the input flag to modify the color output. If the flag is enabled, the texture value will be used. Otherwise, the color value will
* be used.
*
* Not sure why the micro adjustment to the UV value is necessary. Without it, the texture is displayed with missing pixels when positioned
* at its start point. Something related to reading the texel at the boundary versus the center. But adjusting the UV into the center of the
* texels causes pixels at the borders to display incorrectly. Maybe related to half pixel adjustment https://gamedev.stackexchange.com/a/49585
*/
// output_color = float(texture_enabled) * texture(model_texture, fragment_uv + 0.00001);
output_color = float(texture_enabled) * (texture(model_texture, fragment_uv) + color_addition);
output_color += (1.0 - float(texture_enabled)) * (ex_color + color_addition);
}

View File

@ -1,6 +1,6 @@
#version 300 es
/* >> Cakefoot by https://foam.shampoo.ooo/ << */
/* https://foam.ooo/cakefoot */
/* The precision declaration is required by OpenGL ES */
precision mediump float;