I have an object manipulation function that(right now) manipulates the scale of the objects inside of an array to give real-time size changes in relation with each other.
What I would like to know is if there's a way to change an object's width/height(to fit the screen size since it's a mobile app) and then reset the scale so that the new width/height has a scaleX/scaleY value of 1.
The width/height are properties that directly influence the scale of a DisplayObject. You cannot resize it without affecting the scale.
You can however:
Draw the image as bitmap
Redraw it if it's a primitive
Put it in a holder
A little about every solution:
Drawing a DisplayObject (or any IBitmapDrawable) is done through creating a BitmapData and using a draw() call. The up-side is that it will be a bitmap and thus save some rendering time. The downside is that if it's a large image it will take memory (can be critical for mobile) and it won't have interactivity/animation unless you make a script that would read the animation.
If you're drawing the element though the Graphics class's API, you might just make something like a resize() method that you would call on window resize/flip-orientation. Just utilise the clear() method of the Graphics object and redraw the whole thing.
Lastly, probably your best pick. Resize your object. Make a new Sprite (I choose Sprite because it's interactive and you probably want that) and add the resized object to that newly made sprite while the Sprite is just added to the display list like you added the resized object before. If it's hard to understand, here's some code:
myResizeableObject.width = newWidth;
myResizeableObject.scaleY = newScaleY;
var holderSprite:Sprite = new Sprite();
myResizeableObject.parent.addChild(holderSprite); // if you don't have a specific place to add the myResizeableObject, don't use myResizeableObject.parent - it's ugly
holderSprite.addChild(myResizeableObject);
Hope that helps you!
Related
I am making a game in AS3 for a school project (using the AIR api). I have about a year's worth of experience in AS3, so i would say i'm proficient but not an expert. Anyway, i have never attempted to do sprite animations in AS3 and i'm not quite sure how to approach it.
If i create a list of bitmaps and call addChild() and removeChild() to display each frame of the animation, it would affect the framerate as these functions are not very efficient (i have tried this before and it tanked my framerate if i had too many animations going at once). I have also tried creating a list of BitmapData objects, adding a bitmap to the display list, and then pointing it to a different BitmapData each frame, but this does not seem to work at all.
So what is the best way to do this? In XNA, for example, i would create a sprite class that draws to the screen using a sprite batch, then i would create a list of sprite objects and cycle through them to create the animation. Is there any way to achieve a similar result in actionscript?
First (simple) method: you can just use multi-frame MovieClip for animation. Put an image in each frame, put a MovieClip on the stage and that's all. You can control this animation using play(), stop(), gotoAndPlay(), gotoAndStop(). It will work without much problems for a generic platform game (I did that myself long ago).
Second (advanced) method: use bitmap blitting. For each animation, create a bitmap image that holds each frame of the animation. Use this image as a source for copying pixels into your current animated object. You just need to copy a particular rectangle area inside a source bitmap that corresponds to the current frame.
The actual blitting happens here
destinationBitmapData.copyPixels(sourceBitmapData, areaRectangle, destinationPoint);
Where destinationBitmapData is your "canvas" that you're blitting to; sourceBitmapData is the source image holding all animation frames; areaRectangle is the Rectangle inside the source image defining which area to copy; destinationPoint is left-top coordinate of the copy area in your canvas.
The destination canvas can be just one small object (like your game character that is moving around) or the entire game screen with all objects. I.e. instead of blitting and adding each object separately, you can just have one big canvas and blit any necessary parts directly to it.
That said, there is already a number of various ready-made engines that use blitting and even advanced techniques like 3D acceleration for 2D sprites.
One of them is Starling.
I'm currently doing the following when applying a mask to a MovieClip:
mc1.cacheAsBitmap = true;
_mask.cacheAsBitmap = true;
mc1.mask = _mask;
Which works great, however...
mc1 is a complex vector animation, and cacheing it as a bitmap in order to mask it has pretty big memory implications from what I can see, and have read.
Is their another way to implement masks? Or a way to optimise the usual solution?
Thanks
edit
Both the mask and mc1 are MovieClips, and they have been added to the stage, the mask is a gradient.
I am using Flash CS6, both movieclip and mask are added to the timeline, where they are being animated
You can use http://www.greensock.com/blitmask/
Quote from the documentation:
Can’t I just set the target DisplayObject’s cacheAsBitmap property to true and get the same result? Why use BlitMask?
If you set a DisplayObject’s cacheAsBitmap property to true, Flash takes a bitmap capture of that object so that when you move it (only
altering the x and/or y properties), the text and vectors don’t need
to be re-rasterized again before being rendered to the screen.
However, Flash would still need to concern itself with extra pixels on
every frame if you’re masking them to only show a small portion of the
area. BlitMask, however, only cares about that smaller masked area
(after the initial capture of course) which alleviates Flash from
having to even think about the extra pixels.
I'm making an animation of a 2D character that can walk, run, jump, bend,...
Would it be better to load one big 'spritesheet' with all the animations and just use a mask, or would loading separate files (walk, run,...) be better because you're not using a mask on such a big image every frame?
I'm not using the Stage3D features with a framework like Starling because I think the normal flash display API is fast enough and has much less bugs than the relatively new GPU frameworks.
Blitting just the character (using lock(),copyPixels(),unlock()) works pretty well.
private function updatePixels():void{
//update sprite sheet copy position based on the frame placements ons prite sheet
position.x = spriteSourceData[currentFrame].x + offset.x;
position.y = spriteSourceData[currentFrame].y + offset.y;
//draw into the bitmap displayed
displayData.lock();
displayData.fillRect(displayData.rect, 0x00FFFFFF);//clear
displayData.copyPixels(sourceData, spriteData[currentFrame], position);//copy new frame pixels
displayData.unlock();
}
//a bit about vars:
position:Point
spriteSourceData:Vector.<Rectangle> - from parsed Texture Packer data
offset:Point - front view and side view animations weren't always centred, so an offset was needed
displayData:BitmapData - pluging into a Bitmap object displayed
sourceData:BitmapData - the large sprite sheet
currentFrame:int - image index on the sprite sheet
I've done this on an older project writing a custom class loosely following what I've learned from Lee Brimelow's tutorial series Sprite Sheets and Blitting (Part 1,Part 2, Part 3)
In short, you'd use two BitmapData objects:
a large sprite sheet
a small image to display just the character (size of the largest character bounding box) to copy pixels into
In my project I had a character with front and side animations and for the sides I've used one set of animations and used the Matrix class to flip(scale and translate) the side animation accordingly. I've used TexturePacker to export the image sequence as a sprite sheet and the frame data as well as a JSON object. There is native JSON support now, so that's handy. Texture Packer isn't free but it's really worth the money (affordable, fast and does the job perfectly). I haven't used Flash CS6 yet but I imagine it's also possible to import your image sequence and export a spritesheet with the new feature.
In my experience the rule "the simpler the display list the better the performance" generally applies. Which means you should use the most specific display object that will do the job (don't use a Sprite when a Shape would be sufficient or favor Bitmaps over vectors where it makes sense).
The most extreme version of this is to only have one Bitmap display object on the stage and use copyPixels to draw all game objects into it every time you want to update the screen. It doesn't really matter what the source in the copyPixel call is, it could either be a large BitmapData acting as a sprite sheet or a small BitmapData objects representing a single frame in an animation. This method is really fast and you could easily have many hundreds of objects on screen at the same time. But using copyPixels means you can't scale or rotate a game object, so for those cases you would have to fall back to the much slower draw() method. Of course this single Bitmap method is not suitable for games where you need to attach mouse events to specfic objects in the game, but works well for shoot'em ups or platform games.
To answer your question, I think you will get better performance by using a single Bitmap display object to represent the player and a collection of BitmapData objects for all the animation frames. Then you can just change the Bitmap's bitmapData property to the frame you want to display. You can still load a large spritesheet png and then plit it up into a series of BitmapData objects during the initialization of the game.
I have an imported png in a 'info_icon' symbol.
I have another imported png in a 'info_content' symbol.
I have some code that allows you to drag an instance of a 'map' symbol around. Inside this map symbol are instances of 'info_icon' and 'info_content'.
When I drag the map slowly, I can see the info_icon instances and info_content instances, jiggle ever so slightly...I think to line up to pixels.
I'm trying to figure out how to stop that. I'm looking at the pixelSnapping property and it doesn't seem to be helping...perhaps I'm using it wrong.
info_button_mc.pixelSnapping = PixelSnapping.NEVER;
Make sure to set smoothing to true on the bitmap.
Try setting scaleX to 0.999 or something like that (in other words, close enough to 1 that you can't tell it's being scaled).
For some reason smoothing doesn't seem to actually get applied unless the scale of the object is something other than 1.
Remember you should be working with bitmaps here, so make sure to export the PNG for ActionScript (right click on PNG->properties) and give it a class name and then:
var bitmap : Bitmap = new Bitmap(new YourPNG(), PixelSnapping.NEVER);
addChild(bitmap);
bitmap.smoothing = true;
bitmap.scaleX = 0.999;
Is info_button_mc a MovieClip or a Bitmap? In addition to what Pixel Elephant suggested, make sure the cacheAsBitmap property is false on the bitmap and its container (if the container is involved with the bitmap's movement). CacheAsBitmap will always pixel snap and it's worth noting that any filters you may have active automatically set cacheAsBitmap to true.
Instead of setting the scale to 0.999 which will result in a blurry image, try rendering your image at double resolution (as in the source image: png, bitmap, whatever - make it twice as big in each dimension as what you actually want in the swf) and then setting the scale to .5. In my experience, this is the best of both worlds. That said, it still may not be perfect enough for text - but it is substantially better quality than setting the scale to 0.999.
I'm having an issue with Movieclips inside my Swf resizing to the wrong dimensions. I'm currently tracing the width of the offending clip every half second, and I can see the value change to an incorrect size at some interval in the logged output. I really want to see what code is changing the width. My plan was to extend Movieclip, override the set width property, and dump a stack trace when the value set is too low. This isn't so simple however. Flash is complaining about undefined reference to UI components that are on the Movieclip fla.
Is there a simple way to find out when/why this value changes? I cannot use a debugger.
edit:
The reason I cannot just extend MovieClip is because I am getting my Movieclip object from Event.currentTarget.content after using a Loader. I cannot point my Test (extends MovieClip) object at this return value because it is illegal to do so.
I'll explain the problem a little more and maybe someone will have another idea. I have an app with lots of different windows. They all open to a size of around 750x570. One of these windows contains a FusionChart. when I load this, according to my trace, the background Swf I am using changes to a dimension of about 2712x1930. This doesn't make sense to me because it looks the same size as before and at those dimensions it wouldn't even come close to fitting on my screen. If I then close the window and open another, the new window is tiny, but says it has the same dimensions as the original windows (750x570).
It is almost as if the window is scaling to the huge 2712x1930 without showing a change in size, and then showing the next window (750x570) as a size relative to what the huge window would look like. If that makes sense...
Maybe using a Proxy?
The Proxy class lets you override the default behavior of ActionScript operations (such as retrieving and modifying properties) on an object.
If you can see the trace you are doing and use a debug version of the flash player, try to override the property you want to check and trace the calling stack stack within the Error object:
public class Test extends Sprite() {
// property to watch
override public function set x(value:Number):void{
super.x=value;
// trace the calling stack work only in the flash debug player
trace((new Error()).getStackTrace());
}
}
what do you mean by "Flash is complaining about undefined reference to UI components that are on the Movieclip fla."?
your idea is absolutely the right solution in general... assuming the property doesn't change from within the runtime (which is rare, unless those properties are calculated) ...
when it comes to width and height, they are the two worst properties in the flash player API ... for reading, they are calculated by the space needed by a DisplayObject in parent coordinate space (if you rotate a DisplayObject, than these properties change). for writing, they actually forward to scaleX and scaleY ...