I have a spritesheet (packed by the wonderful TexturePacker) that looks like so:
and the animation as an animation works well using the current code.
However, when the animation moves to a frame where the bounding box is smaller (e.g. when the legs are closer, when the figure is kneeling, etc.), the image distorts so that the smaller bounding box fills the bounding box of the sprite.
How can I fix this?
The spritesheet above is a frame-extraction from a sample Adobe flash animation.
Easier way:
You can make all the textureregions the same size.
Hard way:
Keep it like this, but you need to save and calculate the size and position of every textureregion to draw.
I personally recommend you the first option, just make all the image the same size.
cant give you a link but here is what i do for these situations
while making the texture packer strip the white space
make a array of AtlasSprite for images
then in my render method
public void render(float delta) {
atlasSprite = animation.getKeyFrame(statetime, Animation.LOOPING);
atlasSprite.draw(batcher)
};
in my update method, which gives exact rectangular bounds of the current image displayed. Since you have stripped the whitespace and used AtlasSprite so bounds will be without blank whitespace.
public void update(float delta) {
bounds = sprite.getBoundingRectangle();
}
P.S. this is just a pseudo code and many syntatical error could be there its just to give you a idea
Related
Is there a way to let the player save a high-resolution image of the game, while still maintaining all effects? For example, I have glow filters set to 2px. When I use the regular drawBitmap, everything is pixellated and the filters don't look great. So I've started enlarging the movieclip to double the size, then creating a bitmap that's twice the size and saving that. But the problem is that the filter effects get scaled down. For example, if the image went from 400 to 800 px tall, the 2px filter effect now looks half the size and warps everything.
I know this must be possible because, for example, using a fullscreen function does this already... it enlarges everything to a beautiful high resolution, while maintaining all effects relative to each other. How can I capture this effect in an image-saving capacity? (currently using jpegencoder)
Sounds like you have some aliasing so you'll need a re-sampling (blend) function to fix those jagged edges.
A good one is : Lanczos Resampler by Jozef Chúťka.
The important part from that demo code is the LanczosBitmapDataResizer class code about halfway scrolling down the page.
import flash.display.BitmapData;
import flash.utils.Dictionary;
class LanczosBitmapDataResizer
{ ...etc etc...
and it's accessed by updating a BitmapData
new_smooth_BMD = LanczosBitmapDataResizer.resize( old_pixelated_BMD, 227, 227 );
Let's say that I have an Actor which has a draw method:
#Override
public void draw(Batch batch, float parentAlpha) {
super.draw(batch,parentAlpha);
sr.begin(ShapeRenderer.ShapeType.Line);
sr.setColor(Color.RED);
sr.rectLine(getX(),getY(),getX() + getWidth(),getY(),3);
sr.end();
}
As you can see, the actor also draws a red line below itself.
Now, when I zoom the camera on a stage, where the actor is, he becomes bigger - it works but his red rectangle doesn't.
When I set debug() on the Actor, it shows the debug lines and zooms them aswell.
What I'm trying to achieve?
I need to zoom the line too, along the actor.
If there's anyone who knows how to achieve this, I would be grateful ;)
Shaperenderer is similar to batch. It has own coordinate matrix.
So you need to set projection matrix on shaperenderer too.
shaperenderer.setProjectionMatrix(camera.combined);
It will probably work for you.
But while shaperenderer drawing via vertexes, lines' width may not change even when you zoom in/out.
You can change line width with openGL function.
Gdx.gl.glLineWidth(width);
And additionaly im suggesting not to use Shaperenderer because its quite expensive class and only recommended for debug drawings.
I am working on a flash sound mixer application with multiple sound channels, and I am having trouble with the lights beside the volume knob.
Is there a way to hide just a part of an image?
On the image below, image-2 is on top of image-1 to create some kind of volume level indicator effect, and how much of image-2 is shown depends on the value of the volume.
image-url: http://s30.postimg.org/r3ow1g5bl/volume_lights_level.png
I've tried by just reducing the height of image-2, but it looks awful and distorted.
Is there something in flash that works closely the same as CSS's behavior.
example: I'll just make image-2 a background of a shape, and when I reduce the shape's height, the image-background does not get distorted or changes it's height as well.
By searching for solutions, I have come across the mask property, but I don't quite understand how it works, and most of the examples shown are images placed inside circles.
Is the mask property applicable in this situation?
I'm quite new to flash so I don't know a lot of things yet.
You can indeed use a mask.
How to programmatically create your mask
Put an occurrence of your image named myImage on the stage, and put over this occurrence a mask named myMask with the same dimensions. You can apply myMask mask to myImage using it's mask property like below:
Main Timeline
myImage.mask = myMask;
function mouseMoveHandler(e:MouseEvent):void {
myMask.height = myImage.y - e.stageY;
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
You have just to adapt this code to your animation, in the function where you click your button.
I got it working now, many THANKS #VC.One. heres how I did it.
Imported img-2 to stage, converted it into symbol(type:Movie Clip), assigned instance name: img2_mc.
I created a new layer for the mask, drawn a rectangle using rectangle tool, converted it also to symbol(type:Movie Clip), assigned instance name: mask_mc.
Then applied the mask to img2_mc.
/* the code */
img2_mc.mask = mask_mc;
function onEnterFrame(event:Event):void{
var volumeKnob_y = volSliderKnobOn.y + 12; // adjust it to the center of the knob
mask_mc.height = volumeKnob_y;
}
So I am super stoked to start using LibGDX for my first android title for OUYA and PC, but I am running into some snags with LibGDX. (All of my questions can be answered by looking at source, but I am really trying to understand the design choices as well).
To start with, the coordinate system. I created a project using the Project Setup jar, and it creates an OrthographicCamera like so
camera = new OrthographicCamera(1, h/w);
From my reading, I understand that LibGdx uses bottom left corner for 0,0 and yUp. Fine.
I see that it is pretty easy to change to y down if I want to, but I am not understanding the next bit of code that was created.
For the default sprite that gets created the position is set like so.
logoSprite.setOrigin(logoSprite.getWidth()/2, logoSprite.getHeight()/2);
logoSprite.setPosition(-logoSprite.getWidth()/2, -logoSprite.getHeight()/2);
When I run this basic program, I see the logo image I have added is centered on the screen. What I am trying to understand is why the values are negative in set position, and why is it using the sprite width and height instead of the graphics w and h of the view port? If I change to the screen width and height, then the image is drawn in some odd position in the lower right hand side of the screen.
My next question is sprite.setSize vs sprite.setScale. Why is the difference between the two? (They appear to do the same thing, except setScale leaves getWidth and getHeight unchanged).
Since my game will be using a 2D camera heavily for panning, zooming and rotation, I am trying to understand as much as I can about the libgdx framework before I start writing any code.
As a side note, I have a game development and math background and I have made several 2D and 3D games using XNA. I am finding LibGdx a bit frustrating as it does not abstract away OpenGL as much as I was expecting it to, and so far the 2D drawing I have been experimenting with seems to be more confusing than it should be!
I also wanted to note that I am planning to use spine for my animations. Should that change my choice to use y-up or y-down?
If you want to draw a sprite in center of screen, do this in your create method
logosprite.setposition(scrw/2-logosprite.getwidth()/2,scrh/2-logosprite.getheight/2);
here scrw is your viewport's width,
and scrh is your viewport's height,
this way your sprite will be in center of screen
sprite.setsize is used for setting size of the sprite and sprite.setscale is used when we scale a large/small texture so that its quality remains good in all devices(hdpi.mdpi,xhdpi,ldpi)..
no need to worry if you are using spine it works smoothly in libgdx..
You can use just this code if possible
logoSprite.setPosition(Gdx.graphics.getWidth()/2 - image.getWidth()/2,
Gdx.graphics.getHeight()/2 - image.getHeight()/2);
To center the sprite into the middle of the screen Where "image" is the Texture you have loaded/declared initially.
As for why it is coming in a odd position is due to the fact that you are using a camera.
Which changes the view a lot just go through the documentations of libgdx about camera here
In my case, I needed to set position of camera and then call update() method.
Then never forget camera's (0,0) is its center. Everything is being placed that way. My camera code:
private void cameralariUpdateEt() {
cameraGame.position.set(cameraGame.viewportWidth * 0.5f,
cameraGame.viewportHeight * 0.5f, 0);
cameraGame.update();
cameraScore.position.set(cameraScore.viewportWidth * 0.5f,
cameraScore.viewportHeight * 0.5f, 0);
cameraScore.update();
}
Call this method from inside render();
Step 1: Set the sprite origin to the position you would like it to rotate around.
// camera center point is (c.x, c.y)
logoSprite.setOrigin(c.x, c.y);
Step 2: make sure to set your sprite center to origin
logoSprite.setOriginCenter();
Step 3: Rotate your sprite
logoSprite.setRotation(Angle);
Step 4: Set the sprite position, [subtract half the sprites width and height to center the sprite]
logoSprite.setPosition(c.x - logoSprite.getWidth() / 2, c.y - logoSprite.getHeight() / 2)
I am new to AS3 scripting. I have a wide image (movie clip "preform_mc") that I am masking and would like for right button ("right_mc") to dynamically move the image.
The code below moves the image to the right, but its not a dynamic movement (would like an animation effect) and I cant control when the image should stop moving, basically a max amount for the x coordinate.
any help is greatly appreciated!
right_mc.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(event:MouseEvent):void
{
preform_mc.x += -100;
}
Take a look at Greensock Tweening Library. Using that library you'll be able to easily make a smooth animation of a moving image. For the control of max X you should write an if statement to check whether preform_mc.x is more than the max amount you want.
Code will look something like this:
var min_x:int = -500;
function fl_MouseClickHandler_2(event:MouseEvent):void
{
if(min_x < preform_mc.x)
TweenLite.to(preform_mc, 0.5, {x:preform_mc.x - 100}); // using the library I provided a link to
}