What to do with the revolute joint when simulating projectile motion? - libgdx

I am having a few problems I have set up my testing code for launching an arrow body, so I have attached an arrow body to a circle body by a revolute joint. and i have set up some basic testing code for launching the arrow body, but the problem is, is that the arrow body is stuck on the revolute joint, the arrow body cannot escape this joint. I was wondering what a solution to this might be.
I use a button to launch the arrow, when the button is pressed the arrow moves. And also to solve the above problem I tried destroying the rotator body but it is not a good way of moving the arrow.
Any suggestions ?
Here is the code
revoluteJoint = new RevoluteJointDef();
revoluteJoint.bodyA = rotatorBody; //defining the first body for the revolute joint
revoluteJoint.bodyB = arrowBody; //defining the second body for the revolute joint
revoluteJoint.localAnchorB.set(0,0); //defining where you want the anchor point to be on the arrowbody
revoluteJoint.collideConnected = false; //this is so that the relevant bodies can overlap
revoluteJoint.enableMotor = true; //letting the joint move by itself
revoluteJoint.maxMotorTorque = 250.0f; //maximum force
revoluteJoint.motorSpeed = 0.0f; //speed is set to 0 so that the user can only move the arrow with touch
world.createJoint(revoluteJoint);
buttonSTART.addListener(new InputListener(){
#Override
public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
//game.setScreen(new Screenconfirmation(game));
world.destroyBody(rotatorBody);
arrowBody.setAwake(true);
arrowBody.setGravityScale(1.0f);
arrowBody.setAngularVelocity(0.0f);
arrowBody.setTransform(arrowBody.getWorldPoint(new Vector2(3,0)), arrowBody.getAngle());
arrowBody.setLinearVelocity(new Vector2(150,0));
return true;
}
});

Related

InputPane does not work correctly

I'm currently developing an Universal Application, but here is a problem. I have a Frame with the TextBox for User Phone Number.
So, I want to change the height of my LayoutRoot (GRID) so it can fits in the free space.
I'm using InputPane.GetForCurrentView().Showing and InputPane.GetForCurrentView().Hiding for that purposes.
Here is my code.
public UserRegistrationAuthorization_PhoneNumber()
{
this.InitializeComponent();
LayoutRootInitialHeight = LayoutRoot.ActualHeight;
InputPane.GetForCurrentView().Showing += UserRegistrationAuthorization_PhoneNumber_Showing;
InputPane.GetForCurrentView().Hiding += UserRegistrationAuthorization_PhoneNumber_Hiding;
}
private void UserRegistrationAuthorization_PhoneNumber_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
{
LayoutRoot.Height = LayoutRoot.ActualHeight - args.OccludedRect.Height;
LayoutRoot.VerticalAlignment = VerticalAlignment.Top;
args.EnsuredFocusedElementInView = true;
}
private void UserRegistrationAuthorization_PhoneNumber_Hiding(InputPane sender, InputPaneVisibilityEventArgs args)
{
// TODO: Get rid of that shit
LayoutRoot.Height = LayoutRootInitialHeight;
args.EnsuredFocusedElementInView = false;
}
When I click outside the TextBox keyboard hides and leaves after that a black hole on the screen. 2
But, the most interesting is that when I press that physical Back Button on my Lumia, keyboard hides normally and my LayoutRoot gets the Frame's initial height.
Is it a bug or I'm doing something wrong?
It happens because by the time you saving your LayoutRootInitialHeight in the constructor, LayoutRoot actually isn't loaded and it's ActualHeight == 0. Then you setting LayoutRoot.Height to 0, so it becomes not visible. So you should probably save your LayoutRootInitialHeight in LayoutRoot's Loaded event handler.
I would also suggest you not to change LayoutRoot's height at all. It causes your whole visual tree to be rendered from scratch and it's bad practise in general. Instead, modify RenderTransform of all necessary elements so they get moved to appropriate positions. RenderTransform is the right way to handle movements and animations on the screen, and you can achieve some nice visual effects with Next button moving up same as keyboard.
Roughly your code can look like this:
<Button Content="Next" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center">
<Button.RenderTransform>
<CompositeTransform x:Name="NextButtonTransform" TranslateY="0"/>
</Button.RenderTransform>
</Button>
...
private void UserRegistrationAuthorization_PhoneNumber_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
{
NextButtonTransform.TranslateY = -300;
EnsuredFocusedElementInView = true;
}
private void UserRegistrationAuthorization_PhoneNumber_Hiding(InputPane sender, InputPaneVisibilityEventArgs args)
{
NextButtonTransform.TranslateY = 0;
args.EnsuredFocusedElementInView = false;
}
And more complicated way is to run some storyboard which makes your Next button move up and down in same speed with keyboard, always appearing on top of it. Although, since InputPane.GetForCurrentView().Showing gets fired after keyboard already shown fully, you should hook up all animations to TextBox.GotFocus and TextBox.LostFocus events. On mobile, keyboard is always shown when text box has focus, so it will work nicely.

