用JavaFX編寫圖塊引擎

隨著JavaFX嵌入式版本的問世，我們的框架對于游戲開發變得越來越有趣，因為我們現在可以瞄準平板電腦和智能手機等小型消費類設備。因此，我決定對JavaFX進行更多的游戲編寫實驗。這次，我想使用Canvas對渲染進行更多控制，以便能夠在較小的設備上優化性能。這些是我編寫Tile Engine時的經驗。

早期，游戲機和計算機的資源非常有限。因此，為了使游戲具有成千上萬的大屏幕，開發人員需要想出一種方法來以每個屏幕的位圖以外的格式存儲屏幕。因此，發明了Tile Engine，它們可以從有限的一組可重復使用的較小圖形（標題）中生成大屏幕。這樣可以節省內存并提高渲染性能。

如何生成屏幕的說明存儲在TileMaps中。這些地圖通常組織為Tile 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 herodouble centerX = screenWidth / 2;double centerY = screenHeight / 2;cameraX = hero.getX() - centerX;cameraY = hero.getY() - centerY;

我們只需要確保相機沒有離開圖塊地圖即可：

// if we get too close to the bordersif (cameraX >= cameraMaxX) {cameraX = cameraMaxX;}if (cameraY >= cameraMaxY) {cameraY = cameraMaxY;}

使用Canvas渲染TileMap

然后，渲染圖塊非常容易。我們只需遍歷圖層，并要求tilemap在當前位置渲染正確的圖像。首先，我們需要找出當前可見的圖塊以及偏移量，因為我們的英雄逐像素而不是逐圖地移動：

// x,y index of first tile to be shownint startX = (int) (cameraX / tileWidth);int startY = (int) (cameraY / tileHeight);// the offset in pixelsint 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 positionint gid = layer.getGid((x + startX) + ((y + startY) * tileMap.getWidth()));graphicsContext2D.save();// position the graphicscontext for drawinggraphicsContext2D.translate((x * tileWidth) - offX, (y * tileHeight) - offY);// ask the tilemap to draw the tiletileMap.drawTile(graphicsContext2D, gid);// restore the old stategraphicsContext2D.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 spacinggraphicsContext2D.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() {@Overridepublic void handle(Event t) {update();render();}});TimelineBuilder.create().cycleCount(Animation.INDEFINITE).keyFrames(oneFrame).build().play();

TileMapCanvas中的每個update更新都循環遍歷所有Sprites并對其進行更新。基本Sprite當前包含一個帶有行走周期的TileSet，如下所示：

由于子畫面通常在其周圍有很多透明空間，因此為了為動畫行為（例如揮劍）提供一些額外的空間，為方便起見，我決定允許添加MoveBox和CollisionBox。 CollisionBox可以用于定義我們的英雄可能受到傷害的區域。 MoveBox應該放在腿周圍，這樣它就可以在上半身與瓷磚重疊的情況下通過禁止的瓷磚前面。我們的“英雄”周圍的藍色區域是精靈邊界：

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

子畫面也可以具有定時行為。在每次更新時，Sprite都會循環遍歷其行為，并檢查是否該觸發。如果是這樣，則調用“行為”方法。如果我們有一個敵人，例如示例應用程序中的骨架，我們可以在此處添加它為AI。例如，我們的骷髏具有非常簡單的行為，可以使其跟隨我們的英雄。它還會檢查碰撞并像這樣對我們的英雄造成傷害：

monsterSprite.addBehaviour(new Sprite.Behavior() {@Overridepublic 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;@Overridepublic 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() {@Overridepublic void behave(Sprite sprite, TileMapCanvas playingField) {if (sprite.getCollisionBox().intersects(hero.getCollisionBox())) {hero.hurt(1);}}});}

放在一起

要創建一個示例游戲，您需要做的就是創建TileMaps，TileSets，一個或多個ObjectGroupHandler來創建Sprites并添加Behavior，然后就可以開始游戲了：

// create the worldTileMap tileMap = TileMapReader.readMap('/de/eppleton/tileengine/resources/maps/sample.tmx');// initialize the TileMapCanvasTileMapCanvas playingField = new TileMapCanvas(tileMap, 0, 0, 500, 500);// add Handlers, can also be done declaratively.playingField.addObjectGroupHandler(new MonsterHandler());// display the TileMapCanvasStackPane 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 。