用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 。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370457.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python命令行运行模式_[Python] 命令行模式阅读博客园的博文

1 #-*- coding:UTF-8 -*-2 importrequests3 from lxml importetree4 importsys5 importio6 importos789 sys.stdout io.TextIOWrapper(sys.stdout.buffer, encodinggb18030)101112 classCnBlogs:13 """"14 Auth&#xff1a;reader15 发表地址&#xff1a;…

HTML5--应用网页模板

因为刚开始写博客,只想着把知识点记录在这,也想给你们一些参考,在布局上有些没有思考太多;回过头来看,实在是不忍直视,对不住之前阅读的100 ,既然昨天的事无法挽回,那就从现在开始从新整改吧!也希望大家看了,能对你们有所帮助 1.先给大家看看效果图,好让大家有点兴趣 2.大家再来…

企业集成模式简介

在此博客文章中&#xff0c;我们将介绍一些企业集成模式。 这些是旨在解决集成挑战的已知设计模式。 阅读此书后&#xff0c;您将可以设计集成解决方案。 EIP&#xff08;简而言之&#xff09;是已知的设计模式&#xff0c;可为应用程序集成过程中遇到的问题/问题提供解决方案…

手把手教你Chrome浏览器安装Postman(含下载云盘链接)【转载】

转载自&#xff1a;http://www.ljwit.com/archives/php/278.html 说明&#xff1a; Postman不多介绍&#xff0c;是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。本文主要介绍下安装过程。 本文使用的是解压文件直接进行安装。是比较快速有效的安装方式&#xff0c;…

C语言博客作业--数据类型

题目1&#xff1a;7-4 打印菱形图案 1. 本题PTA提交列表 2. 设计思路 1.定义变量i,j,k,n;且声明i为要打印的行数&#xff0c;j是控制输出打印空格和星星&#xff0c;n是菱形为菱形的高 2.输入n 3.i1&#xff0c;j1 4.先打印上半部分&#xff0c;第一行到n/21行&#xff0c;输出…

信息隐藏将txt文件合并到jpg文件中_使用Kali Linux在图像内隐藏机密消息—可在任何Linux发行版使用

欢迎回到“Esn技术社区”&#xff01;今天&#xff0c;我们将演示如何使用Steghide(一种可在Kali Linux上使用的流行隐写工具)在图像内隐藏消息。在计算机科学中&#xff0c;将信息隐藏在文件内(例如图像&#xff0c;文档&#xff0c;程序&#xff0c;有用数据&#xff0c;消息…

Spring 3.1,Cloud Foundry和本地开发

这篇文章将帮助您在Cloud Foundry上使用MongoDB构建Spring 3.1 Web应用程序。 除了推动Cloud Foundry之外&#xff0c;您还可以使用MongoDB实例在本地环境中进行开发。 目标 此博客发布的目标是在本地构建应用程序&#xff0c;然后发布到本地Cloud Foundry实例。 我们将利用C…

Spring MVC 简述:从MVC框架普遍关注的问题说起

任何一个完备的MVC框架都需要解决Web开发过程中的一些共性的问题&#xff0c;比如请求的收集与分发、数据前后台流转与转换&#xff0c;当前最流行的SpringMVC和Struts2也不例外。本文首先概述MVC模式的分层思想与MVC框架普遍关注的问题&#xff0c;并以此为契机结合SpringMVC的…

java方法调用机制_Java方法调用机制 - osc_bkdv2it5的个人空间 - OSCHINA - 中文开源技术交流社区...

最近在编程时&#xff0c;修改方法传入对象的对象引用&#xff0c;并没有将修改反映到调用方法中。奇怪为什么结果没有变化&#xff0c;原因是遗忘了Java对象引用和内存分配机制。本文介绍3个点&#xff1a;① 该问题举例说明② 简要阐述Java内存区域③ 介绍JVM中方法调用的机制…

CSS染色图标(图片)

