jsGFwk se va a Windows Phone 8

austin

jsGFwk sigue creciendo, evolucionando. Ahora, de la mano de Windows Phone 8 y el soporte que brinda sobre HTML5, sumado a que ya contamos con plantillas de desarrollo con un navegador embebido, crear juegos para el celular escribiendo en JavaScript y con jsGFwk resulta muy fácil.

Veamos, entonces, los pasos que necesitamos para poder crear un juego en Windows Phone 8.

 

El entorno

Lo primero que debemos hacer es crear una nueva aplicación para Windows Phone 8 del tipo Windows Phone HTML5 App.

image

Visual Studio creará para nosotros la carcasa de desarrollo.

Una vez creado el proyecto, notaremos que nos el mismo consta de dos partes principales. La primera, una vista XAML con un navegador embebido; la segunda una carpeta con una página HTML y una hoja de estilo.

image
Para este caso, ya hemos incluido jsGFwk dentro de la carpeta de scripts.

Con lo anterior, colocaremos todos los archivos de jsGFwk dentro de la carpeta HTML. De esta forma tendremos todas las librerías disponibles.

Configuraciones

Tendremos que hacer algunos cambios al código que genera Visual Studio por defecto. Esto para garantizar que el juego se vea a pantalla completa y que no se pierda el foco en el mismo cuando el usuario presiones sobre la pantalla.

Lo primero que haremos será comentar el nodo PhoneApplicationPage.ApplicationBar en la vista XAML MainPage.xaml.

<!–<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible=”True” IsMenuEnabled=”True” Mode=”Minimized”>
            <shell:ApplicationBarIconButton IconUri=”/Assets/AppBar/appbar.back.rest.png” IsEnabled=”True” Text=”back” Click=”BackApplicationBar_Click”/>
            <shell:ApplicationBarIconButton IconUri=”/Assets/AppBar/appbar.next.rest.png” IsEnabled=”True” Text=”forward” Click=”ForwardApplicationBar_Click”/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text=”home” Click=”HomeMenuItem_Click” />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>—>

El segundo cambio que realizaremos será en la hoja de estilos phone.css. Dentro de la clase body agregaremos -ms-touch-action: none;. Esto prevendrá el desplazamiento de la superficie del juego si el usuario interactúa con ella.

Nuestra clase body debería verse como la siguiente:

body {
    font-size: 11pt;
    font-family: “Segoe WP”;
    letter-spacing: 0.02em;
    background-color: #000000;
    color: #ffffff;
    margin: 0px;
    padding: 0px;
    -ms-touch-action: none;
}

El entorno del juego

Con lo anterior, ya estamos en posición para desarrollar nuestro juego. Ya que disponemos de la página index.html, colocaremos nuestro elemento canvas allí y haremos algo de código así como las importaciones de librerías.

Primero, importaremos las librerías.

<head>
        …
        <script type=”text/javascript” src=”/html/jsGFwk/jsGFwk.js”></script>
        <script type=”text/javascript” src=”/html/jsGFwk/jsGFwkBasicAnimation.js”></script>
        <script type=”text/javascript” src=”/html/jsGFwk/jsGFwkIO.js”></script>
        …
</head>

El siguiente paso será crear el elemento canvas y el código que le dará vida.

<canvas id=”canvas” width=”100″ height=”100″></canvas>
        <script type=”text/javascript” language=”javascript”>
            var GLOBALS = {
                screen: { width: screen.width, height: screen.height }
            };
            var canvas = document.getElementById(“canvas”);
            canvas.width = GLOBALS.screen.width;
            canvas.height = GLOBALS.screen.height;

            jsGFwk.settings.canvas = “canvas”;
            jsGFwk.settings.clearColor = “red”;
            jsGFwk.include(“BasicAnimation”);
            jsGFwk.include(“IO”);

            jsGFwk.createObject({
                id: “ball”,
                x: 10,
                y: 10,
                zOrder: 2,
                visible: true,
                init: function () {
                    jsGFwk.IO.mouse.registerClick(function (coord) {
                        jsGFwk._gameObjects.ball.x = coord.x;
                        jsGFwk._gameObjects.ball.y = coord.y;
                    });
                },
                update: function (delta) {

                },
                draw: function (context) {
                    context.fillStyle = “rgb(255,255,255)”;
                    context.fillRect(this.x, this.y, 10, 10);
                }
            });

            jsGFwk.start();
        </script>

En el ejemplo dibujamos un rectángulo que reaccionará en base al lugar donde presionemos con el dedo.

image

Si bien el ejemplo resulta simple, tanto las pruebas en emuladores como en dispositivos físicos han dado resultados de alto rendimiento.

A pesar de que la idea original del framework era mantenerse pequeño y experimental, cada vez más se está abriendo paso a nuevos horizontes, y esto es una prueba de ello.

Si quieres descargar y probar jsGFwk: https://github.com/MatiasIac/jsGFwk



Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s