Cache:true ... otro detalle para mejorar el rendimiento gráfico

Si, por ejemplo, utilizas una figura con una gradiente -o sombra- como fondo de un área, es mejor agregar a esa figura el parámetro cache:true, de manera de evitar que el objeto sea re-dibujado con cada cambio que se realiza por encima de él (en el caso de una gradiente, debe volver a recalcular y redibujar cada franja de color que conforma la transición entre los colores... lo que resulta sumamente "caro" en términos de procesamiento).

El código al pie del artículo

Al agregar cache:true se le indica al sistema que debe generar la imagen una vez y guardarla en cache, de esta menera, cuando se realiza un cambio sobre ella, sólo recupera la imagen desde una copia almacenada en memoria (como bytes) y pinta los cambios encima, lo que resulta sumamente rápido y menos "costoso" en ciclos de procesamiento.

En todo caso, no debes utilizar cache:true cuando la imagen va a cambiar con frecuencia, porque esto sólo producirá que sea re-generada con cada cambio, pero además almacenada, lo que da por resultado un proceso mucho más "costoso". El cache:true debe ser utilizado en imágenes que NO cambian frecuentemente.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.scene.effect.DropShadow;

var px:Number;
var py:Number;
Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse:true
    keyFrames : [
        KeyFrame {
            time : 0s
            values: [px=>100, py=>100]
        }
        KeyFrame {
            time : 3s
            canSkip : true
            values: [px=>1180, py=>680]
        }
    ]
}.play();

var angle:Number;
Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse:true
    keyFrames : [
        KeyFrame {
            time : 0s
            values: [angle=>0]
        }
        KeyFrame {
            time : 1.5s
            canSkip : true
            values: [angle=>360]
        }
    ]
}.play();

Stage {
    title: "Application title"
    width: 1024
    height: 768
    scene: Scene {
        content: [
            Rectangle {
                cache:true
                x: 0, y: 0
                width: 1280, height: 768
                fill: LinearGradient {
                    startX : 0.0
                    startY : 0.0
                    endX : 1.0
                    endY : 0.0
                    stops: [
                        Stop {
                            color : Color.BLACK
                            offset: 0.0
                        },
                        Stop {
                            color : Color.BLUE
                            offset: 1.0
                        },

                    ]
                }
                effect: DropShadow { offsetX:10, offsetY:10 }
            }
            Rectangle {
                x: bind px, y: bind py
                width: 200, height: 200
                fill: Color.RED
                rotate: bind angle
            }

        ]
    }
}

JavaFX: Pelota 3D con sombra rebotando sobre video

Ok, solo para que vayan descubriendo el poder de JavaFX. Ayer yo no sabía NADA de JavaFX script. Luego de jugar unas pocas horas, ya tengo este ejemplo: Una "habitación" que tiene en el piso un VIDEO y sobre el cual rebota una bola de apariencia 3D, que incluso se aleja del frente de la pantalla y que proyecta una sombra que varia tanto en intensidad como tamaño dependiendo de la altura a la que se encuentra la bola.



Por ahora sólo les dejo el código. Más adelante postearé otro artículo con la explicación del mismo.

Atención: este ejemplo requiere el mediacomponent.jar entre los Libraries del proyecto. Si crean un proyecto demo basado en el SimpleMediaPlayer (incluido con Netbeans 6.5) y luego reemplanzan el código de Main.fx, la biblioteca mediacomponent.jar quedará incluida en el proyecto automáticamente. Si no, tienen que buscar donde se encuentra en su disco la biblioteca e incluirla entre los libraries del proyecto haciendo click con el botón derecho del mouse en Libraries (a la izquierda en Netbeans) y seleccionado Add Library... (ahí tienen que decirle donde está el archivo). Pero como les digo, lo más fácil es comenzar con un proyecto de ejemplo de mediaplayer y reemplazar el código de Main.fx por el código que incluyo a continuación:

package simplevideoplayer;

import javafx.stage.Stage;
import javafx.scene.Scene;
import com.sun.fxmediacomponent.*;
import javafx.scene.Group;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.scene.paint.Stop;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.shape.Ellipse;
import javafx.scene.paint.*;
import javafx.scene.effect.*;
import javafx.scene.transform.*;
import javafx.scene.shape.Line;


