diff --git a/README.md b/README.md index c23b5b8..d082c0e 100644 --- a/README.md +++ b/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) diff --git a/demo/chrome-dino/index.js b/demo/chrome-dino/index.js index b5366da..9e4099b 100644 --- a/demo/chrome-dino/index.js +++ b/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({ // 指定游戏画布元素 diff --git a/package.json b/package.json index b38969d..33d3e77 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sparkle-engine", "private": false, - "version": "0.0.6", + "version": "0.0.7", "type": "module", "files": [ "dist/*", diff --git a/src/nodes/text.ts b/src/nodes/text.ts index f2eecec..d8d81ac 100644 --- a/src/nodes/text.ts +++ b/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, diff --git a/src/video/text_manager.ts b/src/video/text_manager.ts index 79ecf7a..33f31ee 100644 --- a/src/video/text_manager.ts +++ b/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 } } diff --git a/src/video/texture/texture.ts b/src/video/texture/texture.ts index 2b20021..03f52dd 100644 --- a/src/video/texture/texture.ts +++ b/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; } diff --git a/src/video/utils/texture.ts b/src/video/utils/texture.ts index 0fc5957..ae1cdaf 100644 --- a/src/video/utils/texture.ts +++ b/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"); }