AS3 - How to use pixel/point detection with mouse event instead of object detection

This seems like it should be so easy that I'm embarrassed to ask, but I just can't get it.
I have a large round MovieClip (being used as a button). This MovieClip contains a PNG with a transparent background inserted into the MovieClip.
Due to its size there are large empty registration areas on the 4 corners (the bounding box).
How can I have the mouse register as being over only the circle pixels and not the blank space (of Alpha channel pixels) in the square boundary box?
Simple sample code:
public function simpleSample () : void
{
mc1.buttonMode = true;
mc1.addEventListener(MouseEvent.CLICK, doStuff);
}
public function doStuff (event:MouseEvent) : void
{
mc2.gotoAndStop(2);
}
Here are 3 different ways to accomplish this.
EDIT Since you've later explained that your button is an image, this first option won't work for you
If the shape flag on hitTestPoint works with your button (eg it's a shape), you can use hitTestPoint inside your mouse click handler to figure out if the click is actually over the object:
public function doStuff(event:MouseEvent){
//only continue if hit test point is true,
//the x and y values are global (not relative to the mc your testing as one might suppose)
//the third parameter should be true, so it takes into account the shape of object and not just it's bounds
if(mc1.hitTestPoint(stage.mouseX, stage.mouseY, true)){
mc2.gotoAndStop(2);
}
}
If the above doesn't work because you have bimtap data in your button, then an easy way to accomplish this is to just add a shape mask to the button.
So, either inside your button using FlasPro, mask everything with a circle shape, or, do it via code by doing the following when you first show the button:
var s:Shape = new Shape();
s.graphics.beginFill(0);
s.graphics.drawCircle(mc1.x + (mc1.width * .5), mc1.y + (mc1.height * .5), mc1.width / 2);
addChild(s);
mc1.mask = s;
If using an image as the button, or you want to set a threshold of how transparent to consider a click, then you can check the transparency of the pixel under the mouse:
function doStuff(event:MouseEvent){
//only continue if pixel under the mosue is NOT transparent
//first, you need a bitmap to work with
//if you know for sure the position of your bitmap, you can do something like this:
var bm:Bitmap = mc1.getChildAt(0) as Bitmap;
//annoyingly though, FlashPro makes timeline bitmaps shapes,
//so the above won't work UNLESS you take your bitmap in the FlashPro Library
//and export it for actionscript, giving it a class name, then it will be an actual bitmap on the timeline.
//As an alternative, you could (very CPU expensively) draw the whole button as a bitmap
var bmd:BitmapData = new BitmapData(mc1.width,mc1.height,true,0x00000000);
bmd.draw(mc1);
var bm:Bitmap = new Bitmap(bmd);
//we get the 32bit pixel under the mouse point
var pixel:uint = bm.bitmapData.getPixel32(bm.x + event.localX,bm.y + event.localY);
//then we grab just the Alpha part of that pixel ( >> 24 & 0xFF ).
//if the value is 0, it's totally transparent, if it's 255, it's totally opaque.
//for this example, let's say anything greater than 0 is considered good to be a click
if((pixel >> 24 & 0xFF) > 0){
mc2.gotoAndStop(2);
}
}

Libgdx: Stage only renders at (0, 0)

I'm attempting to use LibGDX Stage for my GUI elements, but I'm having loads of difficulty getting it to render properly. Right now, I'm attempting to render a chat window in the lower left corner of the screen.
Here is the construction of the GUI objects:
stage = new Stage();
stage.setCamera(controller.getCamera());
uiSkin = new Skin(Gdx.files.internal("res/gui/skin/uiskin.json"));
Table table = new Table(uiSkin);
stage.addActor(table);
table.setSize(300, 260);
table.setPosition(0, 0);
table.setFillParent(false);
table.bottom();
table.left();
table.pad(10);
lblChatLabel = new Label("", uiSkin);
lblChatLabel.setWrap(true);
final ScrollPane scroll = new ScrollPane(lblChatLabel, uiSkin);
txtChatBar = new TextField("do a chat", uiSkin);
txtChatBar.setName("txtChatBar");
table.add(txtChatBar).width(300f);
table.row();
table.add(scroll).expand().fill().colspan(4);
txtChatBar.addListener(new InputListener() {
public boolean keyDown(InputEvent event, int keycode) {
if (keycode == Input.Keys.ENTER) {
sendMessage();
// Close the chat bar
showChat = false;
return true;
}
return false;
}
});
And here is my render() method:
Log.debug("void", "x: " + stage.getCamera().position.x + ", y: " + stage.getCamera().position.y);
stage.act();
for (Actor a : stage.getActors()) {
a.draw(spriteBatch, 1);
}
In another section of code elsewhere, the game's camera object is translated to center on the player:
camera.translate(targetPosition.x, targetPosition.y);
camera.update();
So that all said, the chat window renders properly, but it only does so at 0, 0. I've also changed called stage.draw() rather than iterate through the Actors individually, but that causes the same issue. Here is a screenshot illustrating the issue:
http://i.imgur.com/8uz5lV6.jpg
Finally, I've tried to translate the stage manually by setting the viewport, but that causes an even weirder issue.
float cx = controller.getCamera().getX();
float cy = controller.getCamera().getY();
float width = controller.getCamera().viewportWidth;
float height = controller.getCamera().viewportHeight;
stage.act();
stage.setViewport(width, height, true, cx, cy, width, height);
stage.draw();
Image here:
http://i.imgur.com/JpSLq1s.jpg
Certainly I am doing something wrong, but I have no idea at this point. I would have assumed that the stage follows the Camera translation, but that doesn't appear to be the case. Any suggestions are welcome! Thanks!
I believe the issue is this line of code:
stage.setCamera(controller.getCamera());
If I'm reading correctly, you want the chat window to always render from (0,0), no matter where the camera is on the screen. If that's the case, then the stage shouldn't have any relation with the camera, which moves around and just further complicates getting the stage in the right position to be rendered properly.
Without that line of code, you should be able to just call
stage.act();
stage.draw();
and it should work fine.

how to check, whether user is dragging the object rightside or leftside in actionscript 3

I am creating a flash based application, where user can change a rectangle shapes, width and height using mouse drag. here is a quick prototype image.
let me explain briefly: In the image you can see, i am having a tiny red rectangle, which one now sitting is starting position and user can drag that only 100px to right side. The idea is when, user is dragging that to right, i want to rectangle also expand right side with that, like a flexible box. if he is dragging back then it will return with that.
so, the doubt is: how will check, whether user is dragging right side or left side. so based on that we can update the rectangle width.
Here is the code :
import flash.geom.Rectangle;
import flash.events.MouseEvent;
var horizRect:Rectangle = new Rectangle(scrollPathHoriz.x, scrollPathHoriz.y, 100, 0);
var horizCount:Number;
//event listener for the anchor point.
scrollHoriz.addEventListener(MouseEvent.MOUSE_DOWN, dragScroller);
stage.addEventListener(MouseEvent.MOUSE_UP, dropScroller);
//mouse down and mouse up event handler.
function dragScroller(evt:MouseEvent):void {
horizCount= scrollHoriz.x;
scrollHoriz.startDrag(false, horizRect);
scrollHoriz.addEventListener(MouseEvent.MOUSE_MOVE, calculateHorizPixel);
}
function dropScroller(evt:MouseEvent):void {
scrollHoriz.stopDrag();
scrollHoriz.removeEventListener(MouseEvent.MOUSE_MOVE, calculateHorizPixel);
}
function calculateHorizPixel(evt:MouseEvent):void {
horizCount ++;
trace(horizCount);
}
Since you are already saving the starting x position,
You simply need the difference between starting position & current position :
function calculateHorizPixel(evt:MouseEvent):void {
var dx = scrollHoriz.x - horizCount;
trace(dx);
}
A negative value of dx indicates that scrollHoriz moved left, else right.
Or try this:
import flash.events.MouseEvent;
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveMouse);
function moveMouse(event:MouseEvent):void
{
var dx:Number = mouseX - stage.stageWidth/2;
trace(dx);
}

