render-textures

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Render Textures and Dynamic Textures

RenderTexture与DynamicTexture

Drawing game objects to off-screen textures in Phaser 4 -- RenderTexture game object, DynamicTexture for shared textures, the Stamp helper, command-buffer rendering, snapshots, procedural generation, and minimap patterns.
Key source paths:
src/gameobjects/rendertexture/
,
src/textures/DynamicTexture.js
,
src/gameobjects/stamp/
,
src/textures/typedefs/StampConfig.js
,
src/textures/typedefs/CaptureConfig.js
Related skills: ../sprites-and-images/SKILL.md, ../loading-assets/SKILL.md, ../cameras/SKILL.md
在Phaser 4中将游戏对象绘制到离屏纹理——包括RenderTexture游戏对象、用于共享纹理的DynamicTexture、Stamp辅助工具、命令缓冲区渲染、快照、程序化生成以及小地图模式。
核心源码路径:
src/gameobjects/rendertexture/
,
src/textures/DynamicTexture.js
,
src/gameobjects/stamp/
,
src/textures/typedefs/StampConfig.js
,
src/textures/typedefs/CaptureConfig.js
相关技能: ../sprites-and-images/SKILL.md, ../loading-assets/SKILL.md, ../cameras/SKILL.md

Quick Start

快速入门

js
// In a Scene's create() method:

// 1. RenderTexture -- a visible game object with its own DynamicTexture
const rt = this.add.renderTexture(400, 300, 256, 256);
rt.draw('player', 128, 128);          // draw a texture by key at center
rt.fill(0x222244, 0.5);               // semi-transparent fill
rt.render();                           // flush the command buffer

// 2. DynamicTexture -- a shared texture in the Texture Manager
const dt = this.textures.addDynamicTexture('composite', 512, 512);
dt.stamp('coin', null, 64, 64, { scale: 2, angle: 45 });
dt.render();
this.add.image(400, 300, 'composite'); // any game object can use it

// 3. Stamp game object -- lightweight Image that ignores camera scroll
const hud = this.add.stamp(10, 10, 'heart');
js
// 在场景的create()方法中:

// 1. RenderTexture -- 自带DynamicTexture的可见游戏对象
const rt = this.add.renderTexture(400, 300, 256, 256);
rt.draw('player', 128, 128);          // 按纹理键在中心绘制纹理
rt.fill(0x222244, 0.5);               // 半透明填充
rt.render();                           // 刷新命令缓冲区

// 2. DynamicTexture -- 纹理管理器中的共享纹理
const dt = this.textures.addDynamicTexture('composite', 512, 512);
dt.stamp('coin', null, 64, 64, { scale: 2, angle: 45 });
dt.render();
this.add.image(400, 300, 'composite'); // 任何游戏对象都可使用该纹理

// 3. Stamp游戏对象 -- 忽略相机滚动的轻量级Image
const hud = this.add.stamp(10, 10, 'heart');

Core Concepts

核心概念

RenderTexture vs DynamicTexture

RenderTexture与DynamicTexture对比

Phaser 4 splits texture-drawing into two layers:
RenderTextureDynamicTexture
What it isImage game object + auto-created DynamicTextureTexture in the Texture Manager
Created via
this.add.renderTexture(x, y, w, h)
this.textures.addDynamicTexture(key, w, h)
Visible on its ownYes (it extends Image)No (must be assigned to a game object)
Shared across objectsPossible via
saveTexture(key)
Yes, by key
Cross-scene useNo (belongs to one Scene)Yes (textures are global)
Has position/scale/alphaYes (all Image components)No (it is a Texture, not a GameObject)
When to use which:
  • Use RenderTexture when you need a single visible surface you draw onto (paint canvas, trail effect, composite sprite).
  • Use DynamicTexture when many game objects share the same generated texture, or you need a texture for masks/shaders, or you need cross-scene access.
