Would this be too many images?

Java 2D
#1

Sorry to post two topics in the same day.

I have an idea for a game that I want to make. It’s a maths game. And I want it to have the appearence of chalk being on a blackboard. I thought I might buy a real small blackboard and some chalk and create the images from taking photos.

The thing I’m concerned about is, if I have some of the text done this way, then ALL of the text has to be done this way. And I wondering if this would end up making the applet take a ridiculously long time to load. Off the top of my head these are a list of images I will need to make

The blackboard background
numbers from 0 to 9
+

X
[ ]

Hi Score
Score
Time
Mins
Secs
Play
Level
New Numbers
some kind of grid for the numbers to go in.
a brush

So that’s 26 and I’ve probably forgot about a few. Would that be classed as a lot of images? Would you recommend just using white font instead? Or is there some other fancy way that I don’t know about?

#2

In Java Graphics2D you can always change the font Size, and Type, from Bold, Italic, Plain, and the color of course.
You could also first try it the way you think it will work, and if it doesn’t look for a more suitable method.
I usually call loading all my Images right as the Jframe’s being setVisible, or in the Constructor of the first class being called and I don’t receive starting lag.

#3

How many images do you tend to load? Do you think 26 or so images is classed as a lot of images? I have no real reference point. It will be my first applet.

#4

Here’s a snippet of the Graphics launch of my program (After the applets prepped) loading the Animation Frames + Transparent Images, i’ll post all the code so you can see / count O.o.