var mediaUrl:String = "http://sun.edgeboss.net/download/sun/media/1460825906/1460825906_2956241001_big-buck-bunny-640x360.flv";
if(FX.getArgument("mediaURL")!=null) {
  mediaUrl = FX.getArgument("mediaURL").toString();
}

def vidWidth = 1024;
def vidHeight = 576;

var X=0;
var Y=1;
var Z=0;
var VX=230; // perspectiva horizontal para video
var VY=376; // perspectiva vertical para video
var S:Number;

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {X => 100},
  at (2.3s) {X => 924 tween Interpolator.LINEAR},
]
}.play();


Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {Y => 100},
  at (0.5s) {Y => 476 tween Interpolator.EASEIN},
]
}.play();


Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {Z => 40},
  at (10s) {Z => 100 tween Interpolator.LINEAR},
]
}.play();


Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {S => 0.5},
  at (0.5s) {S => 1 tween Interpolator.EASEIN},
]
}.play();


var mediaBox:MediaComponent = MediaComponent {
  // set the media and make the component visible
  mediaSourceURL : mediaUrl
  visible:true
  // the position and size of the media on screen
  translateX: 0
  translateY: 0
  mediaViewWidth : vidWidth
  mediaViewHeight: vidHeight
  // determines if the control bar is below the media or on top with a fade in
  staticControlBar: false
  // make the movie play as soon as it's loaded
  mediaPlayerAutoPlay: true
  // set the volume
  volume: 1.0

  effect: PerspectiveTransform {
      ulx: bind VX        uly: bind VY
      urx: bind 1024-VX   ury: bind VY
      lrx: 1024           lry: 576
      llx: 0              lly: 576
  }
};


// Currently these variables have to be set after the component is created

// Description to be displayed when the mouse is over the component
mediaBox.mediaDescriptionStr = "A well-tempered rabbit finds his day spoiled by the rude actions of the...";
// Duration to be displayed when the mouse is over the component
mediaBox.mediaDurationStr = "9:56";
// Title to be displayed when the mouse is over the component
mediaBox.mediaTitleStr = "Big Buck Bunny";


Stage {

 title: "Simple Media Player"

 scene: Scene{

     width: vidWidth
     height: vidHeight

     stylesheets: [
        MediaComponent.css_skins
     ]

     content: [

         mediaBox,

         Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind VX
              startY: bind VY
              endX:   0
              endY:   576
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind VX
              startY: bind VY
              endX:   bind VX
              endY:   0
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind VX
              startY: bind VY
              endX:   bind 1024-VX
              endY:   bind VY
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind 1024-VX
              startY: bind VY
              endX:   bind 1024-VX
              endY:   0
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind 1024-VX
              startY: bind VY
              endX:   1024
              endY:   576
        }


         Ellipse {
             centerX: 0, centerY: 0 radiusX: 100 radiusY: 30
             fill: Color.BLACK
             opacity: bind S - 0.2
             fill: RadialGradient {
                 proportional: false  radius: 100
                 centerX: 0  centerY: 0
                 focusX: 0  focusY: 0
                 stops: [
                     Stop { offset: 0.0  color: Color.web("#333333", 1.0) },
                     Stop { offset: 0.4  color: Color.web("#444444", 1.0) },
                     Stop { offset: 1.0 color: Color.web("#FFFFFF", 0.0) }
                 ]
             }
             transforms: bind [
                 Transform.translate(X , 476 + Z - 100 + Z / 2)
                 Transform.scale(S * Z / 100.0, S * Z / 100.0)
             ]
         }

         Circle {
             centerX: 0  centerY: 0  radius: 100
             stroke: Color.BLACK
             fill: RadialGradient {
                 proportional: false  radius: 100
                 centerX: 0  centerY: 0
                 focusX: 20  focusY: -50
                 stops: [
                     Stop { offset: 0.0  color: Color.WHITE },
                     Stop { offset: 0.85 color: Color.RED },
                     Stop { offset: 1.0  color: Color.BLACK }
                 ]
             }
             transforms: bind [
                 Transform.translate(X , Y + Z - 100)
                 Transform.scale(Z/100.0, Z/100.0)
             ]

         }

    ]

 }

}