Javafx barrier game development Lesson 1

I suddenly found that there was still the first course of javafx game development. However, these two tutorials do not conflict. Currently, this series is a complete brick-and-mortar game.

The main knowledge used in the first lesson is the dynamic binding of javafx, the use of rectangle, simple mousemove events, and boxblur special effects.

First, create a javafx project named brickblock. I am using E (FX) Clipse for development.

E (FX) Clipse Official Website: http://www.efxclipse.org/, download integrated plug-in eclipse.

First, create a base class baseobject for the game object, which inherits from the parent.

import javafx.beans.property.DoubleProperty;import javafx.beans.property.SimpleDoubleProperty;import javafx.scene.Parent;/** * @author wing * @date 2012/7/26 */public abstract class BaseObject extends Parent{    protected DoubleProperty widthProperty = new SimpleDoubleProperty(0);    protected DoubleProperty heightProperty = new SimpleDoubleProperty(0);    protected DoubleProperty xProperty = new SimpleDoubleProperty(0);    protected DoubleProperty yProperty = new SimpleDoubleProperty(0);        public  DoubleProperty widthProperty() {        return  widthProperty;    }    public double getWidth(){        return widthProperty.get();    }    public void setWidth(double width){        this.widthProperty.set(width);    }         public  DoubleProperty heightProperty() {        return  heightProperty;    }    public double getHeight(){        return heightProperty.get();    }    public void setHeight(double height){        this.heightProperty.set(height);    }           public  DoubleProperty xProperty() {        return  xProperty;    }    public double getX(){        return xProperty.get();    }    public void setX(double x){        this.xProperty.set(x);    }                   public  DoubleProperty yProperty() {        return  yProperty;    }    public double getY(){        return yProperty.get();    }    public void setY(double y){        this.yProperty.set(y);    }           public void moveX(double x){    this.xProperty.set(getX() + x);    }        public void moveY(double y){    this.yProperty.set(getY() + y);    }        public boolean isCollisionWith(BaseObject baseObject){    if(getX() + getWidth() > baseObject.getX() && getX() < baseObject.getX() + baseObject.getWidth() && getY() + getHeight() > baseObject.getY() && getY() < baseObject.getY() + baseObject.getHeight()){    return true;    }    return false;    }    }

As you can see, the base class baseobject contains the attributes of coordinates and width, and an iscollisionwith Method for collision detection.

We can see that the basic class baseobject does not use the regular data type, but uses the doubleproperty. Doubleproperty

Is also the dynamic binding mechanism in javafx. The set get method only changes the value of doubleproperty.

For convenience, iscollisionwith is just a simple rectangular collision.

Next we will create a mainbrick game object class intercepted at the bottom of the brick.

import javafx.scene.effect.BoxBlur;import javafx.scene.input.MouseEvent;import javafx.scene.paint.Color;import javafx.scene.shape.Rectangle;import org.wing.game.BrickBlock;/** * @author wing * @date 2012/7/25 */public class MainBrick extends BaseObject{    private Rectangle mRectangle;    private BoxBlur mBlur;    public MainBrick(){           mRectangle = new Rectangle();        mRectangle.widthProperty().bindBidirectional(widthProperty());        mRectangle.heightProperty().bindBidirectional(heightProperty());        mRectangle.xProperty().bindBidirectional(xProperty());        mRectangle.yProperty().bindBidirectional(yProperty());        mRectangle.setArcWidth(20);        mRectangle.setArcHeight(20);        mRectangle.setFill(Color.YELLOW);        mBlur = new BoxBlur();        mBlur.setWidth(5);        mBlur.setHeight(5);        mRectangle.setEffect(mBlur);        setWidth(150);        setHeight(25);        getChildren().add(mRectangle);    }        public void onMouseMove(MouseEvent event){        if (event.getX() >= getWidth()/2 && event.getX() <= BrickBlock.WIDTH - getWidth()/2) {            setX(event.getX() - getWidth()/2);        }    } }

The code in mainbrick is also very simple.

1. A rectangle is created. The bindbidirectional method is used here. The meaning of this method in javafx is bidirectional binding and can only be used for property.

We bind the width, height, and coordinates of the rectangle to the attributes of the base class in two directions, that is, the entire mainbrick is already a rectangle.

2. Set the rounded corner of the rectangle to make it a rounded rectangle.

3. Create a boxblur effect and set the boxblur effect for Rectangle through seteffect.

4. Set the width and height of mainbrick. Due to bidirectional binding, the setwidth and setheight attributes are synchronously updated to the width and height attributes of rectangle.

5. There is also an onmousemove event, mainly to move the rectangle with the mouse. By judging, the rectangle will not go beyond the left and right borders, and the rectangle center is aligned with the mouse. Of course, this event cannot be executed now.

Next, we will create a game scenario class gamescene that inherits the parent.

import org.wing.game.object.MainBrick;import javafx.animation.KeyFrame;import javafx.animation.Timeline;import javafx.event.ActionEvent;import javafx.event.EventHandler;import javafx.scene.Parent;import javafx.scene.input.MouseEvent;import javafx.scene.paint.Color;import javafx.scene.shape.Rectangle;import javafx.util.Duration;public class GameScene extends Parent {    private int width, height;    private Rectangle background;    private MainBrick mainBrick = new MainBrick();     public GameScene(int width, int height){    this.width = width;    this.height = height;            initGameObjects();    }    private void initGameObjects(){        background = new Rectangle(0, 0, this.width, this.height);        background.setOnMouseMoved(new EventHandler<MouseEvent>() {            @Override            public void handle(MouseEvent event) {                mainBrick.onMouseMove(event);            }        });        background.setFill(Color.BLACK);        mainBrick.setX(0);        mainBrick.setY(height - mainBrick.getHeight());                getChildren().add(background);        getChildren().add(mainBrick);    }}

In the game scenario class gamescene, we pass in the width and height of the scenario through the constructor.

Then a background rectangle is created.

Set the onmousemove event of rectangle and execute the onmousemove function we just wrote in mainbrick. Use setfill to set the filling color of rectangle to black.

Next, set mainbrick to the bottom of the screen.

Finally, use getchildern (). Add () to add the background rectangle and mainbrick to gamescene.

The last step is our javafx main class.

import javafx.application.Application;import javafx.scene.Scene;import javafx.stage.Stage;/** * @author wing * @date 2012/7/26 */public class BrickBlock extends Application {    public static final int WIDTH = 800;    public static final int HEIGHT = 600;    public static void main(String[] args) {        launch(args);    }        @Override    public void start(Stage primaryStage) {        GameScene  root = new GameScene(WIDTH, HEIGHT);        primaryStage.setTitle("BrickBlock");        primaryStage.setScene(new Scene(root, WIDTH, HEIGHT));        primaryStage.show();    }}

As you can see, the main class has become very simple because the game objects and game scenes are separated.

Then let's run and see the effect.

The yellow bricks in the figure move with the mouse and do not exceed the left and right boundary. (You cannot see the mouse ...)

It seems that the effect is very simple, but our overall structure is almost the same, which will be conducive to our subsequent development.

In the second lesson, we will add a ball to play in the space, and it can collide with the yellow bricks in the figure.

Reprinted please indicate the source: http://blog.csdn.net/ml3947/