• [翻译] 使用FXGL创建一个简单游戏 Pong (FXGL 11)

    在本文中，我们将复刻经典的Pong游戏。要完成本教程，你首先需要获取FXGL要么通过Maven / Gradle，要么作为uber-jar。确保你使用FXGL 11 (例如11.3)。

    本教程大部分是独立的，但是完成以前的基本教程将对一般理解非常有帮助。完整的源代码可在本页末尾找到。请注意，为简单起见，这里使用的代码是故意单一的和重复的。

    与Pong教程不同，这里将向你介绍常用的FXGL概念。因此，重点是在这些概念上，而不是在游戏上。

    游戏将如下所示:

    引入包

    创建文件PongApp.java让我们import以下这些内容，然后在本教程的其余部分中忘记它们。

    注意: 最后一行import (static) 允许我们写入getInput()而不是FXGL.getInput(),这使得代码简洁。

    1. import com.almasb.fxgl.app.GameApplication;
    2. import com.almasb.fxgl.app.GameSettings;
    3. import com.almasb.fxgl.entity.Entity;
    4. import com.almasb.fxgl.input.UserAction;
    5. import javafx.geometry.Point2D;
    6. import javafx.scene.input.KeyCode;
    7. import javafx.scene.paint.Color;
    8. import javafx.scene.shape.Rectangle;
    9. import javafx.scene.text.Text;
    10. import java.util.Map;
    11.  
    12. import static com.almasb.fxgl.dsl.FXGL.*;
    13. 复制代码

    代码

    本节将介绍每个方法，并解释代码的主要部分。

    默认情况下，FXGL将游戏尺寸设置为800x600，这对我们的游戏是合适的。

    你可以通过settings.setXXX()改变这些和其他各种设置。现在，我们只需设置标题并添加入口点--main()。

    1. public class PongApp extends GameApplication {
    2.  
    3.     @Override
    4.     protected void initSettings(GameSettings settings) {
    5.         settings.setTitle("Pong");
    6.     }
    7.  
    8.     public static void main(String[] args) {
    9.         launch(args);
    10.     }
    11. }
    12. 复制代码

    接下来，我们将定义一些常数，这些常数是不言自明的。

    1. private static final int PADDLE_WIDTH = 30;
    2. private static final int PADDLE_HEIGHT = 100;
    3. private static final int BALL_SIZE = 20;
    4. private static final int PADDLE_SPEED = 5;
    5. private static final int BALL_SPEED = 5;
    6. 复制代码

    我们有三个游戏对象，分别是两个球拍和一个球。FXGL中的游戏对象称为Entity。因此，让我们定义我们的Entity:

    1. private Entity paddle1;
    2. private Entity paddle2;
    3. private Entity ball;
    4. 复制代码

    接下来，我们将initInput。与某些框架不同，无需手动查询输入状态。在FXGL中，我们通过定义动作 (游戏应该做什么) 并将它们绑定到输入触发器 onAction(当按下某物时) 来处理输入。例如:

    1. @Override
    2. protected void initInput() {
    3.     getInput().addAction(new UserAction("Up 1") {
    4.         @Override
    5.         protected void onAction() {
    6.             paddle1.translateY(-PADDLE_SPEED);
    7.         }
    8.     }, KeyCode.W);
    9.  
    10.     // ...
    11. }
    12. 复制代码

    上面代码的意思是，当W被按下时，通过-PADDLE_SPEED在Y轴上移动paddle ，这基本上意味着向上移动球拍。

    其余的输入代码如下：

    1. getInput().addAction(new UserAction("Down 1") {
    2.     @Override
    3.     protected void onAction() {
    4.         paddle1.translateY(PADDLE_SPEED);
    5.     }
    6. }, KeyCode.S);
    7.  
    8. getInput().addAction(new UserAction("Up 2") {
    9.     @Override
    10.     protected void onAction() {
    11.         paddle2.translateY(-PADDLE_SPEED);
    12.     }
    13. }, KeyCode.UP);
    14.  
    15. getInput().addAction(new UserAction("Down 2") {
    16.     @Override
    17.     protected void onAction() {
    18.         paddle2.translateY(PADDLE_SPEED);
    19.     }
    20. }, KeyCode.DOWN);
    21. 复制代码

    现在我们将添加游戏变量来保持玩家1和玩家2的得分。我们可以直接使用int score1;来创建游戏变量。

    但是，FXGL提供了一个强大的属性概念，它建立在JavaFX属性的基础上。澄清一下，FXGL中的每个变量在内部都被存储为JavaFX属性，因此它是可观察和可绑定的。我们声明变量的方式如下：

    1. @Override
    2. protected void initGameVars(Map<String, Object> vars) {
    3.     vars.put("score1", 0);
    4.     vars.put("score2", 0);
    5. }
    6. 复制代码

    FXGL会根据默认值来推断每个变量的类型。在这种情况下，0是int类型的，所以score1将被分配为int类型。我们以后会看到这些变量与原始的Java类型相比有多么强大。

    我们现在考虑创建我们的实体。如果你完成了以前的教程，这应该是很简单的。

    1. @Override
    2. protected void initGame() {
    3.     paddle1 = spawnBat(0, getAppHeight() / 2 - PADDLE_HEIGHT / 2);
    4.     paddle2 = spawnBat(getAppWidth() - PADDLE_WIDTH, getAppHeight() / 2 - PADDLE_HEIGHT / 2);
    5.  
    6.     ball = spawnBall(getAppWidth() / 2 - BALL_SIZE / 2, getAppHeight() / 2 - BALL_SIZE / 2);
    7. }
    8.  
    9. private Entity spawnBat(double x, double y) {
    10.     return entityBuilder()
    11.             .at(x, y)
    12.             .viewWithBBox(new Rectangle(PADDLE_WIDTH, PADDLE_HEIGHT))
    13.             .buildAndAttach();
    14. }
    15.  
    16. private Entity spawnBall(double x, double y) {
    17.     return entityBuilder()
    18.             .at(x, y)
    19.             .viewWithBBox(new Rectangle(BALL_SIZE, BALL_SIZE))
    20.             .with("velocity", new Point2D(BALL_SPEED, BALL_SPEED))
    21.             .buildAndAttach();
    22. }
    23. 复制代码

    我们调用 entityBuilder() 方法来:

    1. 用给定的 x, y 坐标创建新实体

    2. 使用我们提供的视图

    3. 从视图生成边界框

    4. 将创建的实体添加到游戏世界。

    5. (在以下情况下ball) 我们还添加了一个新的实体属性，命名为velocity 的Point2D类型

    接下来，我们设计我们的用户界面，它由两个Text对象组成。重要的是，我们将这些对象的文本属性与我们之前创建的两个变量绑定。这是FXGL变量所提供的强大功能之一。更具体地说，当score1被更新时，textScore1 UI对象的文本将被自动更新。

    1. @Override
    2. protected void initUI() {
    3.     Text textScore1 = getUIFactoryService().newText("", Color.BLACK, 22);
    4.     Text textScore2 = getUIFactoryService().newText("", Color.BLACK, 22);
    5.  
    6.     textScore1.setTranslateX(10);
    7.     textScore1.setTranslateY(50);
    8.  
    9.     textScore2.setTranslateX(getAppWidth() - 30);
    10.     textScore2.setTranslateY(50);
    11.  
    12.     textScore1.textProperty().bind(getWorldProperties().intProperty("score1").asString());
    13.     textScore2.textProperty().bind(getWorldProperties().intProperty("score2").asString());
    14.  
    15.     getGameScene().addUINodes(textScore1, textScore2);
    16. }
    17. 复制代码

    这个游戏的最后一块是更新勾选。通常情况下，FXGL游戏会在每一帧上使用Component来为实体提供功能。所以更新代码可能根本就不需要。在这种情况下，作为一个简单的例子，我们将使用传统的更新方法，见下文。

    1. @Override
    2. protected void onUpdate(double tpf) {
    3.     Point2D velocity = ball.getObject("velocity");
    4.     ball.translate(velocity);
    5.  
    6.     if (ball.getX() == paddle1.getRightX()
    7.             && ball.getY() < paddle1.getBottomY()
    8.             && ball.getBottomY() > paddle1.getY()) {
    9.         ball.setProperty("velocity", new Point2D(-velocity.getX(), velocity.getY()));
    10.     }
    11.  
    12.     if (ball.getRightX() == paddle2.getX()
    13.             && ball.getY() < paddle2.getBottomY()
    14.             && ball.getBottomY() > paddle2.getY()) {
    15.         ball.setProperty("velocity", new Point2D(-velocity.getX(), velocity.getY()));
    16.     }
    17.  
    18.     if (ball.getX() <= 0) {
    19.         getWorldProperties().increment("score2", +1);
    20.         resetBall();
    21.     }
    22.  
    23.     if (ball.getRightX() >= getAppWidth()) {
    24.         getWorldProperties().increment("score1", +1);
    25.         resetBall();
    26.     }
    27.  
    28.     if (ball.getY() <= 0) {
    29.         ball.setY(0);
    30.         ball.setProperty("velocity", new Point2D(velocity.getX(), -velocity.getY()));
    31.     }
    32.  
    33.     if (ball.getBottomY() >= getAppHeight()) {
    34.         ball.setY(getAppHeight() - BALL_SIZE);
    35.         ball.setProperty("velocity", new Point2D(velocity.getX(), -velocity.getY()));
    36.     }
    37. }
    38. 复制代码

    我们使用住球的 "velocity"属性，用它来平移（移动）每一帧的球。然后，我们对球在游戏窗口和球拍上的位置做各种检查。如果球击中了窗口的顶部或底部，那么我们就在Y轴上进行反转。同样，如果球击中了一个球拍，那么我们就在X轴上倒转。最后，如果球没有打中球拍，而是打到了屏幕的一侧，那么对面的球拍就会得分，球就会被重置。重置的方法如下。

    1. private void resetBall() {
    2.     ball.setPosition(getAppWidth() / 2 - BALL_SIZE / 2, getAppHeight() / 2 - BALL_SIZE / 2);
    3.     ball.setProperty("velocity", new Point2D(BALL_SPEED, BALL_SPEED));
    4. }
    5. 复制代码

    大功告成 ! 你现在有了一个简单的Pong游戏。可以在下面获得完整的源代码。

    完整源代码

    1. import com.almasb.fxgl.app.GameApplication;
    2. import com.almasb.fxgl.app.GameSettings;
    3. import com.almasb.fxgl.entity.Entity;
    4. import com.almasb.fxgl.input.UserAction;
    5. import javafx.geometry.Point2D;
    6. import javafx.scene.input.KeyCode;
    7. import javafx.scene.paint.Color;
    8. import javafx.scene.shape.Rectangle;
    9. import javafx.scene.text.Text;
    10. import java.util.Map;
    11.  
    12. import static com.almasb.fxgl.dsl.FXGL.*;
    13.  
    14. public class PongApp extends GameApplication {
    15.  
    16.     private static final int PADDLE_WIDTH = 30;
    17.     private static final int PADDLE_HEIGHT = 100;
    18.     private static final int BALL_SIZE = 20;
    19.     private static final int PADDLE_SPEED = 5;
    20.     private static final int BALL_SPEED = 5;
    21.  
    22.     private Entity paddle1;
    23.     private Entity paddle2;
    24.     private Entity ball;
    25.  
    26.     @Override
    27.     protected void initSettings(GameSettings settings) {
    28.         settings.setTitle("Pong");
    29.     }
    30.  
    31.     @Override
    32.     protected void initInput() {
    33.         getInput().addAction(new UserAction("Up 1") {
    34.             @Override
    35.             protected void onAction() {
    36.                 paddle1.translateY(-PADDLE_SPEED);
    37.             }
    38.         }, KeyCode.W);
    39.  
    40.         getInput().addAction(new UserAction("Down 1") {
    41.             @Override
    42.             protected void onAction() {
    43.                 paddle1.translateY(PADDLE_SPEED);
    44.             }
    45.         }, KeyCode.S);
    46.  
    47.         getInput().addAction(new UserAction("Up 2") {
    48.             @Override
    49.             protected void onAction() {
    50.                 paddle2.translateY(-PADDLE_SPEED);
    51.             }
    52.         }, KeyCode.UP);
    53.  
    54.         getInput().addAction(new UserAction("Down 2") {
    55.             @Override
    56.             protected void onAction() {
    57.                 paddle2.translateY(PADDLE_SPEED);
    58.             }
    59.         }, KeyCode.DOWN);
    60.     }
    61.  
    62.     @Override
    63.     protected void initGameVars(Map<String, Object> vars) {
    64.         vars.put("score1", 0);
    65.         vars.put("score2", 0);
    66.     }
    67.  
    68.     @Override
    69.     protected void initGame() {
    70.         paddle1 = spawnBat(0, getAppHeight() / 2 - PADDLE_HEIGHT / 2);
    71.         paddle2 = spawnBat(getAppWidth() - PADDLE_WIDTH, getAppHeight() / 2 - PADDLE_HEIGHT / 2);
    72.  
    73.         ball = spawnBall(getAppWidth() / 2 - BALL_SIZE / 2, getAppHeight() / 2 - BALL_SIZE / 2);
    74.     }
    75.  
    76.     @Override
    77.     protected void initUI() {
    78.         Text textScore1 = getUIFactoryService().newText("", Color.BLACK, 22);
    79.         Text textScore2 = getUIFactoryService().newText("", Color.BLACK, 22);
    80.  
    81.         textScore1.setTranslateX(10);
    82.         textScore1.setTranslateY(50);
    83.  
    84.         textScore2.setTranslateX(getAppWidth() - 30);
    85.         textScore2.setTranslateY(50);
    86.  
    87.         textScore1.textProperty().bind(getWorldProperties().intProperty("score1").asString());
    88.         textScore2.textProperty().bind(getWorldProperties().intProperty("score2").asString());
    89.  
    90.         getGameScene().addUINodes(textScore1, textScore2);
    91.     }
    92.  
    93.     @Override
    94.     protected void onUpdate(double tpf) {
    95.         Point2D velocity = ball.getObject("velocity");
    96.         ball.translate(velocity);
    97.  
    98.         if (ball.getX() == paddle1.getRightX()
    99.                 && ball.getY() < paddle1.getBottomY()
    100.                 && ball.getBottomY() > paddle1.getY()) {
    101.             ball.setProperty("velocity", new Point2D(-velocity.getX(), velocity.getY()));
    102.         }
    103.  
    104.         if (ball.getRightX() == paddle2.getX()
    105.                 && ball.getY() < paddle2.getBottomY()
    106.                 && ball.getBottomY() > paddle2.getY()) {
    107.             ball.setProperty("velocity", new Point2D(-velocity.getX(), velocity.getY()));
    108.         }
    109.  
    110.         if (ball.getX() <= 0) {
    111.             getWorldProperties().increment("score2", +1);
    112.             resetBall();
    113.         }
    114.  
    115.         if (ball.getRightX() >= getAppWidth()) {
    116.             getWorldProperties().increment("score1", +1);
    117.             resetBall();
    118.         }
    119.  
    120.         if (ball.getY() <= 0) {
    121.             ball.setY(0);
    122.             ball.setProperty("velocity", new Point2D(velocity.getX(), -velocity.getY()));
    123.         }
    124.  
    125.         if (ball.getBottomY() >= getAppHeight()) {
    126.             ball.setY(getAppHeight() - BALL_SIZE);
    127.             ball.setProperty("velocity", new Point2D(velocity.getX(), -velocity.getY()));
    128.         }
    129.     }
    130.  
    131.     private Entity spawnBat(double x, double y) {
    132.         return entityBuilder()
    133.                 .at(x, y)
    134.                 .viewWithBBox(new Rectangle(PADDLE_WIDTH, PADDLE_HEIGHT))
    135.                 .buildAndAttach();
    136.     }
    137.  
    138.     private Entity spawnBall(double x, double y) {
    139.         return entityBuilder()
    140.                 .at(x, y)
    141.                 .viewWithBBox(new Rectangle(BALL_SIZE, BALL_SIZE))
    142.                 .with("velocity", new Point2D(BALL_SPEED, BALL_SPEED))
    143.                 .buildAndAttach();
    144.     }
    145.  
    146.     private void resetBall() {
    147.         ball.setPosition(getAppWidth() / 2 - BALL_SIZE / 2, getAppHeight() / 2 - BALL_SIZE / 2);
    148.         ball.setProperty("velocity", new Point2D(BALL_SPEED, BALL_SPEED));
    149.     }
    150.  
    151.     public static void main(String[] args) {
    152.         launch(args);
    153.     }
    154. }
    155. 复制代码

    。

  • 相关阅读:
    vscode连接服务器一直retry
    Vue3 + ElementPlus 前端实现分片上传
    redis持久化
    Java实习生常规技术面试题每日十题Java基础（七）
    【mockserver】linux服务器搭建 easy-mock，用于挡板或模拟接口返回服务器
    图 - 06 关键路径
    C 程序结构
    nacos未授权-CVE-2021-29441复现
    磁性聚苯乙烯纳米微球负载1-Me-AZADO/双硫腙接枝聚苯乙烯微球/氨基酸聚苯乙烯树脂微球的合成与表征
    vue 页面的css样式代码多，怎么把css样式代码做成独立的文件，然后引用进来；以及style的scoped标签介绍以及scoped穿透介绍
  • 原文地址：https://blog.csdn.net/BASK2311/article/details/127977737