(Counted: 17) XD


	public GraphicsClass(Game game) {
		texture = new TextureLoader(this);
		tploader = new TransparentLoader();
		p = Client.p;
		GraphicsClass.gam = game;
		try {
			TransparentLoader.makeTransparents();
			loadFireImages1();
			loadFireImages2();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

Than calls to load the fireImages (1,2):


	public static void loadFireImages1() {
		tempImg = new ImageIcon("res/icons/fire1.png").getImage();
		fireFrames1[0] = tempImg;
		tempImg = new ImageIcon("res/icons/fire1.png").getImage();
		fireFrames1[1] = tempImg;
		tempImg = new ImageIcon("res/icons/fire2.png").getImage();
		fireFrames1[2] = tempImg;
		tempImg = new ImageIcon("res/icons/fire2.png").getImage();
		fireFrames1[3] = tempImg;
		tempImg = new ImageIcon("res/icons/fire3.png").getImage();
		fireFrames1[4] = tempImg;
		tempImg = new ImageIcon("res/icons/fire3.png").getImage();
		fireFrames1[5] = tempImg;
	}

	public static void loadFireImages2() {
		tempImg = TransparentLoader.fireIcon1;
		fireFrames2[0] = tempImg;
		tempImg = TransparentLoader.fireIcon1;
		fireFrames2[1] = tempImg;
		tempImg = TransparentLoader.fireIcon2;
		fireFrames2[2] = tempImg;
		tempImg = TransparentLoader.fireIcon2;
		fireFrames2[3] = tempImg;
		tempImg = TransparentLoader.fireIcon3;
		fireFrames2[4] = tempImg;
		tempImg = TransparentLoader.fireIcon3;
		fireFrames2[5] = tempImg;
	}

And finally loading the Transparent Images:


	public static void makeTransparents() throws Exception {
		try {
			BufferedImage tmp0 = ImageIO.read(new File( "res/sprites/southwall.png"));
			BufferedImage tmp1 = ImageIO.read(new File( "res/sprites/eastwall.png"));
			BufferedImage tmp2 = ImageIO.read(new File("res/icons/fire1.png"));
			BufferedImage tmp3 = ImageIO.read(new File("res/icons/fire2.png"));
			BufferedImage tmp4 = ImageIO.read(new File("res/icons/fire3.png"));
			southWall = makeTransparent(tmp0);
			eastWall = makeTransparent(tmp1);
			fireIcon1 = makeTransparent(tmp2);
			fireIcon2 = makeTransparent(tmp3);
			fireIcon3 = makeTransparent(tmp4);
		} catch (FileNotFoundException e3) {
			System.out.println("File not found.");
			e3.printStackTrace();
		}
	}

My game’s completely loaded, start screen, input handlers active etc in under 3 seconds.
(Honestly if I dugg around in my Game Classes i’d probably find a good 7+ more images)

#5

How big is each image?

IMO a better way to do this would be to render a bitmap font (see TWL’s theme editor or Slick’s Hiero) from a “chalkboard” font you find online. You can further refine the font in Photoshop (i.e. using a grunge brush to adjust its alpha). Then you would render a background chalkboard, and the font over top with whatever you’d like it to say.

Downsides:

  • You would have to load the Bitmap Font and its glyph/kerning info then draw them manually
  • You couldn’t use dynamic font sizes without noticeable scaling artifacts
  • Your text will look more “computer generated” (or cartoonish) – if you are aiming for photo-realism, the effect will be lost

Upsides:

  • You have full control over the digital aesthetic of the font; i.e. using Photoshop
  • You also have more control over the aesthetic of the blackboard background, as it’s now a separate element
  • You can have the text say anything (i.e. for multiple languages)
  • You can easily layer the numbers, text, grid, etc. on top of the blackboard (this would be tough if you’re taking photos)
  • Way faster loading time
  • Smaller distribution size
  • Most likely faster rendering performance

Also, regarding the photo idea, think about how much time you’ll have to spend lining up your camera, setting up lights (to ensure consistency), etc. That’s a lot of work, and it will probably turn out pretty cheesy.

#6

I haven’t made them yet.

Thanks for all that great information. I hadn’t even heard of bitmap font so it seems like I have a lot of learning to do.

#7

Ah, if you scroll through this post you’ll see what you’d sort of have to do, he tried rendering custom fonts:
(Towards the bottom)

#8

Thanks I’ll check it out.

#9

I’ve checked out a bitmap font tutorial, and although it is undoubtedly the best option, it looks so complicated to do. And as this is supposed to be my first applet, my first game that I designed myself. The bit map font thing makes it all just a bit too overwhelming. So I might do it with images. I won’t bother with the photos, but I’ll just make simply drawings of letters in gimp. When I’ve finished the game I’ll revisit looking at bitmap fonts.

I’m trying to think of cunning ways I can cut down on the amount of images I use like I might add some of the text, like high score, to the background image it’s self to make it have less images. If there was some elegant way I could just have the blackboard for the main numbers and sums, and have the play again buttons and level menus not on the board, then I could use normal font for them. But then that would mean loading another big background image, because it might look weird having normal font on the blackboard. I think I need to cut myself some slack, it’s my first real game, it’s allowed to look a bit crap. lol

#10

hmmm 26 images still is not that much from what I understand. I load many it the only slow down is the getsubimage method

#11

I’m making a game and tested out how many images I can render onto the screen without too much lag. The lag started at around 100-150 images (all 8x8 pixels in size; scaled up to 24x24 when rendered) so 26 images shouldn’t be so much of a problem. All the images were saved into a HashMap when loaded, so the only call when rendering the images onto the screen is graphics.drawImage().

#12

My main concern was how long it took to load the images in an applet. I never really gave much thought about the all images I will be rendering. The numbers will be a 6 by 6 grid, so that’s 36 before I even start counting all the others!

I have read that scaling the image slows drawing down, so maybe that slowed down your program. Out of curiosity, why did you scale up to 24x24 rather than just make 24x24 images?

I’ve made tetris games where the pieces were made up of individual blocks, so there were loads on screen. I didn’t test the frame rate though, and it wasn’t an applet.

#13

In my particle system stress testing I see drops in performance at over 1-2k images with alpha blending. So…you should be fine. As far as loading time goes, my games/tests load almost instantly as long as getsubimage is never called.

I call it to load srpite strips into a bufferedimage array so I don’t have to draw with getsubimage because its so slow.

#14

I’m not quite sure how fast it would be on an applet, as I’ve never really experimented with them. :-\

I used 8x8 images since I want the game to have a pixelated effect, and the size of the images stored in the HashMap would be smaller and (I think) less memory. In total I have 1024 images stored in a HashMap at runtime by calling getSubImage() for each tile in the sprite sheet, and the game loads in < 2-3 seconds. The sprite sheet has a grid of 32x32 tiles; all of which are 8x8 pixels in length and height.

#15

Should be ok. I would not worry until you start to see fps drop. Also, from my experiences .getsubimage is unholyly slow.

#16

I don’t know what you’re talking about but getSubimage is blazingly fast.

#17

In my experience I could render about 1500 small images at 20 fps or greater using Java 2D.

Switching to OpenGL allowed me to render about 15k at the same frame-rate.

If you are experience lag with < 100 images then I would really look to ensure that they’re all managed. Scaling an image would automatically cause it to be unmanaged.

#18

Hmm…I only use it at start up to load images from a sheet into an array so I can animate or randomly pick a images for particle FX. And when I just load it with out using getsubimage it loads instantly. Maybe I am doing something wrong. Idk. I have just had bad experiences using it.

I am using I think java 1.6 or 1.5 not 1.7 though.