yq 发布的文章

dragonBones官方只支持到了3.1.但phaser3.6+后大改过。TextureTintPipeline.prototype.batchSprite完全不兼容了。
如今借助AI大模型。1小时搞定,换成过去的话,熟悉接口阅读文档,至少1~3天。

            var TextureTintPipeline = /** @class */ (function (_super) {
            __extends(TextureTintPipeline, _super);
            function TextureTintPipeline(config) {
                var _this = _super.call(this, config) || this;
                _this._tempMatrix1 = new phaser.util.TransformMatrix();
                _this._tempMatrix2 = new phaser.util.TransformMatrix();
                _this._tempMatrix3 = new phaser.util.TransformMatrix();
                return _this;
            }
            TextureTintPipeline.prototype.batchSprite = function (sprite, camera, parentTransformMatrix) {
                // 1. 检查批处理是否已满
                if (this.currentBatch !== null && this.currentBatch.count === this.maxQuadCount) {
                    this.flush();
                }

                this.renderer.pipelines.set(this, sprite);

                // 2. 准备矩阵对象
                var camMatrix = this._tempMatrix1;
                var spriteMatrix = this._tempMatrix2;
                var calcMatrix = this._tempMatrix3;

                var frame = sprite.frame;
                var texture = frame.glTexture;
                var unit = this.setTexture2D(texture);

                // 3. --- 核心修复:矩阵计算 (解决散架问题) ---

                // 第一步:计算 Sprite 自身的局部变换(位移、旋转、缩放)
                spriteMatrix.applyITRSC(
                    sprite.x,
                    sprite.y,
                    sprite.rotation,
                    sprite.scaleX,
                    sprite.scaleY,
                    sprite.skewX,
                    sprite.skewY
                );

                // 第二步:结合父级矩阵(如果有)
                if (parentTransformMatrix) {
                    // 关键点:父矩阵 * 子矩阵 = 最终世界矩阵
                    // 之前你的代码在这里重置了 e/f,导致父级位移失效,这里修正了
                    parentTransformMatrix.multiply(spriteMatrix, calcMatrix);
                } else {
                    calcMatrix.copyFrom(spriteMatrix);
                }

                // 第三步:应用摄像机滚动 (Scroll Factor)
                calcMatrix.e -= camera.scrollX * sprite.scrollFactorX;
                calcMatrix.f -= camera.scrollY * sprite.scrollFactorY;

                // 第四步:应用摄像机变换 (缩放/旋转)
                camMatrix.copyFrom(camera.matrix);
                // 摄像机矩阵 * 物体矩阵
                camMatrix.multiply(calcMatrix, calcMatrix);


                // 4. --- 顶点计算 ---
                var width = frame.width;
                var height = frame.height;
                var x = -sprite.displayOriginX;
                var y = -sprite.displayOriginY;

                // 处理裁剪 (Crop)
                var u0 = frame.u0;
                var v0 = frame.v0;
                var u1 = frame.u1;
                var v1 = frame.v1;

                if (sprite.isCropped) {
                    var crop = sprite._crop;
                    if (crop.flipX !== sprite.flipX || crop.flipY !== sprite.flipY) {
                        frame.updateCropUVs(crop, sprite.flipX, sprite.flipY);
                    }
                    width = crop.width;
                    height = crop.height;
                    u0 = crop.u0;
                    v0 = crop.v0;
                    u1 = crop.u1;
                    v1 = crop.v1;
                }

                if (sprite.flipX) { width *= -1; x += width; }
                if (sprite.flipY) { height *= -1; y += height; }

                var xw = x + width;
                var yh = y + height;

                // 使用计算好的 calcMatrix 转换四个顶点坐标
                var tx0 = calcMatrix.getX(x, y);
                var ty0 = calcMatrix.getY(x, y);
                var tx1 = calcMatrix.getX(x, yh);
                var ty1 = calcMatrix.getY(x, yh);
                var tx2 = calcMatrix.getX(xw, yh);
                var ty2 = calcMatrix.getY(xw, yh);
                var tx3 = calcMatrix.getX(xw, y);
                var ty3 = calcMatrix.getY(xw, y);

                // 5. --- 颜色计算 (解决不显示问题) ---
                // 必须计算 Alpha 和 Tint,否则可能全黑或透明
                var getTint = Phaser.Renderer.WebGL.Utils.getTintAppendFloatAlpha;
                var baseAlpha = camera.alpha * sprite.alpha;

                var tintTL = getTint(sprite.tintTopLeft, baseAlpha);
                var tintTR = getTint(sprite.tintTopRight, baseAlpha);
                var tintBL = getTint(sprite.tintBottomLeft, baseAlpha);
                var tintBR = getTint(sprite.tintBottomRight, baseAlpha);
                var tintEffect = (sprite.isTinted && sprite.tintFill);

                // 像素取整(可选,防止抖动)
                if (camera.roundPixels) {
                    tx0 = Math.round(tx0); ty0 = Math.round(ty0);
                    tx1 = Math.round(tx1); ty1 = Math.round(ty1);
                    tx2 = Math.round(tx2); ty2 = Math.round(ty2);
                    tx3 = Math.round(tx3); ty3 = Math.round(ty3);
                }

                // 6. --- 提交绘制 ---
                // 恢复标准的 batchQuad 调用,只传 u0, v0, u1, v1
                this.batchQuad(
                    sprite,
                    tx0, ty0,
                    tx1, ty1,
                    tx2, ty2,
                    tx3, ty3,
                    u0, v0,
                    u1, v1,
                    tintTL, tintTR, tintBL, tintBR,
                    tintEffect,
                    texture,
                    unit
                );
            };
            return TextureTintPipeline;
        }(Phaser.Renderer.WebGL.Pipelines.MultiPipeline));

以前做 2D MMORPG,美术要先 3D 建模、动作绑定,再 8 方向渲染 2D 序列帧。
一套角色动作从设计到能用,少则一周,多则好几周;
想做 20 套外观,就是 20×N 天的硬成本。

最近用 nano-banana 折腾了一圈,结论是:
现在只需要打一套“通用基础动作序列”,后面的换装可以用 AI 批量生成。

实测下来:

  • 一套新造型,从输入到出可用版本,大概 4~5 次迭代就够
  • 成本和效率对中小团队、独立开发者都非常友好

以前是“每多一套皮就多一条美术流水线”,
现在变成“打磨好一套基础动作,让 AI 替你干重复活”。
有点像给美术装了一个“自动化外包团队”。


下图看到,细节,一致性保持的非常好!

blog.jpg

blog2.jpg

把行军路线和卡牌CG图实现了。
行军路线:
虽然实现了,但是!这里有一个问题,就是时效性,即使再二层网络中部署,也可能有10秒的延迟。是不是要考虑三层网络?
2024-10-22T09:35:49.png
2024-10-22T09:36:14.png

卡牌CG:
卡牌的问题,就选了一套AI大模型来跑,效果总体还行,只是手部需要处理一下
2024-10-22T09:38:10.png
2024-10-22T09:38:31.png
2024-10-22T09:39:38.png

选几个大图:
3.png
4.png
1.png