I created a TiledMap in Tiled with a few (object)layers.
Now I wanted to use Box2D to locate, in this case the Ractangles, and put them in a Physics world so my Player can collide with them. However this worked fine for the Rectangles, but I have some problem with the Circles. Here the code I used to create boxes/Rectanles :
for (MapObject object : map.getLayers().get(3).getObjects()
.getByType(RectangleMapObject.class)) {
Rectangle rect = ((RectangleMapObject) object).getRectangle();
new normalBox(world,map,rect);
}
Now I wanted to do the same thing for coins but therfore I need something like an Ellipse or a Circle. My Problem is it doesnt seem to find any Circles in the TiledMap :
for (MapObject object : map.getLayers().get(4).getObjects()
.getByType(CircleMapObject.class)) {
Circle circ = ((CircleMapObject) object).getCircle();
new Coin(world,map,circ);
}
I think the problem is that you cant create Circles in the TiledMapEditor. I created Ellipses and gave them equal width and height, which should be a Circle, but apparently this doesnt work...
Any solutions or tips would be great!!
Related
I want to implement rotating rectangle around cicrle in such way, that circle has no rotation, and rectangle has. All object's are Box2D Body objects. Here is picture, what I want to have:
In my case rectangle touches circle, but I think it doesn't matter.
At first I tried to do it with two Fictures for same Body, but there was a problem with rotation: I couldn't have one ficture with rotation and another without.
I think, it should be somehow connected with joints, but I don't know what exactly Joint I should use. Maybe are there another solutions?
I think DistanceJointDef will do the tricks
you could put the radius if the circle as the distance with a little margin if you want
you also have to reduce the friction of bodies so the rectangle can move smoothly
DistanceJointDef djd = new DistanceJointDef();
djd.bodyA = bodyRactangle;
djd.bodyB = bodyCirlce;
djd.length = radius + margin;
world.createJoint(djd);
bodyRactangle is a dynamic body
bodyCirlce is a static body
try that for a start, hope it is helpful
Good luck !!
so I have a problem with tiled map, My map has gaps/texture bleeding, I read other questions with this problem but I could not get the one which works.
I'm using already made sprite sheet which includes all of tiles, so does enyone know the solution for it ? that I could make and I wont need to cut like 60 tiles from sprite sheet ?
use texture filter Nearest not Linear since Linear user 4 surrounding texels to calculate actual color so when it is on the border of tile it will generate the gap. You can read about TextureFilter here:
http://www.badlogicgames.com/wordpress/?p=1403
and you set it just like:
Sprite sprite;
//now you are initializing the sprite...
sprite.getTexture().setFilter(TextureFilter.Nearest, TextureFilter.Nearest);
of course you can call setFilter() direct on texture if you have an access to it. If you don't because you create tiledMap from file you can try to iterate over tiles and set proper filter for every tile texture:
Iterator<TiledMapTileSet> iter = tiledMap.getTileSets().iterator();
while(iter.hasNext())
{
Iterator<TiledMapTile> iterTile = iter.next().iterator();
while(iterTile.hasNext())
{
iterTile.next().getTextureRegion().getTexture().setFilter(...);
}
}
You can also just extrude your atlas in TexturePacker - it will double every pixel on the border so color blending wouldn't affect it
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;
}
Ok so im trying to load a bitmap image as a background using this:
screenBitmapData.copyPixels(tilesBitmapData,new Rectangle(sourceX,sourceY,tileSize,tileSize),new Point(destX,destY));
screenBitmap = new Bitmap(screenBitmapData);
addChild(screenBitmap);
This load my tiled map correctly and display it on the screen.
Now i want to add another image which will be used as my character and the frame displaying it contain my character movement and then display the image as follow:
screenBitmapData.copyPixels(playerSheetBitmapData, new Rectangle(currentSpriteColumn * CHAR_SPRITE_WIDTH, currentSpriteRow * CHAR_SPRITE_HEIGHT, CHAR_SPRITE_WIDTH, CHAR_SPRITE_HEIGHT), new Point(xPos, yPos), null, null,true);
I setted the alpha channel on my character image and this is the result when im moving around my map with it:
http://snag.gy/L2uuR.jpg
As you can see, the background image doesnt refresh. And i simply dont know how to do this. Im pretty new with flash and as3 and ive been trying for days to make it work. I know it have something to do with the copypixel or redrawing the background before i draw the sprite again... Any ideas?
You need to redraw the entire scene. All you're doing at the moment is drawing the player ontop of the result of your previous draw.
All you need to do in your case is draw the entire background each frame before you draw the character. It could look like this:
function renderScene():void
{
// Draw the background, which will replace all the current graphics
// on the Bitmap.
screenBitmapData.copyPixels(tilesBitmapData,new Rectangle(sourceX,sourceY,tileSize,tileSize),new Point(destX,destY));
// Then draw the player.
screenBitmapData.copyPixels(playerSheetBitmapData, new Rectangle(currentSpriteColumn * CHAR_SPRITE_WIDTH, currentSpriteRow * CHAR_SPRITE_HEIGHT, CHAR_SPRITE_WIDTH, CHAR_SPRITE_HEIGHT), new Point(xPos, yPos), null, null,true);
}
To actually clear the Bitmap though, you can just use fillRect() to fill it with a color (e.g. black):
// Fill the Bitmap with black.
screenBitmapData.fillRect( screenBitmapData.rect, 0x000000 );
I would like to tween between a short rounded rectangle and a tall rounded rectangle. (I only want deal with the height - no other parameters). I am programming with actionscript 3. My tweening engine is TweenLite.
I have been tweening a sprite that contains a rounded rectangle. The tweened sprite produces distortion. I suppose that I have been scaling the original image, rather than the height of the rounded rectangle?
Here is a simple example of my code:
-
Draw the rounded rectangle:
roundRect = new Sprite();
roundRect.graphics.beginFill(0x000000);
roundRect.graphics.drawRoundRect(0,0,50,15,4,4); //Original Height: 15
roundRect.graphics.endFill();
addChild(roundRect);
Then I listen for a mouse click event on the rounded rectangle.
The mouse event triggers a function with the following code:
TweenLite.to(this.roundRect, 1, {height:120}); //Final Height: 120
-
I would like to tween the height of the rounded rectangle itself. I would hope that this would not produce the unwanted distortion. Is there any way to achieve this?
Thank you.
This can be achieved with "9-slice scaling".
Below are two tutorials on how to setup a Movieclip to use the 9-slice guides, one is done through the IDE (using the guidelines) and the other through code (by defining a rectangle called grid and assigning this to the movieclip's scale9Grid property).
http://www.sephiroth.it/tutorials/flashPHP/scale9/
http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001003.html
Once the scale9Grid property has been correctly assigned you can scale (and Tween) the movieclip as intended without any distortion.
It might also be worth reading: http://www.ovidiudiac.ro/blog/2009/05/scale9grid-work-and-fail/ which describes various scenarios when scale9grid does and doesn't work. (mainly to do with having nested children and non-vector graphics inside of the grid).
Hope this helps.
As an alternative, and since its only a rounded rectangle, you could also do something like this:
var rectHeight = 15;
var roundRect = new Sprite();
addChild(roundRect);
updateRect();
function updateRect() {
roundRect.graphics.clear();
roundRect.graphics.beginFill(0x000000);
roundRect.graphics.drawRoundRect(0,0,50,rectHeight,4,4);
roundRect.graphics.endFill();
}
roundRect.addEventListener("click", click);
function click(e) {
TweenLite.to(this, 1, {rectHeight:120, onUpdate:updateRect});
}