Games

May 23, 2009

I Wish... Henry Zhang would make a WidgetFX widget from his JavaFX Pac-Man game

WidgetFX-Pac-Man

Update 24 May, 2009: Stephen Chin raises the stakes with the following comment:

"That is a quite a challenge Jim laid on you, Henry. I will up the ante with a promise to display your widget on the big stage as part of the WidgetFX JavaOne presentation if you get it done in time.  There is a good tutorial on how to build widgets from my blog.

Update 25 May, 2009: Henry Zhang picks up the gauntlet with the following comment:

"I think it is a creative idea to put a game as a widget. I will take on the challenge and hopefully the widget can be demonstrated in JavaOne. Only a week or so to go. Will let you know the progress by blogging here:
http://www.javafxgame.com"

Update 26 May, 2009:

Henry finishes the Pac-Man widget.  Check it out at javafxgame.com.  Also, just a friendly reminder to reserve the JavaOne Pro JavaFX™ Platform: RIA Enterprise Application Development with JavaFX Technology session that Stephen Chin and I will be presenting.  As of May 29, 2009 there are only 96 seats available.


Dear Henry Zhang,

Please attend Stephen Chin and Josh Marinacci's Getting Started with WidgetFX session at JavaOne (or watch the video stream), and tweak your JavaFX Pac-Man game to run as a WidgetFX widget.  It would be cool to drag Pac-Man from the WidgetFX dock and devour dots for stress relief :-)

P.S. Congratulations on article #2 in your five part Pac-Man series being published on InsideRIA.  It was a pleasure to help (albeit in small ways) with that series.

Regards,
Jim Weaver

May 15, 2009

Answer: Blinky, Pinky, Inky and Clyde

Inside-ria-pacman-ghosts The answer is: Blinky, Pinky, Inky and Clyde.  Please phrase your response in the form of a question.

If you said "What are the ghosts' nicknames in American Pac-Man", congratulations!  See the table below (from the Wikipedia Pac-Man article) for more stats on these ghosts:

Inside-ria-pacman-chars


Announcing Henry Zhang's five-part series on creating the Pac-Man game in JavaFX

For each of the next five weeks Henry Zhang will show you in great detail how he created a Pac-Man game in JavaFX.  He has written a series of articles for InsideRIA that build on each other, with each article having a JavaFX program that you can execute.  There are also Web Start links in the articles so that you can run the programs directly from the web page.  Here's an example screenshot from the first article:

Inside-ria-pacman-1a

Henry's articles are an excellent resource for increasing your JavaFX skills in the context of building a fun video game, so check them out!

Regards,

JIm Weaver

May 05, 2009

Referencing Multi-Dimensional Java Arrays from JavaFX

3D-chess Note from Jim Weaver: Just a friendly reminder to reserve the JavaOne Pro JavaFX™ Platform: RIA Enterprise Application Development with JavaFX Technology session that Stephen Chin and I will be presenting.  As of May 29, 2009 there are only 96 seats available.

You probably know that the next version of JavaFX is expected to be released around JavaOne 2009.  Did you know, however, that the latest build of the JavaFX compiler is always publicly available so that you can play with new language features?

One of the new features is the ability to reference Java arrays.  JavaFX has always been able to instantiate and access members of Java classes, but the ability to have a JavaFX variable that references a Java array has not been available until recently. Consequently, to use a Java array it has been necessary to iterate over its elements and insert them into a JavaFX sequence.  To demonstrate the ability to reference multi-dimensional Java arrays, and in honor of today being Cinco de Mayo (5/5), I'm going to use some ideas from the three-dimensional chess game variation that uses a 5x5x5 cube.  This, by the way, is a different variation from the 3D chess game made famous on Star Trek (see image below).

To start off, here is a Java class that contains a three-dimensional array, with each element having the ability to hold a chess piece.  It also defines constants that represent each type of chess piece, in each color.  Note: In this chess game variation (Raumschach, German for "space chess"), there is an additional piece:  It is a Unicorn, and is represented by an upside-down Knight.

