运动时闪烁（不使用JPanel或Swing）

Question

first post here so forgive me if this is the absolute wrong thing but I'm in a tiny bit of a pickle. - My computer science class has us making our own game/program from scratch, but our teacher specifically ignored the existence of swing and said that it was out of his realm to teach it so from my readings it seems as if a game is almost out of the question, with what I've written so far my main sprite and debugging information flickers violently on key input. Is there a way around this?

I know JPanel/JFrame/Swing would fix this, but we weren't taught it and all I've read so far is confusing me to no end, if someone would be able to help me convert my code to use it that would be amazing as I learn easier from dissecting it.. Which may seem a bit dodgy but it really is the easiest way to learn from. My code so far is;

public class GameThing extends Applet implements KeyListener {

    Image rightsprite, picture;
    Image leftsprite, picture2;
    Image spritedead, picture3;
    Image background, picture4;

    boolean left;
    boolean dead;
    boolean wall;
    boolean menu;

    int widthX, heightY;
    int bgx, bgy;
    String sr = " ";
    char ch = '*';
    Graphics bufferGraphics;
    Image offscreen;
    Dimension dim;

    @Override
    public void init() {
        rightsprite = getImage(getDocumentBase(), "SpriteRight.png");
        leftsprite = getImage(getDocumentBase(), "SpriteLeft.png");
        spritedead = getImage(getDocumentBase(), "Sprite.png");
        background = getImage(getDocumentBase(), "Background.png");
        requestFocus();
        addKeyListener(this);
        left = false;
        menu = true;
        setSize(600, 380);
        dim = getSize();
        offscreen = createImage(dim.width, dim.height);
        bufferGraphics = offscreen.getGraphics();
        bgx = 0;
        bgy = 0;
    }

    public void pause(final int delay) { // PAUSE COMMAND LIFTED FROM RAY
        // waits a while
        try {
            Thread.sleep(delay);
        } catch (InterruptedException e) {
            return;
        }
    }

    public GameThing() { // SPRITE INITIAL SPAWN LOCATION
        widthX = 100;
        heightY = 300;
    }

    @Override
    public void paint(final Graphics g) { // DRAW MAIN CHARACTER SPRITE AND BACKGROUND
        bufferGraphics.setColor(Color.black); // DRAW GROUND (REPLACE WITH BLOCKS SOON)
        bufferGraphics.drawRect(0, 334, 500, 50);
        bufferGraphics.setColor(Color.green);
        bufferGraphics.fillRect(0, 335, 500, 50);
        g.drawImage(offscreen, 0, 0, this);
        if (menu == true) {
            pause(500);
            g.drawString("Side Scroller Test.", 180, 250);
            pause(1500);
            menu = false;
        }

        if (left == false) { // LEFT KEY MOVEMENT COMMANDS
            g.drawImage(rightsprite, widthX, heightY, this);
            g.drawString("Sprites Current X Location is: " + widthX, 20, 30);
            g.drawString("Sprites Current Y Location is: " + heightY, 20, 50);
            g.drawString("Background X location is: " + bgx, 20, 90);
            g.drawString("Currently: " + sr, 20, 70);

        }

        if (left == true) { // RIGHT KEY MOVEMENT COMMANDS
            g.drawImage(leftsprite, widthX, heightY, this);
            g.drawString("Sprites Current X Location is: " + widthX, 20, 30);
            g.drawString("Sprites Current Y Location is: " + heightY, 20, 50);
            g.drawString("Background X location is: " + bgx, 20, 90);
            g.drawString("Currently: " + sr, 20, 70);
        }

        if (dead == true) { // COMMANDS TO EXECUTE WHEN MAIN CHARACTER DIES
            widthX = 506;
            heightY = 314;
            g.drawImage(spritedead, widthX, heightY, this);
            pause(500);
            g.setColor(Color.white);
            g.drawRect(widthX, heightY, widthX, heightY);
            g.fillRect(widthX, heightY, widthX, heightY);
            pause(500);
            widthX = 100;
            heightY = 300;
            bgx = 0;
            left = true;
            dead = false;
        }

    }

