[Solved][Slick2D] Bit Background

Vladiedoo

Senior Member

Medals: 11

[Solved][Slick2D] Bit Background

« Posted 2012-09-30 23:46:21 »

Hi, for my main menu I'm trying to create an animated background similar to the Matrix green code but for binary. I currently draw a bunch of UnicodeFont Strings onto the screen but I recently found out that it's an expensive operation. Here is a screenshot.

Here is the code I use to draw it. Sorry for the code being so messy, essentially it randomizes every aspect of the binary numbers and draws it, setting the x position back to the start of the screen once it has flown off.

1
2
3
4
5
6
7
8

   // Number of lines to draw, currently 300 for stress testing.
   private int number_Of_Lines = 300;

   private StringBuffer background[] = new StringBuffer[number_Of_Lines];
   private int xArray[] = new int[number_Of_Lines];
   private int xSpeed[] = new int[number_Of_Lines];
   private int alpha[] = new int[number_Of_Lines];
   private float randomSize[] = new float[number_Of_Lines];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

public void init() {
      Random dice = new Random();
      for (int i = 0; i < xArray.length; i++) {
         background[i] = new StringBuffer();
         if (i == 0) {
            xArray[i] = 800;
         } else {
            xArray[i] = dice.nextInt(900) + 800;
         }
         xSpeed[i] = dice.nextInt(20) + 1;
         alpha[i] = dice.nextInt(200) + 56;
         randomSize[i] = dice.nextFloat() + .3f;
         for (int j = 0; j < 120; j++) {
            if (dice.nextInt(2) == 0) {
               background[i].append('0');
            } else {
               background[i].append('1');
            }
         }
      }
   }

1
2
3
4
5
6
7
8
9
10
11
12
13

   public void render(GameContainer gc, StateBasedGame sb, Graphics g) {
      // Using regular g.drawString works much faster
      // If I set the font though, it also slows down
      
//      g.setFont(FontManager.smallDefaultFont);
      for (int i = 0; i < xArray.length; i++) {
         g.scale(randomSize[i], randomSize[i]);
         FontManager.smallDefaultFont.drawString(xArray[i], FontManager.smallDefaultFont.getHeight("1") * i, background[i].toString(), new Color(76, 256, 0,
               alpha[i]));
//         g.drawString( background[i].toString(),xArray[i], FontManager.smallDefaultFont.getHeight("1") * i);
         g.resetTransform();
      }
   }

1
2
3
4
5
6
7
8
9
10
11
12

public void update(GameContainer gc, StateBasedGame sb, int delta) {
      for (int i = 0; i < xArray.length; i++) {
         if (i == 0) {
            xArray[i] -= 5;
         } else {
            xArray[i] -= xSpeed[i];
         }
         if (xArray[i] < -xArray.length * 9) {
            xArray[i] = 800 + xArray.length * 9;
         }
      }
   }

I'm wondering why using UnicodeFont is so expensive. Should I just use images for the background or should I create a good algorithm?

davedes

JGO Wizard

Medals: 132
Projects: 1

Re: [Slick2D] Bit Background

« Reply #1 - Posted 2012-10-01 01:02:02 »

The main reason it's slow is because each line/string is drawn using separate glBegin/glEnd calls to OpenGL. Basically this means each string of text is being pushed to the GPU individually. In order to improve performance, you would send all of the lines of text in a single batch. In Slick, the general way to resolve this is by using startUse/drawEmbedded/endUse -- but this is only available for images (and by extension AngelCodeFont, which has the glyph class exposed).

Also note that there is a strange bug/limitation/quirk on certain Macs which can greatly increase unicode font loading time.

There is no need to use Strings or UnicodeFonts to achieve this effect, though. The best way to do this is to use a sprite sheet image containing the various glyphs (in this case "0" and "1"), and render each glyph using drawEmbedded.

1
2
3
4
5
6
7

glyphSheet.startUse();

... for each glyph in your entire background ...
    Image glyph = getRandomGlyph();
    glyph.drawEmbedded(...);

glyphSheet.endUse();

mattdesl

my tutorials for OpenGL / LWJGL / LibGDX / GLSL

Vladiedoo

Senior Member

Medals: 11

Re: [Slick2D] Bit Background

« Reply #2 - Posted 2012-10-01 01:15:01 »

I'm still learning the basics of OpenGL but I would of thought glBegin/glEnd to be fast since it's a "low level" operation.

.startUse() on a SpriteSheet is also new to me Shocked

, I'm assuming it's going to speed up all my SpriteSheet drawings (I have a good amount). Edit -> Yeah it's going to speed it up by a lot.

Thank you so much, this really helps.

Games published by our own members! Check 'em out!

davedes

JGO Wizard

Medals: 132
Projects: 1

Re: [Solved][Slick2D] Bit Background

« Reply #3 - Posted 2012-10-01 09:16:31 »

For more details, code samples, etc:
http://slick.cokeandcode.com/wiki/doku.php?id=performance_memory_tips

mattdesl

my tutorials for OpenGL / LWJGL / LibGDX / GLSL

Pages: [1]

ignore | Print