Java软光栅渲染器-创建窗口

by 冰点

目标

  1. 创建一个Java工程。
  2. 创建主窗口，用于显示画面。
  3. 创建一个实时更新的主循环。
  4. 计算并显示FPS。

实现

主窗口

在实现渲染器之前，首先要创建一个窗口，解决图像的输出问题。我的选择是把Swing的JFrame作为主窗口，Canvas用来显示图像。

先创建一个Java工程，建立net.jmecn包，然后创建Screen类。

package net.jmecn;

import java.awt.Canvas;
import java.awt.Dimension;
import java.awt.Toolkit;

import javax.swing.JFrame;

/**
 * 代表显示图像的窗口
 * 
 * @author yanmaoyuan
 *
 */
public class Screen {
    
    // 主窗口
    private JFrame frame;
    
    // 画布
    private Canvas canvas;
           
    public Screen(int width, int height, String title) {
        canvas = new Canvas();
        
        // 设置画布的尺寸
        Dimension size = new Dimension(width, height);
        canvas.setPreferredSize(size);
        canvas.setMaximumSize(size);
        canvas.setMinimumSize(size);
        canvas.setFocusable(true);

        // 创建主窗口
        frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setResizable(false);
        frame.setSize(width, height);
        frame.setTitle(title);
        frame.add(canvas);// 设置画布
        frame.pack();
        frame.setVisible(true);
        centerScreen();// 窗口居中
        
        // 焦点集中到画布上，响应用户输入。
        canvas.requestFocus();
    }

    /**
     * 使窗口位于屏幕的中央。
     */
    private void centerScreen() {
        Dimension size = frame.getSize();
        Dimension screen = Toolkit.getDefaultToolkit().getScreenSize();
        int x = (screen.width - size.width) / 2;
        int y = (screen.height - size.height) / 2;
        frame.setLocation(x, y);
    }

}

我还需要一个程序运行的入口，一般定义为Main。

package net.jmecn;

/**
 * 程序运行入口
 * @author yanmaoyuan
 *
 */
public class Main {

    public static void main(String[] args) {
        new Screen(800, 600, "JSoftwareRenderer");
    }
}

执行一下。

实时更新的主循环

创建Application类，让它负责执行主循环，实时更新窗口的画面。注意我使用了System.nanoTime() 来获得系统时间，单位是纳秒（1 / 1000,000,000秒）。

package net.jmecn;

/**
 * 应用程序主类
 * 
 * @author yanmaoyuan
 */
public class Application {

    protected int width;
    protected int height;
    protected String title;

    // 显示器
    private Screen screen;

    // 运行状态
    private boolean isRunning;
    
    /**
     * 构造方法
     */
    public Application() {
        width = 800;
        height = 600;
        title = "JSoftwareRenderer";

        // 初始化运行状态
        isRunning = true;
    }
    
    /**
     * 启动程序
     */
    public void start() {
        
        // 计时器
        long startTime = System.nanoTime();
        long previousTime = System.nanoTime();
        long deltaTime;
        float delta;
        
        screen = new Screen(width, height, title);
        
        // 初始化
        initialize();

        while (isRunning) {
            // 计算间隔时间
            deltaTime = System.nanoTime() - previousTime;
            previousTime = System.nanoTime();
            delta = deltaTime / 1000000000.0f;

            // 更新逻辑
            update(delta);
            
            // 更新画面
            render(delta);
            
        }

        // 计算总运行时间
        long totalTime = System.nanoTime() - startTime;
        System.out.printf("运行总时间：" + totalTime / 1000000000.0f);
    }
    
    /**
     * 初始化
     */
    protected void initialize() {
        // TODO
    }
    
    /**
     * 更新场景
     * @param delta
     */
    protected void update(float delta) {
        // TODO
    }
    
    /**
     * 绘制场景
     * @param delta
     */
    protected void render(float delta) {
        // TODO
    }
    
    /**
     * 停止程序
     */
    public void stop() {
        isRunning = false;
    }
}

比起一次性写完，我更喜欢先把几个生命周期方法先定义好。

start() 和 stop() 是两个public方法，分别负责启动和停止主循环。

initialize() 负责做一些初始化工作。也许我还应该定义一个clean()方法负责做回收工作，不过目前不需要。

update(float delta) 和 render(float delta) 方法由主循环调用。其中update负责更新场景，render负责绘制场景。

现在换一下 Main 类中的代码：