    @Override
    public void update(final Graphics g) { // KEEPS BACKGROUND STATIC
        paint(g);
    }

    public void keyPressed(final KeyEvent e) {
        sr = "blank!";
        ch = '1';
        if (e.getKeyCode() == 39) {
            sr = "Moving Right!";
            widthX = widthX + 7;

            if (widthX <= 121) {
                bgx = bgx;
            } else {
                bgx = bgx - 7;
            }

            left = false;

            if ((widthX > 490) && (heightY > 300)) { // FALL DEATH

                sr = "You Died!";
                widthX = 900;
                heightY = 900;
                dead = true;
            }

            if (widthX == 499) {
                heightY = heightY + 7;
            }
        }

        if (widthX == 2) {
            wall = true;
        }

        if (e.getKeyCode() == 37) {

            if (wall == true) {
                sr = "Wall!";
                if (widthX > 2) {
                    wall = false;
                }
            }
            if (wall == false) {
                sr = "Moving Left!";
                widthX = widthX - 7;
                if (bgx >= 0) {
                    bgx = bgx;
                } else {
                    bgx = bgx + 7;
                }
                left = true;
            }
        }

        if (e.getKeyCode() == 38) {
            sr = "Jumping!";
        }
        repaint();
    }

    public void keyTyped(final KeyEvent e) {
        ch = e.getKeyChar();
        repaint();
    }

    public void keyReleased(final KeyEvent e) {
    } // key released
}

ps: Jumping with the up key has been a problem too, I can't simply add to the Y variable and then subtract as it just goes so fast it's as if it never moved.. The basics of a sidescroller are a lot more than I ever expected..

Answer 1

I edited your code:

public class GameThing extends Applet {

    // External resources
    BufferedImage rightSprite, leftSprite, spriteDead, backgroundImg;

    // Game data
    int state = 1; //0 = left, 1 = right, 2 = dead

    // Geometry
    int locX = 100, locY = 300;
    int bgX = 0, bgY = 0;
    int groundX = 0, groundY = 334, groundW = 500, groundH = 50;
    int appletW = 600, appletH = 480;
    int wallW = 20, wallH = 40, wallX = 20, wallY = groundY - wallH;
    final int STEP_SIZE = 7;

    // Information
    final String X_LOC_STR = "Sprites Current X Location is: ";
    final String Y_LOC_STR = "Sprites Current Y Location is: ";
    final String STATE_STR = "Currently: ";
    final String X_BG_STR = "Background X location is: ";
    String stateString = "";

    // Double buffering
    Image offscreen;
    Graphics bufferGraphics;
    Dimension dim;

    // GUI components
    Panel gamePanel;
    Panel statusPanel = new Panel();
    Label xLocLabel = new Label();
    Label yLocLabel = new Label();
    Label stateLabel = new Label();
    Label xBGLocLabel = new Label();

