JavaFX Banner Game Development Lesson Game Map

in the last lesson, we are about to complete the banner demo with a general understanding. Lesson this, we will learn to draw the game map.

With the addition of canvas-related features in JavaFX 2.2, we were able to use canvas for game drawing.

Game map drawing is mainly used in the Graphicscontext.drawimage method.

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

Where image represents the source picture.

Sx,sy,sw,sh represents the x, y coordinates and the width and height of the captured image relative to the source picture.

Dx,dy,dw,dy represents the width and height of the x, y-coordinate, and drawing to the canvas.

The unit picture is as follows:

watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvd2luz2zvdxjldmvy/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/ Dissolve/70/gravity/southeast ">

Map drawing is the concatenation of the cells.

Typically, a two-dimensional array is used to represent map data such as the following:

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, 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},};

Take a look down at our game map class:

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 , 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, 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},};p rivate int tilewidth ;p rivate 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; + +) {int px = mapindex[y][x]% cols;int py = mapindex[y][x]/cols;gc.drawimage (IM Age, 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;}}

in the actual game development. Game map data is usually stored in a file. Read from the file, because I this is just a demo, written in convenient for everyone to understand intuitively.

First, we calculate the number of map-map cells by the width of the map mapping and the width of the cell, and then, at the time of drawing, you can calculate the rows and columns of the currently drawn map by the number of maps indexed and cell columns. Drawn out by DrawImage.

Next, create our canvas class:

import javafx.application.platform;import Javafx.scene.canvas.canvas;import Javafx.scene.canvas.graphicscontext;import Javafx.scene.image.image;public class Maincanvas extends Canvas {// Game Map Private Gamemap gamemap;private graphicscontext gcontext;private Image map;private int tilewidth = 32;private int tile Height = 32;private Boolean isrunning = true;private long sleep = 100;//main thread private thread thread = new Thread (new RUNNABL E () {@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 ();//Initialize game map Gamemap = new Gamemap (tilewidth, tileheight, map); Thread.Start ();} public void Draw () {gamemap.drawmap (gcontext);} public void Update () {}} 

The Maincanvas analogy is simpler, creating a thread to run the draw and update methods.

Then load map maps, initialize Gamemap, and finish drawing work.

Finally, in the main class, add our canvas to the layout.

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 ());p rimarystage.setscene (Scene);p rimarystage.show (); catch (Exception e) {e.printstacktrace ();}} public static void Main (string[] args) {launch (args);}}

Here's a look at the execution effect:

In this way, the game map is drawn successfully. Interested friends can also change the map index on their own. To draw a different map.

Of course, in the actual development, we will still use the map editor to edit.

This is the end of the class, and I'll see you in the next section.

This article is for personal originality. Copyright all, reprint please specify source:http://blog.csdn.net/ml3947. In addition to my personal blog:http://www.wjfxgame.com.

Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.

JavaFX Banner Game Development Lesson Game Map