PFont background transparency

NightMarcher

I have constructed a PGraphic that contains text. When the user mouses over the text the text scrolls to the right. Everything works great except that the text has a background color (defined by a box surrounding each letter). Can someone tell me how to make the background of each letter transparent? For some reason I cannot get it to work. I am using Processing 1.5.1

Here is what I have so far: (you will have to add your own font)

    private int textX, textY;
    private int rectWidth, rectHeight;
    private int rectX, rectY;
    private int textSpeed = 1;
    private PFont dFont;
    private PGraphics textBox;
    //private PImage back;
    private boolean rectOver = false;

    void setup()
    {  
      rectWidth = 500;
      rectHeight = 100;
      textX = 0;
      textY = rectHeight/2;
      rectX = 10;
      rectY = 10;
      smooth();

      size(rectWidth+50, rectHeight+50);

      //  back = loadImage("123.png");
      dFont = loadFont("HelveticaNeueLT-Light-50.vlw");

      textSize(48);
      textAlign(LEFT);

      textBox = createGraphics(rectWidth, rectHeight, P2D);
    }

    void draw()
    {
      int rectWidth = 500;
      int rectHeight = 50;
      background(150, 0, 0);
      fill(100);

      String sc = "ASDFASDFSkjhkjjkhgkjhgkhhdf";
      update();


      if (textWidth(sc) > rectWidth && rectOver)
      {
        textX -= textSpeed;

        if (textX < -textWidth(sc))
        { 
          textX = rectWidth;
        }
      }
      else
      {
        textX = rectX;
      }

      //  image(back, 0, 0);

      textBox.beginDraw();
      textBox.hint(ENABLE_NATIVE_FONTS);
      //    textBox.noStroke();
      textBox.colorMode(HSB);
      textBox.textFont(dFont);
      textBox.background(0, 0);
      textBox.fill(255, 100);
      textBox.text(sc, textX, textY);
      textBox.endDraw();
      image(textBox, rectX, rectY);
    }

    public boolean overRect(int x, int y, int width, int height)
    {
      if (mouseX >= x && mouseX <= x+width && mouseY >= y && mouseY <= y+height) 
      {
        return true;
      } 
      else 
      {
        return false;
      }
    }

    public void update() 
    {  
      if (overRect(rectX, rectY, rectWidth, rectHeight))
      {
        rectOver = true;
      }
      else 
      {
        rectOver = false;
      }
    }

PhiLho

textBox.hint(ENABLE_NATIVE_FONTS);

IIRC, this just doesn't work. If you want native, vectorial font, use createFont() instead of loadFont().

NightMarcher

@PhiLho I added textBox.hint(ENABLE_NATIVE_FONTS) after reading another blog post. I should have commented that out before posting this question. Is it possible to use loadFont() and have the background of the text be transparent or am I forced to use creatFont() to get this effect?

NightMarcher

@PhilLho as a test I tried to implement the same code with createFont() and I am still getting the weird blocks around my text. This is what I am seeing:

PhiLho

I see. I think it is a bug in P2D rendering, which has been abandoned in 2.0 anyway. Just replace P2D with JAVA2D in the createGraphics() call.

NightMarcher

@PhiLho YES!! That fixed it. Thanks so much for your help!!