Serie de tutoriales de Haxe y Heaps: Primeros pasos

Introducción

Bienvenido a la primera parte de una serie de tutoriales de varias partes sobre la creación de juegos utilizando el lenguaje de programación Haxe con el Motor gráfico de montones. Heaps está siendo desarrollado por Nicolas Cannasse, el tipo que creó el lenguaje Haxe en primer lugar. En sus propias palabras:

Muchísimo es un motor gráfico multiplataforma diseñado para juegos de alto rendimiento. Está diseñado para aprovechar las GPU modernas que comúnmente están disponibles tanto en computadoras de escritorio como en dispositivos móviles. El marco actualmente es compatible con HTML5 WebGL, Flash Stage3D, móvil nativo (iOS y Android) y escritorio con OpenGL.

Heaps es una biblioteca genial, pero no increíblemente bien documentada. Ahí es donde entra en juego esta serie de tutoriales. Vamos a ver cómo crear gráficos 2D y luego 3D usando el motor Heaps. Para esta serie, haré versiones de texto y video de cada tutorial. La versión en video de este tutorial es disponible aquí.

Configuración de su entorno de desarrollo Haxe

Este tutorial asumirá que está utilizando Windows si está en otro sistema operativo, los pasos variarán ligeramente.

Primero, dirígete a haxe.org/download y descargue el instalador de Haxe adecuado para la versión más adecuada.

En mi caso voy con el instalador de Windows. Ejecute el ejecutable y diga sí a cualquier mensaje de seguridad que reciba. Quieres instalar todo así:

Instala donde quieras:

Verifique que su instalación funcionó correctamente. Inicie un símbolo del sistema y escriba versión haxelib:

Eso fue fácil, ¿eh? A continuación, probablemente querrá un IDE o Editor. Personalmente estoy usando haxe desarrollar, un puerto especial de Flash Develop. Sin embargo, este es un IDE solo para Windows. Otra opción es código de estudio visual con el Extensiones de idioma Haxe.

Finalmente, necesitamos instalar la biblioteca Heaps. Todavía no está registrado con Haxelib, por lo que actualmente tenemos que instalarlo desde Github. Ejecute el comando:

haxelib git montones https://github.com/ncannasse/heaps.git

Y hecho.

Creando una aplicación Hola Mundo

Ahora vamos a crear nuestra primera aplicación para asegurarnos de que todo esté funcionando correctamente. Una sencilla aplicación hola mundo.

Suponiendo que está utilizando HaxeDevelop, continúe y cree un nuevo proyecto a través de Project->New Project

Creé un proyecto de JavaScript como:

Dentro de nuestra carpeta de proyecto, necesitamos crear una carpeta para nuestros recursos. Simplemente creé un directorio llamado res. Simplemente haga clic con el botón derecho en su proyecto en el panel Proyecto y seleccione Agregar->Nueva carpeta…

A continuación, necesitamos un archivo TTF, yo personalmente Usé esta fuente. Simplemente descargue ese zip y copie el archivo ttf en el directorio res recién creado. Puede abrir una ventana del Explorador en ese directorio haciendo clic con el botón derecho y seleccionando Explorar. Personalmente, lo renombré para que no sea todo en mayúsculas, sin embargo, debería funcionar de cualquier manera. Si está utilizando HaxeDevelop, su proyecto debería verse así:

Tenemos dos bits finales de configuración. Primero, debemos enviar un mensaje de texto a HaxeDevelop que usamos la biblioteca Heaps y que la carpeta de recursos se llama Res. Haga clic derecho en su proyecto y seleccione Propiedades

A continuación, seleccione la pestaña Opciones del compilador. Primero, agregue una entrada a las opciones del compilador con el valor –D resourcePath=”res”. A continuación, agregue un valor a Bibliotecas de muchísimo. Eso es todo, haga clic en Aplicar y luego en Aceptar.

¡Finalmente algo de código! Primero, necesitamos un lienzo WebGL para que se ejecute nuestra aplicación. Simplemente abra index.html ubicado en la carpeta Bin y agregue un lienzo. Tu código debería ser algo como:

<!DOCTYPE html>  <html lang="en">  <head>  	<meta charset="utf-8"/>  	<title>JSTest</title>  	<meta name="description" content="" />  </head>  <body>  	<canvas id="webgl" style="width:100%;height:100%"></canvas>  	<script src="JSTest.js"></script>  </body>  </html>

Ahora necesitamos editar nuestro código Haxe principal. Por defecto, se llamará Main.hx y es el punto de entrada (y la totalidad) de nuestro programa. Introduce el siguiente código:

import h2d.Text;  import hxd.Res;  import hxd.res.Font;  import js.Lib;    class Main extends hxd.App {          var text : Text;    		// Called on creation          override function init() {  			// Initialize all loaders for embeded resources  			Res.initEmbed();  			// Create an instance of wireframe.tff located in our res folder, then create a font2d of 128pt size  			var font = Res.wireframe.build(128);  			// Create a new text object using the newly created font, parented to the 2d scene              text = new Text(font, s2d);  			// Assign the text  			text.text = "Hello World";  			// Make it read, using hex code ( RR GG BB, each two hex characters represent an RGB value from 0 - 255 )  			text.textColor = 0xFF0000;          }    		// Called each frame          override function update(dt:Float) {  			// simply scale our text object up until it's 3x normal size, repeat forever  			var scaleAmount = 0.01;  			if (text.scaleX < 3.0) text.setScale(text.scaleX + scaleAmount);  			else text.setScale(1);  			          }            static function main() {              new Main();          }      }