package net.jmecn;

/**
 * 程序运行入口
 * @author yanmaoyuan
 *
 */
public class Main {

    public static void main(String[] args) {
        Application app = new Application();
        app.start();
    }
}

显示FPS

OK，现在主循环已经能够跑起来了，但是画面并没有更新，因为还没有实现 render() 方法。为了让画面能够刷新，需要给Screen类增加一些代码。

首先要改一下 Screen 类构造方法，创建一个与Canvas等大的BufferedImage，作为绘图的对象。然后还要给Canvas开启双缓冲策略，避免画面闪烁。

BufferedImage 和 BufferStrategy 都要作为私有成员添加到 Screen 类中。

// 用于显示的图像
private BufferedImage displayImage;

// Canvas的双缓冲
private BufferStrategy bufferStrategy;

public Screen(int width, int height, String title) {
    canvas = new Canvas();
    
    // 设置画布的尺寸
    Dimension size = new Dimension(width, height);
    canvas.setPreferredSize(size);
    canvas.setMaximumSize(size);
    canvas.setMinimumSize(size);
    canvas.setFocusable(true);

    // 创建主窗口
    frame = new JFrame();
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setResizable(false);
    frame.setSize(width, height);
    frame.setTitle(title);
    frame.add(canvas);// 设置画布
    frame.pack();
    frame.setVisible(true);
    centerScreen();// 窗口居中
    
    // 焦点集中到画布上，响应用户输入。
    canvas.requestFocus();
    
    // 创建缓冲图像
    displayImage = new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);
    
    // 创建双缓冲
    canvas.createBufferStrategy(2);
    bufferStrategy = canvas.getBufferStrategy();
}

然后，再给Screen类添加一个swapBuffer(int fps)方法，用来刷新画面。

/**
 * 交换缓冲区，将渲染结果刷新到画布上。
 * @param fps
 */
public void swapBuffer(int fps) {
    
    Graphics graphics = bufferStrategy.getDrawGraphics();
    
    // 将BufferedImage绘制到缓冲区
    graphics.drawImage(displayImage, 0, 0, displayImage.getWidth(), displayImage.getHeight(), null);
    
    // 显示帧率
    graphics.setColor(Color.WHITE);
    graphics.drawString("FPS:" + fps, 2, 16);
    
    graphics.dispose();
    
    // 显示图像
    bufferStrategy.show();
}

修改一下 Application 类的 render方法，调用screen.swapBuffer()。

/**
 * 绘制场景
 * 
 * @param delta
 */
protected void render(float delta) {

    // 交换画布缓冲区，显示画面
    screen.swapBuffer((int) (1 / delta));
}

好了，现在重新运行一下 main 。

固定帧率

现在画面已经可以更新了，但是FPS的数字一直在疯狂改变。一方面是因为用 1 / delta 来计算帧率太不准确，另一方面则是因为主循环几乎在空转，delta的值太小了，误差较大。

我希望控制一下画面的刷新率，比如每秒120帧左右就是个不错的选择。可以在 while 主循环中加一个时间判断，如果delta的值太小，就让主线程休眠一段时间，这样应该就能让帧率降下来。

在 Application 中添加两个私有成员。

// 固定帧率
private boolean fixedFrameRate;
private long fixedTime;

fixedFrameRate 表示是否使用固定帧率来执行主循环，fixedTime则是使用固定帧率执行时主循环应该等待的时间。fixedTime的单位是纳秒（1 / 1000,000,000秒）。

再添加一个public方法，用来设置帧率。

/**
 * 设置固定帧率
 * 
 * @param rate
 */
public void setFrameRate(int rate) {
    if (rate <= 0) {
        this.fixedFrameRate = false;
    } else {
        this.fixedFrameRate = true;
        this.fixedTime = 1000000000 / rate;
    }
}

把 start() 方法中的主循环改进一下。开启固定帧率功能时，先比较deltaTime与fixedTime的大小，然后计算线程需要休眠的时间。注意Thread.Sleep方法的单位是毫秒，1毫秒 = 1000,000 纳秒。

/**
 * 启动程序
 */