RenderTexture is a thin proxy. Methods like
draw()
,
stamp()
,
fill()
,
clear()
,
erase()
,
snapshot()
all delegate to its underlying
this.texture
(a DynamicTexture).
Origin note: RenderTexture extends Image, so its origin defaults to (0.5, 0.5). If you want top-left positioning (common for full-screen or minimap RTs), call
rt.setOrigin(0, 0)
.
Phaser 4将纹理绘制分为两个层级:
RenderTextureDynamicTexture
类型Image游戏对象 + 自动创建的DynamicTexture纹理管理器中的纹理
创建方式
this.add.renderTexture(x, y, w, h)
this.textures.addDynamicTexture(key, w, h)
自身可见性是(继承自Image)否(必须分配给游戏对象才能显示)
跨对象共享可通过
saveTexture(key)
实现
是,通过纹理键共享
跨场景使用否(属于单个场景)是(纹理是全局的)
拥有位置/缩放/透明度属性是(具备Image的所有组件)否(它是纹理,不是游戏对象)
适用场景:
  • 当需要单个可绘制的可见表面(如画布、轨迹效果、合成精灵)时,使用RenderTexture
  • 当多个游戏对象共享同一生成纹理,或需要用于遮罩/着色器的纹理,或需要跨场景访问时,使用DynamicTexture
RenderTexture是一个轻量代理。
draw()
stamp()
fill()
clear()
erase()
snapshot()
等方法都会委托给其底层的
this.texture
(一个DynamicTexture)。
原点注意: RenderTexture继承自Image,因此默认原点为(0.5, 0.5)。如果需要左上角定位(全屏或小地图RT常用),请调用
rt.setOrigin(0, 0)

The Command Buffer (v4 Architecture)

命令缓冲区(v4架构)

In Phaser 4, drawing calls (
draw
,
stamp
,
fill
,
clear
,
erase
,
repeat
,
capture
) do not execute immediately. They push commands into a
commandBuffer
array. You must call
.render()
to flush and execute the buffer.
js
rt.clear();
rt.fill(0x000000);
rt.draw(sprite, 128, 128);
rt.render();  // REQUIRED -- nothing appears without this
For RenderTexture game objects, the
renderMode
property controls automatic rendering:
ModeBehavior
'render'
(default)
Draws the texture contents to the frame each tick. You call
render()
manually when content changes.
'redraw'
Calls
render()
automatically every frame but does NOT display itself. Useful for textures reused by other objects.
'all'
Calls
render()
every frame AND draws itself to the frame.
js
rt.setRenderMode('all');       // auto-render + display every frame
rt.setRenderMode('all', true); // same, plus preserve the command buffer
在Phaser 4中,绘制调用(
draw
stamp
fill
clear
erase
repeat
capture
不会立即执行。它们会将命令推入
commandBuffer
数组。必须调用
.render()
来刷新并执行缓冲区中的命令。
js
rt.clear();
rt.fill(0x000000);
rt.draw(sprite, 128, 128);
rt.render();  // 必须调用——不执行此操作则不会显示任何内容
对于RenderTexture游戏对象,
renderMode
属性控制自动渲染行为:
模式行为
'render'
(默认)
每帧将纹理内容绘制到画面。内容变化时需手动调用
render()
'redraw'
每帧自动调用
render()
但不显示自身。适用于被其他对象复用的纹理。
'all'
每帧调用
render()
并将自身绘制到画面。
js
rt.setRenderMode('all');       // 自动渲染 + 每帧显示
rt.setRenderMode('all', true); // 同上,且保留命令缓冲区

Preserve Mode

保留模式

By default the command buffer clears after
render()
. Call
preserve(true)
to keep commands between renders, so the same drawing replays each frame:
js
rt.preserve(true);
rt.clear();
rt.draw(sprite);
// On every subsequent render(), clear + draw will repeat
默认情况下,命令缓冲区会在
render()
后清空。调用
preserve(true)
可在渲染之间保留命令,使相同的绘制操作在每帧重复执行:
js
rt.preserve(true);
rt.clear();
rt.draw(sprite);
// 后续每次render()时,都会重复执行clear + draw操作

Stamp Game Object

Stamp游戏对象

Stamp
(
this.add.stamp(x, y, texture, frame)
) is a lightweight Image subclass that ignores camera scroll and transform during rendering. It is used internally by DynamicTexture for drawing operations and is also useful for HUD elements. It extends Image with custom render nodes (
DefaultStampNodes
).
Stamp
this.add.stamp(x, y, texture, frame)
)是轻量级Image子类,渲染时会忽略相机滚动和变换。它被DynamicTexture内部用于绘制操作,也适用于HUD元素。它继承自Image并带有自定义渲染节点(
DefaultStampNodes
)。

The
stamp()
Method vs the Stamp Game Object

stamp()
方法与Stamp游戏对象的区别

