javafx2

介紹

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

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

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

什么是雪碧？

根據(jù)Wikipedia的說法，“ 子畫面是整合到更大場景中的二維圖像或動(dòng)畫。” 從Java游戲世界的角度來看，子畫面是一個(gè)對象，其中包含圖像幀和基于要?jiǎng)赢嫽綀鼍皡^(qū)域上的演員的上下文的其他數(shù)據(jù)。 在沃爾特·迪斯尼 （ Walt Disney）時(shí)代 ，用鉛筆和紙畫卡通時(shí)，藝術(shù)家制作了許多圖畫，成為了動(dòng)畫。 這個(gè)例子指向了翻書的創(chuàng)建。 我敢肯定，您小時(shí)候就已經(jīng)創(chuàng)建了翻書。 我知道我做到了 我曾經(jīng)在筆記本的各個(gè)角落進(jìn)行涂鴉和制作炫酷的動(dòng)畫。 在我們的Asteroid型游戲中，我創(chuàng)建了一個(gè)精靈對象，其中包含像翻書一樣預(yù)先旋轉(zhuǎn)的飛船的所有圖像（ ImageView ）。 為了使船轉(zhuǎn)彎具有動(dòng)畫效果，我使當(dāng)前幀可見，而其余幀不可見。 與翻書類似，它似乎圍繞其中心（樞軸）點(diǎn)旋轉(zhuǎn)。 子畫面還可以包含其他信息，例如速度或健康點(diǎn)。

碰撞檢測

當(dāng)演員或精靈在整個(gè)場景中設(shè)置動(dòng)畫時(shí)，游戲引擎將檢查每個(gè)精靈與其他精靈的關(guān)系，以確定它們是否彼此碰撞。 此過程應(yīng)該非常有效，尤其是當(dāng)您在屏幕上移動(dòng)大量精靈時(shí)。 在效率方面需要權(quán)衡。 因?yàn)橛螒蜓h(huán)中的每個(gè)循環(huán)都會(huì)檢查碰撞，所以更精確通常會(huì)降低性能。 許多游戲都會(huì)使用圖像的邊界區(qū)域來確定兩個(gè)精靈是否相互碰撞。 一些游戲使用矩形作為邊界區(qū)域。 下面的圖2中顯示了兩個(gè)精靈碰撞：

圖2邊界框?yàn)榫匦闻鲎矃^(qū)域。

我敢肯定，到現(xiàn)在為止，當(dāng)演員周圍的像素是透明的時(shí)，游戲中的大多數(shù)演員（圖像）都不會(huì)顯示為矩形。 但是，即使像素是透明的，演員還是圖像的確是矩形的。

圖3描繪了一個(gè)演員圖像

那些使用矩形邊界區(qū)域的游戲通常會(huì)將邊界框刻在子畫面的圖像中。 如圖4所示，兩個(gè)矩形邊界區(qū)域（橙色和綠色）被刻在宇宙飛船圖像中。

圖4兩個(gè)用作碰撞邊界框的矩形。

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

圖5船舶的碰撞區(qū)域。

我之所以選擇一個(gè)圓作為邊界區(qū)域，是因?yàn)樗鄬θ菀椎馗鶕?jù)距離公式 （ 勾股定理 ）確定兩個(gè)對象的碰撞，該距離公式僅需要每個(gè)子圖形的邊界區(qū)域的中心點(diǎn)及其半徑。 在基于兩個(gè)中心點(diǎn)計(jì)算距離之后，您將比較結(jié)果以查看它是否小于或等于兩個(gè)半徑的總和。 如果結(jié)果確實(shí)小于或等于兩個(gè)半徑的總和，則發(fā)生了碰撞。 圖6描述了距離公式如何與圓形邊界區(qū)域的兩個(gè)中心點(diǎn)相關(guān)。

圖6兩個(gè)中心點(diǎn)之間的距離公式。

以下代碼從GameWorld類創(chuàng)建主游戲循環(huán)：

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

下面的代碼從GameWorld類創(chuàng)建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（）方法的實(shí)現(xiàn)：

/*** 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（）方法的默認(rèn)實(shí)現(xiàn)：

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（）方法的默認(rèn)實(shí)現(xiàn)：

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

Atom （小行星或?qū)?#xff09;類將覆蓋handleDeath（）方法：

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

JavaFX 2 Sprite和碰撞演示

這個(gè)簡單的演示游戲?qū)⑹切请H爭霸和小行星之間的混合體。 使用鼠標(biāo)導(dǎo)航飛船時(shí)，您會(huì)注意到控件類似于StarCraft的Battle Cruiser 。 目的是在武器撞擊您的飛船或撞擊后會(huì)爆炸的其他球體之前向其發(fā)射武器。 由于這是一個(gè)簡單的教程，甚至是處于開發(fā)初期的游戲，因此該游戲無法跟蹤得分。 我鼓勵(lì)您去GitHub下載代碼并增強(qiáng)游戲。 為了簡潔起見，我不會(huì)顯示所有代碼更改，但是我相信您會(huì)在這里訪問GitHub： https ： //github.com/carldea/JFXGen，以獲取所有演示和源代碼。

要求 ：

• Java 7或更高版本
• JavaFX 2.1或更高版本
• Windows XP或更高版本（應(yīng)該很快可用于Linux / MacOS）

一個(gè)簡單的小行星類型游戲，名為“ The Expanse”。

說明：

• 右鍵單擊（在Windows上）以飛船。
• 鼠標(biāo)左鍵單擊（Windows鼠標(biāo)左鍵）開火。
• 按鍵'2？ 變成大型導(dǎo)彈。 （藍(lán)色圓形彈丸）
• 其他按鍵默認(rèn)為較小的導(dǎo)彈。 （紅色圓形彈丸）
• 按下空格鍵將切換力場，以保護(hù)飛船免受敵人和小行星的傷害。

單擊下面的啟動(dòng)按鈕以啟動(dòng)演示：

繼續(xù)本教程的第5部分 。

相關(guān)文章

Sprite的定義： http : //en.wikipedia.org/wiki/Sprite_%28computer_graphics%29

華特·迪士尼（Walt Disney）： http : //en.wikipedia.org/wiki/Walt_Disney

如何制作翻書： http : //www.bitrebels.com/design/how-to-create-a-flip-book/

JavaFX的ImageView： http : //docs.oracle.com/javafx/2/api/javafx/scene/image/ImageView.html

碰撞檢測：http: //zetcode.com/tutorials/javagamestutorial/collision/

Java中的AABB碰撞檢測： http ： //www.youtube.com/watch？v = JIxV-LXqa1g

勾股定理： http : //en.wikipedia.org/wiki/Pythagorean_theorem

距離公式： http ： //en.wikipedia.org/wiki/Distance

小行星豪華版（Youtube）的嚴(yán)肅游戲： http : //www.youtube.com/watch?v= 6DG-GJENHgg

參考：來自我們的JCG合作伙伴 Carl Dea的JavaFX 2 GameTutorial第4部分 ，位于Carl's FX Blog博客上。

翻譯自: https://www.javacodegeeks.com/2012/06/javafx-2-gametutorial-part-4.html

javafx2

總結(jié)

以上是生活随笔為你收集整理的javafx2_JavaFX 2 GameTutorial第4部分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。