libGDX: User Input and Frame by Frame Animation
2 likes2,857 views
1. The document discusses various aspects of user input and frame animation in libGDX, including touch input, keyboard input, gestures, the accelerometer, and sprite animation. 2. It explains how to set up input processing using InputProcessor and GestureDetector, and how to read touch, keyboard, and accelerometer values. 3. It also provides examples of creating sprite animations by splitting textures into frames and using the Animation class.
![Split
.png
into
TextureRegions
walkSheet = new Texture(Gdx.files.internal(”image.png"));
// Method for splitting one texture to TextureRegions
TextureRegion[][] tmp = TextureRegion.split(
walkSheet,
walkSheet.getWidth() / FRAME_COLS,
walkSheet.getHeight() / FRAME_ROWS );](https://image.slidesharecdn.com/04-user-input-and-graphics-150126013111-conversion-gate01/85/libGDX-User-Input-and-Frame-by-Frame-Animation-28-320.jpg)
![2D
array
-‐>
1D
private TextureRegion[] transformTo1D(TextureRegion[][] tmp) {
TextureRegion [] walkFrames
= new TextureRegion[FRAME_COLS * FRAME_ROWS];
int index = 0;
for (int i = 0; i < FRAME_ROWS; i++) {
for (int j = 0; j < FRAME_COLS; j++) {
walkFrames[index++] = tmp[i][j];
}
}
return walkFrames;
}](https://image.slidesharecdn.com/04-user-input-and-graphics-150126013111-conversion-gate01/85/libGDX-User-Input-and-Frame-by-Frame-Animation-29-320.jpg)
![Split
.png
into
TextureRegions
walkSheet = new Texture(Gdx.files.internal(”image.png"));
// Method for splitting one texture to TextureRegions
TextureRegion[][] tmp = TextureRegion.split(
walkSheet,
walkSheet.getWidth() / FRAME_COLS,
walkSheet.getHeight() / FRAME_ROWS );
TextureRegion [] frames = transformTo1D(tmp);
Animation walkAnimation = new Animation(1 / 60f, frames);](https://image.slidesharecdn.com/04-user-input-and-graphics-150126013111-conversion-gate01/85/libGDX-User-Input-and-Frame-by-Frame-Animation-30-320.jpg)
libGDX: User Input and Frame by Frame Animation
- 1. libGDX: User Input and Frame by Frame Anima8on Jussi Pohjolainen Tampere University of Applied Sciences
- 3. Event vs Polling • Polling – Do something on each frame, really fast • Was mouse clicked? Was mouse clicked? Was mouse clicked? – Good for arcade games • Event – Do something when event handles • No8fy when mouse was clicked • Mouse / touch / keyboard can be received either in 1) polling or 2) event handling
- 4. Polling Touch / Keyboard • For most arcade games, polling is good • Mul8touch is supported! – boolean first = Gdx.input.isTouched(0); – boolean second = Gdx.input.isTouched(1); – int firstX = Gdx.input.getX(); – int firstY = Gdx.input.getY(); – int secondX = Gdx.input.getX(1); – int secondY = Gdx.input.getY(1); • Keyboard – boolean isAPressed = Gdx.input.isKeyPressed(Keys.A);
- 5. Polling: InputProcessor • An InputProcessor (Interface) is used to receive input events from the keyboard and the touch screen • It has to be registered – Input.setInputProcessor(InputProcessor); • When registered the methods from InputProcessor interface are called.
- 7. Using InputProcessor public class InputDemo extends ApplicationAdapter implements InputProcessor { @Override public void create () { Gdx.input.setInputProcessor(this); } @Override public void render () { } @Override public boolean keyDown(int keycode) { return false; } @Override public boolean keyUp(int keycode) { return false; } ...
- 8. Using InputAdapter and Inner Class public class InputDemo extends ApplicationAdapter { @Override public void create () { Gdx.input.setInputProcessor(new Listener()); } private class Listener extends InputAdapter { @Override public boolean touchDragged(int screenX, int screenY, int pointer) { // implementation here return true; } } }
- 9. GESTURES
- 10. GestureDetector • TouchDown – User touches screen • LongPress – User touches screen for some 8me • Tap – User touches screen and liVs the finger again • Pan – User drags a finger across the screen. Useful for implemenIng Camera panning in 2D • PanStop – Called when no longer panning • Fling – User dragged a finger across the screen, then liVed up. Useful for swipe gestures • Zoom – User places two fingers on the screen and moves them together/apart. Useful for Camera zooming • Pinch – Zooming + rota8on
- 11. Star8ng to Listen to Gestures • Really easy – Gdx.input.setInputProcessor(new GestureDetector(GestureListener)); • GestureListener is an interface • GestureAdapter also available
- 12. GestureListener public class MyGestureListener implements GestureListener { @Override public boolean touchDown(float x, float y, int pointer, int button) {} @Override public boolean tap(float x, float y, int count, int button) {} @Override public boolean longPress(float x, float y) {} @Override public boolean fling(float velocityX, float velocityY, int button) {} @Override public boolean pan(float x, float y, float deltaX, float deltaY) {} @Override public boolean panStop(float x, float y, int pointer, int button) {} @Override public boolean zoom (float originalDistance, float currentDistance){} @Override public boolean pinch (Vector2 initialFirstPointer, Vector2 initialSecondPointer, Vector2 firstPointer, Vector2 secondPointer){} }
- 13. ACCELEROMETER
- 14. Accelerometer • An accelerometer measures the accelera8on of a device on three axes • From this accelera8on one can derive the 8lt or orienta8on of the device. – Phones: portrait default – Tablet: landscape default • LibGDX shows accelerometer readings always as in the image
- 15. (0,0) Accelerometer x Accelerometer y y increments x increments
- 16. Accelerometer Readings • Accelerometer readings can be accessed – float accelX = Gdx.input.getAccelerometerX(); – float accelY = Gdx.input.getAccelerometerY(); – float accelZ = Gdx.input.getAccelerometerZ(); • When moving and if in landscape mode in android, no8ce X vs Y! – speedX += Gdx.input.getAccelerometerY();
- 18. User input • Desktop – Swing dialog • Android – Android dialog • Use TextInputListener
- 19. public class InputDemo extends ApplicationAdapter { @Override public void create () { MyTextInputListener listener = new MyTextInputListener(); Gdx.input.setInputProcessor(newGestureDetector(newGestureDetector.GestureAdapter(){ @Override public boolean tap(float x, float y, int count, int button) { Gdx.input.getTextInput(new MyTextInputListener(), "title", "test", "hint"); return true; } })); } private class MyTextInputListener implements Input.TextInputListener { @Override public void input (String text) { Gdx.app.log("InputDemo", text); } @Override public void canceled () { Gdx.app.log("InputDemo", "canceled"); } } }
- 20. SPRITE
- 21. Game Object • Game object may hold informa8on about – Texture – Geometry • width • height • x, y – Color • You could create a class for your game object that capsulates all of these • But even beaer, libGDX has already this class, it's called Sprite
- 22. Sprite -‐ class • Holds geometry, color and texture informa8on • Has a posi8on and a size given as width and height • Sprite is always rectangular • Sprite has also origin for rota8on and scaling – origin is in boaom leV
- 23. Crea8ng a Sprite
- 24. public class SpriteDemo extends ApplicationAdapter { private Sprite player; private Texture alienTexture; private OrthographicCamera camera; private SpriteBatch batch; public final static float WIDTH = 1280; public final static float HEIGHT = 720; @Override public void create () { player = new Sprite( alienTexture = new Texture("alien-displeased-icon.png") ); camera = new OrthographicCamera(); camera.setToOrtho(false, WIDTH, HEIGHT); batch = new SpriteBatch(); } @Override public void render() { batch.setProjectionMatrix(camera.combined); Gdx.gl.glClearColor(1, 1, 1, 1); Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); batch.begin(); player.draw(batch); batch.end(); } @Override public void dispose() { alienTexture.dispose(); } }
- 25. FRAME ANIMATION
- 26. Anima8on • Use Anima8on class – Animation walkAnimation = new Animation(frameDuration, frames); • Frame dura8on? Time between frames in seconds: 1 / 60 fps • Frames? – TextureRegion array • TextureRegion? – Part of texture
- 27. TextureRegion
- 28. Split .png into TextureRegions walkSheet = new Texture(Gdx.files.internal(”image.png")); // Method for splitting one texture to TextureRegions TextureRegion[][] tmp = TextureRegion.split( walkSheet, walkSheet.getWidth() / FRAME_COLS, walkSheet.getHeight() / FRAME_ROWS );
- 29. 2D array -‐> 1D private TextureRegion[] transformTo1D(TextureRegion[][] tmp) { TextureRegion [] walkFrames = new TextureRegion[FRAME_COLS * FRAME_ROWS]; int index = 0; for (int i = 0; i < FRAME_ROWS; i++) { for (int j = 0; j < FRAME_COLS; j++) { walkFrames[index++] = tmp[i][j]; } } return walkFrames; }
- 30. Split .png into TextureRegions walkSheet = new Texture(Gdx.files.internal(”image.png")); // Method for splitting one texture to TextureRegions TextureRegion[][] tmp = TextureRegion.split( walkSheet, walkSheet.getWidth() / FRAME_COLS, walkSheet.getHeight() / FRAME_ROWS ); TextureRegion [] frames = transformTo1D(tmp); Animation walkAnimation = new Animation(1 / 60f, frames);
- 31. Rendering float stateTime = 1.0f; TextureRegion currentFrame; public void render() { // stateTime was initialized to 0.0f stateTime += Gdx.graphics.getDeltaTime(); // stateTime is used to calculate the next frame // frameDuration! // true = it's a looping anim // false = it's not a looping anim currentFrame = walkAnimation.getKeyFrame(stateTime, true); spriteBatch.begin(); spriteBatch.draw(currentFrame, 150, 150); spriteBatch.end(); }
- 32. TIPS
- 33. Crea8ng Game Objects • For each Game Object, create own class • The class may have – Inheritance relaIonship with Sprite / Texture (is – a) or – ComposiIon relaIonship with Sprite / Texture (has – a) • Add aaributes like – speedX, speedY, sounds, anima8ons • See example from course homepage!