Develop Reference

Make animation more smoother

I’m trying to create some animation ( boy who runs whenever key is pressed) using JPanel and painComponent.
So, first of all I declare some images, Image array and some methods for drawing. I created timer and added it to constructor.
Image img1;
Image img2;
Image img3;
Image img4;
int index = 0;
Image currentImage l;
Image[] images = new Image[4]
public class Animation extends JPanel implements ActionListener
{
public Animation()
{
loadImages();
getTimer();
imgAdder();
addFirstImage();
}
public void serCurrentImage(Image currentImage)
{
this.currentImage = currentImage;
}
public void getTimer()
{
Timer timer = new Timer(20,this)
timer.start();
}
public void imgAdder()
{
images[1] = img1;
...
}
public void addFirstImage()
{
currentImage = img1;
}
private void loadImages()
{
try
{
BufferedImage img = ImageIO.read(getClass.getResource(“/resources/images/img1.png”);
img1 = img;
// and so on for every image
}catch(IOexception ioe )
ioe.printStackTrace();
}
}
public void paintComponent (Graphics g)
{
super.paintComponent(g);
g.drewImage(currentImage,0,0,this);
requestsFocus();
}
public class FieldKeyListener extends KeyAdapter
{
public void move()
{
setCurrentImage(image[index]);
index++;
if( index == 4 )
index = 0;
}
public void keyPressed(KeyEvent e)
{
super.keyPressed(e);
int key = e.getKeyCode();
if(key == Key.Event.VK_LEFT)
move();
}
}
}
Then drew all images through paintComponent using loop for my array.
Also I declared class which extends KeyAdapter.
Everything seems to be fine and my animation works, but problem is that it works not as smoothly as I wanted. When I press and hold key, images are changing too fast and process look unnatural. I want , for instance , 3 or 4 images change per second instead of 20.
May I added timer in wrong method ? May be there is something like time delay. I don’t know how exactly it works , and which listener should I mention as argument in timer.
P.s. I’m just beginner and my code may look incorrectly in terms of coding standards. Also I wrote just crucial parts of my project which represent problem. I hope you help me with this. Thanks in advance.

Animation is a complex subject, with lots of boring theory. Basically, animation is the illusion of change over time. This is very important, as everything you do in animation will based around time.
In something like a game, you will have a bunch of entities all playing at a different rates of time. One of the challenges is taking the time to devise a solution which allows a entity to play over a period of time while been decoupled from the refresh cycle (ie frame count), unless you have sprite with the correct number of frames to match you refresh cycle, but even then, I'd be concerned, as the system won't be flexible enough to adapt to situations where the OS and hardware can't keep up.
The following is a simple example which takes a sprite sheet (a series of images stored in a single image), the number of expected images/frames and the time to complete a full cycle.
It calculates the individual frame size and returns a frame based on the amount of time that the sprite has been animated...
public class Sprite {
private BufferedImage source;
private int imageCount;
private int imageWidth;
// How long it takes to play a full cycle
private Duration duration;
// When the last cycle was started
private Instant startedAt;
public Sprite(BufferedImage source, int imageCount, int cycleTimeInSeconds) throws IOException {
this.source = source;
this.imageCount = imageCount;
imageWidth = source.getWidth() / imageCount;
duration = Duration.ofSeconds(cycleTimeInSeconds);
}
public BufferedImage getFrame() {
if (startedAt == null) {
startedAt = Instant.now();
}
Duration timePlayed = Duration.between(startedAt, Instant.now());
double progress = timePlayed.toMillis() / (double)duration.toMillis();
if (progress > 1.0) {
progress = 1.0;
startedAt = Instant.now();
}
int frame = Math.min((int)(imageCount * progress), imageCount - 1);
return getImageAt(frame);
}
protected BufferedImage getImageAt(int index) {
if (index < 0 || index >= imageCount) {
return null;
}
int xOffset = imageWidth * index;
return source.getSubimage(xOffset, 0, imageWidth, source.getHeight());
}
}
nb: It also needs a means to be reset or stopped, so you can force the sprite back to the start, but I'll leave that to you
Next, we need some way to play the animation
public class TestPane extends JPanel {
private Sprite sprite;
public TestPane(Sprite sprite) {
this.sprite = sprite;
Timer timer = new Timer(5, new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
repaint();
}
});
timer.start();
}
#Override
public Dimension getPreferredSize() {
return new Dimension(400, 400);
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
BufferedImage img = sprite.getFrame();
int x = (getWidth() - img.getWidth()) / 2;
int y = (getHeight() - img.getHeight()) / 2;
g2d.drawImage(img, x, y, this);
g2d.dispose();
}
}
There's nothing really special here, it's a simple Swing Timer set to a high resolution (5 milliseconds) which constantly updates the UI, requesting the next frame from the sprite and painting it.
The important part here is the sprite and the refresh cycle are independent. Want the character to walk faster, change the sprite duration, want the character walk slower, changed the sprite duration, the refresh cycle doesn't need be altered (or any other entity)
So, starting with...
Same cycle, first over 1 second, second over 5 seconds
You can also have a look at something like How to create a usable KeyReleased method in java, which demonstrates the use of key bindings and a centralised Set as a "action" repository

