Continuing my little JavaFX framework for game development, right now focused on use those tiles I’m drawing and posting here in my blog. This framework will be a group of classes for simplify and hide some complexities of common game development. Right now I wrote just a few of them.
Use
We create a tileset from the files.png file that way
Tileset are orthogonal, distributed into a grid of cols columns and rows rows. Each tile have dimensions height x width.
A Tileset is used into a Tilemap
var bg = Tilemap {
set:tileset cols:5 rows:5
map:[8,8,8,8,8,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3]}
That shows
Each number in the map represents a tile in the tilemap. Number 0 means the first tile at the upper left corner, numbers keep growing from left to right columns, from top to bottom rows.
Another example
var things = Tilemap {
set:tileset cols:5 rows:5
map:[80,55,56,145,145,96,71,72,61,62,0,0,0,77,78,122,0,0,93,94,138,0,0,0,0]}
The Tileset class basically stores a Image and a collection of Rectangle2D objects, for be used as viewports in ImageView classes.
importjavafx.scene.image.ImageView;
importjavafx.scene.image.Image;
importjavafx.geometry.Rectangle2D;
publicclass Tileset {
public-init var image:Image;
public-init var width:Integer=32;
public-init var height:Integer=32;
public-init var rows:Integer=10;
public-init var cols:Integer=15;
protected var tile:Rectangle2D[];
init {
tile =for(row in [0..rows]){for(col in [0..cols]){Rectangle2D{
minX: col * width, minY: row * height
height: width, width: height
}}}}}
The Tilemap is a CustomNode with a Group of ImageViews in a grid. The grid is mounted by iterating over the map as many layers was defined.
publicclass Tilemap extends CustomNode {
public-init var rows:Integer=10;
public-init var cols:Integer=10;
public-init var set: Tileset;
public-init var layers:Integer=1;
public-init var map:Integer[];
public override function create(): Node {
var tilesperlayer = rows * cols;
returnGroup{
content:for(layer in [0..layers]){for(row in [0..rows-1]){for(col in [0..cols-1]){
ImageView {
image: set.image x: col * set.width y: row * set.height
viewport: set.tile[map[tilesperlayer*layer + row*rows+col]]}}}}};
}}
Next steps
Integrate to a map editor
Support some XML map format
Sprite classes for animation
Integrate those collision detection classes I posted before
Tile sets are a very simple way to draw scenarios with repeated elements. From simple to complex ones using a very low footprint.
First step, load the png file that stores the tileset into a Image. The file tiles.png shoud be in the same directory of the source code. I adjusted some tiles from those tile set I’ve blogged here before into a grid of 10×10 tiles.
var tileset =Image{
url:"{__DIR__}tiles.png"}
Notice that each tile have 32 of height and 32 of width. We will assume this and use theses numbers when performing calculations to find a single tile in our tile set.
def w =32;
def h =32;
To display a Image in the screen we use a ImageView node. A ImageView can have a viewport property to create crop or zoom effect. A viewport is just a Rectangle2D, a object with position (minX and minY), height and width. If we want to display the first tile in the tileset we do
Notice that the minX determines the column and minY the row in the tileset. The first row is 0*32, the second row is 1*32 and so on. If we want to display the tile at the second line and third column of the tileset we do
Those properties in a Rectangle2D are for init and read only. So I created a list with all Rectangles I can need for use as a viewport.
def viewports =for(row in [0..9]){for(col in [0..9]){Rectangle2D{
minX: col * w, minY: row * h, height: w, width: h
}}}
The scenario map is stored in another list. The first element of the list is 7, that is, the first tile in the scenario is the 7th tile from the tile set.
Finally to create a scenario with 100 tiles, 10 per row and with 10 rows, in a list called tiles. Each iteration of this loop creates a ImageView. Each ImageView will store a single tile. We get the tile number in the map list and so use it to index the viewports list.
var tiles =for(row in [0..9]){for(col in [0..9]){
ImageView {
x: col * w, y: row * h,
viewport: bind viewports[map[row *10+ col]]
image: tileset
}}}
Additionally I added two things to transform this program also in a (extremely) simple map editor. At each ImageView I added a callback for onMouseClicked event. When you click on a tile, it changes its map position, ie, the tile. The next tile for the left button and the last tile for any other button.
onMouseClicked: function( e:MouseEvent):Void{
var amount =if(e.button== MouseButton.PRIMARY){1}else{-1};
map[row *10+ col]=(map[row *10+ col]+ amount) mod 100;
}
The other thing is to print the map list when the program is over. There is the full program:
We are using just a image that can handle 100 tiles, tiles.png with less than 30Kb. The map is also composed with 100 tiles. Each tile we can choose between 100 different tiles, so we can compose 10100 different maps (one googol10 ). Most of them are useless and without any sense, but some are cool.
JavaFX 1.0 is out and there are tons of new cool features, specially for game development.trans
I’ll show in this tutorial how to create a very simple demo that shows how to load imtrages, handle sprites, collisions and keyboard events that you can use to create a game with a old school rpg like vision.
For the background scenario I’m using the house that I drew and we’ll call as house.png.
To put animation on the character we load all sprites into four lists. Each list for each direction.
// sprites
def up =for(i in [0..2]){Image{url:"{__DIR__}up{i}.png"}}
def right =for(i in [0..2]){Image{url:"{__DIR__}right{i}.png"}}
def down =for(i in [0..2]){Image{url:"{__DIR__}down{i}.png"}}
def left =for(i in [0..2]){Image{url:"{__DIR__}left{i}.png"}}
And create vars to store the character position and frame of animation.
var frame = 0;
var posx =320;
var posy =80;
Also store the house background.
// house background
def house = ImageView{ image: Image {url: "{__DIR__}house.png"} };
I create booleans to store some key states and at each interval of time I see how they are and do something about. You can handle keyboard event with less code but I like this way because keep visual and game logics a little bit more separated.
// keyboard
var upkey =false;
var rightkey =false;
var downkey =false;
var leftkey =false;
// player
var player = ImageView{
x: bind posx y: bind posy
image:Image{url:"{__DIR__}down1.png"}
onKeyPressed: function(e:KeyEvent){if(e.code== KeyCode.VK_DOWN){
downkey =true;
}elseif(e.code== KeyCode.VK_UP){
upkey =true;
}elseif(e.code== KeyCode.VK_LEFT){
leftkey =true;
}elseif(e.code== KeyCode.VK_RIGHT){
rightkey =true;
}}// onKeyPressed
onKeyReleased: function(e:KeyEvent){if(e.code== KeyCode.VK_DOWN){
downkey =false;
}elseif(e.code== KeyCode.VK_UP){
upkey =false;
}elseif(e.code== KeyCode.VK_LEFT){
leftkey =false;
}elseif(e.code== KeyCode.VK_RIGHT){
rightkey =false;
}}// onKeyReleased}
See a video of the game working so far:
Now we will add collisions. In a previous post I showed some math behind bounding box game collisions. The good news are that you no longer need to worry about that. There are a lot of API improvements in JavaFX 1.0 that do all the hard work for you, specially the new classes on javafx.geometry package, Rectangle2D and Point2D.
We create rectangles that represent the obstacles in the house.
We just have to change a little bit the game logics in order to handle collisions.
We define a bounding box around the player, it’s a rectangle from (4, 25) at the player coordinates system and with width 19 and height 10. The idea is to prospect where the player will be in the next step, see if it’s bouding box don’t collide with any obstacle and so pass it to the real game position.
// game logics
var gamelogics = Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: KeyFrame {
time : 1s/8
action: function(){
var nextposx = posx;
var nextposy = posy;
if(downkey){
nextposy +=5;
player.image= down[++frame mod 3];
}if(upkey){
nextposy -=5;
player.image= up[++frame mod 3];
}if(rightkey){
nextposx +=5;
player.image= right[++frame mod 3];
}if(leftkey){
nextposx -=5;
player.image= left[++frame mod 3];
}for(obst in obstacles){if(obst.boundsInLocal.intersects(nextposx +4, nextposy +25, 19, 10)){return;
}}
posx = nextposx;
posy = nextposy;
}}}
This is enough to do the trick but I also added a way to smoothly show the obstacles when pressing the space key.
All images I’m using should be in the same directory of source code.
