port of text_font_sdf.c

bindings/src/index.ts

@@ -294,6 +294,7 @@ function main(){
             baseSize: { get: true },
             glyphCount: { get: true },
             glyphPadding: { get: true },
+            texture: { get: true },
         },
         //destructor: "UnloadFont"
     }

examples/lib.raylib.d.ts

@@ -137,6 +137,8 @@ interface Font {
     glyphCount: number,
     /** Padding around the glyph characters */
     glyphPadding: number,
+    /** Texture atlas containing the glyphs */
+    texture: Texture,
 }
 declare var Font: {
     prototype: Font;

examples/text/text_font_sdf.js

@@ -0,0 +1,86 @@
+/*******************************************************************************************
+*
+*   raylib [text] example - Font SDF loading
+*
+*   Example originally created with raylib 1.3, last time updated with raylib 4.0
+*
+*   Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
+*   BSD-like license that allows static linking with closed source software
+*
+*   Copyright (c) 2015-2023 Ramon Santamaria (@raysan5)
+*
+********************************************************************************************/
+
+const GLSL_VERSION= 330
+
+// Initialization
+//--------------------------------------------------------------------------------------
+const screenWidth = 800
+const screenHeight = 450
+
+initWindow(screenWidth, screenHeight, "raylib [text] example - SDF fonts")
+
+// NOTE: Textures/Fonts MUST be loaded after Window initialization (OpenGL context is required)
+
+const msg = "Signed Distance Fields"
+
+// font generation from TTF font
+const font = loadFontEx("resources/anonymous_pro_bold.ttf", 16, null, 0)
+
+// Load SDF required shader (we use default vertex shader)
+const shader = loadShader(0, "resources/shaders/glsl"+GLSL_VERSION+"/sdf.fs")
+setTextureFilter(font.texture, TEXTURE_FILTER_BILINEAR)      // Required for SDF font
+
+const fontPosition = new Vector2( 40, screenHeight/2 - 50 )
+let fontSize = 16
+
+setTargetFPS(60)               // Set our game to run at 60 frames-per-second
+
+// Main game loop
+while (!windowShouldClose())   // Detect window close button or ESC key
+{
+	// Update
+	//----------------------------------------------------------------------------------
+	fontSize += getMouseWheelMove()*8
+
+	if (fontSize < 6) fontSize = 6
+
+	let useSDF= isKeyDown(KEY_SPACE)
+
+	let textSize = measureTextEx(font, msg, fontSize, 0)
+	fontPosition.x = getScreenWidth()/2 - textSize.x/2
+	fontPosition.y = getScreenHeight()/2 - textSize.y/2 + 80
+	//----------------------------------------------------------------------------------
+
+	// Draw
+	//----------------------------------------------------------------------------------
+	beginDrawing() 
+	{
+		clearBackground(RAYWHITE)
+
+		// NOTE: SDF fonts require a custom SDf shader to compute fragment color
+		if(useSDF) beginShaderMode(shader)     // Activate SDF font shader
+		drawTextEx(font, msg, fontPosition, fontSize, 0, BLACK)
+		if(useSDF) endShaderMode()             // Activate our default shader for next drawings
+
+		drawTexture(font.texture, 10, 10, BLACK)
+
+		drawText( useSDF ? "SDF!" : "default shader", 315, 40, 30, GRAY)
+
+		drawText("FONT SIZE: 16.0", getScreenWidth() - 240, 20, 20, DARKGRAY)
+		drawText("RENDER SIZE: "+ fontSize, getScreenWidth() - 240, 50, 20, DARKGRAY)
+		drawText("Use MOUSE WHEEL to SCALE TEXT!", getScreenWidth() - 240, 90, 10, DARKGRAY)
+
+		drawText("HOLD SPACE to USE SDF SHADER!", 340, getScreenHeight() - 30, 20, MAROON)	
+	}
+	endDrawing()
+	//----------------------------------------------------------------------------------
+}
+
+// De-Initialization
+//--------------------------------------------------------------------------------------
+unloadFont(font)         // font unloading
+unloadShader(shader)     // Unload SDF shader
+
+closeWindow()            // Close window and OpenGL context
+//--------------------------------------------------------------------------------------

src/bindings/js_raylib_core.h

@@ -846,10 +846,21 @@ static JSValue js_Font_get_glyphPadding(JSContext* ctx, JSValueConst this_val) {
     return ret;
 }
 
+static JSValue js_Font_get_texture(JSContext* ctx, JSValueConst this_val) {
+    Font* ptr = JS_GetOpaque2(ctx, this_val, js_Font_class_id);
+    Texture2D texture = ptr->texture;
+    Texture2D* ret_ptr = (Texture2D*)js_malloc(ctx, sizeof(Texture2D));
+    *ret_ptr = texture;
+    JSValue ret = JS_NewObjectClass(ctx, js_Texture_class_id);
+    JS_SetOpaque(ret, ret_ptr);
+    return ret;
+}
+
 static const JSCFunctionListEntry js_Font_proto_funcs[] = {
     JS_CGETSET_DEF("baseSize",js_Font_get_baseSize,NULL),
     JS_CGETSET_DEF("glyphCount",js_Font_get_glyphCount,NULL),
     JS_CGETSET_DEF("glyphPadding",js_Font_get_glyphPadding,NULL),
+    JS_CGETSET_DEF("texture",js_Font_get_texture,NULL),
     JS_PROP_STRING_DEF("[Symbol.toStringTag]","Font", JS_PROP_CONFIGURABLE),
 };