1. 简介

本章节介绍 FXGL如何渲染游戏场景

Game-Scene

This page covers how high-level rendering is done in FXGL (technically in JavaFX since we use it as the graphics framework).

2. 游戏场景

为了显示一个实体，您需要配置和附加它的视图。这是通过完成的ViewComponent，如下所示：

// 这可以是任何 JavaFX 节点或一些自定义图形
Node node = new Rectangle(10, 10, Color.BLUE);

ViewComponent viewComponent = entity.getViewComponent();
viewComponent.addChild(node);

大多数情况下，您希望使用图像作为视图。有一个Texture类可以让你做到这一点，此外它也是一个 JavaFX 节点：

Node node = FXGL.getAssetLoader().loadTexture("player.png");

或者，实体构建器提供了一些静态方法来简化构建，包括设置视图：

Entity entity = FXGL.entityBuilder()
                       .view("player.png")
                       .build();

最后，将实体添加到游戏世界：

getGameWorld().addEntity(entity);

2.1. 游戏视图

大部分视图场景下包含实体，游戏视图可以添加不与任何实体关联的视图，只用作UI的渲染

Node node = new Rectangle(10, 10, Color.BLUE);

//使用Translate 进行定位
node.setTranslateX(100);
node.setTranslateY(100);

//0 是 z index
GameView view = new GameView(node, 0);

getGameScene().addGameView(view);

2.2. UI视图

UI视图固定在可见视口中，其坐标系始终在0,0至width,height范围内。这意味着UI内容固定在屏幕上，并且不随页面的滚动而滚动等效于WEB开发中的Affix。

Node node = new Rectangle(10, 10, Color.BLUE);

//使用Translate 进行定位
node.setTranslateY(200);
node.setTranslateX(200);

getGameScene().addUINode(node);

3. 场景视口

FXGL 中的视口承担了相机的职责。您可以获得对视口的引用，如下所示：

Viewport viewport = getGameScene().getViewport();

您可以通过调用手动更改视口的x和y值：

viewport.setX(...);
viewport.setY(...);

最有用的功能之一是将视口绑定到跟随实体：

Entity player = ...;

// distX and distY is how far the viewport origin should be from the entity
viewport.bindToEntity(player, distX, distY);

当视口跟随玩家时，它可能会超出关卡边界。您可以将边界设置为视口可以“游走”多远：

viewport.setBounds(minX, minY, maxX, maxY);

通常提醒用户某些操作我们可以使用视口抖动:

FXGL.getGameScene().getViewport().shake(powerTranslate,powerRotate);

FXGL17 - 游戏场景

1. 简介

Game-Scene

2. 游戏场景

2.1. 游戏视图

2.2. UI视图

3. 场景视口