Sign in to follow this  
Followers 0
Nicholas Kong

How to animate an character image more efficiently

4 posts in this topic

I am still in the process of learning how to animate images more efficiently on the screen. I want to bring my monster to life after seeing the monster move up and down statically for 2 months.

 

My thought process on animating the monster is to use a dynamic array like an ArrayList. While the animation looks correct on screen, the monster certainly moves like the monsters from the Mario game on NES. But I don't think the code implementation below is the way most people would do it most commonly. 

 

The image frames below are stored in an ArrayList of Images manually.

 

The Ghost uses 3 separate image frames of animation(meaning it is not using a sprite sheet for a simplistic learning experience) 

Ghost1_zps65e205e5.png

Ghost2_zpsc07170b1.png

Ghost3_zps32222b2c.png

 

The code draws a different images depending on what position the monster is on the screen. Once the position has been reached, the game draws a new image. The way the monster gets a new image is by using the get method while providing a hard-coded index argument of the image elements from the ArrayList of Images.

 

 

 
public class Ghost extends Sprite {
 
 
private Image image;

private ArrayList<Image> arrayListOfImages;
 

public Ghost(double x, double y) {
// TODO Auto-generated constructor stub
position = new Vector2D(x,y);
velocity = new Vector2D();
 
 
arrayListOfImages = new ArrayList<Image>();
 
try 
{
image = ImageIO.read(new File("src/Ghost/Ghost1.PNG"));
arrayListOfImages.add(image);
 
image = ImageIO.read(new File("src/Ghost/Ghost2.PNG"));
arrayListOfImages.add(image);
 
image = ImageIO.read(new File("src/Ghost/Ghost3.PNG"));
arrayListOfImages.add(image);
} 
catch (IOException e) {
e.printStackTrace();
}
 
}
 

public void draw(Graphics g) {
// Draw the monster image at our position
 
if(position.y >= 0)
{
g.drawImage(arrayListOfImages.get(0), (int)position.x, (int)position.y, null);
 
}
if(position.y >= 50)
{
g.drawImage(arrayListOfImages.get(1), (int)position.x, (int)position.y, null);
}
if(position.y >= 100)
{
g.drawImage(arrayListOfImages.get(2), (int)position.x, (int)position.y, null);
}
 
}
}
Edited by warnexus
0

Share this post


Link to post
Share on other sites
I really like the array setup. Only issue I can see is that you've draw all 3 of them, they should be if else statements?
0

Share this post


Link to post
Share on other sites

The common way to do this is to use a sprite sheet image - this is just one single image with all three ghost faces on it. You then choose which image to draw by drawing different coords of the image...

 

for example if the total image is 192 by 64 - and each ghost is 64 by 64 - you can draw the first ghost by drawing (0,0,64,64) part of the image where the arguements are (startXPixel,startYPixel,width,height) and then draw the next with (64,0,64,64) and the last with (128,0,64,64).

 

I know you said it is not a sprite sheet but I don't see any reason why not to do it as such - you will learn this concept which is pretty importatn in making 2d games..

Edited by EarthBanana
1

Share this post


Link to post
Share on other sites

I really like the array setup. Only issue I can see is that you've draw all 3 of them, they should be if else statements?

True. I should actually use if else statements. I wind up adding a big more logic to make the if else works for all 3 frames. Thanks.

0

Share this post


Link to post
Share on other sites

The common way to do this is to use a sprite sheet image - this is just one single image with all three ghost faces on it. You then choose which image to draw by drawing different coords of the image...

 

for example if the total image is 192 by 64 - and each ghost is 64 by 64 - you can draw the first ghost by drawing (0,0,64,64) part of the image where the arguements are (startXPixel,startYPixel,width,height) and then draw the next with (64,0,64,64) and the last with (128,0,64,64).

 

I know you said it is not a sprite sheet but I don't see any reason why not to do it as such - you will learn this concept which is pretty importatn in making 2d games..

Thanks for the explanation. I will try to apply this sprite sheet drawing concept.

0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0