/*
* ThreeDimChessBoard.java
*
* Example of referencing Java arrays from JavaFX.
* This Java class represents the squares on a Raumschach (German for
* "Space Chess") board, as described in the following Wikipedia article:
* http://en.wikipedia.org/wiki/Three-dimensional_chess
*
* Developed 2009 by James L. Weaver as a JavaFX example to be freely used
*/

package javafxpert;

public class ThreeDimChessBoard {
  public static int EMPTY = 0;
  public static int KING_W = 1;
  public static int QUEEN_W = 2;
  public static int ROOK_W = 3;
  public static int BISHOP_W = 4;
  public static int KNIGHT_W = 5;
  public static int UNICORN_W = 6;
  public static int PAWN_W = 7;
  public static int KING_B = 9;
  public static int QUEEN_B = 10;
  public static int ROOK_B = 11;
  public static int BISHOP_B = 12;
  public static int KNIGHT_B = 13;
  public static int UNICORN_B = 14;
  public static int PAWN_B = 15;

  public int[][][] boardArray = new int[5][5][5];

  public ThreeDimChessBoard() {
    // Floor "A"
    boardArray[0][0][0] = ROOK_W;
    boardArray[0][0][1] = KNIGHT_W;
    boardArray[0][0][2] = KING_W;
    boardArray[0][0][3] = KNIGHT_W;
    boardArray[0][0][4] = ROOK_W;
    boardArray[0][1][0] = PAWN_W;
    boardArray[0][1][1] = PAWN_W;
    boardArray[0][1][2] = PAWN_W;
    boardArray[0][1][3] = PAWN_W;
    boardArray[0][1][4] = PAWN_W;

    // Floor "B"
    boardArray[1][0][0] = PAWN_W;
    boardArray[1][0][1] = UNICORN_W;
    boardArray[1][0][2] = QUEEN_W;
    boardArray[1][0][3] = BISHOP_W;
    boardArray[1][0][4] = UNICORN_W;
    boardArray[1][1][0] = PAWN_W;
    boardArray[1][1][1] = PAWN_W;
    boardArray[1][1][2] = PAWN_W;
    boardArray[1][1][3] = PAWN_W;
    boardArray[1][1][4] = PAWN_W;

    // Floor "D"
    boardArray[3][3][0] = PAWN_B;
    boardArray[3][3][1] = PAWN_B;
    boardArray[3][3][2] = PAWN_B;
    boardArray[3][3][3] = PAWN_B;
    boardArray[3][3][4] = PAWN_B;
    boardArray[3][4][0] = BISHOP_B;
    boardArray[3][4][1] = UNICORN_B;
    boardArray[3][4][2] = QUEEN_B;
    boardArray[3][4][3] = BISHOP_B;
    boardArray[3][4][4] = UNICORN_B;

    // Floor "E"
    boardArray[4][3][0] = PAWN_B;
    boardArray[4][3][1] = PAWN_B;
    boardArray[4][3][2] = PAWN_B;
    boardArray[4][3][3] = PAWN_B;
    boardArray[4][3][4] = PAWN_B;
    boardArray[4][4][0] = ROOK_B;
    boardArray[4][4][1] = KNIGHT_B;
    boardArray[4][4][2] = KING_B;
    boardArray[4][4][3] = KNIGHT_B;
    boardArray[4][4][4] = ROOK_B;
  }
}


With the board and pieces being represented in Java, we'll now define a JavaFX class that uses the array in the Java class and provides some example functions such as movePiece() and getPieceAtSquare().  These functions are part of the chess board model, and protect its integrity.  Note: The functions in this class are just examples, so elaborating on them to provide chess game logic is an "exercise for the reader" as they say.

/*
* ThreeDimChessBoardModel.fx
*
* Example of using Java arrays from JavaFX.
* This class has functions such as movePiece() and getPieceAtSquare().
* These functions  use, and protect the integrity of, the multi-dimensional
* boardModel array in the ThreeDimChessBoard Java class.
*
* Developed 2009 by James L. Weaver as a JavaFX example to be freely used
*/
package javafxpert;

public class ThreeDimChessBoardModel {
  var chessBoard = new ThreeDimChessBoard();