    @Override
    public void init() {

        // Load images
        try {
            rightSprite = ImageIO.read(new File(getClass().getResource("SpriteRIght.png").getPath()));
            leftSprite = ImageIO.read(new File(getClass().getResource("SpriteLeft.png").getPath()));
            spriteDead = ImageIO.read(new File(getClass().getResource("SpriteDead.png").getPath()));
            backgroundImg = ImageIO.read(new File(getClass().getResource("Background.png").getPath()));
        } catch (IOException e) {
            e.printStackTrace();
        }

        // Set the panel that displays data
        statusPanel.setLayout(new BoxLayout(statusPanel, BoxLayout.Y_AXIS));
        statusPanel.add(xLocLabel);
        statusPanel.add(yLocLabel);
        statusPanel.add(stateLabel);
        statusPanel.add(xBGLocLabel);

        // Create the panel that draws the game and specify its behavior
        gamePanel = new Panel() {

            // Reduces flickering
            @Override
            public void update(Graphics g) {

                paint(g);
            }

            // DRAW MAIN CHARACTER SPRITE AND BACKGROUND
            @Override
            public void paint(Graphics g) {

                bufferGraphics.clearRect(0, 0, dim.width, dim.width);
                bufferGraphics.drawImage(backgroundImg, bgX, bgY, this);
                bufferGraphics.setColor(Color.BLACK); // DRAW GROUND (REPLACE WITH BLOCKS SOON)
                bufferGraphics.drawRect(groundX, groundY, groundW, groundH);
                bufferGraphics.setColor(Color.GREEN);
                bufferGraphics.fillRect(groundX, groundY + 1, groundW, groundH);
                bufferGraphics.setColor(Color.RED);
                bufferGraphics.fillRect(wallX, wallY, wallW, wallH);

                switch (state) {
                    case 0: bufferGraphics.drawImage(leftSprite, locX, locY, this);
                            break;
                    case 1: bufferGraphics.drawImage(rightSprite, locX, locY, this);
                            break;
                    case 2: bufferGraphics.drawImage(spriteDead, locX, locY, this);
                            // After death wait a bit and reset the game
                            EventQueue.invokeLater(new Runnable() {

                                @Override
                                public void run() {

                                    pause(2000);
                                    reset();
                                }
                            });
                            break;
                }
                g.drawImage(offscreen, 0, 0, this);
            }
        };

        // Set the applet window
        setLayout(new BorderLayout());
        add(statusPanel, BorderLayout.PAGE_START);
        add(gamePanel);

        // Set double buffering
        setSize(appletW, appletH);
        dim = getSize();
        offscreen = createImage(dim.width, dim.height);
        bufferGraphics = offscreen.getGraphics();

        // Set the panel that draws the game
        gamePanel.addKeyListener(new Controls());
        gamePanel.requestFocusInWindow();

        updateLabels();
    }   

