Lumberyard
Guía del usuario (Version 1.20)

Introducción al desarrollo de juegos en Cloud Gem Portal

Para ayudarle a comenzar con tareas de desarrollo de juegos en Cloud Gem Portal (CGP), en este tutorial le indicamos cómo realizar lo siguiente:

  • Configurar su entorno para utilizar Cloud Gem Portal.

  • Crear una gema de nube y un Cloud Gem Portal dinámico.

  • Probar su Cloud Gem Portal en el entorno local.

  • Implementar su Cloud Gem Portal en AWS y verlo en producción.

Configuración del entorno

La configuración de su entorno incluye la instalación de paquetes Node.js, Git, la creación de una URL de prueba y la configuración de Microsoft Visual Studio, si lo va a utilizar.

Instalación de Node.js y Git

Cloud Gem Portal utiliza la versión Angular 2 de AngularJS para programar y el administrador de paquetes Node.js (npm) para administrar las dependencias.

Para instalar Node.js y Git

  1. Descargue e instale Node.js desde el sitio web de Node.js.

  2. Descargue e instale Git desde la página de descargas de Git.

  3. Consiga una cuenta de GitHub si aún no tiene una. Debe disponer de una cuenta de GitHub para descargar los paquetes de GitHub para Cloud Gem Portal y para la herramienta de administración de paquetes jspm opcional. jspm es un administrador de paquetes para el cargador del módulo universal SystemJS y se basa en el cargador de módulos ES6 dinámico.

Actualización de paquetes y ejecución de un servidor local

Desde un símbolo del sistema, ejecute los siguientes comandos para cambiar al directorio CloudGemPortal, instalar paquetes y ejecutar un servidor gulp. gulp es un conjunto de herramientas para automatizar las tareas de programación más tediosas o que consumen mucho tiempo.

Para actualizar paquetes y ejecutar un servidor local

  1. Escriba el siguiente comando para cambiar al directorio de CloudGemPortal.

    cd <Lumberyard directory path>\dev\Gems\CloudGemFramework\v<N>\Website\CloudGemPortal
  2. Si quiere utilizar JSPM, escriba el siguiente comando.

    npm install -g jspm
  3. Ejecute los comandos siguientes.

    npm install -g gulp npm install gulp serve

    El comando npm install instala los paquetes que necesita para ejecutar el sitio web de Cloud Gem Portal. Si utiliza Perforce, debe desproteger los archivos package.json y config.js para que se pueda escribir en ellos. El comando gulp serve ejecuta la tarea de gulp predeterminada para configurar un servidor browsersync. No tiene que ejecutar npm install de nuevo a menos que agregue o actualice paquetes.

  4. El resultado del comando gulp serve tendrá un aspecto similar al siguiente.

    [ ] Access URLs: ----------------------------------- Local: http://localhost:3000 External: http://00.00.00.0:3000 ----------------------------------- UI: http://localhost:3001 UI External: http://00.00.00.0:3001 -----------------------------------
  5. Abra un navegador y vaya a http://localhost:3000. Debería aparecer una página de inicio de sesión.

Creación de una cuenta de administrador

Ahora estará listo para crear una cuenta de administrador, de modo que podrá iniciar sesión en la página que acaba de abrir.