  public function getPieceAtSquare(position:SquarePosition):Integer {
    return chessBoard.boardArray[position.floor][position.rank][position.file];
  }

  public function putPieceAtSquare(position:SquarePosition,
                                   piece:Integer):Integer {
    chessBoard.boardArray[position.floor][position.rank][position.file] =
      piece;
  }
  public function movePiece(startPosition:SquarePosition,
                            endPosition:SquarePosition):Void {
    // TODO: Insert actual 3D chess logic here, throwing exceptions and such
    if (getPieceAtSquare(startPosition) != ThreeDimChessBoard.EMPTY and
        getPieceAtSquare(endPosition) == ThreeDimChessBoard.EMPTY) {
      putPieceAtSquare(endPosition, getPieceAtSquare(startPosition));
      putPieceAtSquare(startPosition, ThreeDimChessBoard.EMPTY);
    }
    else {
     println("Square: {endPosition} already had a "
             "{getPieceAtSquare(startPosition)} in it");
    }
  }
}


Instances of the following class represent locations in the three-dimensional board, and are used as arguments in functions of the preceding class:

/*
* SquarePosition.fx
*
* Example of using Java arrays, including multi-dimensional, from JavaFX.
* This class represents the location of a chess piece on a three-dimensional
* chess board.
*
* Developed 2009 by James L. Weaver as a JavaFX example to be freely used
*/
package javafxpert;

public class SquarePosition {
  public var floor:Integer;
  public var rank:Integer;
  public var file:Integer;
}

Finally, here is a JavaFX program that uses the ThreeDimChessBoardModel JavaFX class to manipulate the chess pieces on the board.  Another exercise for the reader would be to create a graphical UI for this 3D chess program, perhaps using JavaFX meets Java 3D capabilities that August Lammersdorf has been developing :-)

/*
* AccessingJavaArraysExample.fx
*
* Example of using Java arrays, including multi-dimensional, from JavaFX.
* This program uses the ThreeDimChessBoardModel JavaFX class, which accesses
* the three dimensional array in the ThreeDimChessBoard Java class.
*
* Developed 2009 by James L. Weaver as a JavaFX example to be freely used
*/
package javafxpert;

var boardModel:ThreeDimChessBoardModel = ThreeDimChessBoardModel {};

var startPosition:SquarePosition;
var endPosition:SquarePosition;

startPosition = SquarePosition {floor: 1 rank: 1 file: 0};
endPosition = SquarePosition {floor: 2 rank: 1 file: 0};

println("Before moving white pawn at Ba2 one step up:");
println("Ba2 contains: {boardModel.getPieceAtSquare(startPosition)}");
println("Ca2 contains: {boardModel.getPieceAtSquare(endPosition)}");

// Move white pawn at Ba2 one step up
boardModel.movePiece(startPosition, endPosition);

println("After moving white pawn at Ba2 one step up:");
println("Ba2 contains: {boardModel.getPieceAtSquare(startPosition)}");
println("Ca2 contains: {boardModel.getPieceAtSquare(endPosition)}");

Thanks to Weiqi Gao, by the way, for informing me of the capability described in this post.  As always, please leave a comment if you have any questions.

StarTrekChess

Live long and prosper,

Jim Weaver
JavaFXpert.com

March 02, 2009

Pro JavaFX Released in Apress Alpha (Early Access) Program

Pro-javafx-alpha As many of you know, Weiqi Gao, Stephen Chin, Dean Iverson and I have been writing a book entitled  Pro JavaFX that is targeted at serious developers who want to use JavaFX.  In addition to the book being available in printed form by JavaOne 2009, we made the decision last week to allow the book to be offered as an Apress Alpha (early access) eBook.  This enables you to see the chapters of the book as drafts are submitted and revised, which gives you access to the content as soon as it is created (typos and all).  This also enables us to fine-tune the material based upon your feedback.

