Jump to content
  • Advertisement
Sign in to follow this  
Nicholas Kong

How to animate an character image more efficiently

This topic is 2030 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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

Share this post


Link to post
Share on other sites
Advertisement

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

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.

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.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!