Para crear una cuenta de administrador

  1. En una ventana de símbolo del sistema, escriba el siguiente comando:

    cd Lumberyard_directory\dev
    lmbr_aws cloud-gem-framework cloud-gem-portal --show-configuration --show-url

    Estos comandos crearán una cuenta de administrador para que pueda iniciar sesión. También generará una cadena JSON de configuración del proyecto y una URL HTTPS. La cadena de configuración del proyecto es el texto que está entre las llaves {} como puede ver en el siguiente ejemplo.

    
              Ejemplo de cadena de configuración del proyecto

    Antes de poder iniciar sesión con sus credenciales de administrador, debe copiar esta cadena de configuración de proyecto a un archivo en su código del Cloud Gem Portal.

  2. Abra el archivo \dev\Gems\CloudGemFramework\v<N>\Website\CloudGemPortal\cgp_bootstrap.js para editarlo en un editor de texto.

  3. Establezca la variable cgpBootstrap según la cadena JSON de configuración de proyecto que ha generado, como en el siguiente ejemplo.

    
              Establezca cgpBootstrap según su cadena de configuración del proyecto

    nota

    La URL HTTPS que se ha generado no es necesaria. Asegúrese de no pegarla en el archivo cgp_bootstrap.js.

  4. Guarde los cambios.

  5. Con la dirección http://localhost:3000 abierta en el navegador, inicie sesión con las credenciales de administrador temporales generadas.

    
              Inicie sesión en Cloud Gem Portal
  6. La contraseña es temporal, así que tendrá que crear una nueva.

    
              Cambiar contraseña

    Después de cambiar la contraseña de administrador, iniciará sesión automáticamente y se le redirigirá a la página de gemas en la nube, en la que se muestran las gemas activas.

    
              Lista de gemas en la nube

Ahora puede empezar a editar el código. Los cambios deberían aparecer cuando vuelva a cargar el sitio.

Para aprender cómo configurar Microsoft Visual Studio para crear gemas en la nube, consulte la siguiente sección. Para empezar a crear sus propias gemas en la nube de forma inmediata, consulte Creación de gemas en la nube.

Configuración de Microsoft Visual Studio

Puede editar el código con cualquier editor de texto, pero para crear gemas en la nube, es posible que prefiera Microsoft Visual Studio por su compatibilidad con Typescript. Para utilizar Visual Studio 2015 para crear gemas en la nube, puede configurarlo para trabajar con Node.js, agregar algunas extensiones TypeScript y, de forma opcional, instalar Task Runner Explorer para ejecutar las tareas gulp.

Configuración de Visual Studio para trabajar con Node.js

Realice los pasos siguientes para configurar Visual Studio para trabajar con Node.js.

Para configurar Visual Studio para trabajar con Node.js

  1. Abra el archivo de solución <lumberyard>\dev\Gems\CloudGemFramework\v<N>\Website\CloudGemPortal\Portal.csproj desde Visual Studio.

  2. En la barra de navegación, haga clic en Tools (Herramientas), Options (Opciones), Projects and Solutions (Proyectos y soluciones), External Web Tools (Herramientas web externas).

  3. Agregue sus directorios nodejs y node_modules\.bin a la configuración de herramientas externas de modo que Visual Studio pueda encontrarlas. El orden de las rutas es importante. Mueva las rutas nodejs y .node_modules/.bin encima de las rutas predeterminadas de Visual Studio, como se muestra en la siguiente imagen.

    
                Exponga los directorios de Node.js a Visual Studio

Configuración de herramientas y extensiones

A continuación, debe instalar extensiones relacionadas con TypeScript para Visual Studio.

Para instalar extensiones relacionadas con TypeScript

  1. Haga clic en Tools (Herramientas), después en NuGet Package Manager (Administrador de paquetes NuGet) y finalmente en Manage NuGet Packages for Solution (Administrador de paquetes NuGet para solución).

  2. Instale los siguientes paquetes:

    • angularjs.TypeScript.DefinitelyTyped

    • es6-shim.TypeScript.DefinitelyTyped

    • jquery.TypeScript.DefinitelyTyped

     

    
                Instalación de paquetes NuGet

    Después de instalar estos paquetes, podrá crear gemas en la nube en Visual Studio.

nota

Si utiliza Visual Studio 2015, es posible actualizar paquetes npm o ejecutar un servidor local haciendo clic con el botón derecho en package.json y seleccionando después Restore Packages (Restaurar paquetes). Sin embargo, puede que el comando npm install desde el directorio <Lumberyard directory path>\dev\Gems\CloudGemFramework\v<N>\Website\CloudGemPortal\ funciona de forma más coherente.

Uso de Task Runner Explorer (Opcional)

Para ejecutar la tarea gulp, puede utilizar Task Runner Explorer, una extensión de la IU de Visual Studio que ejecuta cualquier tarea o destino de grunt o gulp.