public void start() {

    // 计时器
    long startTime = System.nanoTime();
    long previousTime = System.nanoTime();
    long deltaTime;
    float delta;

    screen = new Screen(width, height, title);

    // 初始化
    initialize();

    while (isRunning) {
        // 计算间隔时间
        deltaTime = System.nanoTime() - previousTime;
        
        // 如果使用固定帧率
        if (fixedFrameRate && deltaTime < fixedTime) {
            // 线程等待时间（纳秒）
            long waitTime = fixedTime - deltaTime;

            long millis = waitTime / 1000000;
            long nanos = waitTime - millis * 1000000;
            try {
                Thread.sleep(millis, (int) nanos);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            // 重新计算间隔时间
            deltaTime = System.nanoTime() - previousTime;
        }
        
        previousTime = System.nanoTime();
        delta = deltaTime / 1000000000.0f;

        // 更新逻辑
        update(delta);

        // 更新画面
        render(delta);

    }

    // 计算总运行时间
    long totalTime = System.nanoTime() - startTime;
    System.out.printf("运行总时间：" + totalTime / 1000000000.0f);
}

修改一下构造方法，默认关闭这个固定帧率功能，把开启的决定交给客户端代码。

/**
 * 构造方法
 */
public Application() {
    width = 800;
    height = 600;
    title = "JSoftwareRenderer";
    
    // 改变运行状态
    isRunning = true;
    
    // 关闭固定帧率
    setFrameRate(0);
}

在 Main 中开启固定帧率功能。

package net.jmecn;

/**
 * 程序运行入口
 * @author yanmaoyuan
 *
 */
public class Main {

    public static void main(String[] args) {
        Application app = new Application();
        app.setFrameRate(120);
        app.start();
    }
}

可以看到FPS在120左右变化。

统计FPS

虽然已经实现了固定帧率功能，但是FPS还是跳动得太快了，主要是 1 / delta 这种计算方式的误差太大。

我想让FPS稳定下来。可以用一个队列统计最近 N 帧的FPS，然后求其平均值，这样FPS就会相对稳定一些。

在 Application 中再加入一些私有成员：

// 帧率（FPS）
private int framePerSecond;
// FPS队列
private final static int QUEUE_LENGTH = 60;
private float[] fps = new float[QUEUE_LENGTH];

然后增加一个私有方法，用来统计FPS。

/**
 * 更新FPS
 */
private void updateFramePerSecond(float delta) {
    // 队列左移
    for (int i = 0; i < QUEUE_LENGTH - 1; i++) {
        fps[i] = fps[i + 1];
    }
    // 当前帧入列
    fps[QUEUE_LENGTH - 1] = 1 / delta;

    // 统计不为0的帧数
    int count = 0;
    int sum = 0;
    for (int i = 0; i < QUEUE_LENGTH; i++) {
        if (fps[i] > 0) {
            count++;
            sum += fps[i];
        }
    }

    // 求平均值
    framePerSecond = (int) (sum / count);
}

这个方法将在 start() 方法的 while 循环中被调用。由于源代码太长，我只粘贴一部分示意代码：

/**
 * 启动程序
 */
public void start() {

    // ...

    // 初始化
    initialize();

    while (isRunning) {
        // 计算间隔时间
        deltaTime = System.nanoTime() - previousTime;
        
        // ...
                    
        previousTime = System.nanoTime();
        delta = deltaTime / 1000000000.0f;

        // 更新FPS
        updateFramePerSecond(delta); // <--------
        
        // 更新逻辑
        update(delta);

        // 更新画面
        render(delta);

    }

    // 计算总运行时间..
}

也别忘了，把render方法中的参数改一下，别再用 1/delta 了。

/**
 * 绘制场景
 * 
 * @param delta
 */
protected void render(float delta) {

    // 交换画布缓冲区，显示画面
    screen.swapBuffer(framePerSecond);
}

重新执行 main 方法，可以看到现在FPS稳定多了。

还有吗？

最后，出于习惯，我想给Application再添加两个方法。

/**
 * 设置分辨率
 * @param width
 * @param height
 */
public void setResolution(int width, int height) {
    this.width = width;
    this.height = height;
}

/**
 * 设置标题
 * @param title
 */
public void setTitle(String title) {
    this.title = title;
}

这样我就能在 Main 中控制主窗口的大小和标题了。

package net.jmecn;

/**
 * 程序运行入口
 * @author yanmaoyuan
 *
 */
public class Main {

    public static void main(String[] args) {
        Application app = new Application();
        app.setResolution(720, 405);
        app.setTitle("Java软光栅渲染器 - Main");
        app.setFrameRate(120);
        app.start();
    }
}

运行一下：

总结

目标达成。