修复：文字渲染模糊

README.md

@@ -84,14 +84,14 @@ class MainSence extends Sence {
 // 切换场景
 engine.changeToSence(MainSence)
 ```
-然后你就能看见屏幕上有个大大的`Hello World`了
+然后你就能看见屏幕上有个`Hello World`了
 
 # 场景
 
-MainSence是一个`场景`，`场景`的preload方法用于加载资源，比如`纹理`，`音频`等等资源
-当所有资源都加载成功后，会调用场景的`create`方法，并将该方法返回的节点作为`场景树`的根节点
+上面`MainSence`是一个游戏场景，场景的preload方法用于预加载资源
+当preload方法的所有资源都加载完成后，会调用场景的`create`方法，并将该方法返回的节点作为场景树的根节点
 场景树是组织和管理游戏场景中各个元素的数据结构。它类似于一棵树，而每个节点可以包含子节点。
-在sparkle.js中`组件`（比如下图的Timer就是一个组件）也是一个节点
+在sparkle.js中组件（比如下图的Timer就是一个组件）也是一个节点
 ```
 Sprite（用于显示）
   |
@@ -178,7 +178,7 @@ node.onEvent(timer, "timeout", ()=>{
 还可以使用`waitEvent`来等待一个事件发出
 ```js
 const node = new Container()
-await node.awaitEvent(timer, "timeout")
+await node.waitEvent(timer, "timeout")
 alert("timeout !")
 ```
 若想知道每个节点的具体事件有那些，请查阅[API 文档](https://nightre.github.io/sparkle.js/docs/index)

demo/chrome-dino/index.js

@@ -9,7 +9,7 @@ import {
     Text,
     TextAnchor,
     Timer,
-} from  "https://unpkg.com/sparkle-engine/dist/sparkle.js"
+} from "https://unpkg.com/sparkle-engine/dist/sparkle.js"
 
 const engine = new SparkleEngine({
     // 指定游戏画布元素

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sparkle-engine",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "files": [
     "dist/*",

src/nodes/text.ts

@@ -52,7 +52,7 @@ class Text extends Drawable {
         const m = this.renderer.modelMatrix
         switch (this.anchor) {
             case TextAnchor.CENTER:
-                m.translate(-this.drawSize.x/2, 0)
+                m.translate(-this.drawSize.x / 2, 0)
                 break;
             case TextAnchor.RIGHT:
                 m.translate(-this.drawSize.x, 0)
@@ -65,23 +65,21 @@ class Text extends Drawable {
         const compositors = this.renderer.currentCompositors as TextureCompositors;
         compositors.addQuad(this.texture, false);
         compositors.setColor(this.color)
-
         compositors.flush();
     }
     private setText(text: string) {
-        const Images = this.engine.text.drawText(
+
+        const img = this.engine.text.drawText(
             text,
             this.font,
             this.color
         )
         if (this.texture) {
             this.texture.setImage(
-                Images
+                img, true
             )
         } else {
-            this.texture = this.engine.texture.createBaseTexture(
-                Images
-            )
+            this.texture = new BaseTexture(this.engine, img, true)
         }
         this.drawSize.set(
             this.texture.width,

src/video/text_manager.ts

@@ -24,28 +24,27 @@ class TextManager {
      * @param color 颜色
      * @returns 返回 canvas 而不是绘制一个文字
      */
-    drawText(text: string, font: string = '64px Arial', color: Color) {
-        this.canvas.font = font;
+    drawText(text: string, font: string = '24px monospace', color: Color) {
+        const canvas = this.canvas
+        canvas.font = font;
         // 计算文本的宽度和高度
-        let metrics = this.canvas.measureText(text);
+        let metrics = canvas.measureText(text);
         let textWidth = metrics.width;
         let textHeight = parseInt(font, 10); // 假设字体大小在font字符串的开始
 
         // 设置canvas的大小
-        this.canvas.canvas.width = textWidth;
-        this.canvas.canvas.height = textHeight * 1.25;
-
+        canvas.canvas.width = textWidth;
+        canvas.canvas.height = textHeight * 1.25;
+        canvas.fillStyle = "black";
         // 清除canvas
-        this.canvas.clearRect(0, 0, this.canvas.canvas.width, this.canvas.canvas.height);
-
-        // 设置字体和颜色
-        this.canvas.font = font;
-        this.canvas.fillStyle = `rgba(${color.r * 255},${color.g * 255},${color.b * 255},${color.alpha * 255})`;
+        canvas.clearRect(0, 0, canvas.canvas.width, canvas.canvas.height);
+        canvas.fillStyle = `rgba(${color.r * 255},${color.g * 255},${color.b * 255},${color.alpha * 255})`;
 
         // 绘制文本
-        this.canvas.fillText(text, 0, textHeight);
+        canvas.font = font;
+        canvas.fillText(text, 0, textHeight);
 
-        return this.canvas.canvas
+        return canvas.canvas
     }
 }
 

src/video/texture/texture.ts

@@ -50,8 +50,7 @@ export class TextureManager {
      * @returns 
      */
     createBaseTexture(image: Images) {
-        const newOldBaseTexture = new BaseTexture(this.engine, image)
-        return newOldBaseTexture
+        return new BaseTexture(this.engine, image)
     }
 }
 
@@ -66,18 +65,18 @@ export class BaseTexture {
     height!: number
     source: Images
     engine: SparkleEngine
-    constructor(engine: SparkleEngine, image: Images) {
+    constructor(engine: SparkleEngine, image: Images, text: boolean=false) {
         this.source = image
         this.engine = engine
-        this.setImage(image)
+        this.setImage(image, text)
     }
     /**
      * 重新设置纹理
      * @param image 
      */
-    setImage(image: Images) {
+    setImage(image: Images, text: boolean = false) {
         const engine = this.engine;
-        this.texture = createTexture(engine.renderer.gl, image, engine.renderer.antialias);
+        this.texture = createTexture(engine.renderer.gl, image, engine.renderer.antialias, text);
         this.width = image.width;
         this.height = image.height;
     }

src/video/utils/texture.ts

@@ -1,15 +1,20 @@
 import { Images } from "../../main";
 
-export function createTexture(gl: WebGLRenderingContext, image: Images, antialias: boolean): WebGLTexture {
+export function createTexture(gl: WebGLRenderingContext, image: Images, antialias: boolean, text: boolean): WebGLTexture {
     const texture = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, texture);
-
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, antialias || text ? gl.LINEAR : gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, antialias || text ? gl.LINEAR : gl.NEAREST);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, antialias ? gl.LINEAR : gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, antialias ? gl.LINEAR : gl.NEAREST);
+
     // gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    if (text) {
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    }
+
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
     if (!texture) {
         throw new Error("unable to create texture");
     }