Rendering 2D Images

The Untold Engine supports the rendering of 2D images. The engine refers a 2D image as a U4DEngine::U4DImage object.

Rendering a 2D image

To render a 2D image, you first instantiate a U4DEngine::U4DImage object as shown in line 1.

Next, provide the name of the image you want to render and the desired dimension for the image (line 2). In this case, I want to render an image called “spaceinvader.png” which is stored in the Untold Engine’s Resource folder.

The image object is then added to the scenegraph (line 3).

Since the demo has a skybox, I’m setting the z-depth in the addChild method to -2. The z-depth provides the rendering order.

Finally, the image is translated 0.5 units up and to the left (line 4). Recall that the coordinate system for 2D objects is different than for 3D objects. For 2D objects, the coordinate system ranges between [-1.0,1.0].

//Line 1. Create an instance of U4DImage
U4DEngine::U4DImage *myImage=new U4DEngine::U4DImage();

//Line 2. Set the image to use and the desired width and height

//Line3. Add the image to the scenegraph. Since the demo has a skybox, I'm setting the z-depth to -2

//Line 4. Translate the image

Here is an example of the result:



  • To properly render an image, the 2D image needs to be flipped vertically as shown below. In this instance, I use Gimp to flip the .png file vertically.


  • To properly render an image, the image must be saved in the Untold Engine’s Resources folder. It must then be dragged into Xcode as shown below: