javajavafxtransparencygame-engineimage-rendering

Javafx image not rendering properly


I was trying to render a animated gif from a old game called Age Of Empires...and the gif renders oddly with black instead of transparent... the gif is any gif from http://ageofempiresgif.altervista.org/en/archive.php


Solution

  • Issue replicated

    I can replicate the incorrect rendering of the Age of Empires gifs on my machine (Java8b111, Win7, ATI Radeon HD 4600).

    blackknight

    Issue tracked in JavaFX Issue Tracker

    Issue is RT-23233 GIF frames have incorrect background (sign-on is required, but anybody can sign-up and at the provided link and view the issue detail). The issue is scheduled for implementation in a post Java 8 release.

    The cause is that JavaFX strictly adheres to the gif specification whereas most gif rendering implementation (e.g. all common browsers) are more permissive and thus render the image differently ("correctly"). The linked RT-23233 is a request to relax the implementation of the JavaFX gif renderer so that it will render gifs such as the Age of Empires gifs correctly.

    Sample program that replicates the issue just using an ImageView

    import javafx.application.Application;
    import javafx.scene.*;
    import javafx.scene.image.*;
    import javafx.stage.Stage;
    
    public class AOE extends Application {
        @Override public void start(final Stage stage) throws Exception {
            stage.setScene(
                new Scene(
                    new Group(
                        new ImageView(
                            new Image(
                                "http://ageofempiresgif.altervista.org/33995109.gif"
                            )
                        )
                    )
                )
            );
            stage.show();
        }
    
        public static void main(String[] args) { launch(AOE.class); }
    }
    

    Sample program that replicates the issue just using a WebView

    import javafx.application.Application;
    import javafx.scene.*;
    import javafx.scene.web.WebView;
    import javafx.stage.Stage;
    
    public class AoEWebView extends Application {
        @Override public void start(final Stage stage) throws Exception {
            WebView webView = new WebView();
            webView.getEngine().load("http://ageofempiresgif.altervista.org/en/archive.php");
    
            stage.setScene(
                    new Scene(
                            new Group(
                                webView
                            )
                    )
            );
            stage.show();
        }
    
        public static void main(String[] args) { launch(AoEWebView.class); }
    }
    

    Sample page rendered in JavaFX WebView

    webviewimages

    Sample page rendered in Firefox

    firefoximages