These are different things:
  • rt.stamp(key, frame, x, y, config)
    -- a method on RenderTexture/DynamicTexture that draws a texture frame to the surface with transform options (alpha, tint, angle, scale, origin, blendMode).
  • this.add.stamp(x, y, texture, frame)
    -- a factory that creates a Stamp game object added to the Scene display list.
这是两个不同的概念:
  • rt.stamp(key, frame, x, y, config)
    -- RenderTexture/DynamicTexture的方法,可通过变换选项(透明度、色调、角度、缩放、原点、混合模式)将纹理帧绘制到表面。
  • this.add.stamp(x, y, texture, frame)
    -- 创建Stamp游戏对象并添加到场景显示列表的工厂方法。

Common Patterns

常见模式

Drawing Sprites and Game Objects

绘制精灵与游戏对象

js
const rt = this.add.renderTexture(0, 0, 800, 600);

// Single game object at an offset
rt.draw(sprite, 100, 100);

// Array of objects
rt.draw([sprite1, sprite2, sprite3]);

// Group or Container (only visible children are drawn)
rt.draw(enemyGroup);
rt.draw(myContainer, 50, 50);  // offset added to children positions

// Entire Scene display list
rt.draw(this.children);

// Texture by string key
rt.draw('explosion', 200, 200);

// Don't forget to flush
rt.render();
The
draw()
method accepts: renderable game objects, Groups, Containers, Display Lists, other RenderTextures/DynamicTextures, Texture Frames, texture key strings, or arrays of any of these.
Note:
alpha
and
tint
parameters on
draw()
only apply to Texture Frames/strings. Game objects use their own alpha and tint when drawn.
js
const rt = this.add.renderTexture(0, 0, 800, 600);

// 在偏移位置绘制单个游戏对象
rt.draw(sprite, 100, 100);

// 绘制对象数组
rt.draw([sprite1, sprite2, sprite3]);

// 绘制组或容器(仅绘制可见子对象)
rt.draw(enemyGroup);
rt.draw(myContainer, 50, 50);  // 偏移量会添加到子对象的位置上

// 绘制整个场景显示列表
rt.draw(this.children);

// 按字符串键绘制纹理
rt.draw('explosion', 200, 200);

// 不要忘记刷新缓冲区
rt.render();
draw()
方法接受:可渲染游戏对象、组、容器、显示列表、其他RenderTexture/DynamicTexture、纹理帧、纹理键字符串,或以上任意类型的数组。
注意:
draw()
方法中的
alpha
tint
参数仅适用于纹理帧/字符串。绘制游戏对象时,会使用对象自身的透明度和色调。

Stamping Textures with Config

带配置的纹理图章

The
stamp()
method draws a texture frame with full transform control. The frame is centered on the x/y position by default (origin 0.5).
js
rt.stamp('bullet', null, 100, 100, {
    alpha: 0.8,
    tint: 0xff0000,
    angle: 45,          // degrees (takes precedence over rotation)
    scale: 2,           // uniform scale
    scaleX: 1.5,        // overrides scale for X
    scaleY: 0.5,        // overrides scale for Y
    originX: 0,         // top-left origin
    originY: 0,
    blendMode: 0
});
rt.render();
stamp()
方法可通过完整的变换控制绘制纹理帧。默认情况下,帧以x/y位置为中心(原点0.5)。
js
rt.stamp('bullet', null, 100, 100, {
    alpha: 0.8,
    tint: 0xff0000,
    angle: 45,          // 角度(优先级高于rotation)
    scale: 2,           // 统一缩放
    scaleX: 1.5,        // 覆盖X轴缩放
    scaleY: 0.5,        // 覆盖Y轴缩放
    originX: 0,         // 左上角原点
    originY: 0,
    blendMode: 0
});
rt.render();

Capture -- Drawing with Overrides (v4)

Capture——带覆盖的绘制(v4)

The
capture()
method draws a game object with temporary property overrides, restoring originals afterward:
js
rt.capture(player, {
    x: 64,
    y: 64,
    scale: 0.5,
    alpha: 0.8,
    rotation: Math.PI / 4,
    transform: 'world',    // 'local', 'world', or a TransformMatrix
    camera: someCamera      // optional camera override
});
rt.render();
This is useful for drawing an object at a different position/scale without modifying the object itself.
capture()
方法可临时覆盖游戏对象的属性进行绘制,之后恢复原属性:
js
rt.capture(player, {
    x: 64,
    y: 64,
    scale: 0.5,
    alpha: 0.8,
    rotation: Math.PI / 4,
    transform: 'world',    // 'local'、'world'或TransformMatrix
    camera: someCamera      // 可选的相机覆盖
});
rt.render();
这适用于在不修改对象本身的情况下,以不同位置/缩放绘制对象。

