Displaying a Bitmap

Setup

You may find a completed “features/display/DisplayingABitmap” sample project for TypeScript, Haxe, ES6 or ES5 online, the following describes how to add and display a bitmap image from an empty project.

Run the following commands:

mkdir DisplayingABitmap
cd DisplayingABitmap
yo openfl

Add an Image File

The output of our project will be run from a directory called dist in the project structure, so adding any new image file in the dist directory will make it possible to load it in the project.

You can choose any image file you prefer, or download openfl.png and save it under dist.

Loading a Bitmap

Images are not available right away, but must be loaded to use them at runtime. There are multiple ways to load an image from file, including openfl.display.Loader or the OpenFL asset library system, but using BitmapData.loadFromFile is one of the most straightforward.

Add the following imports to the top of your app.ts, app.js or App.hx file, depending upon the language you chose when you generated your project:

BitmapData.loadFromFile is a method to load a single bitmap, and returns an openfl.utils.Future. An OpenFL Future accepts callbacks for progress (onProgress (function (bytesLoaded, bytesTotal) {})), errors (onError (function (error) {})) as well as completion (onComplete (function (value) {})).

In this case, we are receiving an openfl.display.BitmapData object of our image file. Once it is loaded as a bitmap, we can get pixels, change pixels, copy pixels between images, or for this sample, render it.