Introducción al desarrollo de juegos en la nube Portal de gemas - Lumberyard Guía del usuario

Si proporcionásemos una traducción de la versión en inglés de la guía, prevalecerá la versión en inglés de la guía si hubiese algún conflicto. La traducción se proporciona mediante traducción automática.

Introducción al desarrollo de juegos en la nube Portal de gemas

Para ayudarle a comenzar a utilizar el desarrollo de juegos en Cloud Gem Portal (CGP), este tutorial le muestra cómo hacer lo siguiente:

  • Configure su entorno de para utilizar Cloud Gem Portal.

  • Cree una gema en la nube y un Cloud Gem Portal dinámico.

  • Pruebe su Cloud Gem Portal localmente.

  • Implemente su Cloud Gem Portal en AWS y verla en producción.

Configuración del entorno de

La configuración del entorno de incluye la instalación de paquetes de Node.js, Git y la creación de una prueba y configurando Microsoft Visual Studio si lo está utilizando.

Instalación de Node.js y Git

El Cloud Gem Portal utiliza la versión de Angular 2 de AngularJS para la programación y la Administrador de paquetes de Node.js (npm) para administrar dependencias de.

Para instalar Node.js y git

  1. Descargue e instale Node.js desde la de Node.js página web.

  2. Descargar e instalar Git desde la [EMPTY] página de descarga.

  3. Consigue una de GitHub cuenta si no tienes uno. Debe tener una cuenta de GitHub para descargar los paquetes de GitHub para la gema en la nube y para el portal opcional [EMPTY] gestión de paquetes . jspm es un administrador de paquetes para SistemaJS cargador de módulos universal y se basa en la dinámica Módulo ES6 Cargador.

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

En el símbolo del sistema, ejecute los siguientes comandos para cambiar a CloudGemPortal , instalar paquetes y ejecutar un [EMPTY] server. gulp es un kit de herramientas para automatizar tareas de programación tediosas o que requieren mucho tiempo.

Para actualizar paquetes y ejecutar un servidor local

  1. Escriba el siguiente comando para cambiar a CloudGemPortal del directorio.

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

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

    npm install -g gulp npm install gulp serve

    El npm install El comando instala los paquetes que necesita para ejecutar el Sitio web de Cloud Gem Portal. Si está utilizando porforforce, debes consultar el package.json y config.js para que puedan escribirse. gulp serve El comando ejecuta la tarea gulp predeterminada para configurar un del navegadorsincronizar del servidor de. No tienes que correr npm install a menos que añadas o actualices paquetes.

  4. La salida de la gulp serve El comando tiene 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. Una página de inicio de sesión debería aparecer.

Creación de un Cuenta de administrador

Ahora ya puede crear una cuenta de administrador para iniciar sesión en la página que acaba de abrir.

Para crear una cuenta de administrador

  1. Escriba lo siguiente desde una ventana del símbolo del sistema:

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

    Estos comandos crean una cuenta de administrador para que pueda iniciar sesión en. También genera una cadena JSON de configuración del proyecto y una URL HTTPS. La cadena de configuración del proyecto es el texto entre el {} , como puede ver en los siguientes ejemplo.

    
              Ejemplo de cadena de configuración del proyecto

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

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

  3. Ajustar la variable cgpBootstrap a la cadena JSON de configuración del proyecto que que ha generado, como en el siguiente ejemplo.

    
              Establecer cgpBootstrap a la cadena de configuración del proyecto
    nota

    La URL HTTPS que se generó no es necesaria. Asegúrese de no pegarlo en el cgp_bootstrap.js del archivo.

  4. Guarde los cambios.

  5. Con su navegador abierto para http://localhost:3000, inicia sesión con la Las credenciales de administrador temporales que se generaron.

    
              Inicie sesión en Cloud Gem Portal
  6. Su contraseña es temporal, así que cree una nueva.

    
              Cambiar contraseña

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

    
              Lista de gemas en la nube

Ahora puedes empezar a editar el código. Los cambios deben aparecer cuando vuelvas a cargar el del sitio web.