Filling and Clearing

填充与清空

js
// Fill entire texture with color
rt.fill(0xff0000);          // solid red
rt.fill(0x000000, 0.5);     // semi-transparent black

// Fill a region
rt.fill(0x00ff00, 1, 10, 10, 100, 50);  // green rect at (10,10) size 100x50

// Clear everything (transparent)
rt.clear();

// Clear a region
rt.clear(10, 10, 100, 50);

rt.render();
js
// 用颜色填充整个纹理
rt.fill(0xff0000);          // 纯红色
rt.fill(0x000000, 0.5);     // 半透明黑色

// 填充指定区域
rt.fill(0x00ff00, 1, 10, 10, 100, 50);  // 在(10,10)位置绘制100x50的绿色矩形

// 清空所有内容(透明)
rt.clear();

// 清空指定区域
rt.clear(10, 10, 100, 50);

rt.render();

Erasing

擦除

Erase uses ERASE blend mode to cut holes in the texture:
js
rt.fill(0xffffff);           // white background
rt.erase(circleSprite, 100, 100);  // punch a hole shaped like the sprite
rt.render();
擦除操作使用ERASE混合模式在纹理上切割出孔洞:
js
rt.fill(0xffffff);           // 白色背景
rt.erase(circleSprite, 100, 100);  // 按精灵形状打出一个孔洞
rt.render();

Repeating / Tiling a Texture

重复/平铺纹理

js
// Fill the entire RenderTexture with a tiled pattern
rt.repeat('grass', null);                        // tile the whole surface
rt.repeat('brick', null, 0, 0, 256, 128);       // tile a specific region
rt.repeat('tile', 'frame2', 0, 0, 512, 512, {
    tileScaleX: 2,
    tileScaleY: 2,
    tilePositionX: 16,
    alpha: 0.8
});
rt.render();
js
// 用平铺图案填充整个RenderTexture
rt.repeat('grass', null);                        // 平铺整个表面
rt.repeat('brick', null, 0, 0, 256, 128);       // 平铺指定区域
rt.repeat('tile', 'frame2', 0, 0, 512, 512, {
    tileScaleX: 2,
    tileScaleY: 2,
    tilePositionX: 16,
    alpha: 0.8
});
rt.render();

Snapshots (Pixel Capture)

快照(像素捕获)

Snapshots read pixel data from the framebuffer. They are expensive and blocking -- use sparingly.
js
// Full texture snapshot -- callback receives an HTMLImageElement
rt.snapshot(function (image) {
    document.body.appendChild(image);  // or use as texture source
});

// Area snapshot
rt.snapshotArea(0, 0, 128, 128, function (image) {
    // image is 128x128 region from top-left
}, 'image/jpeg', 0.8);

// Single pixel -- callback receives a Phaser.Display.Color
rt.snapshotPixel(64, 64, function (color) {
    console.log(color.r, color.g, color.b, color.a);
});
快照从帧缓冲区读取像素数据,开销大且会阻塞进程——请谨慎使用。
js
// 全纹理快照——回调函数接收HTMLImageElement
rt.snapshot(function (image) {
    document.body.appendChild(image);  // 或用作纹理源
});

// 指定区域快照
rt.snapshotArea(0, 0, 128, 128, function (image) {
    // image是左上角128x128的区域
}, 'image/jpeg', 0.8);

// 单个像素——回调函数接收Phaser.Display.Color
rt.snapshotPixel(64, 64, function (color) {
    console.log(color.r, color.g, color.b, color.a);
});

Using as a Texture Source for Other Objects

作为其他对象的纹理源

js
const rt = this.add.renderTexture(0, 0, 256, 256);
rt.draw(complexScene);
rt.render();

// Register in the Texture Manager under a key
rt.saveTexture('composited');

// Now any game object can use it
this.add.image(400, 300, 'composited');
this.add.sprite(100, 100, 'composited');

