Not able to render my font :(

[Delta517]

Hi again

So, currently I’m making the font system and trying to render some text on the screen and I’m almost done, except that I can’t get the right character to render I tried Googling and even found some videos, but nothing works The problem is that I can’t find the right math formula to use, to get the letter I want Here’s my code:

Font class:

package com.mayogames.zombiecubes.gfx;

import java.awt.Graphics;
import java.awt.image.BufferedImage;

import com.mayogames.zombiecubes.Game;

public class Font {
	
	private SpriteSheet spriteSheet;
	
	public Font(SpriteSheet spriteSheet){
		this.spriteSheet = spriteSheet;
	}
	
	public static final int SIZE = 8 * Game.SCALE;
	
	private static String chars =""+
	"ABCDEFGHIJKLMNOPQRSTUVWXYZ      "+
	"QRSTUVWXYZ      "+
	"0123456789.,:;'\"!?$%()-=+/"+
	"?$%()-=+/       ";
	
	public void render(Graphics g, String message, int x, int y){
		message = message.toUpperCase();
		
		for(int i = 0; i < message.length(); i++){
			int charIndex = chars.indexOf(message.charAt(i));
			
			if (charIndex < 0) continue;
			
			g.drawImage(spriteSheet.grabLetterImage(1, (charIndex / 1), 16, 16), x += 16, y, null);
		}
	}
	
	public static int getStringWidth(String message){
		return message.length() * SIZE;
	}
}

And here’s my SpriteSheet class (to load parts of the spritesheet):

package com.mayogames.zombiecubes.gfx;

import java.awt.image.BufferedImage;

public class SpriteSheet {
	
	private BufferedImage image;
	
	public SpriteSheet(BufferedImage image){
		this.image = image;
	}
	
	public BufferedImage grabImage(int col, int row, int width, int height){
		
		BufferedImage img = image.getSubimage((col * 32) - 32, (row * 32) - 32, width, height);
		return img;
		
	}
	
	public BufferedImage grabLetterImage(int col, int row, int width, int height){
		BufferedImage img = image.getSubimage((col * 16) - 16, + (row * 16) - 16, width, height);
		return img;
	}
}

Here’s the spritesheet itself:

I’m sorry if it feels like I’m asking you guys to do it, but I just can’t figure it out

[DazKins]

Well for starters, you have different letters placed on different rows and columns so setting the column to always be one seems a bit dodgy to me.

The way i would approach this is something like this: (this is from my entry to last Decembers Ludum Dare so it is not all exactly the same as yours)

public class Font {
	private static String alph0 = "abcdefghijklmnopqrstuvwxyz0123456789.,:;'\"!?$%()-=+/ ";
	
	public static void renderText(String t, Bitmap b, int xp, int yp) {
		t = t.toLowerCase();
		for(int x = 0; x < t.length(); x++) {
			int drawIndex = alph0.indexOf(t.charAt(x));
			if (drawIndex != 52) {
				b.blit(Image.font[drawIndex % 26][drawIndex / 26], x * 16 + xp, yp, 1.0f, false, false);				
			}
		}
	}
}

The first deimension of the Image.font array represents the column while the second dimension represents the row.

I hope this helps

[Delta517]

I tried like this:

package com.mayogames.zombiecubes.gfx;

import java.awt.Graphics;
import java.awt.image.BufferedImage;

import com.mayogames.zombiecubes.Game;

public class Font {
	
	private SpriteSheet spriteSheet;
	
	public Font(SpriteSheet spriteSheet){
		this.spriteSheet = spriteSheet;
	}
	
	public static final int SIZE = 8 * Game.SCALE;
	
	private static String chars ="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,:;'\"!?$%()-=/?$%()-=+/";
	
	public void render(Graphics g, String message, int x, int y){
		message = message.toUpperCase();
		
		for(int i = 0; i < message.length(); i++){
			int charIndex = chars.indexOf(message.charAt(i));
			
			if (charIndex < 0) continue;
			
			g.drawImage(spriteSheet.grabLetterImage((charIndex % 61), (charIndex / 61), 16, 16), x += 16, y, null);
		}
	}
	
	public static int getStringWidth(String message){
		return message.length() * SIZE;
	}
}

But only got a ByteInterleavedTaster error I also fixed the String chars now

[Delta517]

Was able to fix it myself with some derp coding ^^

Here’s the code if anyone else needs it:

Spritesheet class (had to change a little on the getLetterImage method:

import java.awt.image.BufferedImage;

public class SpriteSheet {
	
	private BufferedImage image;
	
	public SpriteSheet(BufferedImage image){
		this.image = image;
	}
	
	public BufferedImage grabImage(int col, int row, int width, int height){
		
		BufferedImage img = image.getSubimage((col * 32) - 32, (row * 32) - 32, width, height);
		return img;
		
	}
	
	public BufferedImage grabLetterImage(int col, int row, int width, int height){
		BufferedImage img = image.getSubimage((col * 16), + (row * 16), width, height);
		return img;
	}
}

And here’s the font class:

public class Font {
	
	private SpriteSheet spriteSheet;
	
	public Font(SpriteSheet spriteSheet){
		this.spriteSheet = spriteSheet;
	}
	
	public static final int SIZE = 8 * Game.SCALE;
	
	private static String chars ="ABCDEFGHIJKLMNOPQRSTUVWXYZ      0123456789.,:'\"!?$%()-=+/ ";
	
	public void render(Graphics g, String message, int x, int y){
		message = message.toUpperCase();
		
		for(int i = 0; i < message.length(); i++){
			int row = 14;
			
			int charIndex = chars.indexOf(message.charAt(i));
			
			if(charIndex < 0) continue;
			
			if(charIndex >= 16 && charIndex <= 31){
				charIndex -= 16;
				row = 15;
			}else if(charIndex >= 32 && charIndex <= 47){
				charIndex -= 32;
				row = 16;
			}else if(charIndex >= 48 && charIndex <= 63){
				charIndex -= 48;
				row = 17;
			}
			
			g.drawImage(spriteSheet.grabLetterImage(charIndex, row, 16, 16), x += 16, y, null);
		}
	}
	
	public static int getStringWidth(String message){
		return message.length() * SIZE;
	}
}

Note: There is probably another way to get the row method, but I’m still a newbie so that’s how I fixed it It works though