FXGL JAVA游戏引擎教程 05.场景（萌妹在线哭泣）

最新推荐文章于 2025-11-26 08:40:38 发布

原创

最新推荐文章于 2025-11-26 08:40:38 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#游戏 #java

本文详细介绍了如何在FXGL游戏引擎中创建和管理子场景，特别是用于显示对话框的`TalkScene`类。通过继承`SubScene`并利用其属性和方法，实现了对话框的显示、输入事件处理以及动画效果。此外，还展示了如何通过`TalkFactory`创建对话实例，并在主应用中响应按键触发对话展示。

上文中，我们已经有了一个漂亮的人物角色，但是对于一个游戏而言，除了可操控的游戏角色，各种弹出框也是必须设计考虑的一部分。
比如你希望播放一个过场动画，弹出一个对话框，打开背包栏目等等。
为了实现以上功能，我们需要另一个相关组件（scene 场景）
本文中为了方便，将着重介绍FXGL引擎提供的"subscene（子场景）"

1.方法源码解析

如果需要在fxgl中创建一个子场景十分容易，只需要创建一个类继承自Subscene类即可。
在subscene中有几个方法和属性十分关键。

属性
contentRoot 这是渲染node的根节点，所有在scene中的节点都应该渲染源自于此。我们可以在这个属性上操控当前的渲染组件。
input 这是作用于scene中的输入事件，有些输入会在场景弹出是才奏效，比如聊天中的下一句，比如整理背包等操作。
2.方法
FXGL.getSceneService().popSubScene(); 此方法移除子场景
FXGL.getSceneService().pushSubScene(); 此方法加入子场景，加入时游戏主场景暂停。

2.创建一个可以触发的对话框

首先创建TalkScene类，代码逻辑十分简单，运用的新的方法在上方已经说明，这里就不多说明了。

package com.dam.wonder.ui;

import com.almasb.fxgl.dsl.FXGL;
import com.almasb.fxgl.input.UserAction;
import com.almasb.fxgl.scene.SubScene;
import com.almasb.fxgl.ui.FontType;
import com.dam.wonder.pojo.Talk;
import javafx.geometry.Point2D;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseButton;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.*;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Text;
import javafx.util.Duration;

import java.util.ArrayList;
import java.util.List;

/**
 * 对话窗口ui
 */
public class TalkScene extends SubScene {
   
   
//对话的数组
    private final List<Talk> list = new ArrayList<>();
    //text的文本
    private final Text text;
    //矩形
    private final Rectangle rectangle;
    //存放text和包裹的矩形的容器
    private StackPane stackPane;
    //左边的立绘
    private final ImageView playerDrawAsk;
    //右边的立绘
    private final ImageView playerDrawAnswer;

    /**
     * 构造方法
     */
    private TalkScene() {
   
   
       double width = FXGL.getAppWidth();
       double height = FXGL.getAppHeight() / 4d;
       //初始化ui的框体图片
       Image image = new Image("assets/ui/pics/talk_bg.png");
       ImageView imageView = new ImageView(image);
       //保持长宽比
       imageView.setFitWidth(width);
       imageView.setFitHeight(height);
      imageView.setTranslateX(0);
      imageView.setTranslateY(height *3 + 30);
      //初始化两立绘的位置
       playerDrawAnswer =   new ImageView();
       playerDrawAsk  =   new ImageView();
       playerDrawAnswer.setPreserveRatio(true);
       playerDrawAsk.setPreserveRatio(true);
       playerDrawAnswer.setFitWidth(width/3d);
       playerDrawAsk.setFitWidth(width/3d);
       playerDrawAsk.setTranslateX(20);
       playerDrawAnswer.setTranslateX((width*2.6)/4);
       playerDrawAsk.setTranslateY(height*2.5 );
       playerDrawAnswer.setTranslateY(height*2.5 );
       //初始化text文本
      text = FXGL.getUIFactoryService().newText("", Color.PINK, FontType.GAME,22);
       text.visibleProperty().set(true);
       text.setFill(new LinearGradient(0, 0, 1, 2, true, CycleMethod.REPEAT, new Stop(0, Color.AQUA), new Stop(0.5f, Color.RED)));
       text.setStrokeWidth(1);
       text.setStroke(Color.PINK);
       //给立绘增加一个呼吸效果（变大变小）
       FXGL.animationBuilder(this)
               .repeatInfinitely()
               .duration(Duration.seconds(2))
               .autoReverse(true)
               .scale(playerDrawAnswer)