feat CoreFont & CoreFontManager

examples/common/MemMonitor.ts

@@ -65,6 +65,7 @@ export class MemMonitor extends Component {
     this.node.color = 0xffffffaa;
     this.node.w = 400;
     this.node.h = BAR_HEIGHT + MARGIN * 2;
+    const fontFamily = 'SDF-Ubuntu';
 
     this.bar = renderer.createNode({
       x: this.node.w - BAR_WIDTH - MARGIN,
@@ -118,7 +119,7 @@ export class MemMonitor extends Component {
       x: -15,
       y: 0,
       text: 'Critical',
-      fontFamily: 'Ubuntu',
+      fontFamily: fontFamily,
       parent: this.bar,
       fontSize: 20,
       color: 0xff0000ff,
@@ -140,7 +141,7 @@ export class MemMonitor extends Component {
       x: -15,
       y: 0,
       text: 'Target',
-      fontFamily: 'Ubuntu',
+      fontFamily: fontFamily,
       parent: this.bar,
       fontSize: 20,
       color: 0x000000ff,
@@ -165,7 +166,7 @@ export class MemMonitor extends Component {
       x: MARGIN,
       y: infoTextY,
       text: '',
-      fontFamily: 'Ubuntu',
+      fontFamily: fontFamily,
       parent: this.node,
       fontSize: INFO_TEXT_SIZE,
       lineHeight: INFO_TEXT_LINEHEIGHT,
@@ -176,7 +177,7 @@ export class MemMonitor extends Component {
       x: MARGIN,
       y: infoTextY + INFO_TEXT_LINEHEIGHT,
       text: '',
-      fontFamily: 'Ubuntu',
+      fontFamily: fontFamily,
       parent: this.node,
       fontSize: INFO_TEXT_SIZE,
       lineHeight: INFO_TEXT_LINEHEIGHT,
@@ -187,7 +188,7 @@ export class MemMonitor extends Component {
       x: MARGIN,
       y: infoTextY + INFO_TEXT_LINEHEIGHT * 2,
       text: 'Base:',
-      fontFamily: 'Ubuntu',
+      fontFamily: fontFamily,
       parent: this.node,
       fontSize: INFO_TEXT_SIZE,
       lineHeight: INFO_TEXT_LINEHEIGHT,
@@ -198,7 +199,7 @@ export class MemMonitor extends Component {
       x: MARGIN,
       y: infoTextY + INFO_TEXT_LINEHEIGHT * 3,
       text: '',
-      fontFamily: 'Ubuntu',
+      fontFamily: fontFamily,
       parent: this.node,
       fontSize: INFO_TEXT_SIZE,
       lineHeight: INFO_TEXT_LINEHEIGHT,
@@ -209,7 +210,7 @@ export class MemMonitor extends Component {
       x: MARGIN,
       y: infoTextY + INFO_TEXT_LINEHEIGHT * 6,
       text: '',
-      fontFamily: 'Ubuntu',
+      fontFamily: fontFamily,
       parent: this.node,
       fontSize: INFO_TEXT_SIZE,
       lineHeight: INFO_TEXT_LINEHEIGHT,
@@ -220,7 +221,7 @@ export class MemMonitor extends Component {
       x: MARGIN,
       y: infoTextY + INFO_TEXT_LINEHEIGHT * 9,
       text: '',
-      fontFamily: 'Ubuntu',
+      fontFamily: fontFamily,
       parent: this.node,
       fontSize: INFO_TEXT_SIZE,
       lineHeight: INFO_TEXT_LINEHEIGHT,

examples/common/PageContainer.ts

@@ -61,7 +61,7 @@ export class PageContainer extends Component {
     });
 
     this.titleNode = renderer.createTextNode({
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       fontSize: TITLE_FONT_SIZE,
       x: PADDING,
       y: PADDING,
@@ -72,7 +72,7 @@ export class PageContainer extends Component {
     this.settings = settings;
 
     this.pageNumberNode = renderer.createTextNode({
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       fontSize: 30,
       x: PADDING,
       y: this.node.h - 30 - PADDING,

examples/common/installFonts.ts

@@ -22,7 +22,7 @@ import { type Stage } from '@lightningjs/renderer';
 export async function installFonts(stage: Stage) {
   // Load Canvas fonts using the new unified API
   stage.loadFont('canvas', {
-    fontFamily: 'NotoSans',
+    fontFamily: 'Canvas-NotoSans',
     fontUrl: './fonts/NotoSans-Regular.ttf',
     metrics: {
       ascender: 1069,
@@ -33,7 +33,7 @@ export async function installFonts(stage: Stage) {
   });
 
   stage.loadFont('canvas', {
-    fontFamily: 'Ubuntu',
+    fontFamily: 'Canvas-Ubuntu',
     fontUrl: './fonts/Ubuntu-Regular.ttf',
     metrics: {
       ascender: 776,
@@ -44,7 +44,7 @@ export async function installFonts(stage: Stage) {
   });
 
   stage.loadFont('canvas', {
-    fontFamily: 'Ubuntu-No-Metrics',
+    fontFamily: 'Canvas-Ubuntu-No-Metrics',
     fontUrl: './fonts/Ubuntu-Regular.ttf',
   });
 
@@ -56,15 +56,15 @@ export async function installFonts(stage: Stage) {
   };
 
   stage.loadFont('canvas', {
-    fontFamily: 'Ubuntu-Modified-Metrics',
+    fontFamily: 'Canvas-Ubuntu-Modified-Metrics',
     fontUrl: './fonts/Ubuntu-Regular.ttf',
     metrics: ubuntuModifiedMetrics,
   });
 
   // Load SDF fonts for WebGL renderer using the new unified API
   if (stage.renderer.mode === 'webgl') {
     stage.loadFont('sdf', {
-      fontFamily: 'NotoSans',
+      fontFamily: 'SDF-NotoSans',
       atlasUrl: './fonts/NotoSans-Regular.ssdf.png',
       atlasDataUrl: './fonts/NotoSans-Regular.ssdf.json',
       metrics: {
@@ -76,22 +76,22 @@ export async function installFonts(stage: Stage) {
     });
 
     stage.loadFont('sdf', {
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       atlasUrl: './fonts/Ubuntu-Regular.msdf.png',
       atlasDataUrl: './fonts/Ubuntu-Regular.msdf.json',
       // Instead of supplying `metrics` this font will rely on the ones
       // encoded in the json file under `lightningMetrics`.
     });
 
     stage.loadFont('sdf', {
-      fontFamily: 'Ubuntu-Modified-Metrics',
+      fontFamily: 'SDF-Ubuntu-Modified-Metrics',
       atlasUrl: './fonts/Ubuntu-Regular.msdf.png',
       atlasDataUrl: './fonts/Ubuntu-Regular.msdf.json',
       metrics: ubuntuModifiedMetrics,
     });
 
     stage.loadFont('sdf', {
-      fontFamily: 'Ubuntu-ssdf',
+      fontFamily: 'SDF-Ubuntu-ssdf',
       atlasUrl: './fonts/Ubuntu-Regular.ssdf.png',
       atlasDataUrl: './fonts/Ubuntu-Regular.ssdf.json',
       metrics: {

examples/common/paginateTestRows.ts

@@ -81,7 +81,7 @@ export async function paginateTestRows(
           parent: pageNode,
         });
         const rowHeaderNode = renderer.createTextNode({
-          fontFamily: 'Ubuntu',
+          fontFamily: 'SDF-Ubuntu',
           fontSize: HEADER_FONT_SIZE,
           forceLoad: true,
           y: PADDING,

examples/tests/alignment.ts

@@ -48,7 +48,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     parent: node,
     x: 200,
     y: 1080 / 3 - 30,
-    fontFamily: 'Ubuntu',
+    fontFamily: 'SDF-Ubuntu',
     fontSize: 30,
     text: 'Shows a parent node with 4 aligned children',
   });
@@ -92,7 +92,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     parent: node,
     x: 200,
     y: 1080 / 2 + 30,
-    fontFamily: 'Ubuntu',
+    fontFamily: 'SDF-Ubuntu',
     fontSize: 30,
     text: 'Shows a empty holder node, with a parent \nnode and 4 aligned children',
   });

examples/tests/alpha-blending.ts

@@ -82,7 +82,7 @@ export default async function test(settings: ExampleSettings) {
   // Header text for both sides
   const leftHeader = renderer.createTextNode({
     text: 'WebGL -> Browser Alpha',
-    fontFamily: 'Ubuntu',
+    fontFamily: 'SDF-Ubuntu',
     fontSize: HEADER_FONT_SIZE,
     color: 0xffffffff,
     contain: 'width',
@@ -94,7 +94,7 @@ export default async function test(settings: ExampleSettings) {
 
   const rightHeader = renderer.createTextNode({
     text: 'WebGL -> WebGL Alpha',
-    fontFamily: 'Ubuntu',
+    fontFamily: 'SDF-Ubuntu',
     fontSize: HEADER_FONT_SIZE,
     color: 0xffffffff,
     contain: 'width',
@@ -106,7 +106,7 @@ export default async function test(settings: ExampleSettings) {
   });
 
   const pageNumberNode = renderer.createTextNode({
-    fontFamily: 'Ubuntu',
+    fontFamily: 'SDF-Ubuntu',
     fontSize: 30,
     color: 0xffffffff,
     x: PADDING,
@@ -127,7 +127,7 @@ export default async function test(settings: ExampleSettings) {
     //// Alpha Prop vs RGBA Alpha Component Blending Test
     const alphaPropVsRGBAHeader = renderer.createTextNode({
       text: 'The rectangles below should appear the same',
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       fontSize: 30,
       color: 0xffffffff,
       y: curY,
@@ -168,7 +168,7 @@ export default async function test(settings: ExampleSettings) {
 
     const sameColorRectHeader = renderer.createTextNode({
       text: 'The rectangles below should appear invisible',
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       fontSize: 30,
       color: 0xffffffff,
       y: curY,
@@ -234,7 +234,7 @@ export default async function test(settings: ExampleSettings) {
 
     renderer.createTextNode({
       text: 'The texture rects below should appear invisible',
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       fontSize: 30,
       color: 0xffffffff,
       y: curY,
@@ -318,7 +318,7 @@ export default async function test(settings: ExampleSettings) {
 
     const sameColorTextHeader = renderer.createTextNode({
       text: 'The text below should appear invisible',
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       fontSize: 30,
       color: 0xffffffff,
       y: curY,
@@ -332,12 +332,11 @@ export default async function test(settings: ExampleSettings) {
     // Canvas Text - Same Color - 100% alpha prop / 100% alpha component
     renderer.createTextNode({
       text: CANVAS_TEXT,
-      fontFamily: 'NotoSans',
+      fontFamily: 'Canvas-NotoSans',
       fontSize: 30,
       alpha: 1,
       color: bgColor,
       y: curY,
-      textRendererOverride: 'canvas',
       parent: sideContainer,
     });
 
@@ -346,12 +345,11 @@ export default async function test(settings: ExampleSettings) {
     // Canvas Text - Same Color - 50% alpha prop / 100% alpha component
     renderer.createTextNode({
       text: CANVAS_TEXT,
-      fontFamily: 'NotoSans',
+      fontFamily: 'Canvas-NotoSans',
       fontSize: 30,
       alpha: 0.5,
       color: bgColor,
       y: curY,
-      textRendererOverride: 'canvas',
       parent: sideContainer,
     });
 
@@ -360,12 +358,11 @@ export default async function test(settings: ExampleSettings) {
     // Canvas Text - Same Color - 100% alpha prop / 50% alpha component
     renderer.createTextNode({
       text: CANVAS_TEXT,
-      fontFamily: 'NotoSans',
+      fontFamily: 'Canvas-NotoSans',
       fontSize: 30,
       alpha: 1,
       color: mergeColorAlpha(bgColor, 0.5),
       y: curY,
-      textRendererOverride: 'canvas',
       parent: sideContainer,
     });
 
@@ -374,12 +371,11 @@ export default async function test(settings: ExampleSettings) {
     // Canvas Text - Same Color - 50% alpha prop / 50% alpha component
     renderer.createTextNode({
       text: CANVAS_TEXT,
-      fontFamily: 'NotoSans',
+      fontFamily: 'Canvas-NotoSans',
       fontSize: 30,
       alpha: 0.5,
       color: mergeColorAlpha(bgColor, 0.5),
       y: curY,
-      textRendererOverride: 'canvas',
       parent: sideContainer,
     });
 
@@ -390,12 +386,11 @@ export default async function test(settings: ExampleSettings) {
     // SDF Text - Same Color - 100% alpha prop / 100% alpha component
     renderer.createTextNode({
       text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       fontSize: 30,
       alpha: 1,
       color: bgColor,
       y: curY,
-      textRendererOverride: 'sdf',
       parent: sideContainer,
     });
 
@@ -404,12 +399,11 @@ export default async function test(settings: ExampleSettings) {
     // SDF Text - Same Color - 50% alpha prop / 100% alpha component
     renderer.createTextNode({
       text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       fontSize: 30,
       alpha: 0.5,
       color: bgColor,
       y: curY,
-      textRendererOverride: 'sdf',
       parent: sideContainer,
     });
 
@@ -418,12 +412,11 @@ export default async function test(settings: ExampleSettings) {
     // SDF Text - Same Color - 100% alpha prop / 50% alpha component
     renderer.createTextNode({
       text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       fontSize: 30,
       alpha: 1,
       color: mergeColorAlpha(bgColor, 0.5),
       y: curY,
-      textRendererOverride: 'sdf',
       parent: sideContainer,
     });
 
@@ -432,12 +425,11 @@ export default async function test(settings: ExampleSettings) {
     // SDF Text - Same Color - 50% alpha prop / 50% alpha component
     renderer.createTextNode({
       text: SDF_TEXT,
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       fontSize: 30,
       alpha: 0.5,
       color: mergeColorAlpha(bgColor, 0.5),
       y: curY,
-      textRendererOverride: 'sdf',
       parent: sideContainer,
     });
 
@@ -447,7 +439,7 @@ export default async function test(settings: ExampleSettings) {
 
     const textureBlendingHeader = renderer.createTextNode({
       text: 'The textures below should have smooth edges',
-      fontFamily: 'Ubuntu',
+      fontFamily: 'SDF-Ubuntu',
       fontSize: 30,
       color: 0xffffffff,
       y: curY,

examples/tests/animation-events.ts

@@ -66,6 +66,8 @@ export default async function test({
   testRoot.h = 250;
   testRoot.color = 0xffffffff;
 
+  const FONT_FAMILY = 'SDF-Ubuntu';
+
   const robot = renderer.createNode({
     x: 0,
     y: 0,
@@ -81,7 +83,7 @@ export default async function test({
     x: testRoot.w,
     y: testRoot.h,
     fontSize: 40,
-    fontFamily: 'Ubuntu',
+    fontFamily: FONT_FAMILY,
     parent: testRoot,
     color: 0x000000ff,
   });