How do you display 2D images on the screen?

I am looking to display time (a bit like a digital clock) on the screen. This clock would be 2D, sits at the bottom of the screen and is updated every second. This is a bit like using Text class which can be used to show text on the screen as in SimpleGame.



I like to use my own images for the digital clock. Does anybody know how to do this?

tomcat

Having thought about this, I am thinking of using a quad with some image in it and updating it frequently. Not sure how much of a performance degredation I would get especially if I have a few quads to change on each update.

tomcat

Take a look at UIText, that should do a clock nicely for you. Updating once a second will be just fine performance wise.



If you need more than text, take a look at UIBillboard.

Thanks, the UI class does what I am after and the testui is pretty cool 8) . Couple of things though,


  1. if Idisplay a screen say with a few buttons and text edit fields, how do I hide them to get back to the 3d scene?


  2. How do I go about creating a new font (similar to the ‘new32’)?

    tomcat

1) if Idisplay a screen say with a few buttons and text edit fields, how do I hide them to get back to the 3d scene?


I just add and remove from the root node as needed. Kinda... in my game I've set up a scene heirarchy where I can add stacks of scenes. I then put all the parts together and switch out scenes as needed. My understanding is that this same functionality is in the latest jME versions, but I haven't played with it yet.

Also, Cep has asked for some better relative mouse handling... I haven't gotten to that yet. But for now you can just switch out which mouse you are using by associating the current InputHandler with the scene you are rendering, absolute for GUI scene, relative for others... although ideally you'd want to combine for HUDs and such. Anyhow, there's actually quite a few ways of doing this.

I'm working on documentation today.


2) How do I go about creating a new font (similar to the 'new32')?


The font I built with this:

http://www.lmnopc.com/bitmapfontbuilder/

I created a bmp file. Then edited in Photoshop. I cut the white part out, created a new file with a transparent background. Then pasted the white part from the bmp file. Then I added layer filters as needed.

I found that this is the only way to get a true transparent background since there's somthing strange about the bmp formated file that the black isn't true black.
"tomcat" wrote:
1) if Idisplay a screen say with a few buttons and text edit fields, how do I hide them to get back to the 3d scene?
I suggest you take a look at this thread
http://www.mojomonkeycoding.com/jmeforum/viewtopic.php?t=484&highlight=state+game
It was all about a state based game engine. This way you build up different trees for the different states and then you switch game states like from "in the menu" to "in the options menu" or "in the game".

AFAIK guurk has written such an engine for usage in his game, I did as well. I can send you my sources, although I have not updated jME from CVS for a while.

Create one big texture of a clock 25 times. In each time the hands would be a bit different. Load in the texture to your model, and just change textuer coordinates whenever you want to change clocks. Easy, fast hack



Or you said digital? Well you can create your own fonts by just replacing the text in the font texture.

I was thinking the same thing Cep… until I read this "a bit like a digital clock".



But, for a analog clock… do you think that


  1. 3 textures for each hand, multi-textured together moving the textures around



    or


  2. 3 quads blended together rotating the quads as time progresses



    would be faster?
The font I built with this:


Thx guurk, downloaded the editor to play with and see if I can come up with something different.


I suggest you take a look at this thread
http://www.mojomonkeycoding.com/jmeforum/viewtopic.php?t=484&highlight=state+game
It was all about a state based game engine. This way you build up different trees for the different states and then you switch game states like from "in the menu" to "in the options menu" or "in the game".


I had a quick look and the approach is pretty good. The way I understand this, is that you load up a few scene at the startup, and then only show the one you want. Once you finished with this, you hide it and then show the other one.

I can send you my sources, although I have not updated jME from CVS for a while.


That would be really helpful. what is your email?
tomcat

guurk, I would think the 2nd faster.

Cep21 wrote: Create one big texture of a clock 25 times. In each time the hands would be a bit different. Load in the texture to your model, and just change textuer coordinates whenever you want to change clocks. Easy, fast hack


