Javafx

JavaFXゲーム開発-レッスン1ウィザードアニメーション



Javafx Game Development Lesson 1 Wizard Animation



私はJavaFXの開発に注目してきましたが、最近JavaFXを使ってゲームを開発したいと思っていました。残念ながら、私が恥ずかしいのは、Java2DでGraphics / Graphics2Dに似たクラスが見つからなかったことです。 Nodeを継承するだけでは、自分で描画することはできません。現在、ゲーム開発にJavaFXを使用しているようですが、使用できるのはJavaFXShapeとImageViewのみです。



今日は、JavaFXスプライトアニメーションの例を書くのに時間がかかりました。 JavaFXでスプライトアニメーションを操作する方法を見てみましょう。



まず、JavaFXプロジェクトを作成します。

カスタムの親を使用するため、一時的にシーンを作成しません。




Spriteクラスを作成し、Parentを継承しましょう。これは私たちのスプライトクラスです。

コードを見てみましょう：

import javafx.geometry.Rectangle2D import javafx.scene.Parent import javafx.scene.image.Image import javafx.scene.image.ImageView /** * Elf 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 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) } /** * Move like below */ 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 } /** * Move like left */ 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 } /** * Move like right */ 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 } /** * Move like right */ 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）があります。これは非常に重要なメソッドです。これは、rect2Dのx、yを開始点として、このImageViewに画像を表示することです。幅、高さは幅と高さの一部です。実はカットディスプレイです。これは、すべてのスプライトアニメーションで非常に一般的です。


indexDivに関しては、しばらく見る必要はありません。これは、スプライトアニメーションを遅くするためだけです（速すぎて調整されていないように見えます）。だからあなたはインデックスを置くことができます/

indexDivはインデックスとして扱われます。


エルフのアニメーション、とりあえずRPGツクールVXのデフォルトのスプライト画像を使用しています。

このスプライトを標準として使用します。左上から右下に向かって、インデックスはスプライトの0〜11のインデックスです。


次に、ImageView.setViewport（）を使用するときに、対応する処理を使用します。最も単純なのは、X方向（インデックス％3）*幅、Y方向（インデックス/ 3）*高さです。インデックスが3に達すると、2番目のアクション画像に入ります。対応する0、0、幅、高さも0、高さ、幅、高さになります。

次に、setLayoutX（）を使用してスプライトの座標を変更し、歩行効果を生成します。


スプライトの方向転換を避けるために、アニメーションに異常な問題があります（前の方向の1フレームのアニメーションフレームにとどまる可能性があります）。 lastDirectionの方向列挙型も作成しました。最後の方向を識別するために使用されます。方向が同じ場合、処理は実行されません。方向が異なる場合、現在のフレームは現在の方向の最初のフレームに切り替えられます。

/** * Move like below */ 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つしかないため、現在の方向の最大アニメーションフレーム数よりもインデックスが大きい場合は、最小値にリセットされます。番号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() { @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座標でスプライトを作成するだけです。次に、ボタンイベントをシーンに追加します。左右を上下に押すと、ウィザードが全方向に移動します。


以下にメインクラスを書いてみましょう。

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 Game Development - Lesson 1 Elf Animation') stage.show() } /** * @param args */ public static void main(String[] args) { launch(MainClass.class, args) } }

メインクラスでGamePanelを作成し、GamePanelのloadメソッドと呼ばれるGamePanelに基づいてシーンを作成し、スプライトをロードしてイベントを追加しました。次に、シーンの背景を黒に設定します。

ランニング効果を見てみましょう〜

右に移動します。


降りる：


次に、JavaFXゲーム開発の最初のレッスンがここにあります。実際、これは非常に単純で、スプライトアニメーションの単純な実装です。そのため、スプライトなどの基本クラスは作成しませんでした。


次のレッスンでは、ゲームマップ、ダイアログなどを追加します。

私はそのレベルが苦手です。皆さんが訂正してくれることを願っています。一緒に改善します。


ソースを示してください： http://blog.csdn.net/ml3947