Now let's see what we need to create an application that will be used on a computer without an internet connection. We have to store our image somewhere on the computer.

Cinder has a predefined way of handling images and similar assets. If you created your project with TinderBox, you may have noticed that you have an assets directory in your project folder. If not, create one.

Now copy your image file into the assets directory and change the loadImage code in the setup() implementation to the following:

imgTexture = gl::Texture( loadImage( loadAsset( "MyImage.png" ) ) );

As you can see we changed loadUrl() to loadAsset() and it actually seems simpler than the loadUrl( Url( "http://..." ) ) approach. It's just that we do need to take care of our assets by ourselves.

Now try to move the assets directory one level up in the filesystem so it is next to the BasicImages folder as shown in the following screenshot:

Try to compile and run our project and you will be surprised that the image still loads! Some people may think that this is the magic of caching or something similar but no, Cinder just automatically searches for the assets directory up to five levels above the executable. So you can choose at what level you want to store your assets, but in a way the default way may be the best as it allows you to use the same assets for your Mac OS X and Windows projects. If you are working on more than one project with the same assets, then you may move your assets directory to the projects folder level as we just did.

There is one small detail to it—if your image uses alpha transparency, you might get strange results. To draw images with alpha transparency, we have to enable alpha blending before drawing the image and disable it after it is drawn by adding the following code snippet:

gl::enableAlphaBlending();
gl::draw( imgTexture, Rectf(100,100,540,380) );
gl::disableAlphaBlending();

There is also a way of adding additional asset directories in case you have more than one group of projects using the same assets. The following line of code takes care of that:

addAssetDirectory( "/Users/You/myOtherAssets/" );

Note that you have to use an absolute path here, so this is not too good for cross-platform projects. In windows you might write something similar to the following:

addAssetDirectory( "C:UsersYoumyOtherAssets" );

If you use assets, you have to remember to deploy the assets directory with your application.

There is a way that tells you how to include assets inside the application, but this topic is a bit outside the scope of this book. You should search the Internet for "Cinder resource management" if you want to know more about it.

The following is the full code of the application that we made in this chapter:

#include "cinder/app/AppBasic.h"
#include "cinder/gl/gl.h"
#include "cinder/ImageIo.h"
#include "cinder/gl/Texture.h"

using namespace ci;
using namespace ci::app;
using namespace std;

class BasicImagesApp : public AppBasic {
public:
  void setup();
  void draw();
  gl::Texture imgTexture;
};

void BasicImagesApp::setup() {
  addAssetDirectory( "/Users/kr15h/myOtherAssets/" );
  imgTexture = gl::Texture( loadImage( loadAsset( "MyImage.png" ) ) );
}

void BasicImagesApp::draw() {
  gl::clear( Color( 0, 0, 0 ) );
  gl::enableAlphaBlending();
  gl::draw( imgTexture, Rectf(100,100,540,380) );
  gl::disableAlphaBlending();
}

CINDER_APP_BASIC( BasicImagesApp, RendererGl )

Not a lot of code!