Para obtener información sobre cómo configurar Microsoft Visual Studio para crear gemas en la nube, consulte la la siguiente sección. Para empezar a crear sus propias gemas en la nube de inmediato, consulte Creación de una nube Gemas.

Studio visual de Microsoft Configuración

Puede editar el código con cualquier editor de texto, pero para crear gemas en la nube, puede prefiere Microsoft Visual Studio para su compatibilidad con Typescript. Para utilizar Visual Studio 2017 para crear gemas en la nube, configurarla para que funcione con Node.js, añadir algunas extensiones de TypeScript, y opcionalmente instale Task Runner Explorer para ejecutar tareas gulp.

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

Siga estos pasos para configurar Visual Studio para que funcione con Node.js.

Para configurar Visual Studio para que funcione con Node.js

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

  2. En la barra de navegación, haz clic en Herramientas, Opcionesde Proyectos y soluciones, Herramientas web externas.

  3. Añada su nodejs y node_modules\.bin de directorios a la configuración de herramientas externas para que Visual Studio pueda encontrarlos. El orden de las rutas es importante. Mueve tu nodejs y .node_modules/.bin por encima de las rutas predeterminadas de Visual Studio, como se muestra en la siguiente imagen.

    
                Exposición de directorios de Node.js en 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 Herramientasde Gestor de paquetes NuGet, Administrar paquetes de NuGet para la solución.

  2. Instale los siguientes paquetes:

    • angularjs.TypeScript.DefinitivamenteTipod

    • es6-shim.TypeScript.Tipo definido

    • cont.TipoScript.Tipo definido

     

    
                Instalar paquetes de NuGet

    Después de instalar estos paquetes, puede crear gemas en la nube en Visual Estudio.

Uso del explorador de ejecución de tareas (opcional)

Para ejecutar la tarea gulp, puede utilizar Explorador de ejecución de tareas, una extensión de la interfaz de usuario de Visual Studio que ejecuta cualquier gunt o de la tarea o destino de gulp.

Para utilizar el explorador de Task Runner

  1. En Visual Studio, haga clic con el botón derecho archivo de registro.js.

  2. Elegir Explorador de ejecución de tareas. La herramienta muestra todas las tareas de gulp actuales.

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

  4. Para iniciar un servidor, ejecute por defecto o bien [EMPTY] servir en la lista de gulp Tareas.

    
                Ejecute la tarea gulp predeterminada para iniciar un servidor

Troubleshooting

Si se abre un .ts hace que Visual Studio se bloquee, asegúrate que no hay otros complementos de Visual Studio instalados que abran .ts archivos (QT Visual Studio y QT Linguist son dos ejemplos).

Creación de una nube Gemas

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

Adición de archivos base

En una ventana del símbolo del sistema, cree un enlace simbólico al directorio de origen de la gema en la nube. El enlace debe apuntar a la cgp-resource-code dentro de su gema en la 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 a la cgp-resource-code para el mensaje del día en la nube Gema.

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, el sistema de archivos está listo. Ahora puedes añadir código de esqueleto a la Escribir secuencia de comandos, .html, y .css de los archivos.

Creación de archivos TypeScript

El Cloud Gem Portal se basa en la versión de Angular 2 de AngularJS. El idioma predeterminado para El ángulo 2 es Secuencia de comandos de tipo. El tipo de secuencia de comandos es un superconjunto escrito del lenguaje JavaScript. Los archivos TypeScript tienen un .ts extensión. Para crear la gema en la nube, debe crear una serie de Archivos.ts.

Gema básica en la nube

El siguiente diagrama muestra la estructura de directorios recomendada para una gema básica en la nube y .ts y otros 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 básicas de los archivos de la gema en la nube
[EMPTY] Descripción
<gem name>.module.ts El módulo principal de gema en la nube.

<gem name>.ts

Se requiere. El punto de entrada de fábrica para la gema.
api-handler.class.ts Una clase de controlador de API de servicio personalizada.
index.component.html HTML para el componente de índice.
index.component.scss Definición de hoja de estilo para el componente de índice.
index.component.ts El componente de índice (el componente principal de la gema).
index.ts El barril de exportación.
model.class.ts Contiene clases de modelo de componente.
thumbnail.component.html El marcado HTML para el componente de miniaturas que aparece en el Nube Gemas página.
thumbnail.component.ts El componente de miniatura que aparece en el Gemas en la nube página.

