I am making a racing game using Libgdx. I want to touch the half right side of screen to speed up, at the same time without removing previous touch point touch again another on the left side of the screen to fire a shot. I am unable to detect later touch points.
I have searched and get Gdx.input.isTouched(int index) method, but cannot determin how to use it. My screen touch code is:
if(Gdx.input.isTouched(0) && world.heroCar.state != HeroCar.HERO_STATE_HIT){
guiCam.unproject(touchPoint.set(Gdx.input.getX(), Gdx.input.getY(), 0));
if (OverlapTester.pointInRectangle(rightScreenBounds, touchPoint.x, touchPoint.y)) {
world.heroCar.state = HeroCar.HERO_STATE_FASTRUN;
world.heroCar.velocity.y = HeroCar.HERO_STATE_FASTRUN_VELOCITY;
}
} else {
world.heroCar.velocity.y = HeroCar.HERO_RUN_VELOCITY;
}
if (Gdx.input.isTouched(1)) {
guiCam.unproject(touchPoint.set(Gdx.input.getX(), Gdx.input.getY(), 0));
if (OverlapTester.pointInRectangle(leftScreenBounds, touchPoint.x, touchPoint.y)) {
world.shot();
}
}
You'll want to use the Gdx.input.getX(int index) method. The integer index parameter represents the ID of an active pointer. To correctly use this, you will want to iterate through all the possible pointers (in case two people have 20 fingers on the tablet?).
Something like this:
boolean fire = false;
boolean fast = false;
final int fireAreaMax = 120; // This should be scaled to the size of the screen?
final int fastAreaMin = Gdx.graphics.getWidth() - 120;
for (int i = 0; i < 20; i++) { // 20 is max number of touch points
if (Gdx.input.isTouched(i)) {
final int iX = Gdx.input.getX(i);
fire = fire || (iX < fireAreaMax); // Touch coordinates are in screen space
fast = fast || (iX > fastAreaMin);
}
}
if (fast) {
// speed things up
} else {
// slow things down
}
if (fire) {
// Fire!
}
An alternative approach is to setup an InputProcessor to get input events (instead of "polling" the input as the above example). And when a pointer enters one of the areas, you would have to track that pointer's state (so you could clear it if it left).
Related
The following code I wrote does what I want, a touch on the left or right side of the screen to move the sprite left or right and stop at the edge of the phone screen. The issue I'm having is when you do a fast motion of touching the right side of the screen, letting go while using another finger to touch the left side of the screen to change direction will yield a result of the sprite still moving to the right side of the screen despite you wanting to move left. In order to fix this, you need to let go completely for at least 0.5sec then press the other direction to start moving in that direction, which I don't want to have to live with. If anyone has any tips/help for this, please let me know!
MAIN ACTIVITY CLASS METHOD:
public boolean onTouchEvent(MotionEvent event){
int x = (int)event.getX();
switch(event.getAction()) {
case (MotionEvent.ACTION_DOWN):
CharacterSprite.touchedX = x;
break;
case (MotionEvent.ACTION_UP):
CharacterSprite.touchedX = 0;
break;
}
return super.onTouchEvent(event);
}
CHARACTERSPRITE CLASS METHOD:
public void update() {
if (touchedX != 0) {
if (touchedX < screenWidth / 2) {
if (!(xVelocity < 0)) {
xVelocity = xVelocity * -1;
}
if (!(x > 0)) {
touchedX = 0;
return;
}
x += xVelocity;
}
if (touchedX > screenWidth / 2) {
if (!(xVelocity > 0)) {
xVelocity = xVelocity * -1;
}
if (!(x < screenWidth - image.getWidth())) {
touchedX = 0;
return;
}
x += xVelocity;
}
}
}
The way you handling MotionEvent will not work for multitouch events. Each finger (action pointer) data stored as an array and you need to handle each entry separately. Here is the lesson on handling multitouch events:
https://developer.android.com/training/gestures/multi
I'm trying to make a grid of squares that change their fill (from black to white and vice-versa) when clicked. I'm able to turn the entire grid on or off currently, but I'm unable to figure out how to specify which particular square should be toggled when the mouse clicks within its borders. I've created buttons using mouseX and mouseY coordinates before, but they were for specific objects that I could adjust manually. I can't figure out how to do this using for loops and arrays.
I've been told to create a boolean array and pass the value of that array to the grid array, but again, I don't know how to specify which part of the array it needs to go to. For example, how do I change the fill value of square [6][3] upon mousePressed?
Here is my code so far:
int size = 100;
int cols = 8;
int rows = 5;
boolean light = false;
int a;
int b;
void setup() {
size (800, 600);
background (0);
}
void draw() {
}
void mousePressed() {
light = !light;
int[][] box = new int[cols][rows];
for (int i = 0; i < cols; i++) {
for (int j = 0; j < rows; j++) {
box[i][j] = i;
int a = i*100;
int b = j*100;
if (light == true) {
fill(255);
} else {
fill(0);
}
rect(a, b, 100, 100);
println(i, j);
}
}
}
First of all, you are currently recreating the entire board whenever the mouse is pressed. You must retain that info between mouse clicks, so make box a global array up there with the others. Further, it's sufficient to make it a boolean array if all you care about is the on/off state of each square:
boolean[][] isSquareLight = new boolean[cols][rows];
Instead of
if (light == true) {
you should then just check
if (isSquareLight[i][j] == true) {
(note that the == true is redundant).
Now, you've already written code that finds the coordinates for each box: You're passing it to rect!
rect(a, b, 100, 100);
All that is left to do is check whether the mouse is inside this rect, i.e. whether mouseX is between a and a+100 (and similar for mouseY) - if that's the case, then the user clicked in the box given by the current (i, j), so you can just negate isSquareLight[i][j] (before checking it like above) and it will work.
There are ways to calculate this without looping through the entire grid every time, but maybe the above helps you find the path yourself instead of just getting the code made for you.
PS: The int a; int b; at the top does nothing and can be removed. You are using the local variables a and b in your function, which is correct.
I know there already are many similar questions and answers here, I've done searching some and I think I should ask this as a new question as I still can't find the right answer for me.
So, I write a simple card game, and I got 90% of my knowledge from the book "Beginning Android Games 2nd edition" by Mario Zechner, I wonder if some of you have read it. I follow the guide during writing my game, I even use the framework he provides in the book (Mr.Nom game). I've asked in his forum, but no response, the forum is not too active anyway.
The book provide framework where there are method to draw Pixmap, draw line, etc.. all directly from code, so I never touch the layout, I don't use XML either.
The book uses model similar to MVC (model view controller), separating the world and the game. The presentation and the manipulation layerd. It separates each UI according the game state: Ready, paused, running, gameOver.
Now I am stuck at some code as I want to change my button image. I provide 2 image (Unpressed and Pressed), at first in so called (RunningUI) part, I draw Unpressed image. and simply when user touch the button (touch down only) I want to change the image to pressed image. And return back to unpressed image again after the touch is released.
private void drawRunningUI() {
Graphics g = game.getGraphics();
g.drawPixmap(Assets.buttonUnpressed, 70, 200);
}
The updateRunning code is here:
private void updateRunning(List<TouchEvent> touchEvents, float deltaTime) {
Graphics g = game.getGraphics();
int len = touchEvents.size();
for(int i = 0; i < len; i++) {
TouchEvent event = touchEvents.get(i);
if (event.type == TouchEvent.TOUCH_UP) {
if (event.x < 64 && event.y < 64) {
if (Settings.soundEnabled)
Assets.click.play(1);
state = GameState.Paused;
return;
}
}
if (event.type == TouchEvent.TOUCH_DOWN) {
if (event.x >= 120 && event.x <= 180 && event.y >= 250 && event.y <= 380) {
Assets.click.play(1);
g.drawPixmap(Assets.buttonPressed, 70, 200); <-- nothing happened
}
}
}
world.update(deltaTime);
}
I modified "some here and there", but still I don't get the result I want.
Although I don't know this framework and can only surmise how the canvas drawing is made, I suspect drawRunningUI() is called immediately after updateRunning() and "overwrites" the previous draw with Assets.buttonPressed (depends on how invalidation / redraw is handled).
Anyway, you should only draw in one place, and it then gets a lot easier. In your event handling code you should update a UI state which you would then use to draw the UI. Something like this:
private void updateRunning(List<TouchEvent> touchEvents, float deltaTime) {
int len = touchEvents.size();
for(int i = 0; i < len; i++) {
TouchEvent event = touchEvents.get(i);
if(event.x < 64 && event.y < 64) {
if(event.type == TouchEvent.TOUCH_UP) {
// ...
}
else if (event.x >= 120 && event.x <= 180 && event.y >= 250 && event.y <= 380) {
switch(event.type) {
case TouchEvent.TOUCH_UP:
uiState.updateButtonState(ButtonState.RELEASED);
break;
case TouchEvent.TOUCH_DOWN:
Assets.click.play(1);
uiState.updateButtonState(ButtonState.PRESSED);
break;
default:
// nothing to do
}
}
}
world.update(deltaTime);
// I suppose an invalidation has happened / a redraw will happen next
}
private void drawRunningUI() {
Graphics g = game.getGraphics();
g.drawPixmap(uiState.getButtonState() == ButtonState.PRESSED ? Assets. buttonPressed : Assets.buttonUnpressed,70,200);
}
This won't be enough but should illustrate the idea.
The problem I'm having is with my render loop. My application is a series of 'Tile' objects each with an x and y coordinate and image. When the program starts it creates a 10x10 grid of these tiles on screen. However, not all the squares can be seen at the same time, so you can use the arrow keys to pan around them. When the key is pressed it uses a for loop to cycle through all the currently rendered tile (stored in an ArrayList) and shifts them all 16 in the appropriate direction. The problem is some of the tiles flicker. I can see when scrolling that one half of the screen doesn't move in time to be rendered in the right spot, making a black gap between that and the other half of the tiles. how do I ensure that all tiles are moved before rendering?
render function from my Core class
public static void render()
{
while(true)
{
Graphics g = buffer.getDrawGraphics();
try
{
g.setColor(Color.black);
g.fillRect(0, 0, 1280, 720);
if(renderQueue != null)
{
for(int i = 0; i<renderQueue.size(); i++)
{
Tile t = renderQueue.get(i);
g.drawImage(t.getImage(), t.getX(), t.getY(), null);
}
}
if(!buffer.contentsLost())
{
buffer.show();
}
}
finally
{
if(g != null)
{
g.dispose();
}
}
}
}
And here's the movement update function from the Input class
public void keyPressed(KeyEvent ke)
{
int e = ke.getKeyCode();
switch(e)
{
case 38://up
if(scrollY > 0)
{
scrollY -= 16;
for(int i = 0; i<Core.renderQueue.size(); i++)
{
Core.renderQueue.get(i).incrementY(16);
}
}
break;
case 40://down
if(scrollY < 560)
{
scrollY += 16;
for(int i = 0; i<Core.renderQueue.size(); i++)
{
Core.renderQueue.get(i).incrementY(-16);
}
}
break;
case 37://right
if(scrollX < 0)
{
scrollX += 16;
for(int i = 0; i<Core.renderQueue.size(); i++)
{
Core.renderQueue.get(i).incrementX(16);
}
}
break;
case 39://left
if(scrollX > 0)
{
scrollX -= 16;
for(int i = 0; i<Core.renderQueue.size(); i++)
{
Core.renderQueue.get(i).incrementX(-16);
}
}
break;
}
Thanks in advance!
It sounds like the tiles are being rendered while the coordinates for some of the tiles still have to be changed by Input.keyPressed. You could fix that by directly using scrollX and scrollY to draw the tile images in Core.render, instead of changing the coordinates for each of the tiles. If you copy the scroll values to two local variables at the begin of the while loop in render, the same values will be used for each tile.
Another option is to create a new list with tiles that have the modified coordinates (you could use the images from the current list). When the new list is complete, you could set a flag like newRenderQueue which will be picked up in render. When a new iteration of the while loop in render starts, you can replace the render queue with the new list and reset the flag.
P.S. Welcome to Stack Overflow! As Andrew Thompson already mentioned, it's very helpful to provide a complete example of your problem. This way people can quickly investigate the issue and provide (hopefully useful) advice... ;-)
I'm wondering how I can move an image after it has been drawn?
Heres my code for drawing the image:
public int probeX = 500;
public int Minerals = 400;
public int drawProbeA, drawProbe = 0;
public void init() {
// Images Call
probe = getImage(getDocumentBase(), "image/probe.png");
}
public void paint(Graphics g) {
if (drawProbe == 1) {
for (int k = 0; k < drawProbeA; k++) {
g.drawImage(probe, probeX, 474, 50, 50, this);
probeX += 50;
}
probeX = 500;
}
}
public boolean mouseDown(Event e, int x, int y) {
// Clicking on the probe icon
if (x > 1068 && x < 1119 && y > 785 && y < 832 && onNexus == 1
&& Minerals >= 50) {
drawProbeA += 1;
drawProbe = 1;
Minerals -= 50;
}
return true;
}
How can I make it so that after the images are drawn, that hitting an icon will cause the image to be auto moved down the y-axis (like 50 pixels)? Basically, like sliding the image down with an animation? And then stop and then move back up to the orginal spot.
I am using an Applet and would like the animation to loop repeatedly. Thanks.
You need to have a global variable, or another variable somewhere, that indicates that...
The image needs to move
How far in the Y direction it has moved already
Which direction it is going (up or down)
When you have this, you need to add code to your paint() method to draw the image in the correct spot.
You would also need a Timer or Thread that will tell the component to repaint() every few milliseconds, and change your global variables so that it will repaint it lower/higher.
So, as a bit of an example, you might have some global variables like this...
int yPosition = 0;
boolean goingDown = true;
When you need to start your animation, start a Timer that calls the following over and over...
if (goingDown == true){
// if we've gone down 50 pixels, start going up again
if (yPosition <= 0){
goingDown = false;
yPosition++;
}
else {
yPosition--; // move it down 1 pixel
}
}
else {
// if we're going up and we reach 0, go down again
if (yPosition >= 50){
goingDown = true;
yPosition--;
}
else {
yPosition++; // move it up1 pixel
}
}
component.repaint(); // this will call the paint() method
Not your paint method just need to draw your image at the different position. Just change the g.drawImage(probe,probeX,474,50,50,this); like to include the yPosition...
g.drawImage(probe,probeX,474+yPosition,50,50,this);
This should at least point you in the right direction.