JavaFX 2 GameTutorial第4部分

介紹

這是與JavaFX 2游戲教程相關的六個部分系列的第四部分。如果您錯過了第1部分，第2部分或第3部分，我建議您在開始本教程之前仔細閱讀它們。回顧一下，在第3部分中，我為您提供了許多經典街機風格游戲和所使用的不同輸入設備的歷史記錄。然后，我向您展示了如何創建類似于著名街機“小行星”的簡單游戲。但是，控件（船的移動）與PC游戲“星際爭霸”的控件更為相似。在第3部分中，您應該對如何從鍵盤和鼠標接收輸入有很好的了解。

圖1 JavaFX 2游戲教程第4部分

本教程的內容是調整第2部分的游戲引擎，并更新第3部分中現有的“ Asteroids”風格的游戲以處理碰撞檢測。在本教程中，我將簡要討論精靈以及如何處理碰撞檢測。現在，飛船將具有產生力場的能力，以保護自己免受敵人和小行星的傷害。這讓人想起經典的街機“ 小行星豪華版 ”。如果要運行演示，請向下滾動并單擊下面的WebStart按鈕。在啟動游戲之前，請先閱讀要求。

什么是雪碧？

根據Wikipedia的說法，“ 子畫面是整合到更大場景中的二維圖像或動畫。” 從Java游戲世界的角度來看，子畫面是一個對象，其中包含圖像幀和基于要動畫化到場景區域上的演員的上下文的其他數據。在沃爾特·迪斯尼（ Walt Disney）時代，用鉛筆和紙畫漫畫時，藝術家制作了許多圖畫，成為了動畫。這個例子指向了翻書的創建。我確定您小時候就已經制作了翻書。我知道我做到了我曾經在筆記本的各個角落進行涂鴉和制作炫酷的動畫。在我們的Asteroid型游戲中，我創建了一個sprite對象，其中包含像翻書一樣預先旋轉的飛船的所有圖像（ ImageView ）。為了使船轉彎具有動畫效果，我使當前幀可見，而其余幀不可見。與翻書類似，它似乎圍繞其中心（樞軸）點旋轉。子畫面還可以包含其他信息，例如速度或健康點。

碰撞檢測

當演員或小精靈在整個場景中設置動畫時，游戲引擎將檢查每個小精靈是否與其他小精靈相互沖突，以確定它們是否相互碰撞。此過程應該非常有效，尤其是當您在屏幕上移動大量精靈時。在效率方面需要權衡。因為游戲循環中的每個循環都會檢查碰撞，所以更精確通常會降低性能。許多游戲會使用圖像的邊界區域來確定兩個精靈是否相互碰撞。一些游戲使用矩形作為邊界區域。下面的圖2中顯示了兩個精靈碰撞：

圖2邊界框為矩形碰撞區域。

我敢肯定，到現在為止，當圍繞角色的像素是透明的時，游戲中的大多數角色（圖像）都不會顯示為矩形。但是，即使像素是透明的，演員或圖像的確是矩形的。

圖3描繪了一個演員圖像

那些使用矩形邊界區域的游戲通常會在精靈圖像中刻出邊界框。如圖4下方所示，兩個矩形邊界區域（橙色和綠色）被刻在宇宙飛船圖像中。

圖4兩個用作碰撞邊界框的矩形。

我相信您會注意到船和機翼的鼻尖沒有被任何一個邊界盒覆蓋。這意味著，當小行星與子畫面的無界區域重疊時，不會發生碰撞。有些游戲使用這種策略。您會注意到，子畫面的矩形邊界區域很小，并放置在子畫面圖像的關鍵區域中。對于多邊形和其他非矩形形狀，使用更好的算法會發現更高的精度。在此博客文章中，我基本上將圓形用作邊界區域，而不是矩形。我本可以使每個精靈包含一組碰撞形狀，但我選擇為每個精靈只設置一個碰撞區域。每個碰撞區域在場景圖上將為圓形。對于宇宙飛船，我根據飛船的中心點劃了一個圓圈，半徑擴展到了飛船的駕駛艙。下圖5中顯示了該船的有界圓形碰撞區域，用紅色圓圈表示。

