JavaFX战旗类游戏开发第二课游戏地图绘制

在上一节课中，我们对即将要完成的战旗Demo有了一个大概的了解，本节课当中，我们将会学习绘制游戏地图。

自从在JavaFX 2.2中增加了Canvas相关的功能，我们就可以使用Canvas来实现游戏绘制了。

游戏地图绘制主要用到GraphicsContext.drawImage方法。

drawImage(Image image,double sx,double sy,double sw,double sh,double dx,double dy,double dw,double dh);

其中image 表示源图片。

sx,sy,sw,sh表示相对于源图片的x，y坐标和截取的宽度和高度。

dx,dy,dw,dy表示绘制到画布上的x, y坐标和绘制的宽度和高度。

单元图片如下:

地图绘制就是将单元格进行拼接。

通常使用一个二维数组来表示地图数据如下:

int[][] mapIndex = { { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 18, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 18, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 18, 18, 18, 18, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, };

下面来看看我们的游戏地图类:

import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;public class GameMap {private int[][] mapIndex = { { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 18, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 18, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 18, 18, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 18, 18, 18, 18, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0 },{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }, };private int tileWidth;private int tileHeight;private int cols;private Image image;public GameMap(int tileWidth,int tileHeight, Image map){this.tileWidth = tileWidth;this.tileHeight = tileHeight;this.image = map;cols = (int) (map.getWidth() / tileWidth);}public void drawMap(GraphicsContext gc) {int mapWidth = mapIndex[0].length;int mapHeight = mapIndex.length;for (int y = 0; y < mapHeight; y++) {for (int x = 0; x < mapWidth; x++) {int px = mapIndex[y][x] % cols;int py = mapIndex[y][x] / cols;gc.drawImage(image, px * tileWidth, py * tileHeight, tileWidth, tileHeight, x * tileWidth, y* tileHeight, tileWidth, tileHeight);}}}public int[][] getMapIndex() {return mapIndex;}public void setMapIndex(int[][] mapIndex) {this.mapIndex = mapIndex;}
}

在实际游戏开发中，游戏地图数据通常存储在文件中，从文件读取，由于我这只是个Demo，写进来方便大家直观的了解。

首先，我们通过地图贴图的宽度和单元格的宽度来计算地图贴图单元格的列数，然后在绘制的时候，就可以通过地图索引和单元格列数，计算当前绘制的贴图的行和列，通过drawImage绘制出来。

接下来，创建我们的Canvas类:

import javafx.application.Platform;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;public class MainCanvas extends Canvas {// 游戏地图private GameMap gameMap;private GraphicsContext gContext;private Image map;private int tileWidth = 32;private int tileHeight = 32;private boolean isRunning = true;private long sleep = 100;// 主线程private Thread thread = new Thread(new Runnable() {@Overridepublic void run() {while (isRunning) {Platform.runLater(new Runnable() {@Overridepublic void run() {draw();update();}});try {Thread.sleep(sleep);} catch (InterruptedException e) {e.printStackTrace();}}}});public MainCanvas(double width, double height) {super(width, height);map = new Image(getClass().getResourceAsStream("map0.png"));gContext = getGraphicsContext2D();// 初始化游戏地图gameMap = new GameMap(tileWidth, tileHeight, map);thread.start();}public void draw() {gameMap.drawMap(gContext);     }public void update() {}
}

MainCanvas类比较简单，创建一个线程，用于执行draw和update方法。然后载入地图贴图，初始化GameMap，并完成绘制工作。

最后，在Main类中，将我们的Canvas加入到布局中。

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;public class Main extends Application {@Overridepublic void start(Stage primaryStage) {try {AnchorPane root = new AnchorPane();Scene scene = new Scene(root,640,480);MainCanvas mainCanvas = new MainCanvas(640, 480);root.getChildren().add(mainCanvas);scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());primaryStage.setScene(scene);primaryStage.show();} catch(Exception e) {e.printStackTrace();}}public static void main(String[] args) {launch(args);}
}

下面看看运行效果:

这样，游戏地图就绘制成功了。有兴趣的朋友也可以自行修改地图索引，来绘制不同的地图。当然在实际开发中，我们还是会用地图编辑器来编辑的。

这一节课就到此结束了，下一节再见。

JavaFX战旗类游戏开发第二课游戏地图绘制相关推荐

JavaFX战旗类游戏开发第一课概述
用JavaFX开发的地图编辑器已经可以正式使用了.也写了JavaFX读取地图的库,准备抽空实现U3D的地图读取,然后再进行游戏开发. 虽然在我的JavaFX游戏开发库内已经实现了TMX地图的读取,但是 ...
JavaFX战旗类游戏开发第三课创建游戏角色
在上一节课程中,我们学习了在JavaFX中绘制游戏地图.这一节课,我们将会创建我们的游戏角色. 首先,同样的,我们创建一个简单的基类. import javafx.scene.canvas.Graph ...
游戏开发20课 tilemap 绘制
在瓦片地图上绘制下文将详细介绍在瓦片地图上绘制瓦片的步骤和工具.但是,如果要绘制等距瓦片地图,请参阅创建用于等距瓦片地图的瓦片面板以了解具体步骤和信息. 要开始绘制瓦片,请从 Tilemap Pal ...
Cocos Creator 实现战旗类游戏《火焰纹章》移动范围效果
编者按本文来自于"Cocos 荣耀讲师"征稿活动第1期,最先发表于 Cocos 中文社区,作者,ituuz.2013 年便加入社区,ituuz 堪称是社区元老成员,曾发布< ...
2D平台类游戏开发教程（翻译）
这是一篇实现2D平台类游戏的技术指导文章,原文地址:http://higherorderfun.com/blog/2012/05/20/the-guide-to-implementing-2d-pla ...
web策略类游戏开发(四)一个可以承载万人在线的架构
web策略类游戏开发(四)一个可以承载万人在线的架构 Webgame现在已经开始需要进入大统一服务器时代,每个游戏区域容纳的玩家数量将从现在的几万人发展到几十万人,因此在新的背景下,webgame如何 ...
陈力：传智播客古代珍宝币泡泡龙游戏开发第二讲html运行原理及结构
陈力:传智播客古代珍宝币泡泡龙游戏开发第二讲html运行原理及结构摘要:通过前节<陈力:传智播客古代珍宝币泡泡龙游戏开发>第一讲:前言的学习,我们知道了PHP是PHP: Hype ...
2D横板解谜类游戏开发日志-角色移动和动画
2D横板解谜类游戏开发日志-角色移动和动画一.创建角色 1新建精灵 2拉入素材 3添加组件*2,方便后续使用 4创建动画文件夹,动画帧素材丢进去(方便以后管理 5创建代码文件,挂在player对象上 ...
qq机器人开发第二课-发送图片
重要的知识点: 监听图片发送,要注意一点图片除了可能在一般的消息中发送,还有可能是通过离线文件发送来的 qq机器人开发第二课-发送图片

JavaFX战旗类游戏开发第二课游戏地图绘制

JavaFX战旗类游戏开发第二课游戏地图绘制相关推荐

最新文章

热门文章

JavaFX战旗类游戏开发 第二课 游戏地图绘制

JavaFX战旗类游戏开发 第二课 游戏地图绘制相关推荐

最新文章

热门文章

JavaFX战旗类游戏开发第二课游戏地图绘制

JavaFX战旗类游戏开发第二课游戏地图绘制相关推荐