Para utilizar Task Runner Explorer

  1. En Visual Studio, haga clic con el botón derecho en gulpfile.js.

  2. Seleccione Task Runner Explorer. La herramienta muestra todas las tareas gulp actuales.

  3. Para iniciar una tarea, haga doble clic en la misma.

  4. Para iniciar un servidor ejecute default o gulp serve en la lista Tasks (Tasks) de gulp.

    
                Ejecute la tarea gulp predeterminada para iniciar un servidor

Solución de problemas

Si al abrir un archivo .ts hace que Visual Studio se cierre, asegúrese de que no haya otros complementos de Visual Studio instalados que abran archivos .ts (QT Visual Studio y QT Linguist son dos ejemplos).

Creación de gemas en la nube

Ahora ya está listo para crear gemas en la nube, que podrá modificar y redistribuir fácilmente a otros desarrolladores de juegos. Para crear una gema en la nube, añada archivos base y configure sus archivos TypeScript, .html y .css.

Agregar archivos base

Desde una ventana del símbolo del sistema, cree un enlace simbólico a su directorio origen de la gema de nube. El enlace debe apuntar al directorio cgp-resource-code en su gema de nube.

En Windows, utilice la siguiente sintaxis.

mklink /J <Workspace Path>\dev\Gems\CloudGemFramework\v<N>\Website\CloudGemPortal\external\<gem-name> <Workspace Path>\dev\Gems\<gem-name>\AWS\cgp-resource-code

La siguiente sintaxis de ejemplo crea un enlace simbólico al directorio cgp-resource-code de la Message of the Day Cloud Gem.

mklink /J <Workspace Path>\dev\Gems\CloudGemFramework\v<N>\Website\CloudGemPortal\external\CloudGemMessageOfTheDay <Workspace Path>\dev\Gems\CloudGemMessageOfTheDay\AWS\cgp-resource-code

En este punto, su sistema de archivos estará listo. Ahora puede agregar código estructural a los archivos TypeScript, .html y .css.

Creación de archivos TypeScript

Cloud Gem Portal se basa en la versión Angular 2 de AngularJS. El lenguaje predeterminado para Angular 2 es TypeScript. TypeScript es superconjunto escrito del lenguaje JavaScript. Los archivos TypeScript tienen una extensión .ts. Para crear su gema de nube, debe crear varios archivos .ts.

Gema de nube básica

En el siguiente diagrama se muestra la estructura de directorios recomendada para una gema de nube básica y para el .ts y los demás archivos que contiene.

<gem name> <gem name>.ts <gem name>.module.ts api-handler.class.ts index.component.html index.component.scss index.component.ts index.ts model.class.ts thumbnail.component.html thumbnail.component.ts

Descripciones de archivos de la gema de nube básica

Archivo Descripción
<gem name>.module.ts Módulo principal de la gema de nube.

<gem name>.ts

Obligatorio. Punto de entrada de fábrica para la gema.
api-handler.class.ts Una clase de controlador personalizada de la API de servicio.
index.component.html HTML para el componente del índice.
index.component.scss Definición de hoja de estilo para el componente del índice.
index.component.ts El componente del índice (componente principal para la gema).
index.ts Barril de exportación.
model.class.ts Contiene clases de modelos de componentes.
thumbnail.component.html Marca HTML para el componente de miniatura que aparece en la página Cloud Gems (Gemas en la nube).
thumbnail.component.ts Componente de miniatura que aparece en la página Cloud Gems (Gemas en la nube).

Gema de nube avanzada

Si quiere crear una gema de nube más compleja (por ejemplo, una con muchos componentes, servicios y canalizaciones), recomendamos la siguiente estructura de archivos.

<gem name> <gem name>.ts <gem name>.module.ts component *.component.ts *.component.html *.component.scss module *.module.ts directive *.directive.ts service *.service.ts pipes *.pipe.ts

Ejemplo de archivos .ts de arranque de una gema de nube

Los siguientes archivos .ts de ejemplo son para la Message of the Day Cloud Gem.

