是啥导致这张卡改变维度？ [视频和代码]

Posted 2023-02-16

【中文标题】是啥导致这张卡改变维度？ [视频和代码]

【英文标题】：What is causing this card to change dimensions? [Video & Code]是什么导致这张卡改变维度？ [视频和代码]

【发布时间】：2017-07-10 06:56:17

【问题描述】：

我正在使用 Starling（动作脚本 3）编写棋盘游戏。我使用的 Starling 版本有一个名为 Sprite3D 的类，它使我可以方便、轻松地编写游戏中使用的卡片翻转代码。卡在翻转时会改变尺寸，我很困扰，我找不到变化的来源。

感谢所有帮助。

问题可以在this youtube video查看。

完整的代码可以在 github this github page 看到。

我将在这里继续详细介绍...视频中涵盖了以下所有信息。

Card 类不包含视觉信息。它是一个控制器类。它确实拥有两个精灵。一个精灵填充正面，另一个精灵填充背面。 Card 类还应用了遮罩和尺寸属性，以便面具有相同的大小和形状。

Card 类还包含动画代码。为卡片制作动画的代码与 Starling 博客上的视频中使用的代码非常相似，该视频展示了如何快速轻松地在 2D 记忆游戏中使用 Stage3D。 Card 类通过使用补间动画将卡片的rotationY 属性从 0 更改为 PI 并在触摸事件上从 PI 更改为 0 来为旋转设置动画。在翻转过程中出现错误，所以我将翻转代码包含在此处：

public function flip() : void 
    _state = !(this._state);
    if( this.animations )
        var tween : starling.animation.Tween = new Tween( this, 2, starling.animation.Transitions.EASE_OUT_BOUNCE );
        var card : Card = this;
        var didFlip : Boolean = false;
        tween.animate("rotationY", this._state == Card.FACE_UP ? Math.PI : 0 );
        tween.onUpdate = updateVisibility;
        Starling.juggler.add( tween );
    

private function updateVisibility():void

    var sHelper:Vector3D = new Vector3D();
    var card : Card = this;
    stage.getCameraPosition( card, sHelper );
    if( sHelper )
        this._front_face.visible = sHelper.z < 0;
        this._back_face.visible = sHelper.z >= 0;
    

FrontFace 和 BackFace 类都派生自 CardFace 类。 CardFace 类将一张卡片作为参考，并设置一个与卡片遮罩的大小和形状相等的遮罩。这可能是多余的，因为卡片的掩码应该屏蔽所有子 DisplayObject，但我们还是这样做了。

BackFace 包含文字、徽标、纹理和颜色。

FrontFace 什么都不做。它是具有特定行为的子类，并将数据对象转换为显示布局。

在这种情况下，我们将 FrontFace 与 ProfileFrontFace 子类化。 ProfileFrontFace 将卡片对象和配置文件数据对象作为构造函数参数。卡片对象通过 super() 调用传递给 CardFace，并保存配置文件对象以供以后使用。

当 ProfileFrontFace 添加到阶段时，该类从配置文件数据对象中提取标题、收入和费用。它为每个项目创建文本字段。它还计算现金流并为此值创建一个文本字段。背景是使用 PNG 纹理创建的，这是一个简单的白色正方形，在卡片尺寸的整个面上延伸。在这个白色方块上，我们应用颜色纹理。创建后，背景图像不会更改。代码如下：

//we remove the event listener so this function code is only executed once
this.removeEventListener( Event.ADDED_TO_STAGE, onAddedToStage );
var width : int = this.cardWidth; /* 400 */
var height : int = this.cardHeight; /* 300 */
var bg : Image = new Image( Game.assets.getTexture("blank") );
/* start the background in the top left */
bg.x = 0;
bg.y = 0;
/* have the background fill the card dimension space */
bg.width = width;
bg.height = height;
/* apply a color so that the background is not pure white */
bg.color = ColorScheme.OPAL;
/* add the background to the stage */
this.addChild( bg );

在函数的其余部分，我们创建文本并显示它。为简单起见，我没有在此处包含该代码。在测试中，我删除了该代码，发现它对翻转到正面时改变卡片尺寸的特殊行为没有影响。

有没有人见过 Sprite3D 上的蒙版无法作为蒙版执行的情况？

有没有人见过蒙版无法在常规 Sprite 对象上执行的情况？

Tween.animate() 方法在使用 Tween 更改对象上“rotationY”的值时可能会导致奇怪的行为怎么办？

任何和所有的答案都会有所帮助。谢谢！

【参考方案1】：

已修复！！！！我找到了！

我发现问题不在于正面。我为卡片本身应用了一个遮罩，它是 Sprite3D 对象。那个面具引起了问题。当我删除它时，BackFace（一个 Sprite 对象）扩展为与正面相同的大小，现在当我设置卡片尺寸时，两个面的大小相同。

我已将卡片尺寸更新为 400x250 以匹配原始 BackFace 布局，现在一切正常。

提示：尽可能在 Sprite 对象而不是 Sprite3D 对象上设置蒙版。这样可以保留对 2D 对象的 2D 操作。