    // PAUSE COMMAND LIFTED FROM RAY (who is Ray?)
    // waits a while
    public void pause(int delay) {

        try {
            Thread.sleep(delay);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

    // Set to start parameters
    public void reset() {

        locX = 100; locY = 300;
        bgX = 0;
        state = 1;
        gamePanel.repaint(); // These 2 lines automatically restart the game
        updateLabels();      // Remove if you want to stay on the death screen until next press
    }

    public void updateLabels() {

        xLocLabel.setText(X_LOC_STR + locX);
        yLocLabel.setText(Y_LOC_STR + locY);
        stateLabel.setText(STATE_STR + stateString);
        xBGLocLabel.setText(X_BG_STR + bgX);
    }

    private class Controls extends KeyAdapter {

        public void keyPressed(KeyEvent e) {

            switch (e.getKeyCode()) {

                case KeyEvent.VK_RIGHT:
                    stateString = "Moving Right!";
                    locX += STEP_SIZE;
                    state = 1;
                    if (locX > 121)
                        bgX -= STEP_SIZE;
                    // FALL DEATH
                    if ((locX > 490) && (locY > 300)) {
                        stateString = "You Died!";
                        state = 2;
                    }
                    // Start fall
                    if (locX == 499)
                        locY += STEP_SIZE;
                    // Check wall collision
                    if (locX >= wallX && locX <= wallX + wallW) {
                        locX -= STEP_SIZE;
                        stateString = "Wall!";
                    }
                    break;

                case KeyEvent.VK_LEFT:
                    stateString = "Moving Left!";
                    locX -= STEP_SIZE;
                    state = 0;

                    if (bgX < 0) 
                        bgX += STEP_SIZE;
                    // Check wall collision
                    if (locX >= wallX && locX <= wallX + wallW) {
                        locX += STEP_SIZE;
                        stateString = "Wall!";
                    }
                    break;

                case KeyEvent.VK_UP:
                    // Implement jumping
                    stateString = "Jumping!";
                    break;
            }

            // Repaint the game panel and update the data panel
            gamePanel.repaint();
            updateLabels();
        }
    }
}

Start by testing and understanding the changes :

• I created a separate panel for the current data display and one for the game (which gets repainted).
• I added a few help functions.
• I made a lot of syntax changes (eg multiple if else replaced by switch , VK_UP instead of 37 and such).
• Better to have all values in one place and read them from there instead of spreading them in various places (still needs a bit of work but it will change when advancing with the code).
• Make constant values (values that don't change) final .
• In Java conventions, constants are named with uppercase and underscore (_) (so Color.RED , not Color.red ).
• Better to use @Override when overriding methods even when the compiler understands it.
• Do not block the event dispatch thread (EDT) with sleep or expensive computations. Methods like paint key events are meant to execute quickly. I used invokeLater to pause only after the EDT finished processing all queued events. (I understand that this threading subject comes as a bomb from nowhere, just bear with me).

Looking forward for the current state of the code (no new features):

• state should probably be an enum or something close to it instead of random numbers.
• Using Shape for drawn objects instead of specifying their parameters during painting.

Double buffering implementation notes:

You create an off-screen Image object offscreen and a Graphics object to draw on it - bufferGraphics . Inside paint , you use only bufferGraphics for the drawings. You in fact draw on offscreen even though the paint belongs to gamePanel (or any other object and its paint ), slightly confusing. When you finish drawing everything off-screen, you throw it all in one go onto the screen with g.drawImage(offscreen...) which uses gamePanel 's Graphics object g .

The idea is like drawing everything on a paper and then putting it in front of the camera instead of drawing bit by bit on the camera, or something like that...

Currently, the off-screen image is the size of the whole applet and not just the game panel, but it makes little difference.

Relevant differences from a Swing approach:

• Replace Label with JLabel , Panel with JPanel etc.
• Swing components automatically implement double buffering (see JComponent 's setDoubleBuffered and isDoubleBuffered ). Remove all of those off-screen shenanigans and draw directly with Graphics g . No need to override update also.
• Painting in Swing is done in paintComponent and not in paint .
• Swing runs from its own thread and not from the EDT (not automatically, but easily done). There are some benefits to this I won't get into right now.
• Key events are better handled by key bindings (Swing only) rather than the key listener. This manifests in responsiveness, native environment independence and more (eg concurrent key events).

Answer 2

@user1803551 Okay, so it's all sorted back to how it was again. - The scrolling background is in (Just a couple things around the place needed some tweaking from your post), and I understand that the final line "gamePanel.repaint(); is what's refreshing everything on the screen, since the background needs to be updated with every key input, it shouldn't be limited to the tiny square from your code, right? This now refreshes the whole screen, but I assume this isn't what is wanted because it just results in the flickering, the buffergraphics of the green rectangle at the bottom however don't flicker. So my assumption is to convert

g.drawImage(backgroundImg, bgx, bgy,this); 

into buffergraphics?

-EDIT- Moved the main Sprite into bufferGraphics aswell as the background image. Flickering is now almost gone, but after holding down an arrow key for a little bit the screen will flicker just for a moment and then return to normal.

public class GameTest extends Applet {
/**
 * 
 */
private static final long serialVersionUID = -1533028791433336859L;
Image rightsprite, leftsprite, spritedead, backgroundImg, offscreen;
boolean left = false, dead = false, wall = false, menu = true;
int locX = 100, locY = 300, width, height, bgx = 0, bgy = 0;
final int STEP_SIZE = 7;
final String X_LOC_STR= "Sprites Current X Location is: ";
final String Y_LOC_STR= "Sprites Current Y Location is: ";
final String STATE_STR= "Currently: ";
final String X_BG_STR= "Background X location is: ";
String sr = " ";
Graphics bufferGraphics;
Dimension dim;
Panel gamePanel;
Panel statusPanel = new Panel();
Label xLoc = new Label(X_LOC_STR);
Label yLoc = new Label(Y_LOC_STR);
Label state = new Label(STATE_STR);
Label xBGLoc = new Label(X_BG_STR);
public void init() {
    try {
        rightsprite = ImageIO.read(new File(getClass().getResource("SpriteRight.png").getPath()));
        leftsprite = ImageIO.read(new File(getClass().getResource("SpriteLeft.png").getPath()));
        spritedead = ImageIO.read(new File(getClass().getResource("SpriteDead.png").getPath()));
        backgroundImg = ImageIO.read(new File(getClass().getResource("Background.png").getPath()));
    } catch (IOException e) {
        e.printStackTrace();
    }
    height = rightsprite.getHeight(this);
    width = rightsprite.getWidth(this);
    statusPanel.setLayout(new BoxLayout(statusPanel, BoxLayout.Y_AXIS));
    statusPanel.add(xLoc);
    statusPanel.add(yLoc);
    statusPanel.add(state);
    statusPanel.add(xBGLoc);
    gamePanel = new Panel() {
        /**
         * 
         */
        private static final long serialVersionUID = 1L;

        // DRAW MAIN CHARACTER SPRITE AND BACKGROUND
        @Override
        public void paint(Graphics g) {
            bufferGraphics.drawImage(backgroundImg,bgx, bgy, this);
            bufferGraphics.setColor(Color.black); // DRAW GROUND (REPLACE WITH BLOCKS SOON)
            bufferGraphics.drawRect(0, 334, 500, 50);
            bufferGraphics.setColor(Color.green);
            bufferGraphics.fillRect(0, 335, 500, 50);




            if (menu == true) {
                pause(500);
                g.drawString("Side Scroller Test.", 180, 250);
                pause(1500);
                menu = false;
            }
            // LEFT KEY MOVEMENT COMMANDS
            if (left == false)
                bufferGraphics.drawImage(rightsprite, locX, locY, this);
            // RIGHT KEY MOVEMENT COMMANDS
            else
                bufferGraphics.drawImage(leftsprite, locX, locY, this);
            // COMMANDS TO EXECUTE WHEN MAIN CHARACTER DIES
            if (dead == true) {
                locX = 506;
                locY = 314;
                bufferGraphics.drawImage(spritedead, locX, locY, this);
                pause(500);
                bufferGraphics.setColor(Color.white);
                bufferGraphics.drawRect(locX, locY, width, height);
                bufferGraphics.fillRect(locX, locY, width, height);
                pause(500);
                locX = 100;
                locY = 300;
                bgx = 0;
                bgy = 0;
                bufferGraphics.clearRect(locX, locY, width, height);
                left = true;
                dead = false;
            }
            g.drawImage(offscreen, 0, 0, this);
            super.paint(g);

        }
    };
    setLayout(new BorderLayout());
    add(statusPanel, BorderLayout.PAGE_START);
    add(gamePanel);
    setSize(600, 480);
    dim = getSize();
    offscreen = createImage(dim.width, dim.height);
    bufferGraphics = offscreen.getGraphics();
    gamePanel.addKeyListener(new Controls());
    gamePanel.requestFocusInWindow();
}
// waits a while
public void pause(int delay) {
    try {
        Thread.sleep(delay);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
}
private class Controls extends KeyAdapter {
    public void keyPressed(KeyEvent e) {
        sr = "blank!";
        if (e.getKeyCode() == KeyEvent.VK_RIGHT) {
            sr = "Moving Right!";
            locX += STEP_SIZE;
            if (locX > 121)
                bgx = bgx - STEP_SIZE;

                left = false;
            // FALL DEATH
            if ((locX > 490) && (locY > 300)) {
                sr = "You Died!";
                locX = 900;
                locY = 900;
                dead = true;
                gamePanel.repaint();
            }
            if (locX == 499) {
                locY += STEP_SIZE;
            }
        }
        if (locX == 2) {
            wall = true;
        }
        else if (e.getKeyCode() == KeyEvent.VK_LEFT) {
            if (wall == true) {
                sr = "Wall!";
                if (locX > 2) {
                    wall = false;
                }
            }
            else {
                sr = "Moving Left!";
                locX -= STEP_SIZE;
                if (bgx < 0) 
                    bgx += STEP_SIZE;
                left = true;
            }
        }
        if (e.getKeyCode() == KeyEvent.VK_UP) {
            sr = "Jumping!";
        }
        xLoc.setText(X_LOC_STR + locX);
        yLoc.setText(Y_LOC_STR + locY);
        state.setText(STATE_STR + sr);
        xBGLoc.setText(X_BG_STR + bgx);
        gamePanel.repaint();
    }
}

}