// Updates to the RenderTexture automatically reflect on all users
For DynamicTexture, the key is set at creation time:
js
const dt = this.textures.addDynamicTexture('terrain', 1024, 1024);
dt.repeat('grass', null);
dt.render();
this.add.image(512, 512, 'terrain');  // already keyed
js
const rt = this.add.renderTexture(0, 0, 256, 256);
rt.draw(complexScene);
rt.render();

// 在纹理管理器中注册为指定键
rt.saveTexture('composited');

// 现在任何游戏对象都可使用该纹理
this.add.image(400, 300, 'composited');
this.add.sprite(100, 100, 'composited');

// RenderTexture的更新会自动反映到所有使用它的对象上
对于DynamicTexture,键在创建时设置:
js
const dt = this.textures.addDynamicTexture('terrain', 1024, 1024);
dt.repeat('grass', null);
dt.render();
this.add.image(512, 512, 'terrain');  // 已注册键,可直接使用

Procedural Generation

程序化生成

js
const dt = this.textures.addDynamicTexture('starfield', 800, 600);
dt.fill(0x000011);
for (let i = 0; i < 200; i++) {
    const x = Phaser.Math.Between(0, 800);
    const y = Phaser.Math.Between(0, 600);
    const brightness = Phaser.Math.FloatBetween(0.3, 1);
    dt.stamp('star', null, x, y, { alpha: brightness, scale: Phaser.Math.FloatBetween(0.5, 1.5) });
}
dt.render();
this.add.image(400, 300, 'starfield');
js
const dt = this.textures.addDynamicTexture('starfield', 800, 600);
dt.fill(0x000011);
for (let i = 0; i < 200; i++) {
    const x = Phaser.Math.Between(0, 800);
    const y = Phaser.Math.Between(0, 600);
    const brightness = Phaser.Math.FloatBetween(0.3, 1);
    dt.stamp('star', null, x, y, { alpha: brightness, scale: Phaser.Math.FloatBetween(0.5, 1.5) });
}
dt.render();
this.add.image(400, 300, 'starfield');

Minimap Pattern

小地图模式

js
create() {
    // Small RenderTexture as minimap
    this.minimap = this.add.renderTexture(700, 50, 150, 100);
    this.minimap.setScrollFactor(0);  // fixed to camera
    this.minimap.setRenderMode('all'); // auto-render every frame
    this.minimap.preserve(true);
}

// In update or a callback:
this.minimap.clear();
this.minimap.fill(0x111111);
// Draw scaled-down versions of world objects
this.minimap.capture(player, { x: px * 0.1, y: py * 0.1, scale: 0.1 });
// render() is automatic in 'all' mode
js
create() {
    // 用小型RenderTexture作为小地图
    this.minimap = this.add.renderTexture(700, 50, 150, 100);
    this.minimap.setScrollFactor(0);  // 固定在相机上
    this.minimap.setRenderMode('all'); // 每帧自动渲染
    this.minimap.preserve(true);
}

// 在update或回调函数中:
this.minimap.clear();
this.minimap.fill(0x111111);
// 绘制按比例缩小的世界对象
this.minimap.capture(player, { x: px * 0.1, y: py * 0.1, scale: 0.1 });
// 'all'模式下会自动执行render()

Callbacks in the Command Buffer

命令缓冲区中的回调

Insert logic between draw commands that executes during
render()
:
js
rt.clear();
rt.draw(background);
rt.callback(() => {
    // Runs during render, after background is drawn
    sprite.setTint(0xff0000);
});
rt.draw(sprite);
rt.callback(() => {
    sprite.setTint(0xffffff);  // restore after drawing
});
rt.render();
在绘制命令之间插入逻辑,会在
render()
期间执行:
js
rt.clear();
rt.draw(background);
rt.callback(() => {
    // 在render期间执行,绘制背景后运行
    sprite.setTint(0xff0000);
});
rt.draw(sprite);
rt.callback(() => {
    sprite.setTint(0xffffff);  // 绘制后恢复
});
rt.render();

Resizing

调整大小

js
// Resize erases all content and recreates the framebuffer
rt.resize(512, 512);

// Optional: disable force-even rounding
rt.resize(513, 513, false);
js
// 调整大小会清除所有内容并重新创建帧缓冲区
rt.resize(512, 512);

// 可选:禁用强制偶数取整
rt.resize(513, 513, false);

Internal Camera

内部相机