Gema en la nube avanzada

Si tiene previsto crear una gema en la nube más compleja (por ejemplo, una con muchas 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

Archivos.ts de la gema en la nube Starter de ejemplo

El siguiente ejemplo .ts son para el mensaje del día Gema en la nube.

// 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

Después de la configuración de la .ts se ha completado, puedes probar el los resultados. Si está ejecutando su servidor local con gulp serve o bien gulp serve-watch, ve a localhost:3000. Debería aparecer la nueva gema en el Gemas en la nube sección.


            Su gema en la nube en el portal

Si hace clic en la miniatura de la gema, la página que aparece estará en blanco, pero se espera que este punto.

Creación de un archivo HTML

Puede verificar que la gema funciona añadiendo un encabezado como el siguiente a su .html del archivo.

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

Si vuelve a cargar la página Cloud Gem Portal y navega hasta la gema, el nuevo texto aparece.


          Se muestra el encabezado HTML

Creación de contenido dinámico

Para hacer que tu contenido sea más dinámico, puedes utilizar las directivas de Angular 2 en tu .html y .ts de los archivos. Para ver esto en acción, modificar el .html y .ts para crear una prueba en la gema en la nube Message of the Day, como en el siguiente ejemplo.

En la pestaña .html , añada la siguiente marca de revisión.

<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 .ts como en el siguiente ejemplo.

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

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


            Botón de prueba

Creación de un archivo CSS

Puede utilizar CSS estándar para diseñar sus gemas en la nube. Para mayor comodidad, LumberyardLas gemas en la nube de utiliza la Sujeción de botas 4 Marco CSS. Cuando utilizas etiquetas HTML estándar, las etiquetas automáticamente recogen los cambios de CSS que proporcionan una interfaz de usuario de aspecto profesional y coherente.

Implementación de los cambios

Cuando esté satisfecho con la gema, puede cargarla en AWS para verificar que es de trabajo. La implementación de los cambios incluye tres pasos: empaquetar los cambios, copiar el archivos a un AWS y cargar sus archivos de Cloud Gem y Cloud Gem Portal en AWS.

1. Embalaje de su Cambios

Para empaquetar los cambios, realice una de las siguientes tareas:

  • En Visual Studio, ejecute la tarea gulp build_deploy.

  • En el símbolo del sistema, ejecute gulp build_deploy.

Al hacerlo, se empaquetan los tres archivos de Cloud Gem Portal index.html, bundles\app.bundle.js, y bundles\dependencies.bundles.js y los copia en el lumberyard\Gems\CloudGemFramework\AWS\www publicación del directorio.

3. Cargando la gema en la nube con su contenido de Cloud Gem Portal

Antes de cargar la gema en la nube en AWS, asegúrese de haber añadido su nueva nube a su proyecto con la gema Project Configurator. Para realizar la carga, puede utilizar o bien Lumberyard Editor o un símbolo del sistema.

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

  1. En Lumberyard Editor, haga clic en AWSde Cloud Canvas, Responsable de recursos.

  2. Por debajo de Administraciónde Implementaciones, haga clic en su implementación activa. Si no tiene una implementación, cree una primero.

  3. Haga clic en Cargar todos los recursos.

    
              Cargar todos los recursos
  4. Cuando la carga haya finalizado, haz clic en AWSde Abierto Portal de gemas en la nube en Lumberyard Editor para acceder al Cloud Gem Portal que cargado. Sus cambios deben ser visibles en el sitio web en directo.

Para utilizar un símbolo del sistema para cargar la gema en la nube y el contenido de Cloud Gem Portal en AWS

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

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

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

Summary

En este tutorial, ha realizado las siguientes tareas:

  1. Se ha añadido una gema a la CloudGemPortal del marco de trabajo.

  2. Se ha utilizado TypeScript y Angular 2 para crear tres obligatorios .js, .html, y .css de los archivos.

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

  4. Ha visto los cambios en la producción.