Java 2D game: repaint

I am creating a very simple game for my homework and right now I am solving the following problem:
in this game when you click on the shape (for now it is just a circle) it should dissapear and render a new one somewhere else (you are collecting points when you hit that shapes, that´s the point) and my problem is in the mouseClicked method, i think. I put some control System.out.println() there and everytime when the program reach this method it displays as many prints as there was circles. I mean, if you click on the first circle it displays one print, if you click on the second circle it diplays two prints and so on. Can you help me pls? I just started with the swing and awt and I don´t have much time for thorough study. Thank you so much.
public class Shape extends JPanel implements ActionListener{
Graphics2D g2;
Ellipse2D circle;
Timer t = new Timer(2000, this);
int x, y, count;
JLabel counting;
public Shape(JLabel counting){
this.counting = counting;
}
public void paintComponent(Graphics g){
super.paintComponent(g);
g2 = (Graphics2D)g;
ListenForMouse lForMouse = new ListenForMouse();
addMouseListener(lForMouse);
Random ran = new Random();
int green = ran.nextInt(256);
int red = ran.nextInt(256);
int blue = ran.nextInt(256);
Color randomColor = new Color(green, red, blue);
int wid = ran.nextInt(101) + 50;
x = ran.nextInt(650);
if(x > wid)
x = x - wid;
y = ran.nextInt(600);
if(y > wid)
y = y - wid;
circle = new Ellipse2D.Double(x,y,wid,wid);
t.start();
g2.setColor(randomColor);
g2.fill(circle);
}
#Override
public void actionPerformed(ActionEvent arg0) {
repaint();
}
private class ListenForMouse implements MouseListener{
#Override
public void mouseClicked(MouseEvent e) {
System.out.println("Control before");
if(circle.contains(e.getPoint())){
count++;
counting.setText(Integer.toString(count));
t.stop();
repaint();
System.out.println("Control in");
}
System.out.println("Control out");
}
}
}

This happens, because you add a new mouse listener every time paintComponent is called. You should do this once, inside the constructor.

Why does this attempt to animate my moving sprite work?