Both RenderTexture and DynamicTexture have a
.camera
property that controls how game objects are positioned when drawn. Scroll, zoom, and rotate this camera to transform drawn content. Note:
stamp()
ignores the camera; only
draw()
and game object rendering respect it.
js
rt.camera.setScroll(100, 50);
rt.camera.setZoom(2);
rt.draw(sprite);  // sprite drawn with camera transform applied
rt.render();
RenderTexture和DynamicTexture都有
.camera
属性,用于控制绘制游戏对象时的位置。滚动、缩放和旋转此相机可变换绘制内容。注意:
stamp()
会忽略相机;只有
draw()
和游戏对象渲染会遵循相机设置。
js
rt.camera.setScroll(100, 50);
rt.camera.setZoom(2);
rt.draw(sprite);  // 绘制精灵时会应用相机变换
rt.render();

API Quick Reference

API快速参考

RenderTexture (extends Image)

RenderTexture(继承自Image)

MethodSignatureDescription
draw
(entries, x?, y?, alpha?, tint?)
Draw game objects, textures, groups, etc.
capture
(entry, config)
Draw with temporary property overrides
stamp
(key, frame?, x?, y?, config?)
Stamp a texture frame with transform
erase
(entries, x?, y?)
Draw using ERASE blend mode
fill
(rgb, alpha?, x?, y?, w?, h?)
Fill with color
clear
(x?, y?, w?, h?)
Clear to transparent
repeat
(key, frame?, x?, y?, w?, h?, config?)
Tile a texture as fill pattern
render
()
Flush the command buffer
preserve
(bool)
Keep command buffer between renders
callback
(fn)
Insert callback into command buffer
resize
(w, h?, forceEven?)
Resize (erases content)
saveTexture
(key)
Register in Texture Manager
setRenderMode
(mode, preserve?)
Set 'render', 'redraw', or 'all'
snapshot
(callback, type?, quality?)
Full snapshot to Image
snapshotArea
(x, y, w, h, callback, type?, quality?)
Area snapshot
snapshotPixel
(x, y, callback)
Single pixel to Color
方法签名描述
draw
(entries, x?, y?, alpha?, tint?)
绘制游戏对象、纹理、组等
capture
(entry, config)
临时覆盖属性进行绘制
stamp
(key, frame?, x?, y?, config?)
带变换的纹理帧图章绘制
erase
(entries, x?, y?)
使用ERASE混合模式绘制
fill
(rgb, alpha?, x?, y?, w?, h?)
颜色填充
clear
(x?, y?, w?, h?)
清空为透明
repeat
(key, frame?, x?, y?, w?, h?, config?)
将纹理平铺为填充图案
render
()
刷新命令缓冲区
preserve
(bool)
在渲染之间保留命令缓冲区
callback
(fn)
向命令缓冲区插入回调
resize
(w, h?, forceEven?)
调整大小(会清除内容)
saveTexture
(key)
在纹理管理器中注册
setRenderMode
(mode, preserve?)
设置'render'、'redraw'或'all'模式
snapshot
(callback, type?, quality?)
全纹理快照为Image
snapshotArea
(x, y, w, h, callback, type?, quality?)
指定区域快照
snapshotPixel
(x, y, callback)
单个像素快照为Color

DynamicTexture (extends Texture)

DynamicTexture(继承自Texture)

Same drawing methods as RenderTexture (
draw
,
stamp
,
erase
,
fill
,
clear
,
repeat
,
capture
,
render
,
preserve
,
callback
,
snapshot
,
snapshotArea
,
snapshotPixel
), plus:
Method/PropertyDescription
setSize(w, h?, forceEven?)
Resize the texture
camera
Internal Camera for draw positioning
commandBuffer
Array of pending draw commands
drawingContext
WebGL DrawingContext with framebuffer
getWebGLTexture()
Returns the underlying WebGLTextureWrapper
拥有与RenderTexture相同的绘制方法(
draw
stamp
erase
fill
clear
repeat
capture
render
preserve
callback
snapshot
snapshotArea
snapshotPixel
),此外还有:
方法/属性描述
setSize(w, h?, forceEven?)
调整纹理大小
camera
用于绘制定位的内部相机
commandBuffer
待处理绘制命令的数组
drawingContext
带帧缓冲区的WebGL绘图上下文
getWebGLTexture()
返回底层的WebGLTextureWrapper

StampConfig (for
stamp()
config parameter)