Here's the list of the chapters for the book:

  1. Getting a Jump Start in JavaFX
  2. Taking a Closer look at the JavaFX Language
  3. Creating a User Interface in JavaFX
  4. Using Functions, Classes and Other Advanced Features
  5. Creating Custom UI Components in JavaFX
  6. Using the Media Classes
  7. Dynamically Laying out Nodes in the User Interface
  8. Extending JavaFX with Third-Party Libraries
  9. Building a Professional JavaFX Application
  10. Developing JavaFX Mobile Applications

Currently, seven chapters (1, 2, 3, 4, 6, 7, 8) are available for download, and each of these is in first or second draft.  Chapters 5, 9 and 10 will be available soon as first drafts.  Here is a screenshot from Chapter 8 in which a drawing program built in JavaFX (in Chapter 5) is used to draw the shapes available in the JFXtras project:

DrawJFXtras

Weiqi, Stephen, Dean and I welcome you to join us in this journey as we complete the development of what is becoming a definitive treatment of JavaFX for professional developers.

For therapeutic purposes I'm sure, Stephen Chin wrote a quick blog post that gives an "exclusive, behind-the-scenes look into the making of the Pro JavaFX™ Platform book" :-)

Regards,
Jim Weaver
JavaFXpert.com

December 12, 2008

Facebook User? Check out the JavaFX Picture Puzzle

A JavaFX "Picture Puzzle" app that is integrated with Facebook is featured In a blog post by Sharon Zakhour.  Not only is it graphically pleasing and smooth operating (wasn't that a song performed by Sade?), but it "lives" in Facebook, and makes jigsaw puzzles out of your Facebook friends' profile pictures.  It uses the Facebook API, and it was developed by Sun.

Facebook_picture_puzzle  

By the way, if anyone knows whether the source code is available, please post a comment, as it would be a great learning example.

Check this JavaFX Facebook app out and puzzle all of your friends! :-)  That was lame, but it's Friday.

Regards,
Jim Weaver
JavaFXpert.com

December 10, 2008

Henry Zhang Just Raised the Bar for JavaFX Games

While checking my email today (jim.weaver [at] javafxpert.com), I received a request for feedback from Henry Zhang on a game that he had written in JavaFX.  My feedback, Henry, is that your Pac-Man game ROCKS!

Pacman

According to Henry's blog post where you can play the game, this Pac-Man game is developed with JavaFX SDK 1.0, and demonstrates the following features:

  • Binding
  • Animations
  • Effects
  • Transforms
  • Multiple inheritance
  • Java classes integration
  • Declarative statements
  • Sequences, how to map 2D arrays into a 1D Sequence
  • Handling keyboard events

Check it out, and please give Henry some feedback!

Regards,
Jim Weaver
JavaFXpert.com


December 08, 2008

JavaFX Whack-a-Janssen Game for Devoxx :-)

This year I had to miss Devoxx 2008, but really wanted to go. Not only is it a great conference, but this year it is the first major conference since the JavaFX SDK 1.0 was released, so there are some great JavaFX sessions and speakers on the agenda.

 

Whack-a-janssen

So, in honor of the Devoxx conference and the excellent leadership that Stephan Janssen provides to it, I've created a game in JavaFX.  I'm not a game programmer nor am I a graphic designer, and I didn't enlist the help of either for this quick effort.  With those disclaimers, and the hope that Stephan Janssen will take this in good-natured fun, I give you: "Whack-A-Janssen", styled loosely after the old "Whac-a-Mole" game.

Click on the Launch icon to run it as a Java Web Start application.  To play the game, simply click the Start Game button and then click on Stephan's faces when they pop up.  While the game is in progress the Start Game button changes to Stop Game.  If all three faces appear, the game is over and the Start Game button reappears.

Webstart.small2

The Code Behind the Game

This game makes use of the transition convenience classes in the javafx.animation.transition package to achieve animated movement, scaling and fading.  It also uses the Timeline and KeyFrame classes in the javafx.animation package to popup the many faces of Stephen:

/*
* WhackAJanssen.fx
*
* Developed 2008 by James L. Weaver (jim.weaver at javafxpert.com)
* to demonstrate creating applications using JavaFX SDK 1.0, and for
* having some good-natured fun with Stephan Janssen of Devoxx.
*/

