JavaFX Game Development--the first lesson sprite animation __java

have been concerned about the development of JavaFX, recently want to try to use JavaFX development game is what kind of situation. Unfortunately, I didn't find a class like graphics/graphics2d in Java 2D. His simple inheritance node, there is no way to draw their own. It seems that the current use of JavaFX for game development, only the use of JavaFX shape and ImageView.

Taking the time today to write an example of a JavaFX sprite animation, let's take a look at how to manipulate the sprite animation in JavaFX.

First create a JavaFX project.

Temporarily do not create scene, because we want to use the custom parent.

Let's start by creating a Sprite class that inherits parent. This is our Elf class.

Let's look at the code here:

[Java] View Plain Copy import javafx.geometry.rectangle2d;   import javafx.scene.parent;   import javafx.scene.image.image;   import javafx.scene.image.imageview;  /**    *  Wizard class    *  @author  wing   *  @date  2012/7/17   * /   public class sprite extends parent {        private enum direction {           Left,  right, up, down       };           private Direction direction = Direction.Left;        private direction lastdirection;       private int x, y,  width, height;       private int index = 0; & NBsP     private int indexDiv = 5;        private imageview mimageview;       private int speed =  4;          public sprite (int x, int y,  Int width, int height, string url)  {            this.x = x;           this.y  = y;           this.width = width;            this.height = height;            image actor = new image (GetClass () GetResourceAsStream (URL));            mimageview = new imageview (actor);            mimageview.setviewport (new rectangle2d (0, 0,  width, height));           MIMAGEVIEW.SETLAYOUTX (x );           mimageview.setlayouty (y);            getchildren (). Add (Mimageview);                      /**        *  image down mobile        */       public void  movedown ()  {           direction =  direction.down;           if (lastDirection !=  direction) {               index =  0;           }           index+ +;           if  (index / indexdiv >  2)  {               index  = 0;           }            mimageview.setviewport (New rectangle2d (index / indexdiv)  %  3)  * width,  ((index / indexdiv)  / 3)  * height, width,                    height)) ;           mimageview.setlayouty (MImageView.getLayoutY ()  + speed);                       lastdirection = direction;       }               /**       *  like left mobile        */       public void moveleft ()  {            direction = Direction.Left;           if (lastdirection != direction) {                index = 3 * indexDiv;            }            index++;           if  (index /  INDEXDIV > 5)  {                index = 3 * indexdiv;           }           mimageview.setviewport (New rectangle2d (index /  indexdiv)  % 3  * width,  ((index / indexdiv)  / 3)  *  height, width,                    height);            MIMAGEVIEW.SETLAYOUTX (MIMAGEVIEW.GETLAYOUTX ()  - speed);                       lastDirection =  direction;       }               /**       *  like right mobile        */        public Void moveright ()  {           direction =  direction.right;           if (lastDirection !=  direction) {               index =  6 * indexDiv;           }            index++;            if  (index / indexdiv > 8)  {                index = 6 * indexDiv;            }            Mimageview.setviewport (New rectangle2d (index / indexdiv)  % 3)  * width,   ((Index / indexdiv)  / 3)  * height, width,                    height);            MIMAGEVIEW.SETLAYOUTX (MIMAGEVIEW.GETLAYOUTX ()  + speed);                       lastdirection =  direction;       }               /**       *  like right mobile        */        public void moveup ()  {            direction = Direction.Up;            if (lastdirection != direction) {                index = 9 * indexDiv;           }            index++;            if  (index / indexdiv > 11)  {                index = 9 * indexDiv;           }            Mimageview.setviewport (New rectangle2d (index / indexdiv)  % 3)  * width,   ((index / indexdiv)  / 3)  * height, width,                    height));           mimageview.setlayouty (Mimageview.getlayouty ()  -  Speed);                       lastdirection = direction;       }                      public int getx ()  {            return x;        }       public void setx (int x)  {            this.x = x;       }       public int gety ()  {            return y;       }       public  void sety (int y)  {           this.y  = y;       }       public int getwidth ()  {           return width;       }        public void setwidth (int width)  {            this.width = width;       }        public int getheight ()  {            return height;       }        public void setheight (int height)  {            this.height = height;       }  }  
1. First, an enumeration type is defined to indicate the direction of the current wizard.

2.x, y, width, height these parameters, as the name suggests, is to indicate the x,y coordinates and width of the wizard, High.

3. We created an image and then created a imageview based on image. Image loading is done through GetClass (). getResourceAsStream (String str).

4.ImageView has a setviewport (Rectangle2D rect2d) is a very important way, that is to show that the ImageView in the rect2d as a starting point, x,y as a part of the width of the high. is actually cutting the display. This is common in all sprite animations.

As for the Indexdiv, you may not need to look at it for the time being, this is just to slow down the sprite animation (too fast to look uncoordinated). So you can put the index/

Indexdiv are regarded as index.

Sprite animation, I'm here for the moment using the default sprite picture in the very common rpgmaker VX.

We use this wizard as the standard, from top left to bottom right, index is sprite from 0-11.

Then we need to do the appropriate processing when using Imageview.setviewport (). The simplest is the x direction (index% 3) * width, y direction (INDEX/3) * height. When index to 3 o'clock, enter the second action draw. The corresponding from 0, 0,width, height has also become 0, height, width, height.

The SETLAYOUTX () is then used to change the coordinates of the elf to produce a walking effect.

In order to avoid the wizard direction switch, the animation has an exception problem (may stay in a frame of the animation frame in one Direction). We have also created a Lastdirection direction enumeration type. Used to identify the direction of the last time. If the orientation is the same, the current frame is switched to the first frame in the current direction if the orientation is different.

[Java] View Plain copy/**   *  image under move    */   Public void movedown ()  {        direction = Direction.Down;       if ( lastdirection != direction) {           index =  0;       }       index++;        if  (index / indexdiv > 2)  {            index = 0;       }        mimageview.setviewport (New rectangle2d (index / indexdiv)  % 3)  * width,  ((index / indexdiv)  / 3)  * height, width,                height));        Mimageview.setlayouty (Mimageview.getlayouty ()  + speed);               lastDirection = direction;  }     

In addition, because there are only 3 frames, if the index is greater than the maximum number of animation frames in the current direction, it must be reset to the minimum. I'm just simply tagging the numbers 2, 5, 8, 11.

Then create a class Gamepanel to add all of our sprites and map drawing (later course).

[Java] View Plain Copy import javafx.event.eventhandler;   import javafx.scene.parent;   import javafx.scene.input.keycode;   import javafx.scene.input.keyevent;  /**    *  @author  wing   *  @date  2012/7/17   */   Public  class GamePanel extends Parent {       private  sprite sprite;       public gamepanel ()  {        }          public void load () {            sprite = new sprite (50,&NBSP;50,&NBSP;32,&NBSP;32,   "Actor.png");           getchildren (). Add (Sprite);            getscene (). setonkeypressed (New eventhandler <KeyEvent>()  {                @Override                 public void handle ( keyevent event)  {                    onkeypressed (event);                }          &nbsp});        }                      public void onkeypressed (keyevent event) {            if (Event.getcode ()  == keycode.left) {              sprite.moveleft ();          } Else if (Event. GetCode ()  == keycode.right) {              sprite.moveright ();          }else if (Event.getCode ()  == keycode.up) {              Sprite.moveup ();          }else if (Event.getCode ()  ==  keycode.down) {     &