render-textures
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseRender 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: , , , ,
Related skills: ../sprites-and-images/SKILL.md, ../loading-assets/SKILL.md, ../cameras/SKILL.md
src/gameobjects/rendertexture/src/textures/DynamicTexture.jssrc/gameobjects/stamp/src/textures/typedefs/StampConfig.jssrc/textures/typedefs/CaptureConfig.js在Phaser 4中将游戏对象绘制到离屏纹理——包括RenderTexture游戏对象、用于共享纹理的DynamicTexture、Stamp辅助工具、命令缓冲区渲染、快照、程序化生成以及小地图模式。
核心源码路径: , , , ,
相关技能: ../sprites-and-images/SKILL.md, ../loading-assets/SKILL.md, ../cameras/SKILL.md
src/gameobjects/rendertexture/src/textures/DynamicTexture.jssrc/gameobjects/stamp/src/textures/typedefs/StampConfig.jssrc/textures/typedefs/CaptureConfig.jsQuick 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:
| RenderTexture | DynamicTexture | |
|---|---|---|
| What it is | Image game object + auto-created DynamicTexture | Texture in the Texture Manager |
| Created via | | |
| Visible on its own | Yes (it extends Image) | No (must be assigned to a game object) |
| Shared across objects | Possible via | Yes, by key |
| Cross-scene use | No (belongs to one Scene) | Yes (textures are global) |
| Has position/scale/alpha | Yes (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 , , , , , all delegate to its underlying (a DynamicTexture).
draw()stamp()fill()clear()erase()snapshot()this.textureOrigin 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将纹理绘制分为两个层级:
| RenderTexture | DynamicTexture | |
|---|---|---|
| 类型 | Image游戏对象 + 自动创建的DynamicTexture | 纹理管理器中的纹理 |
| 创建方式 | | |
| 自身可见性 | 是(继承自Image) | 否(必须分配给游戏对象才能显示) |
| 跨对象共享 | 可通过 | 是,通过纹理键共享 |
| 跨场景使用 | 否(属于单个场景) | 是(纹理是全局的) |
| 拥有位置/缩放/透明度属性 | 是(具备Image的所有组件) | 否(它是纹理,不是游戏对象) |
适用场景:
- 当需要单个可绘制的可见表面(如画布、轨迹效果、合成精灵)时,使用RenderTexture。
- 当多个游戏对象共享同一生成纹理,或需要用于遮罩/着色器的纹理,或需要跨场景访问时,使用DynamicTexture。
RenderTexture是一个轻量代理。、、、、、等方法都会委托给其底层的(一个DynamicTexture)。
draw()stamp()fill()clear()erase()snapshot()this.texture原点注意: RenderTexture继承自Image,因此默认原点为(0.5, 0.5)。如果需要左上角定位(全屏或小地图RT常用),请调用。
rt.setOrigin(0, 0)The Command Buffer (v4 Architecture)
命令缓冲区(v4架构)
In Phaser 4, drawing calls (, , , , , , ) do not execute immediately. They push commands into a array. You must call to flush and execute the buffer.
drawstampfillcleareraserepeatcapturecommandBuffer.render()js
rt.clear();
rt.fill(0x000000);
rt.draw(sprite, 128, 128);
rt.render(); // REQUIRED -- nothing appears without thisFor RenderTexture game objects, the property controls automatic rendering:
renderMode| Mode | Behavior |
|---|---|
| Draws the texture contents to the frame each tick. You call |
| Calls |
| Calls |
js
rt.setRenderMode('all'); // auto-render + display every frame
rt.setRenderMode('all', true); // same, plus preserve the command buffer在Phaser 4中,绘制调用(、、、、、、)不会立即执行。它们会将命令推入数组。必须调用来刷新并执行缓冲区中的命令。
drawstampfillcleareraserepeatcapturecommandBuffer.render()js
rt.clear();
rt.fill(0x000000);
rt.draw(sprite, 128, 128);
rt.render(); // 必须调用——不执行此操作则不会显示任何内容对于RenderTexture游戏对象,属性控制自动渲染行为:
renderMode| 模式 | 行为 |
|---|---|
| 每帧将纹理内容绘制到画面。内容变化时需手动调用 |
| 每帧自动调用 |
| 每帧调用 |
js
rt.setRenderMode('all'); // 自动渲染 + 每帧显示
rt.setRenderMode('all', true); // 同上,且保留命令缓冲区Preserve Mode
保留模式
By default the command buffer clears after . Call to keep commands between renders, so the same drawing replays each frame:
render()preserve(true)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游戏对象
Stampthis.add.stamp(x, y, texture, frame)DefaultStampNodesStampthis.add.stamp(x, y, texture, frame)DefaultStampNodesThe stamp()
Method vs the Stamp Game Object
stamp()stamp()
方法与Stamp游戏对象的区别
stamp()These are different things:
- -- a method on RenderTexture/DynamicTexture that draws a texture frame to the surface with transform options (alpha, tint, angle, scale, origin, blendMode).
rt.stamp(key, frame, x, y, config) - -- a factory that creates a Stamp game object added to the Scene display list.
this.add.stamp(x, y, texture, frame)
这是两个不同的概念:
- -- RenderTexture/DynamicTexture的方法,可通过变换选项(透明度、色调、角度、缩放、原点、混合模式)将纹理帧绘制到表面。
rt.stamp(key, frame, x, y, config) - -- 创建Stamp游戏对象并添加到场景显示列表的工厂方法。
this.add.stamp(x, y, texture, frame)
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 method accepts: renderable game objects, Groups, Containers, Display Lists, other RenderTextures/DynamicTextures, Texture Frames, texture key strings, or arrays of any of these.
draw()Note: and parameters on only apply to Texture Frames/strings. Game objects use their own alpha and tint when drawn.
alphatintdraw()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()注意:方法中的和参数仅适用于纹理帧/字符串。绘制游戏对象时,会使用对象自身的透明度和色调。
draw()alphatintStamping Textures with Config
带配置的纹理图章
The method draws a texture frame with full transform control. The frame is centered on the x/y position by default (origin 0.5).
stamp()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()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 method draws a game object with temporary property overrides, restoring originals afterward:
capture()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 usersFor 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 keyedjs
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' modejs
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 property that controls how game objects are positioned when drawn. Scroll, zoom, and rotate this camera to transform drawn content. Note: ignores the camera; only and game object rendering respect it.
.camerastamp()draw()js
rt.camera.setScroll(100, 50);
rt.camera.setZoom(2);
rt.draw(sprite); // sprite drawn with camera transform applied
rt.render();RenderTexture和DynamicTexture都有属性,用于控制绘制游戏对象时的位置。滚动、缩放和旋转此相机可变换绘制内容。注意:会忽略相机;只有和游戏对象渲染会遵循相机设置。
.camerastamp()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)
| Method | Signature | Description |
|---|---|---|
| | Draw game objects, textures, groups, etc. |
| | Draw with temporary property overrides |
| | Stamp a texture frame with transform |
| | Draw using ERASE blend mode |
| | Fill with color |
| | Clear to transparent |
| | Tile a texture as fill pattern |
| | Flush the command buffer |
| | Keep command buffer between renders |
| | Insert callback into command buffer |
| | Resize (erases content) |
| | Register in Texture Manager |
| | Set 'render', 'redraw', or 'all' |
| | Full snapshot to Image |
| | Area snapshot |
| | Single pixel to Color |
| 方法 | 签名 | 描述 |
|---|---|---|
| | 绘制游戏对象、纹理、组等 |
| | 临时覆盖属性进行绘制 |
| | 带变换的纹理帧图章绘制 |
| | 使用ERASE混合模式绘制 |
| | 颜色填充 |
| | 清空为透明 |
| | 将纹理平铺为填充图案 |
| | 刷新命令缓冲区 |
| | 在渲染之间保留命令缓冲区 |
| | 向命令缓冲区插入回调 |
| | 调整大小(会清除内容) |
| | 在纹理管理器中注册 |
| | 设置'render'、'redraw'或'all'模式 |
| | 全纹理快照为Image |
| | 指定区域快照 |
| | 单个像素快照为Color |
DynamicTexture (extends Texture)
DynamicTexture(继承自Texture)
Same drawing methods as RenderTexture (, , , , , , , , , , , , ), plus:
drawstamperasefillclearrepeatcapturerenderpreservecallbacksnapshotsnapshotAreasnapshotPixel| Method/Property | Description |
|---|---|
| Resize the texture |
| Internal Camera for draw positioning |
| Array of pending draw commands |
| WebGL DrawingContext with framebuffer |
| Returns the underlying WebGLTextureWrapper |
拥有与RenderTexture相同的绘制方法(、、、、、、、、、、、、),此外还有:
drawstamperasefillclearrepeatcapturerenderpreservecallbacksnapshotsnapshotAreasnapshotPixel| 方法/属性 | 描述 |
|---|---|
| 调整纹理大小 |
| 用于绘制定位的内部相机 |
| 待处理绘制命令的数组 |
| 带帧缓冲区的WebGL绘图上下文 |
| 返回底层的WebGLTextureWrapper |
StampConfig (for stamp()
config parameter)
stamp()StampConfig(stamp()
的配置参数)
stamp()| Property | Default | Description |
|---|---|---|
| 1 | Alpha value |
| 0xffffff | Tint color (WebGL only) |
| 0 | Degrees (overrides rotation if non-zero) |
| 0 | Radians |
| 1 | Uniform scale |
| 1 | Per-axis scale (overrides |
| 0.5 | Origin point |
| 0 | Blend mode |
| 属性 | 默认值 | 描述 |
|---|---|---|
| 1 | 透明度值 |
| 0xffffff | 色调颜色(仅WebGL) |
| 0 | 角度(非零时优先级高于rotation) |
| 0 | 弧度 |
| 1 | 统一缩放 |
| 1 | 单轴缩放(覆盖 |
| 0.5 | 原点 |
| 0 | 混合模式 |
CaptureConfig (for capture()
config parameter)
capture()CaptureConfig(capture()
的配置参数)
capture()| Property | Description |
|---|---|
| |
| Camera override for rendering |
| Override game object properties temporarily |
| Scale overrides |
| Additional overrides |
| 属性 | 描述 |
|---|---|
| |
| 渲染用的相机覆盖 |
| 临时覆盖游戏对象属性 |
| 缩放覆盖 |
| 其他覆盖属性 |
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 256x256js
this.add.renderTexture(x, y, width?, height?) // 默认32x32
this.add.stamp(x, y, texture, frame?)
this.textures.addDynamicTexture(key, width?, height?, forceEven?) // 默认256x256Gotchas
注意事项
-
Must call. In Phaser 4, drawing methods buffer commands. Nothing appears until
render()is called (unless usingrender()orrenderMode: 'all').'redraw' -
Cannot draw to itself. A DynamicTexture/RenderTexture silently skips entries that reference itself.
-
Command buffer clears after render. Callbefore drawing if you need the same commands to replay each frame.
preserve(true) -
ignores the internal camera. Only game objects drawn via
stamp()ordraw()respect thecapture()property. Texture stamps are positioned absolutely..camera -
Default sizes differ. RenderTexture defaults to 32x32. DynamicTexture defaults to 256x256.
-
rounds dimensions up. By default, width/height are rounded to even numbers for rendering quality. Pass
forceEvenas the last argument if you need exact odd dimensions.false -
Snapshots are expensive. They use(WebGL) which blocks the GPU pipeline. Avoid per-frame snapshots.
readPixelsis cheaper than fullsnapshotPixel.snapshot -
WebGL1 has no anti-aliasing on framebuffers. Shapes and Graphics drawn to a RenderTexture may have jagged edges. Use pre-rendered sprite textures instead.
-
erases content. Resizing destroys and recreates the framebuffer.
resize() -
renames, does not copy. Calling
saveTextureassigns 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.saveTexture(key) -
alpha/tint params only affect Texture Frames. When drawing game objects, they use their own alpha and tint values. The
draw()andalphaparameters ontintonly apply when drawing texture strings or Frame instances.draw() -
WebGL context loss. DynamicTexture contents are lost on context loss. Listen for theevent to redraw.
restorewebgl -
Groups/Containers: x, y offset is additive. When drawing a Group or Container with, 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.
rt.draw(group, x, y)
-
必须调用:在Phaser 4中,绘制方法会缓冲命令。除非使用
render()或renderMode: 'all',否则不调用'redraw'就不会显示任何内容。render() -
无法自绘:DynamicTexture/RenderTexture会静默跳过引用自身的绘制条目。
-
命令缓冲区在渲染后清空:如果需要相同命令在每帧重复执行,请在绘制前调用。
preserve(true) -
忽略内部相机:只有通过
stamp()或draw()绘制的游戏对象会遵循capture()属性。纹理图章采用绝对定位。.camera -
默认尺寸不同:RenderTexture默认尺寸为32x32,DynamicTexture默认尺寸为256x256。
-
会将尺寸向上取整为偶数:默认情况下,宽度/高度会被取整为偶数以保证渲染质量。如果需要精确的奇数尺寸,请在最后一个参数传入
forceEven。false -
快照开销大:快照使用(WebGL),会阻塞GPU管线。避免每帧执行快照。
readPixels比全量snapshotPixel开销更低。snapshot -
WebGL1的帧缓冲区无抗锯齿:绘制到RenderTexture的形状和图形可能会有锯齿边缘。建议使用预渲染的精灵纹理替代。
-
会清除内容:调整大小会销毁并重新创建帧缓冲区。
resize() -
是重命名,而非复制:调用
saveTexture会将DynamicTexture以该键注册到纹理管理器。再次调用不同键会重命名它。如果未保存就销毁RenderTexture,纹理也会被销毁。saveTexture(key) -
的alpha/tint参数仅影响纹理帧:绘制游戏对象时,会使用对象自身的透明度和色调。
draw()的draw()和alpha参数仅在绘制纹理字符串或Frame实例时生效。tint -
WebGL上下文丢失:DynamicTexture的内容会在上下文丢失时丢失。监听事件以重新绘制。
restorewebgl -
组/容器的x、y偏移是累加的:使用绘制组或容器时,x/y偏移会添加到每个子对象的位置上。子对象原位置为(100,50),加上偏移(10,10)后,在纹理中的位置为(110,60)。
rt.draw(group, x, y)
Source File Map
源码文件映射
| File | Description |
|---|---|
| RenderTexture game object (extends Image, proxies to DynamicTexture) |
| |
| WebGL/Canvas render functions for RenderTexture |
| Enum: |
| Core DynamicTexture class (command buffer, drawing, snapshots) |
| Command constants (CLEAR, FILL, STAMP, DRAW, ERASE, etc.) |
| StampConfig typedef for |
| CaptureConfig typedef for |
| Stamp game object (light Image, ignores camera scroll) |
| |
| 文件 | 描述 |
|---|---|
| RenderTexture游戏对象(继承自Image,代理到DynamicTexture) |
| |
| RenderTexture的WebGL/Canvas渲染函数 |
| 枚举: |
| 核心DynamicTexture类(命令缓冲区、绘制、快照) |
| 命令常量(CLEAR、FILL、STAMP、DRAW、ERASE等) |
| |
| |
| Stamp游戏对象(轻量Image,忽略相机滚动) |
| |