package javafxpert;

import javafx.animation.*;
import javafx.animation.transition.*;
import javafx.ext.swing.*;
import javafx.scene.*;
import javafx.scene.effect.*;
import javafx.scene.image.*;
import javafx.scene.input.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;
import javafx.scene.transform.*;
import javafx.stage.Stage;
import java.lang.Math;

Stage {
  // Transitions for popups
  var popupRefs:Transition[] = [
    ScaleTransition {
      node: bind stephen1Ref
      duration: 1s
      fromX: 0.1
      fromY: 0.1
      toX: 1.0
      toY: 1.0
    },
    TranslateTransition {
      node: bind stephen2Ref
      duration: 1s
      fromY: 0
      byY: -70
      //autoReverse: true
    },
    FadeTransition {
      node: bind stephen3Ref
      duration: 1s
      fromValue: 0.0
      toValue: 1.0
      //autoReverse: true
   }
  ];
  // Transitions for knock-downs
  var knockdownRefs:Transition[] = [
    ScaleTransition {
      node: bind stephen1Ref
      duration: 500ms
      fromX: 1.0
      fromY: 1.0
      toX: 0.1
      toY: 0.1
    },
    TranslateTransition {
      node: bind stephen2Ref
      duration: 500ms
      fromY: -70
      byY: 70
      //autoReverse: true
    },
    FadeTransition {
      node: bind stephen3Ref
      duration: 500ms
      fromValue: 1.0
      toValue: 0.0
      //autoReverse: true
   }
  ];
  var stephen1Ref:ImageView;
  var stephen2Ref:ImageView;
  var stephen3Ref:ImageView;
  // Timeline that causes random Stephens to popup
  var gameTimeline = Timeline {
    keyFrames: [
      KeyFrame {
        time: 2s
        action: function():Void {
          var stephenNum:Integer =
            (Math.random() * sizeof stephensDown) as Integer;
          if (stephensDown[stephenNum]) {
            stephensDown[stephenNum] = false;
            popupRefs[stephenNum].playFromStart();
          }
        }
      }
    ]
    repeatCount: Timeline.INDEFINITE
  }
  // Position that the stephens are in. The trigger evaluates whether
  // the game is over and stops the game Timeline
  var stephensDown:Boolean[] = [true, true, true] on replace {
    var downs = for (stephen in stephensDown where stephen == true) stephen;
    if (sizeof downs == 0) {
      gameTimeline.stop();
    }
  };
  title: "Whack-A-Janssen"
  scene: Scene {
    var btn:SwingButton;
    width: 300
    height: 350
    fill: Color.#010101
    content: [
      ImageView {
        transforms: Translate.translate(24, 56)
        image: Image {
          url: "{__DIR__}images/devoxx250.jpg"
        }
      },
      // Left-most face
      stephen1Ref = ImageView {
        transforms: [
          Translate.translate(63, 99),
        ]
        opacity: 1.0
        image: Image {
          url: "{__DIR__}images/sj_face_small.gif"
        }
        cursor: Cursor.HAND
        onMouseClicked: function(me:MouseEvent):Void {
          stephensDown[0] = true;
          knockdownRefs[0].playFromStart();
        }
      },
      // Middle face
      Group {
        transforms: Translate.translate(120, 20)
        content: [
          Group {
            content: [
              stephen2Ref = ImageView {
                transforms: Translate.translate(0, 90)
                image: Image {
                  url: "{__DIR__}images/sj_head_small.gif"
                }
              },
            ]
            clip: Group {
              content: [
                Polygon {
                  points: [
                   0, 0,
                   0, 46
                   15, 80
                   51, 80,
                   66, 46,
                   66, 0
                  ]
                },
                Arc {
                  centerX: 33
                  centerY: 80
                  startAngle: 180
                  length: 180
                  radiusX: 18
                  radiusY: 10
                }
              ]
            }
          },
          Rectangle {
            width: 66
            height: 98
            fill: Color.TRANSPARENT
            cursor: Cursor.HAND
            onMouseClicked: function(me:MouseEvent):Void {
              stephensDown[1] = true;
              knockdownRefs[1].playFromStart();
            }
          }
        ]
      },
      // Right-most face
      stephen3Ref = ImageView {
        transforms: Translate.translate(190, 95)
        image: Image {
          url: "{__DIR__}images/sj_left_facing.gif"
        }
        opacity: 0.0
        effect: Glow {}
        cursor: Cursor.HAND
        onMouseClicked: function(me:MouseEvent):Void {
          stephensDown[2] = true;
          knockdownRefs[2].playFromStart();
        }
      },
      // Start Game button
      btn = SwingButton {
        transforms: [
          Translate.translate(200, 207),
          Scale.scale(0.7, 0.7),
          Rotate { angle: -4}
        ]
        text: bind if (gameTimeline.running) "Stop Game" else "Start Game"
        foreground: bind if (gameTimeline.running) Color.BLACK else Color.RED
        font: Font {
          name: "Arial Bold"
        }
        action: function():Void {
          if (not gameTimeline.running) {
            stephensDown[0] = true;
            stephensDown[1] = true;
            stephensDown[2] = true;
            knockdownRefs[0].playFromStart();
            knockdownRefs[1].playFromStart();
            knockdownRefs[2].playFromStart();
            gameTimeline.playFromStart();
          }
          else {
            gameTimeline.stop();
          }
        }
      }
    ]
  }
}

