Java 2D Game Development Guide!

WHAT THE HELL NO JAVA MESSAGE ICON Mock Anger

!!?!?!?

First of all, the reason I'm writing is that I'm extremely bored and the artist I'm working is still working on some crucial assets...

Aaanyways, what I'm going to be explaining here is exactly what I used with Bytesoup and other Java 2D games which will require you to have NO ADDITIONAL LIBRARIES!!!, except for JDK obviously

So, let's get started shall we?

PART 1: Frames and Canvasses - or Canvases, asses fits better there

In the beginning I assume that you have some base like this;

Code:

public class Main {
    public static void main(String[] args) {
    }
}

Be sure to name the class as Main or you'll have to replace some text

What we do from there is, we add 2 objects (I assume that you know some Java, if you don't - I won't be teaching you, learn some and come back)

JFrame and Canvas!

Code:

public class Main {
    static JFrame frame = new JFrame();
    static Canvas canvas = new Canvas();

    public static void main(String[] args) {
    }
}

The reason they are static is that... I don't know, I don't want to create a Main object inside main(), this might be bad Java practice btw, I'm not really sure...

From here, we have to initialize those two objects as we please Evil

Code:

public class Main {
    public static final int IMG_WIDTH = 240, IMG_HEIGHT = 160, IMG_SCALE = 2;
    public static final int CANVAS_WIDTH = IMG_WIDTH * IMG_SCALE, CANVAS_HEIGHT = IMG_HEIGHT * IMG_SCALE;
    static JFrame frame = new JFrame();
    static Canvas canvas = new Canvas();

