Develop Reference

Java: Replace Text with Image Mid-String and align with Word Wrapping

I am still a bit new to Java programming so sorry for the huge dump of text. I greatly appreciate you taking the time to read over my current problem!
I am working on software to help speed up the process of board game design using Java Swing. It takes a CSV file of cards for a game, lets you build a dummy card by placing where each column will render on the card and then automatically generating all of the cards in the CSV from these positions.
Many card games have symbols that represent something in the game and I want to be able to insert them in the middle of strings. I can currently replace an entire string with a symbol; as it checks if the string == a known rule, draw the symbol instead. However, I don't know how I would go about searching through a string for a specific set of characters. If it finds them, delete them from the string and then draw the corresponding symbol in it's place. A great example can be seen with the mana symbols on magic cards: https://cdn0.vox-cdn.com/uploads/chorus_asset/file/8039357/C0cIVZ5.png
So the string could be: Gain 1 {GOLD} at the start of each tun.
And it would need to replace {GOLD} with the picture of gold using the Rule class that contains the string to find and a buffered image to replace it with.
I would like this to work without using a hard limit on the size of the symbol, but that is not a hard requirement. The best solution would scale the symbol so it's height was the same of the text.
This method takes a buffered image (a card with no text) and overlays the text on top of the card.
//Will modify the buffered image with the placeables
static public BufferedImage buildCard(BufferedImage start, int whichCardID) {
//Copy so we don't lose our template
BufferedImage ni = deepCopy(start); //ni = new image
//The headers of the document
String[] headers = MainWindow.loadedCards.get(0);
//For each placeable, write down it's text
for(int i=0; i<headers.length; i++) {
//get current header
String currentHeader = headers[i];
//The Text
String theText = MainWindow.loadedCards.get(whichCardID)[i];
//The Settings
PlaceableSettings theSettings = MainWindow.placeableSettings.get(currentHeader);
//Make the change to the image
//ni = writeToImage(ni, theText, theSettings);
///////New below
boolean foundRule = false;
//see if we have a rule to draw a graphic instead
for(RuleMaster.Rule r : RuleMaster.rules) {
if(r.keyword.equals(theText)) {
//there is a rule for this!
ni = drawRuleToImage(ni, r, theSettings);
foundRule = true; //so we don't draw the current text
}
}
//No rules for this
//Make the change to the image if there are no rules
if(foundRule == false)
ni = writeToImage(ni, theText, theSettings);
}
return ni;
}
//Takes a buffered image and writes text into it at the location given
static public BufferedImage writeToImage(BufferedImage old, String text, PlaceableSettings setts) {
//make new blank graphics
BufferedImage bi = new BufferedImage(old.getWidth(), old.getHeight(), BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = bi.createGraphics();
//write old image to it
g2d.drawImage(old, 0, 0, null); //null was set to "this" when this was not static | Note ion case this breaks
//write text on it
g2d.setPaint(setts.getColor());
g2d.setFont(setts.getFont());
//Setup word wrap
FontMetrics fm = g2d.getFontMetrics(setts.getFont());
// int rightSideBuffer = bi.getWidth() - 10;
//Rectangle2D rect = fm.getStringBounds(text, setts.getX(), rightSideBuffer, g2d); // try just -'ing the x slot from the width below
Rectangle2D rect = fm.getStringBounds(text, g2d); //this gets you the bounds for the entire image, need to remove space for x,y position
//TODO: Problem: this is always length 1
//Solution! No auto wrap, let the person define it as a setting
#SuppressWarnings("unchecked")
List<String> textList=StringUtils.wrap(text, fm, setts.getPixelsTillWrap() ); //width counted in # of characters
//g2d.drawString(text, setts.getX(), setts.getY()); //old draw with no wrap
for(int i=0; i< textList.size(); i++) {
g2d.drawString(textList.get(i), setts.getX(), setts.getY() + ( i*(setts.getFont().getSize() + 2/*Buffer*/)));
}
//!!DEBUG
if(EntryPoint.DEBUG) {
Random r = new Random();
g2d.setPaint(Color.RED);
g2d.drawString(Integer.toString(textList.size()), 100, 50+r.nextInt(250));
g2d.setPaint(Color.GREEN);
g2d.drawString(Double.toString(rect.getWidth()), 200, 50+r.nextInt(250));
g2d.setPaint(Color.PINK);
//g2d.drawString(Integer.toString(( ((int) rect.getWidth()) - setts.getX())), 100, 250+r.nextInt(100));
}
//cleanup
g2d.dispose();
return bi;
}
//Takes a buffered image and draws an image on it at the location given
static public BufferedImage drawRuleToImage(BufferedImage old, RuleMaster.Rule rule, PlaceableSettings theSettings) {
//make new blank graphics
BufferedImage bi = new BufferedImage(old.getWidth(), old.getHeight(), BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = bi.createGraphics();
//write old image to it
g2d.drawImage(old, 0, 0, null); //null was set to "this" when this was not static | Note ion case this breaks
g2d.drawImage(rule.image, theSettings.getX(), theSettings.getY(), null);
//cleanup
g2d.dispose();
//System.exit(1);
return bi;
}
Each Rule just contains the string to replace and the image to replace it with.
static public class Rule{
//Text to look for
String keyword;
//image to replace it with
BufferedImage image;
public Rule (String key, BufferedImage img) {
keyword = key;
image = img;
}
}
I am attempting to design this as a tool for many people to use, so the text should be able to match whatever the user adds; though my current process has been to use strings such as "{M}" and that could be a standard.
Another big hurdle in this is that the text can wrap on the cards, which means that the strings and image need to wrap together in provided bounds.
Edit 1:
Had some thoughts and am going to try this approach. Still see a possible issue with the bounds when getting the 'next' half of the string drawn; but I believe this may work.
//If found a rule mid text:
//Split string in 2 at the rule match: strings 'start', and 'next'
//Calculate x and y for symbol
//x is the # of characters in ('start' % the word wrap width) +1 as the symbol is the next character, then multiply that by the character size of the font
//y is the integer of dividing the # of characters in 'start' by word wrap width multiplied by the font height
//Draw Start of String
//Draw symbol
//next x = sym.x + sym width //TODO next (x,y) math

I was able to solve the problem by warping ahead of time based on the text size. By using a known size of the image, it could be know ahead of time to get the wrap done right.
Then I looped through each line. I looked did a split in the string on the text that would be replaced. I them drew the first part of the string as normal. Calculated the width of the string using int pixelWidth = ni.getGraphics().getFontMetrics().stringWidth(splitString[j]);. Then drew the image at the same Y, but added the width of the previous string to the X. Then added the current width of the image to the X and continued looping; drawing images and strings as needed.

Position a Window completely on screen in multi monitor environment

Occasionally I have to display a popup or dialog relative to an existing component (prime example is a date input control with a calendar button beside it).
It worked beautifully for years, but always had the bug that the calendar could partially appear outside the screen (it was hardcoded to appear just to the right of the field). Just nobody ever noticed because there was never a date control at the far right in a window. Well that changed recently with the addition of a new window.
Well then, I thought, lets just fix a windows position (after I positioned it where it should be) to be completely on screen. I wrote a simple utility method to do just that:
public static void correctWindowLocationForScreen(Window window) {
GraphicsConfiguration gc = window.getGraphicsConfiguration();
Rectangle screenRect = gc.getBounds();
Rectangle windowRect = window.getBounds();
Rectangle newRect = new Rectangle(windowRect);
if (windowRect.x + windowRect.width > screenRect.x + screenRect.width)
newRect.x = screenRect.x + screenRect.width - windowRect.width;
if (windowRect.y + windowRect.height > screenRect.y + screenRect.height)
newRect.y = screenRect.y + screenRect.height - windowRect.height;
if (windowRect.x < screenRect.x)
newRect.x = screenRect.x;
if (windowRect.y < screenRect.y)
newRect.y = screenRect.y;
if (!newRect.equals(windowRect))
window.setLocation(newRect.x, newRect.y);
}
Problem solved. Or not. I position my window using the on-screen coordinates from the triggering component (the button that makes the calendar appear):
JComponent invoker = ... // passed in from the date field (a JButton)
Window owner = SwingUtilities.getWindowAncestor(invoker);
JDialog dialog = new JDialog(owner);
dialog.setLocation(invoker.getLocationOnScreen());
correctWindowLocationForScreen(dialog);
Havoc breaks out if the "invoker" component is located in a window that spans two screens. Apparently "window.getGraphicsConfiguration()" returns whatever graphic configuration the windows top left corner happens to be in. Thats not necessarily the screen where the date component within the window is located.
So how can I position my dialog properly in this case?

One can iterate over all devices, and find the monitor where the point is in. Then keep to that Rectangle.
See GraphicsEnvironment.getScreenDevices.
This will not use the current Window, but you already found out that a window may be shown in several monitors.
Useful might be Component.getLocationOnScreen.

Ok, here is what I ended up with (a wall of code to handle the odd edge case).
correctWindowLocationForScreen() will reposition a window if it is not completely within the visible screen area (simplest case, its completely on one screen. Hard case, it spans multiple screens). If the window leaves the complete screen area by just one pixel, it is repositioned using the first screen rectangle found. If the window doesn't fit the screen, its positioned at the top left and extends over the screen to bottom right (its implied by the order in which positionInsideRectangle() checks/alters coordinates).
Its quite complicated considering the requirement is pretty simple.
/**
* Check that window is completely on screen, if not correct position.
* Will not ensure the window fits completely onto the screen.
*/
public static void correctWindowLocationForScreen(final Window window) {
correctComponentLocation(window, getScreenRectangles());
}
/**
* Set the component location so that it is completely inside the available
* regions (if possible).
* Although the method will make some effort to place the component
* nicely, it may end up partially outside the regions (either because it
* doesn't fit at all, or the regions are placed badly).
*/
public static void correctComponentLocation(final Component component, final Rectangle ... availableRegions) {
// check the simple cases (component completely inside one region, no regions available)
final Rectangle bounds = component.getBounds();
if (availableRegions == null || availableRegions.length <= 0)
return;
final List<Rectangle> intersecting = new ArrayList<>(3);
for (final Rectangle region : availableRegions) {
if (region.contains(bounds)) {
return;
} else if (region.intersects(bounds)) {
// partial overlap
intersecting.add(region);
}
}
switch (intersecting.size()) {
case 0:
// position component in the first available region
positionInsideRectangle(component, availableRegions[0]);
return;
case 1:
// position component in the only intersecting region
positionInsideRectangle(component, intersecting.get(0));
return;
default:
// uuuh oooh...
break;
}
// build area containing all detected intersections
// and check if the bounds fall completely into the intersection area
final Area area = new Area();
for (final Rectangle region : intersecting) {
final Rectangle2D r2d = new Rectangle2D.Double(region.x, region.y, region.width, region.height);
area.add(new Area(r2d));
}
final Rectangle2D boundsRect = new Rectangle2D.Double(bounds.x, bounds.y, bounds.width, bounds.height);
if (area.contains(boundsRect))
return;
// bah, just place it in the first intersecting region...
positionInsideRectangle(component, intersecting.get(0));
}
/**
* Position component so that its completely inside the rectangle.
* If the component is larger than the rectangle, component will
* exceed to rectangle bounds to the right and bottom, e.g.
* the component is placed at the rectangles x respectively y.
*/
public static void positionInsideRectangle(final Component component, final Rectangle region) {
final Rectangle bounds = component.getBounds();
int x = bounds.x;
int y = bounds.y;
if (x + bounds.width > region.x + region.width)
x = region.x + region.width - bounds.width;
if (y + bounds.height > region.y + region.height)
y = region.y + region.height - bounds.height;
if (region.x < region.x)
x = region.x;
if (y < region.y)
y = region.y;
if (x != bounds.x || y != bounds.y)
component.setLocation(x, y);
}
/**
* Gets the available display space as an arrays of rectangles
* (there is one rectangle for each screen, if the environment is
* headless the resulting array will be empty).
*/
public static Rectangle[] getScreenRectangles() {
try {
Rectangle[] result;
final GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment();
final GraphicsDevice[] devices = ge.getScreenDevices();
result = new Rectangle[devices.length];
for (int i=0; i<devices.length; ++i) {
final GraphicsDevice gd = devices[i];
result[i] = gd.getDefaultConfiguration().getBounds();
}
return result;
} catch (final Exception e) {
return new Rectangle[0];
}
}

SWT - Drawing a Moving Image Over Tiles

I've been experimenting with different ways of moving a image over a grid of tiles for a game, but I've been unable to get a working implementation.
First I tried using a grid layout to hold a bunch of Tiles that extended Canvas and drew themselves. This drew the tiles nicely, however it seems that I am unable to draw my Player object on top of them. Originally, the Player also extended Canvas and I intended to have the widget on top of the tiles. It seems like this is impossible.
I then tried to have the Tile simply extend nothing, and just hold the image. I then hold each Tile in a 2D array and draw each Tile by a nested for loop, using the int from the for loop, multiplied by the image size, to draw Tile's Image. I put this code in a PaintListener inside of my constructor for my Map class that extended Canvas and dropped my Map onto my Shell in a Fill layout, but the PaintListener never gets called (I tested with a print statement).
What implementation could I use to draw the Tiles at the start of the game, then allow me to control the movement of my Player image?

I did something similar.
Using a PaintListener I get the calls when the Widget needs to be repainted. In my paint function, I loop over a tile array (wrapped in a World class) and draw all tiles. Afterwards I use the same technique with a worldObjects array/class:
public class WorldWidget extends Canvas {
WorldWidget() {
addPaintListener(new PaintListener() {
#Override
public void paintControl(PaintEvent e) {
WorldWidget.this.paintControl(e);
}
});
}
protected void paintControl(PaintEvent e) {
GC gc = e.gc;
for (short y = 0; y < world.getHeight(); y++) {
for (short x = 0; x < world.getWidth(); x++) {
final ITile tile = world.getTile(x, y);
final Image image = ImageCache.getImage(tile);
gc.drawImage(image, x * tileSize, y * tileSize);
}
}
// Here is used a similar loop, to draw world objects
}
}
This is obviously a condensed code example, as the class is part of an editor and reacts on mouse clicks and movement amongst other things.

When I did a tile based simulation while ago I did it this way:
I had 2 layers of the tile map - one for the terrain and second for the units.
The map itself was represented by a JPanel.
So roughly you got this for the JPanel:
public void paintComponent(Graphics graphics) {
// create an offscreen buffer to render the map
if (buffer == null) {
buffer = new BufferedImage(SimulationMap.MAP_WIDTH, SimulationMap.MAP_HEIGHT, BufferedImage.TYPE_INT_ARGB);
}
Graphics g = buffer.getGraphics();
g.clearRect(0, 0, SimulationMap.MAP_WIDTH, SimulationMap.MAP_HEIGHT);
// cycle through the tiles in the map drawing the appropriate
// image for the terrain and units where appropriate
for (int x = 0; x < map.getWidthInTiles(); x++) {
for (int y = 0; y < map.getHeightInTiles(); y++) {
if (map.getTerrain(x, y) != null) {
g.drawImage(tiles[map.getTerrain(x, y).getType()], x * map.getTILE_WIDTH(), y * map.getTILE_HEIGHT(), null);
}
}
}
if (map.getSimulationUnits() != null) {
for (Unit unit : map.getSimulationUnits()) {
g.drawImage(tiles[unit.getUnitType()], (int) Math.round(unit.getActualXCor() * map.getTILE_WIDTH()), (int) Math.round(unit.getActualYCor() * map.getTILE_HEIGHT()),
null);
}
}
// ...
// draw the buffer
graphics.drawImage(buffer, 0, 0, null);
}
Logic:
private Terrain[][] terrain = new Terrain[WIDTH][HEIGHT];
/** The unit in each tile of the map */
private Unit[][] units = new Unit[WIDTH][HEIGHT];
Then you have your game loop where you update the position of the units and other things, basically render() and update() the game. Check the links I've provided below.
NOTE
Since you are making a simple game this post about making game loops will be definitely useful for you. This hopefully also answer your question about moving the object on the map.
This site will be also very helpful since you will probably need to detect collision at some point too.

How to make a ListView with a notepad-style background?

I want my ListView to look like a notepad, ie with a horizontal lines background pattern. Following the Notepad sample, I can extend TextView and override its onDraw() like this:
r = new Rect();
for (int i = 0; i < getLineCount(); i++) {
int baseline = getLineBounds(i, r);
canvas.drawLine(r.left, baseline + 1, r.right, baseline + 1, paint);
}
super.onDraw(canvas);
but when there are just a few elements in the list, there won't be enough lines to fill the page (actual result on the left, desired on the right):
~~~
So I tried an alternative approach: overriding ListView.onDraw(). Unfortunately, there's no immediate way to compute the top scroll (getScrollY() always returns 0), and above all, I must disable all caching and drawing optimizations, and this will definitely kill performance, other than not being scalable for large lists.
Finally, my row widgets are not plain text views. They are complex layouts, even if the main content is -sure- a TextView. This means that inside the layout I can't call getLineBounds() (a layout is not a text view), and in the text view I can't because the TextView is smaller than the surrounding layout, so there will be gaps on the four sides.
How can I architect a solution to display my custom widgets and fill the entire window with horizontal lines? A naive approach would be to add dummy empty elements to the list as long as it fits all the available space, however this is a hack and there must be a better way of doing things. Using a background image is not an option, since the distance between lines must be customizable at runtime.

The code below is based on the simple example from your question, a custom TextView that draws a line at the bottom(and with no dividers in the list). In this case I would make a custom ListView and override the dispatchDraw method like below:
class CustomListView extends ListView {
private Paint mPaint = new Paint();
private Paint mPaintBackground = new Paint();
public CustomListView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint.setColor(Color.RED);
mPaintBackground.setColor(Color.CYAN);
}
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
// ListView's height
final int currentHeight = getMeasuredHeight();
// this will let you know the status for the ListView, fitting/not
// fitting content
final int scrolledHeight = computeVerticalScrollRange();
if (scrolledHeight >= currentHeight || scrolledHeight == 0) {
// there is no need to draw something(for simplicity I assumed that
// if the adapter has no items i wouldn't draw something on the
// screen. If you still do want the lines then pick a decent value
// to simulate a row's height and draw them until you hit the
// ListView's getMeasuredHeight)
return;
} else {
// get the last drawn child
final View lastChild = getChildAt(getChildCount() - 1);
// values used to know where to start drawing lines
final int lastChildBottom = lastChild.getBottom();
// last child's height(use this to determine an appropriate value
// for the row height)
final int lastChildHeight = lastChild.getMeasuredHeight();
// determine the number of lines required to fill the ListView
final int nrOfLines = (currentHeight - lastChildBottom)
/ lastChildHeight;
// I used this to simulate a special color for the ListView's row background
Rect r = new Rect(0, lastChildBottom, getMeasuredWidth(),
getMeasuredHeight());
canvas.drawRect(r, mPaintBackground);
for (int i = 0; i < nrOfLines; i++) {
canvas.drawLine(0, lastChildBottom + (i + 1) * lastChildHeight,
getMeasuredWidth(), lastChildBottom + (i + 1)
* lastChildHeight, mPaint);
}
}
}
}
See if you can use the code above and adapt it to your own needs.

In Java, Creating application that supports different resolutions/display modes

I am a beginner who is learning to write games in JAVA.
In the game I am writing, I am trying to get it to support multiple displayModes. First let me tell you a little about how I'm setting the display setting in the first place.
In the beginning of the code, I have an list of display modes I wish to support
//List of supported display modes
private static DisplayMode modes[] = {
new DisplayMode(640, 480, 32, 0),
new DisplayMode(1024, 768, 32, 0),
};
I then get a list of supported display Modes from the Video Card, comparing the list and use the first matching display mode.
/////////////////////////////////////////////
////Variable Declaration
/////////////////////////////////////////////
private GraphicsDevice vc;
/////////////////////////////////////////////
//Give Video Card Access to Monitor Screen
/////////////////////////////////////////////
public ScreenManager(){
GraphicsEnvironment e = GraphicsEnvironment.getLocalGraphicsEnvironment();
vc = e.getDefaultScreenDevice();
}
/////////////////////////////////////////////
//Find Compatible display mode
/////////////////////////////////////////////
//Compare Display mode supported by the application and display modes supported by the video card
//Use the first matching display mode;
public DisplayMode findFirstCompatibleMode(DisplayMode modes[]){
DisplayMode goodModes[] = vc.getDisplayModes();
for(int x=0; x<modes.length; x++){
for(int y=0; y<goodModes.length; y++){
if (displayModesMatch(modes[x], goodModes[y])){
return modes[x];
}
}
}
return null;
}
/////////////////////////////////////////////
//Checks if two Display Modes match each other
/////////////////////////////////////////////
public boolean displayModesMatch(DisplayMode m1, DisplayMode m2){
//Test Resolution
if (m1.getWidth() != m2.getWidth() || m1.getHeight() != m2.getHeight()){
return false;
}
//Test BitDepth
if (m1.getBitDepth() != DisplayMode.BIT_DEPTH_MULTI && m2.getBitDepth() != DisplayMode.BIT_DEPTH_MULTI
&& m1.getBitDepth() != m2.getBitDepth()){
return false;
}
//Test Refresh Rate
if (m1.getRefreshRate() != DisplayMode.REFRESH_RATE_UNKNOWN &&
m2.getRefreshRate() != DisplayMode.REFRESH_RATE_UNKNOWN &&
m1.getRefreshRate() != m2.getRefreshRate()){
return false;
}
return true;
}
Currently, I am only supporting two resolutions, 640x480 and 1024x768.
In order to have every element of my game available in both resolutions, first I find how much the screen is resized and store this value in a variable called resizeRatio
private void getResizeRatio(){
resizeRatio = (double)1024/(double)s.getWidth();
//s.getWidth() returns the current width of the screen.
}
And with every image I import, i would divide the image height and width by this resizeRatio.
/////////////////////////////////////////////
//Scale the image to the right proportion for the resolution
/////////////////////////////////////////////
protected Image scaleImage(Image in){
Image out = in.getScaledInstance((int)(in.getWidth(null)/resizeRatio), (int)(in.getHeight(null)/resizeRatio), Image.SCALE_SMOOTH);
return out;
}
This is all fine and good, until my application grew bigger and bigger. Soon I realize I forgot to resize some of the icons, and they are all at the wrong place when resolution is 640x480.
Additionally, I realize I must scale, not just the size of all my images, but all the movement speed, and all the positions as well, since having my character move at 5px per refresh makes him move significantly faster when displayed at 640x480 than when displayed at 1024x768
So my question is, instead of individually scaling every image, every icon, and every movement, is there a way to scale everything all at once? Or rather, there must be another way of doing this so could someone please tell me?
Thank you for reading and any help would be much appreciated.

In the paintComponent(Graphics g) or paint method you can do with Graphics2D.scale:
private double scale = 0.75;
#override
public void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D)g; // The newer more ellaborate child class.
g2.scale(scale, scale);
...
g2.scale(1/scale, 1/scale);
}