35. Images

Besides using images for textures, fonts, etc., they can be used as part of 2D GUI.

---

By searching for jMonkeyEngine, we can get this Wikipedia webpage with the logo at right. Right-click to save the file.

---

This is the file downloaded. In the project, create a subfolder in Interface folder, such as jmonkey_logo. The file should be saved there.

---

In the simpleInitApp(), create a Picture object, such as logo. You next have to point it to the Interface image file using the assetManager. The width and height should be set as well as the position it should be moved to. Finally, it should be attached to the guiNode.

        // *** 1. Start (image)
        logo = new Picture("The Monkey Engine");
        logo.setImage(assetManager, 
                "Interface/jmonkey_logo/Jmonkeyengine-logo.png",
                true); // true - use alpha
        x = settings.getWidth()/2-75;
        y = settings.getHeight()/2-60;
        logo.move(x,y,0);
        logo.setWidth(150); // image width
        logo.setHeight(120); // image height
        guiNode.attachChild(logo);
        // *** 1. End

---

package mygame;

import com.jme3.app.SimpleApplication;
import com.jme3.math.ColorRGBA;
import com.jme3.system.AppSettings;
import com.jme3.ui.Picture;

public class JMonkey35 extends SimpleApplication {

    public static void main(String[] args) {
        AppSettings cfg = new AppSettings(true);
        cfg.setFrameRate(60);
        JMonkey35 app = new JMonkey35();
        app.setSettings(cfg);
        app.start();
    }
    
    private Picture logo;
    private int x,y;

    @Override
    public void simpleInitApp() {
        flyCam.setEnabled(false);
        viewPort.setBackgroundColor(ColorRGBA.White);
        setDisplayStatView(false);
        setDisplayFps(false);
        // *** 1. Start (image)
        logo = new Picture("The Monkey Engine");
        logo.setImage(assetManager, 
                "Interface/jmonkey_logo/Jmonkeyengine-logo.png",
                true); // true - use alpha
        x = settings.getWidth()/2-75;
        y = settings.getHeight()/2-60;
        logo.move(x,y,0);
        logo.setWidth(150); // image width
        logo.setHeight(120); // image height
        guiNode.attachChild(logo);
        // *** 1. End
    }
    
    @Override
    public void simpleUpdate(float tps) {
        System.out.println("rate = " + 1/tps);
    }
}

---

34. Font

Bitmap Fonts can be created using a Plugin in the jMonkeyEngine SDK, and we can use them as 2D objects.

---

We can check plugins from the Tools menu. If the Font Creator plugin is not already installed, install it from the Available Plugins tab, and restart the SDK.

---

In a project, right-click on the Interface folder in the Assets, and select new Font file. Then, any system font can be installed. You can also get free fonts from some websites.

---

In the next step, you have to set some settings such as image size, font size and padding.

---

After these steps, two files be in a Fonts folder.

---

To use the fonts, first load the file into BitmapFont object. Then you can create BitmapText objects and attach them to guiNode.

        // *** 1. Start (Load font, initial text)
        BitmapFont myFont = assetManager.loadFont(
                "Interface/Fonts/TrebuchetMS.fnt");
        outText = new BitmapText(myFont, false);
        outText.setSize(guiFont.getCharSet().getRenderedSize());
        outText.move(settings.getWidth()/5,      // X
                        settings.getHeight()/2,  // Y
                        0);                      // Z
        outText.setText("This is test # " + count);
        outText.setColor(ColorRGBA.Blue);
        outText.setLocalScale(2);
        guiNode.attachChild(outText);
        // *** 1. End

---

In the simpleUpdate(), the counter is incremented and new text is written.

        // *** 2. Start (Updated text)
        outText.setText("This is a test # " + (++count));
        // *** 2. End

---

package mygame;

import com.jme3.app.SimpleApplication;
import com.jme3.font.BitmapFont;
import com.jme3.font.BitmapText;
import com.jme3.math.ColorRGBA;
import com.jme3.system.AppSettings;

public class JMonkey34 extends SimpleApplication {

    public static void main(String[] args) {
        AppSettings cfg = new AppSettings(true);
        cfg.setFrameRate(2); // 2 frames per second
        JMonkey34 app = new JMonkey34();
        app.setSettings(cfg);
        app.start();
    }
    private int count = 0;
    private BitmapText outText = null;

    @Override
    public void simpleInitApp() {
        flyCam.setEnabled(false);
        viewPort.setBackgroundColor(ColorRGBA.LightGray);
        setDisplayStatView(false);
        setDisplayFps(false);
        // *** 1. Start (Load font, initial text)
        BitmapFont myFont = assetManager.loadFont(
                "Interface/Fonts/TrebuchetMS.fnt");
        outText = new BitmapText(myFont, false);
        outText.setSize(guiFont.getCharSet().getRenderedSize());
        outText.move(settings.getWidth()/5,      // X
                        settings.getHeight()/2,  // Y
                        0);                      // Z
        outText.setText("This is test # " + count);
        outText.setColor(ColorRGBA.Blue);
        outText.setLocalScale(2);
        guiNode.attachChild(outText);
        // *** 1. End
    }
    
    @Override
    public void simpleUpdate(float tps) {
        // *** 2. Start (Updated text)
        outText.setText("This is a test # " + (++count));
        // *** 2. End
    }
}

---

Output: