Archivo

Entradas Etiquetadas ‘video’

¿Qué hacer mientras esperamos que Halo Reach beta arranque?

Lunes, 3 de mayo de 2010
Sin comentarios

Downloading Halo Reach Beta
Bajándome el Beta, como otro de los millones de fanáticos de este juego

Bueno, ya a esta hora el beta de Halo Reach está en pleno apogeo. Los gráficos simplemente no decepcionan, aunque como buen beta tiene varias verrugas (el servidor se cayó en más de una ocasión, los controles son un poco distintos, etc). Pero en general, se ve prometedor.

Para celebrar, les invito a que corran esta aplicación escrita en JavaFX, la cual escribí para la ocasión: HaloWeb.

Si les gusto les puedo explicar el código a continuación:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219

package haloweb;
 
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.scene.shape.Rectangle;
import javafx.scene.effect.DropShadow;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.scene.control.Button;
import javafx.scene.control.Tooltip;
import javafx.scene.Cursor;
 
var isPlaying = false;
 
var currentCursor = Cursor.WAIT;
 
/**
 * Simple application that plays a Halo Reach video while doing other eye candy
 * effects, or an excuse to do something while Bungie keeps rebooting the Halo
 * Reach Beta every 10 minutes :)
 * @author josevnz at kodegeek dot com, http://kodegeek.com/
 * License: BSD
 */
 
 
def const = Constants {
    videoUrl: "http://download.halowaypoint.com/content/waypoint/assets/videos/web/032373081197/Halo_Reach_Multiplayer_Trailer_ESRB_360p_ST.wmv";
    backgroundUrl: [
        "http://www.bungie.net/images/Games/Reach/images/visualID/REACH_KeyArt_Horizontal_1920x1080.jpg",
        "http://www.bungie.net/images/Games/Reach/images/concept_art/ReachConcept_NobleTeam.jpg"
        ];
    width:800;
    height: 600;
}
 
 
def videoWidth = 640;
def videoHeight = 360;
 
def backImage1 = Image {
		url: const.backgroundUrl[0]
};
 
def backImage2 = Image {
		url: const.backgroundUrl[1]
};
 
var backOpacity: Number = 0.0;
 
// Animation to show transition between the two images
var backgroundTimeline = Timeline {
    keyFrames: [
        at(0s) {
        backOpacity => 0.0;
        },
        at(1s) {
        backOpacity => 1.0 tween Interpolator.LINEAR;
        }
    ]
};
 
// First background
var backgroundView1 = ImageView {
	image: backImage1
        fitHeight: const.height
        fitWidth: const.width
        preserveRatio: true
        opacity: 1.0
        clip: Rectangle {
            height:const.height
            width: const.width
            arcWidth: 50,
            arcHeight: 50
        }
        effect: DropShadow {
            offsetX:10
            offsetY:10
            color: Color.BLACK
        }
 
}
 
// Background with rollover
var backgroundView2 = ImageView {
	image: backImage2
        fitHeight: const.height
        fitWidth: const.width
        preserveRatio: true
        opacity: bind backOpacity
        clip: Rectangle {
            height:const.height 
            width: const.width
            arcWidth: 50,
            arcHeight: 50
        }
        effect: DropShadow {
            offsetX:10
            offsetY:10
            color: Color.BLACK
        }
 
        // The second image is added last, run transition from there
        onMouseEntered: function(event):Void {
            backgroundTimeline.rate = 1; // Forward
            backgroundTimeline.play();
        }
 
        onMouseExited: function(event):Void {
            backgroundTimeline.rate = -1; // Backwards
            backgroundTimeline.play();
        }
}
 
def video = Media {
		source: const.videoUrl
                onError: function(error):Void {
                    println("No se pudo cargar el video: {error.message}");
                }
	}
 
def videoPlayer = MediaPlayer {
	media : video
        autoPlay:false
        volume:0.6
        repeatCount: MediaPlayer.REPEAT_NONE
}
 
var isVisible: Boolean = false;
 
def haloVideoView = MediaView {
	preserveRatio: true
	mediaPlayer : videoPlayer
        visible:bind isVisible
        fitHeight: videoHeight;
        fitWidth: videoWidth;
        translateX: (const.width - videoWidth) / 2
        translateY: ((const.height - videoHeight) / 2) - 60 // Little hack here
 
        // Control the video replay
        onMousePressed: function(event):Void {
            if (isPlaying) {
                videoPlayer.pause();
            } else {
                videoPlayer.play();
            }
            isPlaying = not isPlaying;
            currentCursor = Cursor.DEFAULT
        }
 
        onMouseEntered:function(event): Void {
            if (not isPlaying) {
                currentCursor = Cursor.CROSSHAIR
            }
        }
 
        onMouseExited:function(event): Void {
            currentCursor = Cursor.DEFAULT
        }
 
}
 
// Prepare the glowing text
def kodegeekText = GlowingText {
    height: const.height
    width: const.width
    text: "http://KodeGeek.com/"
}
 
def exitButton = Button {
	text: "!Salir¡"
        translateX: const.width - (const.width * .10)
        translateY: 20
        visible: bind isVisible
	action: function() {
		FX.exit();
	}
        tooltip: Tooltip {
           text: "Haga click aquí para salir de esta aplicación"
        }
 
}
 
var videoTimeline = Timeline {
    keyFrames: [
        at (5s) {
            isVisible => true;
            currentCursor => Cursor.DEFAULT;
        }
    ]
}
 
 
// Show the final scene
Stage {
 
    title: "KodeGeek está emocionado con Halo Reach!"
    scene: Scene {
        width: const.width
        height: const.height
        fill: Color.TRANSPARENT
        content: [
            backgroundView1,
            backgroundView2,
            haloVideoView,
            kodegeekText,
            exitButton
        ]
        cursor: bind currentCursor;
    }
 
}
 
videoTimeline.play();

Básicamente tenemos 2 fondos (backgroundView1, backgroundView2) de los cuales uno de ellos tiene opacidad variable, la cual cambia en cuando el usuario pone el cursor del ratón en el área de la aplicación. Los otros elementos son el vídeo (haloVideoView, el cual se puede parar o arrancar al hacer click en este), un texto “que brilla” (kodegeekText, con super publicidad :) ), y botón que mata la aplicación (exitButton). Si usted tiene familiaridad con otros lenguajes como Flash o JavaScript entonces no debería tener problemas leyendo el código.

¿Como hacemos que el texto brille? Es sencillo, creamos un nodo a la medida el cual corre una animación infinita la cual tiene un efecto especial (Glow) sobre el texto (la variable del efecto cambia ya que le hacemos un ‘bind’ con el nivel de brillo):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

package haloweb;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.effect.Glow;
import javafx.scene.effect.Lighting;
import javafx.scene.effect.light.DistantLight;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
 
/**
 * Simple glowing text node
 * @author josevnz at kodegeek dot com, http://kodegeek.com/
 * License: BSD
 */
 
var glowLevel: Number = 1.0;
 
var glowTimeline: Timeline = Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [
        KeyFrame {
            time: 600ms
            values: [
                glowLevel => .7 tween Interpolator.EASEBOTH
            ]
        }
    ]
}
 
public class GlowingText extends CustomNode {
 
    public-init var width: Number;
    public-init var height: Number;
    public-init var text: String;
 
    public override function create() :Node {
 
        glowTimeline.play();
 
        Text {
            font : Font {
		size: 24
            }
            translateX: width - (width * 0.30)
            translateY: height - (height * 0.25)
            content: text
            fill: Color.DARKORANGE
            effect: Glow {
                level: bind glowLevel
                input: Lighting {
                    light: DistantLight {azimuth: -135}
                    surfaceScale: 3
                    diffuseConstant: 1.8
                }
            }
        }
   }
 
}

Y una clase de constantes que escribí para este programa. Inútil, en algún momento puliré más la aplicación:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package haloweb;
 
/**
 * Useful constant for the HaloWeb project
 * @author josevnz at kodegeek dot com, http://kodegeek.com/
 * License: BSD
 */
 
public class Constants {
    public-init var videoUrl: String;
    public-init var backgroundUrl: String [];
    public-init var width: Number;
    public-init var height: Number;
    public-init var backgroundWidth: Number;
    public-init var backgroundHeight: Number;
}

No me tomó mucho tiempo escribir el código, pero debo decir que NeBeans 6.9 es una porquería. A cada rató se caia, me daba errores por todos lados y su creador de interfaces gráficas tiene demasiados problemas. A la final armé la aplicación a pedal y bomba, como los machos :) . Por ahora no tengo intenciones de meter este código en Subversion, me da flojera. Avisenme si de verdad quieren este código y con gusto hago el esfuerzo ;)

Ahora los dejo, vamos a ver si el servidor de Bungie está funcionando para continuar jugando el nuevo beta :D

–Jose

java, javafx , , , ,