Jump to content

  • Log In with Google      Sign In   
  • Create Account

Interested in a FREE copy of HTML5 game maker Construct 2?

We'll be giving away three Personal Edition licences in next Tuesday's GDNet Direct email newsletter!

Sign up from the right-hand sidebar on our homepage and read Tuesday's newsletter for details!


How to animate an character image more efficiently


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
4 replies to this topic

#1 warnexus   Prime Members   -  Reputation: 1448

Like
0Likes
Like

Posted 30 March 2013 - 10:03 PM

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, 30 March 2013 - 10:17 PM.


Sponsor:

#2 MichaelNIII   Members   -  Reputation: 195

Like
0Likes
Like

Posted 30 March 2013 - 11:19 PM

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?

#3 EarthBanana   Members   -  Reputation: 939

Like
1Likes
Like

Posted 31 March 2013 - 01:48 AM

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, 31 March 2013 - 01:52 AM.


#4 warnexus   Prime Members   -  Reputation: 1448

Like
0Likes
Like

Posted 31 March 2013 - 12:37 PM

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.



#5 warnexus   Prime Members   -  Reputation: 1448

Like
0Likes
Like

Posted 31 March 2013 - 12:51 PM

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.






Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS