Customize preloader html5 : different background image?

Help
#21

Any chance these two problems will be fixed in nearest future? :slight_smile:

#22

Sorry for the delay, on the latest development build, I was able to fix the preloader by removing back.width = w; and back.height = h from your preloader code. Initially on HTML5, BitmapData is not fully loaded, so the bitmapData.width and height are each zero. Setting bitmap.width and height applies a scale, which ends up creating trouble. Open to ideas if this can be handled better somehow. Otherwise, you should be able to Assets.loadBitmapData (with a non-embedded asset, perhaps of a different asset library of some kind?) or the simpler BitmapData.loadFromFile, which provides a callback so you can manage your image after it’s fully loaded, when this code is guaranteed to work. I didn’t see an issue with the sound, at least on this machine

Preload image bug of HTML5 version with DPI != 1
#23

Your majesty :wink: , am I right saying that we can’t load preloader graphics(progress bar etc) prior to loading other libraries marked for preload (html5)?
As far as I understand and samples posted here… we can start loading “preloader” lib, but it will be loaded in parallel with the openfl.display.Preloader work (or whatever is using it) .

Also I was hoping that embed=“true” would make it loaded prior to preload=“true” marked libs
but no luck with that.
It would be nice to have a callback or event, to handle that, like hey all embeds loaded))
or some hook to suspend (keep from starting) the main load process,
load our “preload” lib and then let it continue with our marvelous progress bar on screen already

thanx!)

#24

Hmm, yes, it is possible that it would get stuck in the preload queue behind other assets. Another alternative would be to use BitmapData.loadFromFile directly, I’m not sure if that would avoid the queue and load immediately?

EDIT: Perhaps you could try modifying this value:

Try a super-high value, and see if it behaves differently

#25

In my project, I use:

@:bitmap("Assets/some.png") class Background extends BitmapData {}

class SomePreloader extends Sprite {
    public function new() {
        super();

        this.addChild(new Bitmap(new Background(0, 0)));
    }
}

This class is then set as preloader in project.xml file. Works perfectly fine.

#26

Displaying Base64 Encoded Images in OpenFL Using BitmapData.loadFromBytes

If you need to display an image stored as a base64 string directly in your OpenFL project, this guide walks you through how to decode and display it using the asynchronous BitmapData.loadFromBytes method. This approach is especially useful when you want to avoid using external assets and load images dynamically.

Here’s the complete code:

package;

import haxe.Timer;
import openfl.display.Sprite;
import openfl.events.Event;
import openfl.events.ProgressEvent;
import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.utils.ByteArray;
import haxe.crypto.Base64;

class Preloader extends Sprite {
    public function new() {
        super();

        // Insert your base64-encoded PNG image string here
        var base64Image:String = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4...";
        var base64Data = base64Image.split(",")[1];

        // Decode the base64 string to bytes
        var imageBytes:ByteArray = Base64.decode(base64Data);
        trace("Decoded byte size: " + imageBytes.length);

        // Load the BitmapData asynchronously from bytes
        BitmapData.loadFromBytes(imageBytes).onComplete(function(bitmapData:BitmapData) {
            if (bitmapData != null) {
                trace("BitmapData created successfully.");
                var bitmap:Bitmap = new Bitmap(bitmapData);
                addChild(bitmap);
                bitmap.x = 0;
                bitmap.y = 0;
            } else {
                trace("Failed to create BitmapData.");
            }
        }).onError(function(error) {
            trace("Error loading BitmapData: " + error);
        });

        addEventListener(Event.COMPLETE, this_onComplete);
        addEventListener(ProgressEvent.PROGRESS, this_onProgress);
    }

    private function update(percent:Float):Void {
        graphics.clear();
        graphics.beginFill(0x1F9DB2);
        graphics.drawRect(0, 120, stage.stageWidth * percent, stage.stageHeight);
    }

    private function this_onComplete(event:Event):Void {
        update(1);
        event.preventDefault();
        Timer.delay(function() {
            dispatchEvent(new Event(Event.UNLOAD));
        }, 2000);
    }

    private function this_onProgress(event:ProgressEvent):Void {
        if (event.bytesTotal <= 0) {
            update(0);
        } else {
            update(event.bytesLoaded / event.bytesTotal);
        }
    }
}

Explanation of the Code

  1. Decoding Base64: We use Base64.decode to convert the base64 image string into a ByteArray.

  2. Loading the Image Asynchronously: By calling BitmapData.loadFromBytes(imageBytes), the image is processed asynchronously. If successful, we receive a BitmapData object in the onComplete callback.

  3. Adding the Image to the Stage: Once BitmapData is successfully created, we add it as a Bitmap to the display list.

  4. Error Handling: If anything goes wrong during loading, an onError callback provides details about the error.

Why Use BitmapData.loadFromBytes?

This approach is effective for dynamically loading base64 images, avoiding direct assets. Using loadFromBytes asynchronously ensures smooth handling of data in memory, which might not always work with BitmapData.fromBytes.

Where This Could Be Useful

This solution is ideal for OpenFL projects where images are dynamically generated, stored in base64, or need to be embedded directly within the code. Feel free to use and modify this code in your own projects!

1 Like