Temple of The Roguelike Forums
Development => Programming => Topic started by: joeclark77 on February 28, 2013, 08:28:36 PM
-
So I'm having fun creating ASCII character sprites out of a font chart i borrowed from Dwarf Fortress and it got me thinking about adding some of the more interesting characters from the Unicode world. Internally to my project, they're just graphics, so there's no reason to be restricted to just 256 symbols. The ethiopic characters, for example, have a lot of potential. Has anyone drawn up a good bitmap character table of some unicode symbols (obviously not all!) that could be used in a roguelike?
I was able to find a website for browsing the characters (http://macchiato.com/unicode/chart/) and I found out about one free-software project to develop a bitmapped Unicode font (http://unifoundry.com/unifont.html), although that one's ugly and not monospaced. Here's another free font that has a pretty good looking monospaced version, although it's not natively bitmapped (http://en.wikipedia.org/wiki/FreeSerif).
-
import javax.swing.*;
import java.util.*;
import java.awt.*;
import java.awt.event.*;
public class CharLookup extends JFrame implements ActionListener, ItemListener,
MouseMotionListener
{
public static final int TABLE_WIDTH = 31;
public static final int TABLE_HEIGHT = 21;
public static final int OFFSET_X = 10;
public static final int OFFSET_Y = 40;
public static final int SIZE = 20;
public static final int SPACING = SIZE + 5;
public static int base = 0;
public static int displayed = (TABLE_WIDTH - 1) * (TABLE_HEIGHT - 1);
public static int mouseLocX = 0;
public static int mouseLocY = 0;
public static char cornerChar;
public static boolean lockedOutput = false;
public static String[][] displayArr;
public JComboBox fontDD;
public JButton nextB;
public JButton prevB;
public JButton jumpB;
public JTextArea locL;
public JLabel noteL;
public JLabel creditL;
public JTextField fontF;
public String[] fontNames = {"Serif", "SansSerif", "Monospaced",
"Dialog", "DialogInput", "<Specify Below>"};
public CharLookup()
{
super();
setSize((TABLE_WIDTH * SPACING) + 190,
(TABLE_HEIGHT * SPACING) + 40);
setTitle("CharLookup");
setResizable(false);
setLocation(20, 20);
setLayout(null);
setDefaultCloseOperation(EXIT_ON_CLOSE);
displayArr = new String[TABLE_WIDTH][TABLE_HEIGHT];
fontDD = new JComboBox(fontNames);
fontDD.setSelectedIndex(0);
fontDD.setSize(150, 20);
fontDD.setLocation(getWidth() - 170, 10);
fontDD.addItemListener(this);
this.add(fontDD);
fontF = new JTextField("Enter Font Name");
fontF.setSize(150, 20);
fontF.setLocation(getWidth() - 170, 10 + 30);
fontF.addActionListener(this);
this.add(fontF);
noteL = new JLabel("Note: case-sensitive");
noteL.setFont(fontF.getFont());
noteL.setSize(150, 20);
noteL.setLocation(getWidth() - 170, 10 + 30 + 20);
this.add(noteL);
nextB = new JButton("Next " + displayed);
nextB.setSize(150, 20);
nextB.setLocation(getWidth() - 170, 10 + 30 + 30 + 20);
nextB.addActionListener(this);
this.add(nextB);
prevB = new JButton("Previous " + displayed);
prevB.setSize(150, 20);
prevB.setLocation(getWidth() - 170, 10 + 30 + 30 + 30 + 20);
prevB.addActionListener(this);
this.add(prevB);
jumpB = new JButton("Jump To");
jumpB.setSize(150, 20);
jumpB.setLocation(getWidth() - 170, 10 + 30 + 30 + 30 + 30 + 20);
jumpB.addActionListener(this);
this.add(jumpB);
locL = new JTextArea("");
locL.setSize(150, 100);
locL.setLocation(getWidth() - 170, 10 + 30 + 30 + 30 + 30 + 30 + 20);
locL.setEditable(false);
locL.setLineWrap(true);
locL.setWrapStyleWord(true);
locL.setBackground(this.getBackground());
this.add(locL);
creditL = new JLabel((char)169 + " Michael Widler, 2012");
creditL.setSize(150, 20);
creditL.setLocation(getWidth() - 150, getHeight() - 60);
creditL.setBackground(this.getBackground());
this.add(creditL);
addMouseMotionListener(this);
update();
setVisible(true);
}
public void actionPerformed(ActionEvent ae)
{
if(ae.getSource() == nextB)
{
base += displayed;
}
if(ae.getSource() == prevB)
{
base -= displayed;
}
if(ae.getSource() == jumpB)
{
getJumpDestination();
}
update();
}
public void itemStateChanged(ItemEvent ie)
{
update();
}
public void mouseDragged(MouseEvent me){}
public void mouseMoved(MouseEvent me)
{
mouseLocX = (me.getX() - OFFSET_X) / SPACING;
mouseLocY = (me.getY() - OFFSET_Y) / SPACING;
mouseLocX--;
updateField();
}
public void updateField()
{
if(lockedOutput) return;
int curCharIndex = mouseLocX + (mouseLocY * (TABLE_WIDTH - 1)) + base;
char curChar = (char)curCharIndex;
locL.setText("Characters " + base + " through " + (base + displayed) + ".\n\n");
locL.append(curChar + " = (char)" + curCharIndex);
}
public void update()
{
cornerChar = (char)base;
base = (int)cornerChar;
for(int x = 1; x < TABLE_WIDTH; x++)
displayArr
for(int y = 1; y < TABLE_HEIGHT; y++)
displayArr[0][y] = "";
for(int x = 0; x < TABLE_WIDTH - 1; x++)
for(int y = 0; y < TABLE_HEIGHT- 1; y++)
{
int xVal = x;
int yVal = y * (TABLE_WIDTH - 1);
char c = (char)(xVal + yVal + base);
displayArr[x+1][y+1] = "" + c;
}
updateField();
this.repaint();
}
public void getJumpDestination()
{
try
{
String value = JOptionPane.showInputDialog("Enter value (0 - 65535):");
base = Integer.parseInt(value);
}
catch(NumberFormatException nfEx){}
}
public void paint(Graphics g)
{
super.paint(g);
lockedOutput = false;
String fontName = fontNames[fontDD.getSelectedIndex()];
if(fontName.equals("<Specify Below>"))
fontName = fontF.getText();
g.setFont(new Font(fontName, Font.PLAIN, SIZE));
locL.setFont(new Font(fontName, Font.PLAIN, 12));
for(int x = 1; x < TABLE_WIDTH; x++)
for(int y = 1; y < TABLE_HEIGHT; y++)
{
g.drawString(displayArr- [y], OFFSET_X + (x * SPACING),
OFFSET_Y + (y * SPACING));
}
}
public static void main(String[] args)
{
CharLookup cl = new CharLookup();
}
}
-
I wanted an easy way to look up characters and their char values (for example, I like using (char)177 for fountains). I scripted the above as a quick and easy way to look up values, using either the five guaranteed Java fonts, or a user-specified font.
The Java-specific issue is that the guaranteed fonts are made up of the available fonts, so just because a character is on Monospaced on your system, doesn't mean it's on everything. You can get around this by importing specific fonts; hence the ability to look up specific fonts.
-
So what would this code do, exactly? Looks like it creates a dialog box or form to ask the user what font they want to look at, then shows all the characters in that font. Or does it only show one at a time? Windows has a built-in feature called Character Map that does something similar. (Also in MS Word you can Insert -> Symbol and get a very similar dialog.) Does your code produce a table that could be exported or screengrabbed to produce an image grid suitable for using as sprites in a game?
-
Sorry, I was too lazy to upload the actual .jar. https://docs.google.com/file/d/0B6oeeUZo0SLSMW41SVJ4dXZLRDg/edit?usp=sharing (https://docs.google.com/file/d/0B6oeeUZo0SLSMW41SVJ4dXZLRDg/edit?usp=sharing)
It displays characters on a 30x20 grid, using the selected font. Mousing over a character displays its char value. You can specify any font on your system, scroll through, and jump to a value (handy for things like pinyin).
I used to use the insert symbol dialog in OpenOffice, but it lists the characters in hex and translating them is just asking for arithmetic errors. Plus, this shows characters that OO didn't.
-
That works wonderfully, thanks! My only request would be to add a menu to select a font size (and maybe bold/italic/etc. too. Now I just need to do some font-shopping.
-
...
public String[] fontNames = {"Serif", "SansSerif", "Monospaced",
"Dialog", "DialogInput", "<Specify Below>"};
My Java-fu is weak, but I wanted to see other fonts. So I did the following.
1. Save the code above as "CharLookup.java".
2. Replacing the above line with:
public String[] fontNames = GraphicsEnvironment.getLocalGraphicsEnvironment().getAvailableFontFamilyNames();
3. javac CharLookup.java
4. java -classpath . CharLookup
This is great.
In a recent Roguelike Radio podcast, there was some comment about all TCOD games looking the same because they used the same font. With this, it should be possible to add a bit more that will allow someone to build their own TCOD PNG font by pick and choose, and give the code changes to put in place. Be a good thing to do before the 7DRL.
-
Hmm. There's some distortion with the fonts. ▓ for instance does not look like the grid of evenly placed dots that it should be. Rather it looks like it would if it were anti-aliased. However, if I enable anti-aliasing, then things look even worse. If I look at the same character in the same font in Character Map, it would look as I would expect it to.
-
Hmm. There's some distortion with the fonts. ▓ for instance does not look like the grid of evenly placed dots that it should be. Rather it looks like it would if it were anti-aliased. However, if I enable anti-aliasing, then things look even worse. If I look at the same character in the same font in Character Map, it would look as I would expect it to.
I just figured that was because it was a funny font size. I am probably going to use MS Word to produce my bitmap PNG of symbols, and use this java tool as a way of quickly browsing the fonts and figuring out where the good symbols are. This works because I'm only looking at monospaced fonts, so the "grid" layout is automatic, and Word will let me choose the size and style that I want.
My wish list for a roguelike-spritefont-generating tool would be:
- allow us to browse the glyphs of any font (like this tool)
- allow us to specify font size and style
- allow us to select the symbols we want by clicking and "add to tileset" with the specified size/style
- allow us to select some more from a different font or style and add those as well
- output all the selected glyphs as a bitmap graphic (PNG) of all our sprites
- bonus points if we can choose foreground/background color, specify the size of the tiles, and adjust where the glyph appears within those bounds (so the margins are consistent)
-
This wasn't really something I ever intended for public consumption, so it's not as polished as it could be.
@ChooseUserName: That's a much cleaner version than what I had set up; manually typing it in and selecting <Specify Below>.
Color options could be useful; I might play around with that some time. If someone else wants to make something robust, be my guest.
-
This wasn't really something I ever intended for public consumption, so it's not as polished as it could be.
@ChooseUserName: That's a much cleaner version than what I had set up; manually typing it in and selecting <Specify Below>.
Color options could be useful; I might play around with that some time. If someone else wants to make something robust, be my guest.
Thanks for releasing it. Feel free to release more code in this state - but use some cut and paste snippet web site next time :) Only problems I had getting it working were corruption from cut and paste.
-
A bit unrelated to the ongoing discussion. But I have found this unicode site useful in the past: http://www.unicode.org/charts/
-
I've made some modifications (https://github.com/rmtew/libtcod-font-maker). It now outputs rough PNG images of character ranges. I'm not sure the character spacing is libtcod compatible, and there is probably some character overlap. But it's a start. It outputs to a "fontx.png" file in the same directory. It also only uses a fixed character range.
A good next step is to clip each character to it's image grid position. And of course, better character choice. And etc..
-
What's the numeric input on the "export" dialog. Supposed to be font size? This is very nice work. I think when it comes down to it, a developer of roguelikes (or tilesets) is going to do their own editing and fine-tuning, so what they need from this app is really that it can export the characters they want in good-looking bitmaps. As far as margins/spacing/etc, that can be tuned by hand.
I know that Windows has a feature called ClearType (found it in my display settings) that makes fonts look better on screen than they naturally would if they were accurate renderings of the vector glyphs. I assume other operating systems have something similar. I wonder if there's some way to make this applet take advantage of that operating system functionality. The look is very different -- for example, try Lucida Sans Unicode in the applet and compare the capital "Z" to the same font (at any size) in Notepad or MS Word.
-
What's the numeric input on the "export" dialog. Supposed to be font size?
It's number of characters per line. It'll work for the actual export, but not for the displayed image in the dialog.
This is very nice work. I think when it comes down to it, a developer of roguelikes (or tilesets) is going to do their own editing and fine-tuning, so what they need from this app is really that it can export the characters they want in good-looking bitmaps. As far as margins/spacing/etc, that can be tuned by hand.
Well, I'll get it working the way I want, and if someone else wants to customise it.. they're welcome to.
These are the current things I want to do:
- Rewrite UI to display the font image preview with the character grid.
- Dynamic ability to change the font size and characters per line.
- Ability to map unicode code points to font image positions.
- Ability to load and save "code points to font image position mappings".
I know that Windows has a feature called ClearType (found it in my display settings) that makes fonts look better on screen than they naturally would if they were accurate renderings of the vector glyphs. I assume other operating systems have something similar. I wonder if there's some way to make this applet take advantage of that operating system functionality. The look is very different -- for example, try Lucida Sans Unicode in the applet and compare the capital "Z" to the same font (at any size) in Notepad or MS Word.
There are text rendering settings which can be changed for LCD screens. I've disabled all aliasing and speed over quality settings I could fine. I might have a play with the LCD settings, but all I want really is an unmolested font character. It might also have something to do with the font size, once I get the font size changing dynamically, it should be easy to rule this out.
-
New version with adjustable font sizing:
(http://i.imgur.com/eF1wJ3t.png) (http://imgur.com/eF1wJ3t)
Link (https://github.com/rmtew/libtcod-font-maker)
-
/* Shut up Eclipse. */
private static final long serialVersionUID = -4471311765737904715L;
Lol.