Enjoy the conference if you're attending, and this very simple and lame Whack-A-Janssen game!

Regards,

Jim Weaver
JavaFXpert.com

May 01, 2008

Watch for Falling Blocks: Take TetrisJFX for a Spin!

You may know that I've been progressively building a Tetris game in JavaFX on this blog, the most recent post being Game Over: Improving upon the Compiled JavaFX Tetris Program.  In each post I've shown you the code and pointed out some highlights.  Since then I've added some finishing touches, and would be honored if you've try it out and give me (kind) feedback for improving it further.  The screenshot below shows what TetrisJFX should look like when you click this Java Web Start link.  By the way, you'll need the JRE (Java Runtime Environment) 1.5 or later.  Also, please keep in mind that the JavaFX Script JAR files will be included with the JRE at some point. Until then please understand that when you click this link those JAR files will be downloaded as well, causing a bit of a delay.

Tetrisjfx_w_image_buttons

In addition to clicking the image buttons at the bottom of the game, you can use keystrokes (hover over the images to see tooltips that tell you what the keystrokes are).  In a future version, the arrow keys will be used for game control.  I also plan to provide the ability to cause the current tetromino to fall faster.  By the way, the tetrominoes fall progressively faster as your score increases, so be warned. :-)

170x93_speaker_v4_4 If you have any questions or input for improvements, please post a comment.  Also, if you'll be at JavaOne 2008, please attend my JavaFX Script Programming Language Tutorial session and introduce yourself afterward!

 

Have fun!
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications

Immediate eBook (PDF) download available at the book's Apress site

My Photo

Upcoming Speaking Engagements:


  • Stephen Chin and Jim Weaver speaking about JavaFX Platform

  • Speaking on JavaFX and Java at Øredev in Malmö, Sweden on 2-6 November, 2009

Upcoming JavaFX Training:


  • Developing Secure, Rich Internet Applications Hosted on a Variety of Clients Using JavaFX Technology

Enter your email address:

Delivered by FeedBurner

Available now as early access eBook


  • Click book image above to obtain eBook

Twitter Updates

    follow me on Twitter

    Affiliations:

    DZone Links:


    July 2009

    Sun Mon Tue Wed Thu Fri Sat
          1 2 3 4
    5 6 7 8 9 10 11
    12 13 14 15 16 17 18
    19 20 21 22 23 24 25
    26 27 28 29 30 31  

    Disclaimer:

    • By reading this site, you are agreeing that under no circumstances will Veriana Networks, Inc. or its affiliates be responsible for (1) any information contained on or omitted from the site, (2) any person's reliance on any such information, whether or not the information is correct, current or complete, (3) the consequences of any action you or any other person takes or fails to take, whether or not based on information provided by or as a result of the use of the sites.