之前一直以为用background引入的图标无法染色&#xff08;非字体图标&#xff09;&#xff0c;现在才知道有黑科技可以用&#xff0c;就是利用drop-shadow。 代码示例 <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"&…

eclipse安装java web插件

1 查看eclipse版本 找到eclipse的安装目录&#xff0c;找到readme文件&#xff0c;打开其中的html文件&#xff0c;我的是4.6版本的,代号是oxygen 2 安装 打开eclipse,点击help-Install new software-单击add&#xff0c;在弹出窗口中输入网址&#xff1a; http://download.ecl…

python正则表达式指南_Python正则表达式指南

1. 正则表达式基础1.1. 简单介绍正则表达式并不是Python的一部分。正则表达式是用于处理字符串的强大工具&#xff0c;拥有自己独特的语法以及一个独立的处理引擎&#xff0c;效率上可能不如str自带的方法&#xff0c;但功能十分强大。得益于这一点&#xff0c;在提供了正则表达…

Google Guava EventBus用于事件编程

在任何软件应用程序中都是如此&#xff0c;有些对象需要共享信息才能完成工作。 在Java应用程序中&#xff0c;实现信息共享的一种方法是拥有事件侦听器&#xff0c;其唯一目的是在发生所需事件时采取某些措施。 在大多数情况下&#xff0c;此过程有效&#xff0c;并且最有经验…

system类

package system.cn; /** system类的方法 都是静态方法&#xff0c;可以直接用类名直接调用* 常用的方法&#xff1a;* static long currentTimeMillis() 返回以毫秒为单位的当前时间。 static void exit(int status) 终止当前正在运行的 Java 虚拟机。 static void gc…

c await和java_blog/java/test/awaitility.zh.md at master · c-rainstorm/blog · GitHub

javaAtomicInteger atomic new AtomicInteger(0);// Do some async stuff that eventually updates the atomic integerawait().untilAtomic(atomic, equalTo(1));等待一个 AtomicBoolean 更简单&#xff1a;javaAtomicBoolean atomic new AtomicBoolean(false);// Do some a…

实现输入框小数多 自动进位展示,编辑时实际值不变

今天遇到个业务需求&#xff0c;要求输入框&#xff0c;输入数字的小数位数可以很多位&#xff0c;但移开后显示&#xff0c;只显示小数点后两位 &#xff08;四舍五入&#xff09;&#xff0c;当要编辑的时候&#xff0c;展现其原来的输入数据。 闲话不多说&#xff0c;当时也…

使用Jasper Reports以Java创建报告

上周&#xff0c;我试图使用Jasper创建报告。 在这篇文章中&#xff0c;我将记录一些资源和链接&#xff0c;以便对任何寻求类似信息的人都有用。 我将介绍Jasper报告&#xff0c;示例和Dynamic Jasper的生命周期。 Jasper Reports是世界上最受欢迎的开源报告引擎。 它完全用…

CentOS7 安装NodeJS

一、切换目录到/usr/local/src 命令行&#xff1a;cd /usr/local/src 二、下载node.js&#xff08;我这里下载的是二进制的源码&#xff09; 命令行&#xff1a; wget https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.xz 图片&#xff1a; 三、解压压缩包 命令行&am…

CSS3基础2(变形与动画)

<!DOCTYPE html5><html lang"en"><head> <meta charset"UTF-8"> <title>CSS3基础知识&#xff08;动画&#xff09;</title> <style> /*div{*/ /*width: 150px;*/ /*hei…

java对hashmap迭代_Java:通过HashMap迭代,这样更有效率?

第二个选项肯定更有效&#xff0c;因为在第一个选项中只进行一次查找&#xff0c;次数为n次。但是&#xff0c;没有什么比尝试它更好&#xff0c;当你可以。所以这里 –(不完美&#xff0c;但足够好验证假设和我的机器)public static void main(String args[]) {Map map new H…