Starling Forum

1. 

   archip
   

   Novice Bird
   Joined: May '16
   Posts: 17

   

   archip

   Novice Bird
   Joined: May '16
   Posts: 17

   Hello

   Imagine a magical attack with a part that go behind the enemy and the part that go in front of this enemy. What I'd like to do is :
   - MagicAttackSprite.behindImage
   - EnemySprite
   - MagicAttackSprite.infrontofImage
   But it's not possible because MagicAttackSprite can only be either above or below EnemySprite. Because of this limitation, I can't put both images in the same sprite and I can't transform them at the same time by modifying the position/scale/rotation/skew of the sprite.

   My solution is to make a new class that contains a reference to all the sprites that should be transformed the same way, as well as how they should be transformed. However, I'm not sure if this will work well for more complex animations like rotated sprites inside a rotated sprite. I think the best would be a way to apply the transformation to behindImage and infrontofImage like if they were in the MagicAttackSprite, without actually be in the MagicAttackSprite.

   I hope this isn't too confusing

   Posted 2 months ago #
2. 

   JohnBlackburne
   

   Moderating Owl
   Joined: Apr '15
   Posts: 944

   

   JohnBlackburne

   Moderating Owl
   Joined: Apr '15
   Posts: 944

   Sounds about right. The Sprite class has two ways it can be used to group objects. You can group objects that you want to move together, so you can set the x, y etc. of the Sprite and everything moves together. Or you can group objects you want to draw together, as Starling will draw things Sprite by Sprite, to e.g. collect together objects being drawn the same way to optimise draw calls.

   Problem is often these two uses are incompatible. You might have an effect such as a shadow, or a highlight that goes below or above all enemies, and as all shadows are drawn the same way the most optimal way is to draw them together. But they move with the enemies, and you would like to group them with the enemies.

   The solution is what it sounds like you are doing. Organise your parts into layers, using a Sprite for each layer. In each layer update the positions of parts, based on positions of the enemies according to the game logic. Yes, you end up using each position multiple times but the cost of doing so is negligible. You can organise things into classes so the details are hidden.

   Posted 2 months ago #
3. 

   archip
   

   Novice Bird
   Joined: May '16
   Posts: 17

   

   archip

   Novice Bird
   Joined: May '16
   Posts: 17

   Thanks for your answer

   I'll try to make something when I have the time. I've found the getTransformationMatrix function and it will be useful I think.
   I'll post my solution here once I'm satisfied with it.

   Posted 2 months ago #
4. 

   archip
   

   Novice Bird
   Joined: May '16
   Posts: 17

   

   archip

   Novice Bird
   Joined: May '16
   Posts: 17

   Here is what I wrote and it seems to work for now so I post it here for other people (I'm not a pro coder btw). It was a lot simpler than I thought thanks to the getTransformationMatrix method
   I've called it FaSprite because Fa is the half of Fake

   EDIT : It doesn't work actually so i've removed the code :s
   I'll fix it later

   EDIT2 : Here is the fixed version.

   public class FaSprite extends Sprite
   	{
    
   		private var faChildren:Vector.<DisplayObject> = new Vector.<DisplayObject>();
    
   		public function FaSprite()
   		{
   			touchable = false;
   			visible = false;
   		}
    
   		public function faAddChild(spr:DisplayObject):void{
   			faChildren.push(spr);
   			faRefresh();
   		}		
    
   		public function faRefresh():void{ // to call each time the sprite position, scale... is modified
   			var matrix:Matrix = getTransformationMatrix(parent);
   			var fp:FaSprite = (parent as FaSprite);
   			while (fp != null){
   				matrix.concat(fp.getTransformationMatrix(fp.parent)); // matrix multiplication
   				fp = (fp.parent as FaSprite);
   			}
   			for (var i:int = faChildren.length - 1; i >= 0; i--){
   				faChildren[i].transformationMatrix = matrix;
   			}
   		}
    
   	}

   public class TEST extends Sprite
   	{
    
   		private var bottomLayer:Sprite;
   		private var middleLayer:Sprite;
   		private var topLayer:Sprite;
    
   		private var fasp:FaSprite;
   		private var fasp2:FaSprite;
    
   		public function TestNewSpritePanel()
   		{
    
   			bottomLayer = new Sprite();
   			middleLayer = new Sprite();
   			topLayer = new Sprite();
    
   			addChild(bottomLayer);
   			addChild(middleLayer);
   			addChild(topLayer);
    
   			bottomLayer.addChild(new Quad(C.WIDTH, C.HEIGHT, 0xC0C0C0));
    
   			var sprB:Sprite = new Sprite();
   			sprB.addChild(new Quad(50, 50, Color.RED));
   			bottomLayer.addChild(sprB);
    
   			var sprB2:Sprite = new Sprite();
   			sprB2.alignPivot();
   			sprB2.addChild(new Quad(100, 10, Color.RED));
   			bottomLayer.addChild(sprB2);
    
   			var qM:Quad = new Quad(50, 50, Color.YELLOW);
   			middleLayer.addChild(qM);
   			qM.x = 250;
   			qM.y = 250;
    
   			var sprT:Sprite = new Sprite();
   			sprT.addChild(new Quad(40, 40, Color.GREEN));
   			topLayer.addChild(sprT);
    
   			var sprT2:Sprite = new Sprite();
   			sprT2.alignPivot();
   			sprT2.addChild(new Quad(80, 10, Color.GREEN));
   			topLayer.addChild(sprT2);
    
   			fasp = new FaSprite();
   			addChild(fasp);
   			fasp.scaleX = 3;
   			fasp.faAddChild(sprB);
   			fasp.faAddChild(sprT);
    
   			fasp2 = new FaSprite(fasp);
   			fasp.addChild(fasp2);
   			fasp2.faAddChild(sprB2);
   			fasp2.faAddChild(sprT2);
    
   			addEventListener(TouchEvent.TOUCH, onTouch);
   		}
    
   		private function onTouch(te:TouchEvent):void{
   			var touch:Touch = te.getTouch(this, TouchPhase.HOVER);
   			if(touch){
   				fasp.x = touch.globalX;
   				fasp.y = touch.globalY;
   				fasp.rotation = 1;
   				fasp.faRefresh();
    
   				fasp2.scale = 2;
   				fasp2.rotation = 0.3;
   				fasp2.faRefresh();
   			}
   		}
    
   	}

   Posted 2 months ago #

RSS feed for this topic

Reply

You must log in to post.