Sorry, I am a bit confused. Do I create one big texture which has 25 smaller textures of a clock in it (a bit like the font's big texture) or do I create 25 big textures of a clock.
tomcat

you hide it and then show the other one.


I know this is probably just being padantic... you just don't render it in your rendering loop as apposed to 'hide' it.
I know this is probably just being padantic... you just don't render it in your rendering loop as apposed to 'hide' it.


Good point as I was struggling with it and need some help. Is this right that scenes will only be renderd if I call:

display.getRenderer().draw(some-scene)



in the render method.

tomcat

Yeah, that’s right… Really, the ‘scene’ is just a Node wrapper.



public abstract class AbstractScene {

   protected Node _root = null;
   protected MouseInputHandler _mouseInputHandler = null;

   public abstract void start(MouseInputHandler mouseInputHandler);
   public abstract void logic( float logicTime);
   public abstract AbstractScene update( float updateTime);
   public abstract boolean render( float renderTime);

   public void shutdown() {

   }

   public String getName() {
      return this.getClass().getName();
   }

   public Node getRoot() {
      return _root;
   }

}




Then in my main application body I
    1) initialize the Applicaiton ( Display, Camera, init variables, start inputHandlers)
    2) start the application ( create my scenes, push them on the stack, start my main game loop
    3) Main Game loop (loop until I'm 'done' or the display is closing, call inputHandler.update, call my scene.update(s), call my scene.logic(s), render my scenes)
    [/list:u]

    I also have synchronize the poping and pushing of scenes on the stack with the rendering call and only do it after a render.

    I also throttle the rendering and update calls to the scene. I limit update calls about every 1/10 seconds, and render about 1/100 seconds (of course depending upon true frame rate).


       private void updateStack( float updateTime) {
          
          if (_sceneStack != null && !_sceneStack.empty()) {
             Iterator stackIter = _sceneStack.iterator();
             while (stackIter.hasNext()) {
                _newScene = ((AbstractScene) stackIter.next()).update( updateTime);
             }
          }
       }

       private void renderStack( float renderTime) {
          _renderTimer.update();
          if (_sceneStack != null && !_sceneStack.empty()) {
             for (int i = _sceneStack.size() - 1; i >= 0; i--) {
                ((AbstractScene) _sceneStack.elementAt(i)).render( renderTime);
             }

          }
       }



    Notice that my render stack happens in the reverse direction so that the things in the 'bottom' of the stack are rendered last.

    Also, notice that during the update phase, that any scene that is passed back from the udpate call replaces the current top scene in the stack.

    The render() method in the scene does this:


    _myDisplay.getRenderer().draw(_root);



    Hope this helps.
Sorry, I am a bit confused. Do I create one big texture which has 25 smaller textures of a clock in it (a bit like the font's big texture) or do I create 25 big textures of a clock.
tomcat


One big texture which has 25 smaller pictures of clocks on it. You load the texture once. All you need to change is which part of the texture you're showing. It's an easy way to do animations.

Thx Cep21, you are right on the animation side as I only have to load it once. I guess all I have to do is to change the texture co-ordinates as I move from one image to the other. Is there a tool out there which gives me the co-ordinates of individual textures or do I have to do this manually (i.e. find out the x,y coord of each vertex for each texture)?

tomcat

Yes, but it’s pretty easy with just a couple loops and math.



If you starting texture is 5x5, with 25 parts then the code would be kind of like this:




static final float _maxParts = 5.0f;

Vector2f[] getTexCoords( int x, int y) {

  if( x < 1 || x > _maxParts)
    return null;
  if( y < 1 || y > _maxParts)
    return null;

  x--;
  y--;

  Vector2f _texCoords = new Vector2f[4];

  _texCoords[0] = new Vector2f( (float) x / _maxParts,  (float) (y + 1) / _maxParts );

  _texCoords[1] = new Vector2f( (float) x / _maxParts,  (float) y / _maxParts );

  _texCoords[2] = new Vector2f( (float) (x + 1) / _maxParts,  (float) y / _maxParts );

  _texCoords[3] = new Vector2f( (float) (x + 1) / _maxParts,  (float) (y + 1) / _maxParts );

}



So, just pass in which sub-image from the texture you want and get the texture coordinate array.

BTW -- probably want to pre-compute and store in a hashmap or somesuch.

Sorry, not sure if I really understand the code. I have created a single strip of 25 images (each of 16x16 size). My strip is 400x16. So I am creating an array of 25 Vector2f coords, starting from 0,0 and use the array index to find which image I want. I guess thats what you mean.



This may sound silly but after looking at UIBilboard just realised that altough it accepts an image I dont see how it can show only parts of that image. The method seems to accept x,y coords and calculates the width and height automatically which I think are Width and height of the bigger image. (!)



tomcat

UIBillboard does only show 1 image, take a look at UICharacter and UIText for examples of spliting up an image.



UICharacter uses texture coordinates in it’s constructor (so I guess that UICharacter is just a UIBillboard with the ability to show only part of the texture.)



UIText divides up the font image intio 256 (16x16) parts.

:// you are right. Should have looked there.

tomcat