javafx 教程_用JavaFX编写图块引擎

javafx 教程

随着JavaFX嵌入式版本的问世，我们的框架对于游戏开发变得越来越有趣，因为我们现在可以瞄准平板电脑和智能手机等小型消费类设备。 因此，我决定对JavaFX进行更多的游戏编写实验。 这次，我想使用Canvas对渲染进行更多控制，以便能够在较小的设备上优化性能。 这些是我编写Tile Engine时的经验。

早期，游戏机和计算机的资源非常有限。 因此，为了使游戏具有成千上万的大屏幕，开发人员需要想出一种方法来以每个屏幕的位图以外的格式存储屏幕。 因此，发明了Tile Engines，它们可以从有限的一组可重复使用的较小图形(标题)中生成大屏幕。 这样可以节省内存并提高渲染性能。

如何生成屏幕的说明存储在TileMaps中。 这些地图通常组织为图块ID的二维矩阵。 通常，磁贴按层组织，以实现简单的Z顺序，并在组合具有不同背景的图形时具有更大的灵活性。 通常，TileMaps还支持存储元数据，例如，如果某些图块被阻止或敌人的生成点。

带有多个图层的TileMap，使用

映射中引用的图块通常存储在TileSet中，该图块由单个位图和有关如何将其划分为图块的元信息组成。 这是来自opengameart.com的此类图像的示例，该网站托管具有开放源代码许可的游戏资产。 在我的示例中，我使用了其中一些图形。

典型的TileSet图像，尺寸为1024 x 1024(^ 2 =适用于图形卡)

TMX格式的另一项功能是对象层。 这些特殊层可用于定义自由形状和折线并为其指定属性。 其背后的基本思想是，我们可以使用它们来定义创建精灵(生成点)，出口，门户和非矩形碰撞形状的区域。 由TileEngine的创建者或使用它来构建游戏的开发者来定义如何处理ObjectGroup。 我打算广泛使用它们，它们是用于声明性定义游戏玩法的很好的扩展点。 例如，您可以使用它们来定义动画，skript对话框等。

在

tilemap的想法也允许一个很好的工作流程。 图形设计师可以创建资产，游戏设计师可以将其导入“ Tiled”等关卡编辑器中，并通过拖放来设计关卡。 地图以机器可读的TileMap格式存储。 例如Tiled使用TMX Map格式存储TileMap。 那是一种非常简单的XML格式，然后可以由TileEngine加载。 对于我的实现，我决定使用TMX格式，因此可以使用“ Tiled ”来设计级别。

对于实现，我决定在使用单个节点时使用JavaFX Canvas立即模式渲染，而不是保留模式渲染。 这给了我更多控制权，可以优化Raspberry Pi等小型设备的性能。

我们需要的第一件事是读取TileMap(TMX)和TileSet(TSX)文件的方法。 使用JAXB，创建可以从文件创建POJO的TileMapReader非常简单。 因此，如果您使用引擎，则只需调用：

TileMap map = TileMapReader.readMap(“path/to/my/map.tmx”);

由于在大多数游戏中，“ TileMaps”将比屏幕大，因此仅渲染“ Map”的一部分。 通常，地图以英雄为中心。 您只需跟踪屏幕左上角的地图位置即可。 我们将此称为我们的相机位置。 然后，在像这样渲染TileMap之前，从英雄的位置更新位置：

// the center of the screen is the preferred location of our hero

double centerX = screenWidth / 2;

double centerY = screenHeight / 2;

cameraX = hero.getX() - centerX;

cameraY = hero.getY() - centerY;

我们只需要确保相机不会离开图块地图即可：

// if we get too close to the borders

if (cameraX >= cameraMaxX) {

cameraX = cameraMaxX;

}

if (cameraY >= cameraMaxY) {

cameraY = cameraMaxY;

}

使用Canvas渲染TileMap

然后，渲染图块非常容易。 我们只需遍历图层，并要求tilemap在当前位置渲染正确的图像。 首先，我们需要找出当前可见的图块以及偏移量，因为我们的英雄逐像素而不是逐图地移动：

// x,y index of first tile to be shown

int startX = (int) (cameraX / tileWidth);

int startY = (int) (cameraY / tileHeight);

// the offset in pixels

int offX = (int) (cameraX % tileWidth);

int offY = (int) (cameraY % tileHeight);

Then we loop through the visible layers and draw the tile:

for (int y = 0; y < screenHeightInTiles; y++) {

for (int x = 0; x < screenWidthInTiles; x++) {

// get the tile id of the tile at this position

int gid = layer.getGid((x + startX) + ((y + startY) * tileMap.getWidth()));

graphicsContext2D.save();

// position the graphicscontext for drawing

graphicsContext2D.translate((x * tileWidth) - offX, (y * tileHeight) - offY);

// ask the tilemap to draw the tile

tileMap.drawTile(graphicsContext2D, gid);

// restore the old state

graphicsContext2D.restore();

}

}

然后，TileMap将找出该Tile属于哪个Tileset，并要求TileSet将其绘制到Context。 绘图本身就像在TileSets图像中找到正确的坐标一样简单：

public void drawTile(GraphicsContext graphicsContext2D, int tileIndex) {

int x = tileIndex % cols;

int y = tileIndex / cols;

// TODO support for margin and spacing

graphicsContext2D.drawImage(tileImage, x * tilewidth, y* tileheight, tilewidth, tileheight, 0, 0, tilewidth, tileheight);

}

游戏循环。 因此，我们可以将其简化为：

游戏循环再次非常简单。 我正在使用时间轴和关键帧以特定帧率(FPS)触发游戏脉冲：

final Duration oneFrameAmt = Duration.millis(1000 / FPS);

final KeyFrame oneFrame = new KeyFrame(oneFrameAmt,

new EventHandler() {

@Override

public void handle(Event t) {

update();

render();

}

});

TimelineBuilder.create()

.cycleCount(Animation.INDEFINITE)

.keyFrames(oneFrame)

.build()

.play();

TileMapCanvas中的每个update更新都循环遍历所有Sprites并更新它们。 基本Sprite当前包含一个带有Walkcycle的TileSet，如下所示：

由于精灵通常在它们周围有很多透明的空间，为了给诸如挥剑之类的动画行为留出更多空间，我为方便起见决定允许添加MoveBox和CollisionBox。 CollisionBox可以用来定义英雄受伤的区域。 MoveBox应该放在腿上，这样它就可以在上身与瓷砖重叠的情况下通过禁忌瓷砖的前面。 我们的“英雄”周围的蓝色区域是精灵边界：

https://www.youtube.com/watch?v=08H6LZkcqXw

子画面也可以具有定时行为。 在每次更新时，Sprite都会循环遍历其行为，并检查是否该触发。 如果是这样，则称为“行为”方法。 如果我们有一个敌人，例如示例应用程序中的骨架，我们可以在此处添加它为AI。 例如，我们的骷髅具有非常简单的行为，可以使其跟随我们的英雄。 它还会检查碰撞并像这样对我们的英雄造成伤害：

monsterSprite.addBehaviour(new Sprite.Behavior() {

@Override

public void behave(Sprite sprite, TileMapCanvas playingField) {

if (sprite.getCollisionBox().intersects(hero.getCollisionBox())) {

hero.hurt(1);

}

}

});

默认间隔是一秒钟。 如果需要其他间隔，可以设置它们。 行为是可重用的，不同的Sprite可以共享相同的Behavior实例。 行为与KeyFrames相似，并且我目前还使用它们来为Animations计时(增加下一个渲染调用的tile索引)。

如开头所述，ObjectGroup是方便的扩展点。 在我的示例游戏中，我使用它们来定义英雄和怪物的生成点。 当前，您只需添加一个ObjectGroupHandler，然后使用ObjectGroup中的信息来创建Hero和Monster精灵并将行为添加到它们：

class MonsterHandler implements ObjectGroupHandler {

Sprite hero;

@Override

public void handle(ObjectGroup group, final TileMapCanvas field) {

if (group.getName().equals('sprites')) {

for (TObject tObject : group.getObjectLIst()) {

if (tObject.getName().equals('MonsterSpawner')) {

try {

double x = tObject.getX();

double y = tObject.getY();

TileSet monster = TileMapReader.readSet('/de/eppleton/tileengine/resources/maps/BODY_skeleton.tsx');

Sprite monsterSprite = new Sprite(monster, 9, x, y, 'monster');

monsterSprite.setMoveBox(new Rectangle2D(18, 42, 28, 20));

field.addSprite(monsterSprite);

monsterSprite.addBehaviour(new Sprite.Behavior() {

@Override

public void behave(Sprite sprite, TileMapCanvas playingField) {

if (sprite.getCollisionBox().intersects(hero.getCollisionBox())) {

hero.hurt(1);

}

}

});

}

全部放在一起

要创建一个示例游戏，您需要做的就是创建TileMaps，TileSets，一个或多个ObjectGroupHandler来创建Sprites并添加Behavior，然后您就可以玩了：

// create the world

TileMap tileMap = TileMapReader.readMap('/de/eppleton/tileengine/resources/maps/sample.tmx');

// initialize the TileMapCanvas

TileMapCanvas playingField = new TileMapCanvas(tileMap, 0, 0, 500, 500);

// add Handlers, can also be done declaratively.

playingField.addObjectGroupHandler(new MonsterHandler());

// display the TileMapCanvas

StackPane root = new StackPane();

root.getChildren().add(playingField);

Scene scene = new Scene(root, 500, 500);

playingField.requestFocus();

primaryStage.setTitle('Tile Engine Sample');

primaryStage.setScene(scene);

primaryStage.show();

那是我的Tile Engine的起点。 同时，它已经发展成为更通用的2D引擎，因此还支持不使用TileSet的Sprite和自由渲染的Layers。 到目前为止，它仍然运行良好。

参考： Eppleton博客上的JCG合作伙伴Toni Epple用JavaFX编写了一个Tile Engine 。

翻译自: https://www.javacodegeeks.com/2013/01/writing-a-tile-engine-in-javafx.html

javafx 教程