I'm trying to animate the sprite in my game when a button is pressed, but when I press the button, it skips the animation. Its supposed to go one pixel, change sprites, and then go one more pixel and change back. Here is the code
//for all
import java.nio.file.*;
import javax.imageio.ImageIO;
import java.io.IOException;
import java.awt.image.*;
import java.net.*;
import java.awt.*;
import javax.swing.*;
import static java.lang.invoke.MethodHandles.*;
import java.awt.event.*;
//my Mario class (cut down a lot)
class Mario {
// all numbers multiplied by 2 from OG game
protected Direction dir;
protected int x, y;
protected BufferedImage sprite;
protected String currentSpriteName;
public Mario() {
this.x = 54;
this.y = 808;
dir = Direction.RIGHT;
setSprite(MVCE.SMALLSTANDFACERIGHT);
currentSpriteName = MVCE.SMALLSTANDFACERIGHT;
}
public void moveRight(){
if(this.dir == Direction.LEFT){
this.dir = Direction.RIGHT;
}
else if(this.dir == Direction.RIGHT){
this.x+=1;
}
}
public void animateMoveRight(){
if (currentSpriteName.equals(MVCE.SMALLSTANDFACERIGHT)){
setSprite(MVCE.SMALLWALKFACERIGHT);
}
else if (currentSpriteName.equals(MVCE.SMALLWALKFACERIGHT)){
setSprite(MVCE.SMALLSTANDFACERIGHT);
}
}
public void jump() {
this.y -= 46;
}
public void setSprite(String spriteName) {
URL spriteAtLoc = MVCE.urlGenerator(spriteName);
this.sprite = MVCE.generateAndFilter(sprite, spriteAtLoc);
}
public void getSprite(){
System.out.println(this.currentSpriteName);
}
public void paint(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.drawImage(sprite, 0, 0, null); // DO NOT SET x and y TO ANYTHING,
// this sets 0,0 to top left!!
}
}
// my MarioRender class:
class MarioRender extends JLabel {
protected Mario marioSprite;
public MarioRender() {
marioSprite = new Mario();
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
marioSprite.paint(g2);
setBounds(marioSprite.x, marioSprite.y, marioSprite.sprite.getWidth(), marioSprite.sprite.getHeight());
}
public void moveMarioRight(){
marioSprite.moveRight();
marioSprite.animateMoveRight();
setLocation(this.marioSprite.getX(), this.marioSprite.getY());
repaint();
//this is my attempt to make it animate
marioSprite.moveRight();
marioSprite.animateMoveRight();
setLocation(this.marioSprite.getX(), this.marioSprite.getY());
repaint();
}
public void jumpMario() {
marioSprite.jump();
setLocation(this.marioSprite.x, this.marioSprite.y);
repaint();
}
}
// direction class, solely for moving
enum Direction {
LEFT, RIGHT
}
// my calling class, which I called MVCE where I make the frame
public class MVCE extends JFrame {
MarioRender m = new MarioRender();
JLabel bg;
public MVCE() {
bg = new JLabel();
this.setSize(868, 915);
this.setVisible(true);
this.add(bg, BorderLayout.CENTER);
bg.setLayout(null);
bg.add(m);
m.setBounds(m.marioSprite.x, m.marioSprite.y, m.marioSprite.sprite.getWidth(),
m.marioSprite.sprite.getHeight());
KeyListener kl = new MoveListener();
this.addKeyListener(kl);
this.setFocusable(true);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
public static final String SMALLSTANDFACERIGHT = "SmallStandFaceRight.bmp"; // 30
// x
// 32
public static final String SMALLJUMPFACERIGHT = "SmallJumpFaceRight.bmp"; // 32
// x
// 32
// generate URL
public static URL urlGenerator(String name) {
URL u = lookup().lookupClass().getResource(name);
return u;
}
// return image with filtered color
public static BufferedImage generateAndFilter(BufferedImage b, URL u) {
try {
b = ImageIO.read(u);
int width = b.getWidth();
int height = b.getHeight();
int[] pixels = new int[width * height];
b.getRGB(0, 0, width, height, pixels, 0, width);
for (int i = 0; i < pixels.length; i++) {
// System.out.println(pixels[i]);
if (pixels[i] == 0xFFff00fe) {
pixels[i] = 0x00ff00fe;
}
}
BufferedImage newSprite = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
newSprite.setRGB(0, 0, width, height, pixels, 0, width);
b = newSprite;
} catch (IOException e) {
System.out.println("sprite not found");
e.printStackTrace();
}
return b;
}
// key listener
class MoveListener implements KeyListener {
public void keyPressed(KeyEvent k) {
if ((k.getKeyCode() == 39)) {
m.moveMarioRight();
///THIS IS SUPPOSED TO MOVE HIM 1, change sprite, and automatically move him back, it moves 2 pixels but no animation
}
if (k.getKeyCode() == 83) { // S key
m.marioSprite.setSprite(SMALLJUMPFACERIGHT);
m.jumpMario();
}
}
public void keyReleased(KeyEvent k) {
}
public void keyTyped(KeyEvent k) {
}
}
public static void main(String[] args) {
MVCE m = new MVCE();
}
}
I tried putting this between the calls to marioMoveRight():
try {
Thread.sleep(200);
} catch(InterruptedException ex) {
Thread.currentThread().interrupt();
}
but it just delays the whole thing. I had also tried using an ActionListener, but I don't know how to make it react only when the key is pushed. as I had it,
I had this class inside of MVCE:
class TickListener implements ActionListener{
public void actionPerformed(ActionEvent a){
m.marioSprite.setSprite(Constants.SMALLWALKFACERIGHT);
repaint();
}
}
and this at the end of the MVCE constructor:
ActionListener ac = new TickListener();
final int DELAY = 1000;
Timer t = new Timer(DELAY, ac);
t.start();
but then, the Mario just moves automatically. I do not want to use a sprite sheet for this project, I am trying to do it as this guy did for SMB1.

Many problems, don't know which one or if any will fix the problem:
Don't use a KeyListener. If a component doesn't have focus the component won't receive the event. Instead use Key Bindings.
Don't use "==" to compare Objects. Instead you should be using the equals(...) method.
Don't override paintComponent. A painting method is for painting only. You should not be changing the bounds of the component in the painting method.
Do basic debugging (problem solving) before asking a question. A simple System.out.println(...) added to various methods will determine if the code is executing as you expect. Then when you ask a question you can ask a specific question telling us which block of code does not execute as you expect.

You never actually call the method animateMoveRight(), and if I understand correcly, that's what's changing the sprite. Also, I doubt that you see the sprite change when calling the same method twice in a row without any delay.
Try putting the animateMoveRight() method into the moveRight() or the moveMarioRight() method and, if neccessary because the animation is too fast, add your delay code back where you had it. Be careful not to let the main thread sleep, as this causes everything to freeze, so start another one or use a timer etc.
EDIT: Good timers
I'm not too familiar with the Timer class, so I end up using the Thread variant. There are many tutorials for that out there, just search for "java threads" or "java multithreading". This is IMO a solid tutorial you can check out.

Gif Image only playing once. Need it to replay each time

I don't want to post the entire program on here because that would be too much, but I will post snippets of it and detail where they came from so you have an idea.
Problem: For my class project, I am making a typical space invaders game. When a missile hits a ship an explosion gif is played. The gif only loops once (not continuous). The when the missile hits the alien craft, the gif plays just fine for the first spaceship. However, when I shoot a missile at the second or third,etc, ship the gif does not play again. I believe that it is just playing the last frame of the gif from what I have researched. Is there a way to either reload the gif image to play each time the missile is hits or is there another way to do this?
Here is the link to the image: http://postimg.org/image/v2lljr7cb/
Here is some code:
I have a class called Boom, where the explosion is happening. Here is the code in that class:
public void draw(Graphics2D g2d) {
g2d.drawImage(getEnemyImg(), x, y, null);
}
public Image getEnemyImg() {
ImageIcon ic = new ImageIcon("src/Boom.gif");
return ic.getImage();
}
I then have another class called GameFrame where everything happens. In it, there are these lines of code specially for the explosion. Here is the code from this class:
static ArrayList<Boom> booms = new ArrayList<Boom>();
public void paint(Graphics g) {
super.paint(g);
Graphics2D g2d = (Graphics2D) g;
ImageIcon ic = new ImageIcon("src/BackGround.jpg");
g2d.drawImage(ic.getImage(), 0, 0, null);
player.draw(g2d);
for (int i = 0; i < booms.size(); i++) {
Boom bm = booms.get(i);
bm.draw(g2d);
}
Enemy e = new Enemy(200, 400);
}
#Override
public void actionPerformed(ActionEvent arg0) {
// TODO Auto-generated method stub
player.update();
for (int i = 0; i < booms.size(); i++) {
Boom bm = booms.get(i);
bm.update();
}
checkEnd();
repaint();
}
public static void addBoom(Boom bm) {
booms.add(bm);
}
public static void removeBoom(Boom bm) {
booms.remove(bm);
}
public static ArrayList<Boom> getBoomList() {
return booms;
}
Finally, here is where the explosion is being added. This happens when the missile hits the alien space craft. This is happening in the Enemy class. Here is the code:
public void checkCollisions() {
for (int i = 0; i < GameFrame.getMissileList().size(); i++) {
Missile m = GameFrame.getMissileList().get(i);
if (getBounds().intersects(m.getBounds())) {
GameFrame.removeEnemy(this);
GameFrame.removeMissile(m);
GameFrame.addBoom(new Boom(m.getX() -40, m.getY()- 60));
for(int j = 0; i <GameFrame.getBoomList().size(); i++){
Boom bm = GameFrame.getBoomList().get(j);
}
}
}
}
I apologize for the wall of text. My professor was unsure of how to do this so I was hoping to get some help from here.
If you have any time to spare, your ideas would be helpful. Thank you.

Java 2D programming: Rendering techniques

I have been programming in java for a while now and I've just now started 2D graphics(game development). While coding my game, I have noticed rendering issues with my game. While my player is running around the screen, the pixels will glitch around. It's like lag on a multiplayer game, but its barely noticeable. After researching this issue I have not come up with any solutions, so I'm asking for your help.
MY QUESTION: I am experiencing poor rendering in my game and I'm wondering if my way of rendering is poor. If so, Can you point me to any resources?
MY RENDERING CLASS
public class Render extends JPanel implements Runnable{
int SCREEN_WIDTH,SCREEN_HEIGHT;
Game game;
Thread t;
public Render(int w,int h,Game g){
this.SCREEN_WIDTH = w;
this.SCREEN_HEIGHT = h;
this.game = g;
this.setDoubleBuffered(true);
}
public void run(){
while(true){
repaint();
}
}
public void paint(Graphics g){
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.translate(-this.game.getCamera().getX(), -game.getCamera().getY());
g2d.setColor(Color.black);
//fill the screen with black
g2d.fillRect(0, 0, game.getLevelHandler().getLevel().getWidth() * 32, game.getLevelHandler().getLevel().getHeight() * 32);
/**for(Entity E: game.getObjects()){
E.draw(g2d);
}*/
//send the graphics object to my player...IS THIS OKAY TO DO?
game.getPlayer().draw(g2d);
}
public void start(){
t = new Thread(this);
t.start();
}
}
public class Player extends Entity{
float dx,dy,moveSpeed;
boolean jumping, canJump;
float terminalVelocity,acceleration = 0;
int GravityCounter,jumps,maxJumps,jumpheight = 0;
public Player(float x, float y, float w, float h, ObjectID id, Game g) {
super(x, y, w, h, id, g);
//gravity
terminalVelocity += 7;
acceleration += 0.2;
moveSpeed += 2.5;
//jumping
jumpheight = 40;
maxJumps = 2;
jumps = maxJumps;
}
public void tick() {
dx = 0;
dy = 0;
collisions();
move();
x += dx;
y += dy;
}
public void collisions(){
}
public void move(){
}
//the drawing
public void draw(Graphics2D g) {
g.setColor(Color.green);
g.drawRect((int)x, (int)y, (int)w, (int)h);
}
}
EDIT: downloadable link here
, If any changes are needed, I'll try and correct it. Also, does this glitching happen when there is a memory leak?
I revised my code because of suggestions, This is what I have now.
RENDERER:
public class Render extends JPanel implements Runnable{
int SCREEN_WIDTH,SCREEN_HEIGHT;
Game game;
Thread t;
public Render(int w,int h,Game g){
this.SCREEN_WIDTH = w;
this.SCREEN_HEIGHT = h;
this.game = g;
this.setDoubleBuffered(true);
}
public void run(){
while(true){
repaint();
try {
Thread.sleep(16);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
public synchronized void paint(Graphics g){
Graphics2D g2d = (Graphics2D) g;
g2d.translate(-this.game.getCamera().getX(), -game.getCamera().getY());
g2d.setColor(Color.black);
g2d.fillRect(0, 0, game.getLevelHandler().getLevel().getWidth() * 32, game.getLevelHandler().getLevel().getHeight() * 32);
for(Entity E: game.getObjects()){
synchronized(E){E.draw(g2d);}
}
synchronized(game.getPlayer()){game.getPlayer().draw(g2d);}
}
public void start(){
t = new Thread(this);
t.start();
}
}
The player class did not change
Source Code: here

I know what's happening here because I was having the exact same problem in the game I'm writing. It sure is a hard thing to find. Your problem is happening because you're rounding your x and y variables when you draw.
g.drawRect((int)x, (int)y, (int)w, (int)h);
This is causing your rectangle to jump around a bit. Because it looks like your rectangle can have decimal coordinates, you need to be able to draw the rectangle at decimal coordinates. There's a pretty easy way to do that, but instead let's use a way that will work regardless of what you're drawing.
You're going to need to use some transformations, personally I like AffineTransform's. There are lots of tutorials about these, but this is the first (non-documentation) result of a google search https://docs.oracle.com/javase/tutorial/2d/advanced/transforming.html. I know you're already doing some transformations, but this is what your draw method will look like after you add them.
public void draw(Graphics2D g) {
AffineTransform original = g.getTransform(); // keep a copy of the original so that we can restore it
AffineTransform transform = (AffineTransform)original.clone();
transform.translate((double)x, (double)y); // translate the transform to the player location, note that x and y can be non-integers here.
g.transform(transform); // apply the transformation.
g.setColor(Color.green);
g.drawRect(0, 0, (int)w, (int)h);
g.setTransform(original); // restore the original transformation
}
For the rest of your walls and stuff, you can use this exact same method. Remember that the "screen" location of an object is the object's game location minus the camera's game location. Good luck with your game.