圖5船舶的碰撞區域。

我選擇一個圓作為邊界區域是因為相對容易根據距離公式（勾股定理）確定兩個對象的碰撞，該距離公式僅需要每個子圖形的邊界區域的中心點及其半徑。在基于兩個中心點計算距離之后，您將比較結果以查看它是否小于或等于兩個半徑的總和。如果結果確實小于或等于兩個半徑的總和，則發生了碰撞。圖6描述了距離公式如何與圓形邊界區域的兩個中心點相關。

圖6兩個中心點之間的距離公式。

以下代碼從GameWorld類創建主游戲循環：

@Overridepublic void handle(javafx.event.ActionEvent event) {// update actorsupdateSprites();// check for collisioncheckCollisions();// removed dead thingscleanupSprites();}

下面的代碼從GameWorld類創建checkCollision（）方法：

protected void checkCollisions() {// check other sprite's collisionsspriteManager.resetCollisionsToCheck();// check each sprite against other sprite objects.for (Sprite spriteA : spriteManager.getCollisionsToCheck()) {for (Sprite spriteB : spriteManager.getAllSprites()) {if (handleCollision(spriteA, spriteB)) {// The break helps optimize the collisions//  The break statement means one object only hits another// object as opposed to one hitting many objects.// To be more accurate comment out the break statement.break;}}}}

派生的Game World（ TheExpanse ）類對其handleCollision（）方法的實現：

/*** How to handle the collision of two sprite objects.** @param spriteA Sprite from the first list.* @param spriteB Sprite from the second list.* @return boolean returns a true if the two sprites have collided otherwise false.*/@Overrideprotected boolean handleCollision(Sprite spriteA, Sprite spriteB) {if (spriteA != spriteB) {if (spriteA.collide(spriteB)) {if (spriteA != myShip) {spriteA.handleDeath(this);}if (spriteB != myShip) {spriteB.handleDeath(this);}}}return false;}

Sprite類使用距離公式的collide（）方法的默認實現：

public boolean collide(Sprite other) {if (collisionBounds == null || other.collisionBounds == null) {return false;}// determine it's sizeCircle otherSphere = other.collisionBounds;Circle thisSphere = collisionBounds;Point2D otherCenter = otherSphere.localToScene(otherSphere.getCenterX(), otherSphere.getCenterY());Point2D thisCenter = thisSphere.localToScene(thisSphere.getCenterX(), thisSphere.getCenterY());double dx = otherCenter.getX() - thisCenter.getX();double dy = otherCenter.getY() - thisCenter.getY();double distance = Math.sqrt(dx * dx + dy * dy);double minDist = otherSphere.getRadius() + thisSphere.getRadius();return (distance < minDist);}

Sprite類的handleDeath（）方法的默認實現：

public void handleDeath(GameWorld gameWorld) {gameWorld.getSpriteManager().addSpritesToBeRemoved(this);}

Atom （小行星或導彈）類將覆蓋handleDeath（）方法：

public void handleDeath(GameWorld gameWorld) {implode(gameWorld);super.handleDeath(gameWorld);}

JavaFX 2 Sprite和碰撞演示

這個簡單的演示游戲將是星際爭霸和小行星之間的混合體。使用鼠標導航飛船時，您會注意到控件類似于StarCraft的Battle Cruiser 。目的是在武器撞擊您的飛船或其他因撞擊而爆炸的球體之前向它們發射武器。由于這是一個簡單的教程，甚至是處于開發初期的游戲，因此該游戲無法跟蹤得分。我鼓勵您去GitHub下載代碼并增強游戲。為了簡潔起見，我不會顯示所有代碼更改，但是我相信您會在這里訪問GitHub： https ： //github.com/carldea/JFXGen，以獲取所有演示和源代碼。

要求：