PlayStation?Mobile Development Cookbook
上QQ阅读APP看书,第一时间看更新

"Hello World" drawing text on an image

This recipe dynamically creates and displays a texture with text created using the imaging APIs.

Getting ready

This recipe builds on the code from the last recipe. Add the following using statement to the beginning of the program code:

using Sce.PlayStation.Core.Imaging

For the complete source code for this example, see Ch1_Example3.

How to do it...

  1. In the Initialize() function, instead of loading a texture from the file, we will create one using the following code:
    Image img = new Image(ImageMode.Rgba,new ImageSize(500,300),new ImageColor(0,0,0,0));
    img.DrawText("Hello World", 
       new ImageColor(255,255,255,255),
       new Font(FontAlias.System,96,FontStyle.Italic),
       new ImagePosition(0,150));
    _texture = new Texture2D(500,300,false,PixelFormat.Rgba);
    _texture.SetPixels(0,img.ToBuffer());
  2. Next, update the Render() method in the following code in which the bolded portions represent the changes:
    public static void Render (){
     _graphics.SetClearColor (0.0f, 0.0f, 0.0f, 0.0f);
     _graphics.Clear ();
     
     var worldViewProjection = _projectionMatrix * _viewMatrix * _localMatrix;
     _textureShaderProgram.SetUniformValue(0,ref worldViewProjection);
     
                    
     _graphics.SetShaderProgram(_textureShaderProgram);
     _graphics.SetVertexBuffer(0,_vertexBuffer);
     _graphics.SetTexture(0,_texture);
     
     _graphics.Enable(EnableMode.Blend);
     _graphics.SetBlendFunc(BlendFuncMode.Add, BlendFuncFactor.SrcAlpha, BlendFuncFactor.OneMinusSrcAlpha);
     _graphics.DrawArrays(DrawMode.TriangleFan,0,4);
     
     _graphics.SwapBuffers ();
    }

How it works...

Instead of loading a texture from an image file, we create an image dynamically. In the Image constructor, we pass the type of image we want created, the dimensions and the background color to fill it with.

Next, we draw on our newly created image using the DrawText() function, which takes as parameters the text to draw, the color to draw it in, the font to use (there is only one option, System) and the position to draw the text at. We then create a Texture2D object to hold our image. We pass its constructor the image dimensions, whether we want to generate a mipmap or not, as well as the pixel format to use. Finally, we assign the pixel data to our _texture object by calling SetPixel() function and passing in a byte array generated by calling ToBuffer() function on our image.

We had to make the change to the Render() method to support blending using the alpha channel, or background would not be properly visible through the transparent portions of the text. Run the code again without EnableMode.Blend enabled and your text will be illegible.

Now if we run our application, we will see the following screenshot:

How it works...

There's more...

You can also load a font by name instead of using the built in system font. If you need precise control over your text positioning or size, be sure to check out the FontMetrics and CharMetrics classes in the documentation.