// cloudgemmessageoftheday.module.ts import { GemModule } from 'app/view/game/module/cloudgems/gem.module'; import { MessageOfTheDayIndexComponent, MessageOfTheDayThumbnailComponent } from './index' import { GameSharedModule } from 'app/view/game/module/shared/shared.module' import { NgModule } from '@angular/core'; /* * The Cloud Gem Angular 2 NgModule defines context for the cloud gem */ @NgModule({ imports: [ GameSharedModule, GemModule ], declarations: [ MessageOfTheDayIndexComponent, MessageOfTheDayThumbnailComponent ], providers: [ ], bootstrap: [MessageOfTheDayThumbnailComponent, MessageOfTheDayIndexComponent] }) export class CloudGemMessageOfTheDayModule { }
// cloudgemmessageoftheday.ts import { CloudGemMessageOfTheDayModule } from './index' import { NgModule } from '@angular/core'; /* * Entry point for the cloud gem factory */ export function definition(context: any): NgModule { return CloudGemMessageOfTheDayModule; }
// index.component.ts import { Input, Component } from '@angular/core'; import { AbstractCloudGemIndexComponent } from 'app/view/game/module/cloudgems/class/index'; @Component({ selector: 'message-of-the-day-index', template: `Welcome to the message of the day index page` // OR you can use a templateUrl: 'external/cloudgemmessageoftheday/index.component.html' }) export class MessageOfTheDayIndexComponent extends AbstractCloudGemIndexComponent { @Input() context: any; //REQUIRED constructor() { super() } //Your component controller code }
// thumbnail.component.ts (without a REST API handler) import { AbstractCloudGemThumbnailComponent, TackableStatus, TackableMeasure, Measurable } from 'app/view/game/module/cloudgems/class/index'; import { Component, Input, OnInit } from '@angular/core' import { Observable } from 'rxjs/rx' @Component({ selector: 'cloudgemmessageoftheday-thumbnail', template: ` <thumbnail-gem [title]="displayName" [cost]="'High'" [srcIcon]="srcIcon" [metric]="metric" [state]="state" > </thumbnail-gem>` }) export class MessageOfTheDayThumbnailComponent implements AbstractCloudGemThumbnailComponent{ @Input() context: any @Input() displayName: string = "Your first Cloud Gem"; @Input() srcIcon: string = "https://m.media-amazon.com/images/G/01/cloudcanvas/images/message_of_the_day._V536715120_.png" public state: TackableStatus = new TackableStatus(); public metric: TackableMeasure = new TackableMeasure(); constructor() { super() } ngOnInit() { this.report(this.metric) this.assign(this.state) } public report(metric: Measurable) { metric.name = "My Metric"; metric.value = "1million!"; new Observable<any>(observer => { setTimeout(() => { observer.next({ value: '100,000,000' }); }, 3000); setTimeout(() => { observer.complete(); }, 1000); }).subscribe(response => { metric.value = response.value; }) } public assign(status: TackableStatus) { status.label = "My Status"; status.styleType = "Enabled"; new Observable<any>(observer => { setTimeout(() => { observer.next({ status: 'Online' }); }, 3000); setTimeout(() => { observer.complete(); }, 1000); }).subscribe(response => { status.label = response.status; status.styleType = response.status; }) } }
// index.ts (export barrel) export * from './thumbnail.component' export * from './index.component' export * from './cloudgemmessageoftheday.module

Comprobación de los resultados

Tras completar la configuración de los archivos .ts, podrá comprobar los resultados. Si ejecuta su servidor local con gulp serve o gulp serve-watch, vaya a localhost:3000. La nueva gema debe aparecer en la sección Cloud Gems (Gemas en la nube).


            Su gema en la nube en el portal

Si hace clic en la miniatura de la gema, la página que aparecerá estará vacía, pero eso es normal en este punto.

Creación de archivo HTML

Puede verificar que la gema funciona si agrega un encabezado como el siguiente a su archivo .html.

<h1> Hello welcome to my new gem! </h1>

Si vuelve a cargar la página del Cloud Gem Portal y va a la gema, aparecerá el nuevo texto.


          Se muestra el encabezado HTML

Creación de contenido dinámico

