JavaFX游戏开发--第一课 精灵动画

一直在关注JavaFX的发展，最近想试试使用JavaFX开发游戏是什么样的情况。可惜令我汗颜的是--没有找到类似于Java 2D中Graphics/Graphics2D之类的类。自己单纯的继承Node的话，也没办法自己进行绘制。看来目前使用JavaFX进行游戏开发，只能使用JavaFX的Shape和ImageView了。

  

  今天花时间写了个JavaFX的精灵的动画的例子，让我们看看在JavaFX中如何操作精灵的动画吧。

  

  首先创建一个JavaFX项目。

  暂时不进行Scene的创建，因为我们要使用自定义的Parent。

  我们先进行创建一个Sprite类，继承Parent。 这就是我们的精灵类了。

  下面来看看代码：

   

import javafx.geometry.Rectangle2D;
import javafx.scene.Parent;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
/**
 * 精灵类
 * @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;
    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);
    }

    /**
     * 像下移动
     */
    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;
    }

    /**
     * 像左移动
     */
    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;
    }

    /**
     * 像右移动
     */
    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;
    }

    /**
     * 像右移动
     */
    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.首先定义了一个枚举类型，用来标明当前精灵的方向。

   2.x, y, width, height这几个参数顾名思义，就是表明精灵的X，Y坐标和宽，高。

   3.我们创建了一个Image，然后基于Image创建了一个ImageView。Image的图片加载是通过getClass().getResourceAsStream(String str)来进行。

   4.ImageView有个setViewport(Rectangle2D rect2D)是个很重要的方法，就是显示这个ImageView中图片以rect2D的x，y为起点，width，height为宽高的一部分。 其实就是切割显示。这在所有的精灵动画中都是很常用的。

  

   至于indexDiv大家暂时可以不用看，这个只是为了减慢精灵动画的（太快看起来不协调）。所以你们可以把index / 

indexDiv都当作index来看待。

  

  精灵动画，我这里暂且使用很常见的RPGMaker VX中的默认的精灵图片。

  

  

  我们以这个精灵为标准，从左上到右下，索引也就是Sprite中的index是从0-11。

  那么我们在使用ImageView.setViewport()时就要进行相应的处理。最简单的就是X方向(index % 3) * width, Y方向(index / 3 ) * height。 当index到3时，就进入第二行动画。相应的从0， 0，width, height 也变为了0, height, width, height。 

  然后通过setLayoutX()进行改变精灵的坐标，产生正在行走的效果。

  为了避免精灵方向切换的时候，动画出现异常问题(可能会停留一帧上一个方向的动画帧)。我们又创建了一个lastDirection的方向枚举类型。用来标识上一次的方向。如果方向相同，则不做处理，如果方向不同，则要把当前帧切换到当前方向的第一帧。

  

/**
 * 像下移动
 */
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;
}

  

  另外，由于只有3帧，如果当index 大于当前方向动画帧数的最大值，得重置为最小。我这里只是简单的标注了数字 2 ，5， 8， 11。

  然后创建一个类GamePanel，用来添加我们的所有精灵和地图绘制(以后课程)。

  

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, 50, 32, 32, "actor.png");
        getChildren().add(sprite);
        getScene().setOnKeyPressed(new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent event) {
                onKeyPressed(event);
            }
        });
    }


    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){
          sprite.moveDown();
       }
    }


    public void update(long now){

    }

}

  这个类现在很简单，只是单纯的在50，50坐标处，创建了一个Sprite。然后给Scene添加了一个按键事件，在按Left right up 和 down的时候，将会控制精灵进行各个方向的移动。

  下面来写我们的主类。

  

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class MainClass extends Application {

    @Override
    public void start(Stage stage) throws Exception {
          GamePanel mPanel = new GamePanel();
          final Scene scene = new Scene(mPanel,800, 600);
          mPanel.load();
          scene.setFill(Color.BLACK);
          stage.setScene(scene);
          stage.setTitle("JavaFX游戏开发--第一课  精灵动画");
          stage.show();
    }

    /**
     * @param args
     */
    public static void main(String[] args) {
        launch(MainClass.class, args);
    }

}

   我们在主类中创建了GamePanel，根据GamePanel创建了一个Scene，调用了GamePanel的load方法，进行加载精灵和添加事件。然后将Scene背景设为了黑色。

  下面我们来看看运行效果吧~

  向右走:

  

  向下走：

  

  那么JavaFX游戏开发的第一课就讲到这里了。其实很简单，就是单纯的一个精灵动画的实现而已。所以我们并没有创建精灵的基类等工作。

   后面的课程中，我们将会进行游戏地图，对话框等的加入。

   本人水平不佳，望大家指正。一起进步。