2017-02-20 2 views
12

Je suis en train de programmer un jeu de plateau dans Starling (Action Script 3). La version Starling que j'utilise a une classe appelée Sprite3D, qui me permet de coder facilement et facilement le retournement des cartes utilisées dans ce jeu. Je suis troublé par le fait que ma carte change de dimension lorsqu'elle est inversée, et je ne trouve pas la source du changement.Quelle est la cause de cette carte pour changer les dimensions? [Video & Code]

Toute aide est appréciée.

Le problème peut être visualisé sur this youtube video.

Le code peut être vu en entier sur github au this github page.

Je vais continuer ici avec plus de détails ... Toutes les informations suivantes sont couvertes dans la vidéo.

La classe Card ne contient aucune information visuelle. C'est une classe de contrôleur. Il contient deux sprites. Un sprite remplit la face avant, et l'autre sprite remplit la face arrière. La classe Card a également un masque appliqué et des attributs de dimension afin que les faces aient la même taille et la même forme.

La classe Card contient également le code d'animation. Le code pour animer la carte est très similaire au code utilisé dans une vidéo trouvée sur le blog Starling qui montre comment Stage3D peut être utilisé dans un jeu de mémoire 2D très rapidement et facilement. La classe Card anime la rotation en utilisant une interpolation pour modifier la propriété rotationY de la carte de 0 à PI et de PI à 0 pour les événements tactiles. L'erreur se produit au cours du processus de retournement, je vais donc inclure le code flipping ici:

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; 
    } 
} 

Le FrontFace et les classes Backface deux découlent de la CardFace de classe. La classe CardFace prend une carte comme référence et définit un masque égal à la taille et à la forme du masque de la carte. Ceci est probablement redondant, car le masque de la carte devrait masquer tous les enfants DisplayObjects, mais nous le faisons quand même.

Le BackFace a du texte, un logo, une texture et une couleur.

Le FrontFace ne fait rien. Il est sous-classé avec des comportements spécifiques et convertira un objet de données en une présentation d'affichage.

Dans ce cas, nous sous-classons FrontFace avec ProfileFrontFace. ProfileFaceFace prend l'objet carte et un objet de données de profil en tant qu'arguments de constructeur. L'objet de carte est passé à CardFace via des appels super(), et l'objet de profil est enregistré pour une utilisation ultérieure. Lorsque le ProfileFrontFace est ajouté à la scène, la classe extrait le titre, le revenu et les dépenses de l'objet de données de profil.

Il crée des champs de texte pour chacun de ces éléments. Il calcule également un flux de trésorerie et crée un champ de texte pour cette valeur. Un fond est créé en utilisant une texture PNG, qui est un simple carré blanc, qui est étiré sur toute la face des dimensions de la carte. Sur ce carré blanc, nous appliquons une texture de couleur. Après sa création, l'image d'arrière-plan n'est pas modifiée. Le code apparaît comme suit:

//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); 

Dans le reste de la fonction, nous créons le texte et l'affichons. Je n'inclus pas ce code ici pour plus de simplicité. En testant, j'ai enlevé ce code et vu qu'il n'a aucun impact sur le comportement particulier qui change les dimensions de la carte quand retourné à la face avant.

Est-ce que quelqu'un a vu un cas où les masques sur un Sprite3D ne fonctionnent pas comme un masque?

Est-ce que quelqu'un a vu des cas où un masque ne fonctionne pas sur un objet Sprite classique?

Qu'en est-il de la méthode Tween.animate() qui peut provoquer un comportement étrange lorsque Tween est utilisé pour modifier la valeur de "rotationY" sur un objet?

Toutes les réponses vous aideront. Je vous remercie!

Répondre

5

FIXE !!!!! Je l'ai trouvé! J'ai découvert que le problème n'était pas la face avant. J'avais appliqué un masque à la carte elle-même, qui était l'objet Sprite3D. Ce masque causait des problèmes. Quand je l'ai enlevé, le BackFace (un objet Sprite) a augmenté à la même taille que la face avant, et maintenant quand je place les dimensions de la carte, les deux faces ont le même dimensionnement.

J'ai mis à jour les dimensions de la carte à 400x250 pour correspondre à la disposition BackFace originale, et maintenant tout fonctionne bien. Conseil: définissez vos masques sur les objets Sprite et non sur les objets Sprite3D, lorsque cela est possible. Cela garde les manipulations 2D sur les objets 2D.