    public static void main(String[] args) {
        canvas.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
        canvas.setBackground(Color.decode("#262626"));

        frame.add(canvas);
        frame.setResizable(false);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setTitle("MAH JAVA GAEM!");
        frame.pack();
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}

BAM! In your face!

Did you feel that shock when you saw all that code outta nowhere? I betcha' did

Code:

public static final int IMG_WIDTH = 240, IMG_HEIGHT = 160, IMG_SCALE = 2;
public static final int CANVAS_WIDTH = IMG_WIDTH * IMG_SCALE, CANVAS_HEIGHT = IMG_HEIGHT * IMG_SCALE;

These 2 fellow lines are constant values, the reason they are constant is that you might want to change the window width and height or stuff like that without trying to replace every 480 (240 * 2) or 320 (160 * 2) with the desired values

Code:

canvas.setSize(width, height);

This function sets the canvas size to width and height, pretty obvious

Code:

canvas.setBackground(color);

This function sets the canvas background to the color specified, the Color.decode(hexString) function returns a Color object that represents the hexString we have, you can also do a new Color(red, green, bloo);

Code:

frame.add(component);

This function adds our frame object inside the canvas, why am I not just using the frame to draw stuff on? Because setting frame size sets the size of the frame with the outside border, which tends to be platform dependent

Code:

frame.setResizable(false);

This function sets out window to be not-resizable, obvious

Code:

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

This guy here is really, really, really important, it makes your window close when you click on that X at the top right (or top left, if you like your FREEDOM and didn't change the button formatting to be like Windows or Mac)

Code:

frame.setResizable(false);

This function sets our window to be not-resizable, obvious

Code:

frame.setTitle("MAH JAVA GAEM!");

This function sets the window title, again, really obvious

Code:

frame.pack();

This packs up what we put in the frame, I don't know why you have to use it or even if you really have to use it... Just use it

Code:

frame.setLocationRelativeTo(component);

This sets out frame position, the reason I use null is because it sets the window in the center off the screen, dunno' why it does that

Code:

frame.setVisible(true);

This shows our frame and ALL of it's CONTENTS, which includes our CANVAS... YAY!

WARNING: This is not actually a warning, just to get attention, if you want to have a custom icon, use this snippet and add it before your frame.pack() call

Code:

try {
    BufferedImage icon = ImageIO.read(Main.class.getResourceAsStream("/res/icon.png"));
    frame.setIconImage(icon);
} catch (IOException ex) {
    ex.printStackTrace();
}

You have to create a package called res and put the icon.png in it, or just use another path, idk, it has to be a package and not a folder though

PART 2: java.awt.GraficsCat - We graphics now!

I'm joking, there's no awt GraficsCat, instead we have awt GRAPHICS!!!!!!1!11!1!!!1!

Anyways, what we have to do now is important, just after your Canvas and JFrame declarations you add;

Code:

public static BufferedImage scrimg;
public static Graphics g;

The BufferedImage is our pixel buffer for the screen, scrimg stands for screen image, again - replacable

The Graphics is our graphics manager thingy that lets us draw on our canvas (or frame, depends on whose graphics reference you use)

Now, we should put somethings in those objects!

In our main(), just after frame.setVisible(true);

Code:

scrimg = new BufferedImage(IMG_WIDTH, IMG_HEIGHT, BufferedImage.TYPE_INT_RGB);
g = canvas.getGraphics();

Code:

scrimg = new BufferedImage(IMG_WIDTH, IMG_HEIGHT, BufferedImage.TYPE_INT_RGB);

This makes scrimg to be a BufferedImage with the size of IMG_WIDTH and IMG_HEIGHT, BufferedImage.TYPE_INT_RGB makes it an RGB type image

Code:

g = canvas.getGraphics();

This thingy here gets the graphics reference of our canvas, because we are going to draw our image on that! Right!?

WARNING: Before we move on with the graphics, we need to create a Bitmap class that will store bitmap data for us and have functions for other utilities

PART 3: Bitmap, bitmap, bitmap - Retro wizardry and buffer arithmetics

Sorry guys but I won't be going through this code line by line, but I'll explain how to use the functions and what can they do

Grab this and create a new class called Bitmap in the same package as Main
http://pastebin.com/BivJSUv8

You'll also need 2 more images, font.png and sprites.png which are below in the same order and should be saved in a package called res

font.png; (may not be really visible, it's white)

sprites.png;

So, let's go through some variables and most of the functions!

Code:

public static Bitmap sprites, font;

These are references for bitmaps that we'll use, static because we might use them from other classes

Code:

public static String characters = " !\"#$%&'()*+,-./0123456789:;<=>?"
            + "@ABCDEFGHIJKLMNOPQRSTUVWXYZ(\\)^_";

This is font related, if you check out the font file, you'll see that the letters and the punctuation and the numbers are in the same order - not extended ASCII but will do the work!

Code:

public int pixels[], width, height;

This is the actual bitmap object variables, one this that might not be really obvious is pixels[] - it's a one-dimension pixel buffer integer array that stores color data gathered from the image (whew!)

I'll do a more detailed explanation on it soon

Code:

public Bitmap(String name) {
BufferedImage img = null;

try {
    img = ImageIO.read(Bitmap.class.getResourceAsStream("/res/" + name));
} catch (IOException ex) {
    ex.printStackTrace();
    return;
}

width = img.getWidth();
height = img.getHeight();
pixels = img.getRGB(0, 0, width, height, pixels, 0, width);
}

I said I won't do a line by line explanation but I guess I accidentally will

So, I get a temporary BufferedImage, load image in it, if I fail - RETURN

If I don't fail I set the width to image width, height to image height and pixels to the image color array, something new there is;

Code:

img.getRGB(0, 0, width, height, pixels, 0, width);

This neat function gets every pixel from 0, 0 to width, height and store it in pixels (the reason I put a reference of pixels there is that the code takes it's length and stuff or some magic I don't know)

0, width part is not really important, 0 is the offset and width is the scan size (it's always the horizontal size of the image)

Code:

public Bitmap(int width, int height)...

This is the second overload for Bitmap constructor, in case I need a bitmap that contains no data and is at a specific size

Code:

public static void init()...

This is a function that must be called in the main() of our Main class!!! You can put it anywhere but be sure to execute it before drawing anything

Code:

public void clear()...

This function clears the image, the 0x262626 is the background color of the canvas, be sure to set it to something else if you will change the back color!

Code:

public void random()...

This function is like clear, but sets pixels to random grayscale, neat! You can use pixels = new Random().nextInt(0xFFFFFF); which will give you random colored pixels

Code:

public Bitmap getSubImage(int x, int y, int width, int height)...

This functions returns the bitmap at the specific x, y offset with the size of width, height

The second overload for this accepts a color parameter which is bitwise &'ed with every pixel

Code:

public void setSubImage(Bitmap bitmap, int x, int y)...

This here starts from x, y and sets pixels to the pixels of bitmap, again, the overload takes a color parameter (I don't know why I did that, totally unnecessary...)

Code:

public Bitmap getFlippedCopy(boolean horizontal)...

This returns a horizontally flipped or not copy of the bitmap, handy! You can tweak it to do vertical too but I didn't need it

Rest of the functions are string drawing stuff, which are pretty self explanatory - what might be a problem there is the bitmap font size, if you want to use another font with different size, change 4 to width, 6 to height and 32 to characters per line!

PART 2.5: java.awt.GraficsCat - We graphics now! After time-travelling to the past!!!

I'm really tired guys, I'll continue this after I get my breakfast intake, thanks for checking this out!