Para que el contenido sea más dinámico, puede utilizar directivas Angular 2 en sus archivos .html y .ts. Para ver el proceso en acción, modifique los archivos .html y .ts para crear un botón de prueba en la Message of the Day Cloud Gem, como en el siguiente ejemplo.

En el archivo .html, agregue la siguiente marca.

<h1> Hello welcome to my new gem! </h1> <h2 *ngIf="testButton"> Why oh why would you touch that? </h2> <form> <button class="btn l-primary" (click)="testButton = !testButton"> Check out this fancy button </button> </form>

Modifique su archivo .ts como en el siguiente ejemplo.

export class Motd extends DynamicGem { ... private testButton: boolean; ngOnInit() { this.testButton = false; } }

La imagen siguiente muestra lo que ocurre cuando se hace clic en el botón.


            Botón de prueba

Creación de un archivo CSS

Puede utilizar CSS estándar para aportar estilos a sus gemas en la nube. Para mayor comodidad, las gemas en la nube de Lumberyard emplean el marco CSS Bootstrap 4. Al utilizar etiquetas HTML estándar, las etiquetas asumen automáticamente los cambios CSS que componen una interfaz de usuario coherente y de aspecto profesional.

Implementación de los cambios

Cuando esté satisfecho con su gema, podrá cargarla en AWS para verificar que esté funcionando. La implementación de los cambios incluye tres pasos: empaquetar los cambios, copiar los archivos a un directorio local de AWS y cargar la gema en la nube y los archivos de Cloud Gem Portal a AWS.

1. Empaquetamiento de los cambios

Para empaquetar los cambios, lleve a cabo una de las siguientes acciones:

  • En Visual Studio, ejecute la tarea de gulp build_deploy.

  • Desde una ventana de símbolo del sistema, ejecute gulp build_deploy.

Si lo hace, empaquetará sus tres archivos de Cloud Gem Portal, index.html, bundles\app.bundle.jsy bundles\dependencies.bundles.js y los copiará en el directorio de publicación lumberyard\Gems\CloudGemFramework\AWS\www.

3. Carga de la gema en la nube con el contenido de Cloud Gem Portal

Antes de cargar la gema en la nube en AWS, asegúrese de que ha agregado la nueva gema en la nube a su proyecto con Project Configurator. Para realizar esta carga, puede utilizar Lumberyard Editor o una ventana del símbolo del sistema.

Para utilizar Lumberyard Editor para cargar su gema en la nube y el contenido de Cloud Gem Portal en AWS

  1. En Lumberyard Editor, haga clic en AWS, Cloud Canvas, Resource Manager (Administrador de recursos).

  2. En Administration (Administración), Deployments (Implementaciones), haga clic en su implementación activa. Si no tiene ninguna implementación, cree una primero.

  3. Haga clic en Upload All Resources (Cargar todos los recursos).

    
              Upload all resources (Cargar todos los recursos)
  4. Tras completar la carga, haga clic enAWS, Open Cloud Gem Portal (Abrir Cloud Gem Portal) en Lumberyard Editor para obtener acceso al Cloud Gem Portal que haya cargado. Los cambios deberían ser visibles en el sitio web activo.

Para utilizar una ventana del símbolo del sistema para cargar su gema de nube y los contenidos de Cloud Gem Portal a AWS

  1. Para actualizar todos los archivos en el directorio Gems\cgp-resource-code en la nube, escriba el siguiente comando:

    lmbr_aws cloud-gem-framework upload-portal
  2. Para actualizar su bucket de Amazon S3 de Cloud Gem Portal con los archivos más recientes de su directorio lumberyard\Gems\CloudGemFramework\AWS\www, escriba el siguiente comando.

    lmbr_aws cloud-gem-framework upload-portal --project

Resumen

En este tutorial, ha realizado las siguientes tareas:

  1. Agregar una gema al marco CloudGemPortal.

  2. Utilizar TypeScript y Angular 2 para los tres archivos .js, .html y .css necesarios.

  3. Lumberyard Editor utilizado para cargar los cambios en Amazon S3.

  4. Ver los cambios en entorno de producción.