Changing levels of nested movieclips in Flash AS 3.0

I am working on a zooming square navigation project (visually like Windows Metro, but squares take over the screen when clicked on). I'm having trouble getting the squares to the top layer (setChildIndex). Here is the code for when a square is clicked on:
function zoom(event:MouseEvent):void {
// saves location and size of icons
returnto = event.currentTarget;
returntoX = event.currentTarget.x;
returntoY = event.currentTarget.y;
returntoWidth = event.currentTarget.width;
returntoHeight = event.currentTarget.height;
// turn off button behaviours
event.currentTarget.buttonMode = false;
event.currentTarget.alpha = 1;
event.currentTarget.removeEventListener(MouseEvent.MOUSE_OVER, rollover);
event.currentTarget.removeEventListener(MouseEvent.CLICK, zoom);
event.currentTarget.removeEventListener(MouseEvent.ROLL_OUT, rollout);
// put clicked box on top
setChildIndex(returnto, numChildren-1);
// fade out icon decor
TweenLite.to(returnto.decor, .25, {alpha:0});
// make square take over screen, call finished when done
TweenLite.to(returnto, 1, {x:stage.x,y:stage.y, width:stage.stageWidth, height:stage.stageHeight, ease:Expo.easeInOut, onComplete:finished});
}
the squares are all inside a main movieclip (named navigation) on the stage (so the first square is navigation.sq_1)
I am not a Flash developer, so I'm really struggling with AS3. Hopefully this is enough info for someone to help. Thanks!
S
Just try to add your returnto clip with addChild() method:
// put clicked box on top
addChild(returnto);
Display List's default behavior when addChild() is to put the child on top of all childs. Other children's indexes are recounted.