StampConfig(
stamp()
的配置参数)

PropertyDefaultDescription
alpha
1Alpha value
tint
0xffffffTint color (WebGL only)
angle
0Degrees (overrides rotation if non-zero)
rotation
0Radians
scale
1Uniform scale
scaleX
/
scaleY
1Per-axis scale (overrides
scale
)
originX
/
originY
0.5Origin point
blendMode
0Blend mode
属性默认值描述
alpha
1透明度值
tint
0xffffff色调颜色(仅WebGL)
angle
0角度(非零时优先级高于rotation)
rotation
0弧度
scale
1统一缩放
scaleX
/
scaleY
1单轴缩放(覆盖
scale
originX
/
originY
0.5原点
blendMode
0混合模式

CaptureConfig (for
capture()
config parameter)

CaptureConfig(
capture()
的配置参数)

PropertyDescription
transform
'local'
,
'world'
, or a
TransformMatrix
camera
Camera override for rendering
x
,
y
,
alpha
,
tint
,
angle
,
rotation
Override game object properties temporarily
scale
,
scaleX
,
scaleY
Scale overrides
originX
,
originY
,
blendMode
Additional overrides
属性描述
transform
'local'
'world'
TransformMatrix
camera
渲染用的相机覆盖
x
,
y
,
alpha
,
tint
,
angle
,
rotation
临时覆盖游戏对象属性
scale
,
scaleX
,
scaleY
缩放覆盖
originX
,
originY
,
blendMode
其他覆盖属性

Factory Methods

工厂方法

js
this.add.renderTexture(x, y, width?, height?)  // default 32x32
this.add.stamp(x, y, texture, frame?)
this.textures.addDynamicTexture(key, width?, height?, forceEven?)  // default 256x256
js
this.add.renderTexture(x, y, width?, height?)  // 默认32x32
this.add.stamp(x, y, texture, frame?)
this.textures.addDynamicTexture(key, width?, height?, forceEven?)  // 默认256x256

Gotchas

注意事项

  1. Must call
    render()
    .
    In Phaser 4, drawing methods buffer commands. Nothing appears until
    render()
    is called (unless using
    renderMode: 'all'
    or
    'redraw'
    ).
  2. Cannot draw to itself. A DynamicTexture/RenderTexture silently skips entries that reference itself.
  3. Command buffer clears after render. Call
    preserve(true)
    before drawing if you need the same commands to replay each frame.
  4. stamp()
    ignores the internal camera.
    Only game objects drawn via
    draw()
    or
    capture()
    respect the
    .camera
    property. Texture stamps are positioned absolutely.
  5. Default sizes differ. RenderTexture defaults to 32x32. DynamicTexture defaults to 256x256.
  6. forceEven
    rounds dimensions up.
    By default, width/height are rounded to even numbers for rendering quality. Pass
    false
    as the last argument if you need exact odd dimensions.
  7. Snapshots are expensive. They use
    readPixels
    (WebGL) which blocks the GPU pipeline. Avoid per-frame snapshots.
    snapshotPixel
    is cheaper than full
    snapshot
    .
  8. WebGL1 has no anti-aliasing on framebuffers. Shapes and Graphics drawn to a RenderTexture may have jagged edges. Use pre-rendered sprite textures instead.
  9. resize()
    erases content.
    Resizing destroys and recreates the framebuffer.
  10. saveTexture
    renames, does not copy.
    Calling
    saveTexture(key)
    assigns the DynamicTexture to the Texture Manager under that key. Calling it again with a different key renames it. Destroying the RenderTexture without saving first destroys the texture.
  11. draw()
    alpha/tint params only affect Texture Frames.
    When drawing game objects, they use their own alpha and tint values. The
    alpha
    and
    tint
    parameters on
    draw()
    only apply when drawing texture strings or Frame instances.
  12. WebGL context loss. DynamicTexture contents are lost on context loss. Listen for the
    restorewebgl
    event to redraw.
  13. Groups/Containers: x, y offset is additive. When drawing a Group or Container with
    rt.draw(group, x, y)
    , the x/y offset is added to each child's position. Children at (100, 50) drawn with offset (10, 10) appear at (110, 60) in the texture.
  1. 必须调用
    render()
    :在Phaser 4中,绘制方法会缓冲命令。除非使用
    renderMode: 'all'
    'redraw'
    ,否则不调用
    render()
    就不会显示任何内容。
  2. 无法自绘:DynamicTexture/RenderTexture会静默跳过引用自身的绘制条目。
  3. 命令缓冲区在渲染后清空:如果需要相同命令在每帧重复执行,请在绘制前调用
    preserve(true)
  4. stamp()
    忽略内部相机
    :只有通过
    draw()
    capture()
    绘制的游戏对象会遵循
    .camera
    属性。纹理图章采用绝对定位。
  5. 默认尺寸不同:RenderTexture默认尺寸为32x32,DynamicTexture默认尺寸为256x256。
  6. forceEven
    会将尺寸向上取整为偶数
    :默认情况下,宽度/高度会被取整为偶数以保证渲染质量。如果需要精确的奇数尺寸,请在最后一个参数传入
    false
  7. 快照开销大:快照使用
    readPixels
    (WebGL),会阻塞GPU管线。避免每帧执行快照。
    snapshotPixel
    比全量
    snapshot
    开销更低。
  8. WebGL1的帧缓冲区无抗锯齿:绘制到RenderTexture的形状和图形可能会有锯齿边缘。建议使用预渲染的精灵纹理替代。
  9. resize()
    会清除内容
    :调整大小会销毁并重新创建帧缓冲区。
  10. saveTexture
    是重命名,而非复制
    :调用
    saveTexture(key)
    会将DynamicTexture以该键注册到纹理管理器。再次调用不同键会重命名它。如果未保存就销毁RenderTexture,纹理也会被销毁。
  11. draw()
    的alpha/tint参数仅影响纹理帧
    :绘制游戏对象时,会使用对象自身的透明度和色调。
    draw()
    alpha
    tint
    参数仅在绘制纹理字符串或Frame实例时生效。
  12. WebGL上下文丢失:DynamicTexture的内容会在上下文丢失时丢失。监听
    restorewebgl
    事件以重新绘制。
  13. 组/容器的x、y偏移是累加的:使用
    rt.draw(group, x, y)
    绘制组或容器时,x/y偏移会添加到每个子对象的位置上。子对象原位置为(100,50),加上偏移(10,10)后,在纹理中的位置为(110,60)。

Source File Map

源码文件映射

FileDescription
src/gameobjects/rendertexture/RenderTexture.js
RenderTexture game object (extends Image, proxies to DynamicTexture)
src/gameobjects/rendertexture/RenderTextureFactory.js
this.add.renderTexture()
factory registration
src/gameobjects/rendertexture/RenderTextureRender.js
WebGL/Canvas render functions for RenderTexture
src/gameobjects/rendertexture/RenderTextureRenderModes.js
Enum:
RENDER
,
REDRAW
,
ALL
src/textures/DynamicTexture.js
Core DynamicTexture class (command buffer, drawing, snapshots)
src/textures/DynamicTextureCommands.js
Command constants (CLEAR, FILL, STAMP, DRAW, ERASE, etc.)
src/textures/typedefs/StampConfig.js
StampConfig typedef for
stamp()
src/textures/typedefs/CaptureConfig.js
CaptureConfig typedef for
capture()
src/gameobjects/stamp/Stamp.js
Stamp game object (light Image, ignores camera scroll)
src/gameobjects/stamp/StampFactory.js
this.add.stamp()
factory registration
文件描述
src/gameobjects/rendertexture/RenderTexture.js
RenderTexture游戏对象(继承自Image,代理到DynamicTexture)
src/gameobjects/rendertexture/RenderTextureFactory.js
this.add.renderTexture()
工厂注册
src/gameobjects/rendertexture/RenderTextureRender.js
RenderTexture的WebGL/Canvas渲染函数
src/gameobjects/rendertexture/RenderTextureRenderModes.js
枚举:
RENDER
REDRAW
ALL
src/textures/DynamicTexture.js
核心DynamicTexture类(命令缓冲区、绘制、快照)
src/textures/DynamicTextureCommands.js
命令常量(CLEAR、FILL、STAMP、DRAW、ERASE等)
src/textures/typedefs/StampConfig.js
stamp()
的StampConfig类型定义
src/textures/typedefs/CaptureConfig.js
capture()
的CaptureConfig类型定义
src/gameobjects/stamp/Stamp.js
Stamp游戏对象(轻量Image,忽略相机滚动)
src/gameobjects/stamp/StampFactory.js
this.add.stamp()
工厂注册