ScaleX/ScaleY in Flashpunk's GraphicList [SOLVED]

(Teonnyn) #1

I’m working on animating a flip, and I’d normally use scaleX / scaleY to do so. However, neither property seems to be available. The graphic itself is comprised of a set of graphics in a graphicList, and the graphicList itself would be animating - not just one. I studied the documentation but could not find an equivalent, at least easily. It’s only available in the sub-components.

(Justin Wolf) #2

Graphiclist doesn’t have an alterable scaleX or scaleY and nor does the vector list that contains all of its children, as they’re stored as a Graphic. Also, for future reference, when you want to flip a graphic on its X axis, use flipped instead of scaleX. Much faster, according to documentation! Regardless, you’ll have to create and store variables of each graphic you place within your graphic list and then adjust the flip accordingly. For example:

var img1:Image = new Image(Assets.SPRITE0);
var img2:Spritemap = new Spritemap(Assets.SPRITE1, 32, 32);
var glist:Graphiclist = new Graphiclist(img1, img2);
img1.flipped = true;

Unless of course there’s another way to adjust properties of stored children in a Graphiclist, this is the only way I know you’re able to do it.

(Teonnyn) #3

Minor problem with it is I’m looking to animate the flip - .flipped if I recall right just reverses the image itself. The goal is to create the illusion of the actual image flipping over to show it’s backside, like a card.

This is an example of what I’m looking to do: http://davidwalsh.name/demo/css-flip.php

(azrafe7) #4

So you could use just the first part of @justinwolf suggestion (assuming all the objects in the Graphiclist have scaleX and scaleY properties): hold a reference to them, and change their properties inside your update() function.

(Teonnyn) #5

All objects inside each individual graphic list are already referenced. I know I could flip them all together or flip just one, but I was hoping to animate the entire graphic list object. Would it be possible to drill down into the class and open up the scaleX/scaleY properties?

(Justin Wolf) #6

If all of your graphics inside the Graphiclist are of the same type - Spritemap in my example’s case - you could do something like:

var glist:Graphiclist = new Graphiclist(myImg0, myImg1);
for (var i:int = 0; i < glist.count; i++)
{
     (glist.children[i] as Spritemap).scaleX = 1;
}

You may be able to adjust how Graphiclist class works and instead of storing the children as the very basic Graphic you could store them as their actual graphic type by changing the vector type from Graphic to *. May need a few more edits and such, haven’t really looked into it. I’m not sure if this would pose any efficiency or performance problems, however.

(Teonnyn) #7

So it does not seem possible to flip the entire graphic as one object without modifying the whole structure of Flashpunk.

(azrafe7) #8

Yes, it’s possible to do that… just not with a single line of code.

Here’s an example of how you could do it (just a proof of concept):

FlipTest.swf (113.0 KB)

CardEntity.as (3.0 KB)

The demo is using this as spritemap (from opengameart):

(Teonnyn) #9

I never actually wanted a single line of code and knew that wasn’t possible. While not written for Flashpunk the example I was following (in pure AS3) is over twenty lines long, from the book “Actionscript 3.0 Game Programming University”. It was in the process of converting it to Flashpunk’s particular method that I got baffled. To be honest I’m a little confused where that part of it came from, lol.

EDIT: And WOW! Hah. That example is actually far more advanced then I had in mind, nice.

(Sparrow) #10

*Edit: My previous post didn’t work so I tinkered and found something that works, can you guys tell me if this is any good:

package  
{
	import net.flashpunk.Graphic;
	import net.flashpunk.graphics.Graphiclist;
	import net.flashpunk.graphics.Image;
	
	/**
	 * ...
	 * @author Sparrow
	 */
	public class Cardlist extends Graphiclist 
	{
		private var _scaleX:Number = 1;
		private var _scaleY:Number = 1;
		public function Cardlist(...graphic) 
		{
			for each (var g:Graphic in graphic) add(g);
		}
		
		public function get scaleX():Number { return _scaleX; }
		public function set scaleX(scX:Number):void
		{
			for each (var g:Graphic in children)
			{
				Image(g).scaleX = scX;
				g.x *= scX / _scaleX;
			}
			_scaleX = scX;
		}
		
		public function get scaleY():Number { return _scaleY; }
		public function set scaleY(scY:Number):void
		{
			for each (var g:Graphic in children)
			{
				Image(g).scaleY = scY;
				g.y *= scY / _scaleY;
			}
			_scaleY = scY;
		}
	}
}
(azrafe7) #12

Yeah it could work and it’s a nice solution!

It’s one of the many approaches one could use to solve the problem. And that’s the reason why I love FlashPunk, it gives you the power to easily build a solution on a case-by-case basis, and that’s just wonderful!

The only caveats I could think of, for making it a general solution (mine it’s not! and sorry I’ve not actually tested yours… yet), is that it makes assumptions about a couple of things:

  • code naively loops through the list, type-casting Graphic to Image, but you’ll get an Exception as soon as there is a different/not-Image-extending class)
  • individual graphics cannot have their x, y modified (you’re assuming they’re 0)
  • individual graphics cannot have their own scale, independent from Cardlist ('cause it’s reset once you modify Cardlist.scale...

As I said, it could work wonderfully, but depends on what the constraints/preconditions are.

(Teonnyn) #13

Haha, I wasn’t expecting this thread to become popular, I guess it might be a oft-requested feature. Needless to say, azrafe7’s code works absolutely perfectly. It’s also pretty powerful for what he wrote :smile: