Eleventy es un generador de sitios estático simple o SSG basado en JavaScript. Lo bueno de Eleventy, es que no tiene configuración por defecto, pero también se puede ejecutar con opciones de configuración; lo que hace que sea totalmente flexible y extremadamente fácil de usar al mismo tiempo.

A diferencia de otros generadores de sitios estáticos, como por ejemplo Jekyll, Eleventy no te obliga a utilizar un motor de plantilla específico. Eleventy trabaja con muchos lenguajes de plantillas diferentes como:

  • HTML (*.html)
  • Markdown (*.md)
  • JavaScript (*.11ty.js)
  • Liquid (*.liquid)
  • Nunjucks (*.njk)
  • Handlebars (*.hbs)
  • Mustache (*.mustache)
  • EJS (*.ejs)
  • Haml (*.html)
  • Pug (*.pug)
  • JavaScript Template Literals (*.jstl)

Se puede optar por utilizar cualquiera de estos lenguajes para la realización de las plantillas y el contenido; y el propio SSG de Eleventy se encarga de reconocer el motor correspondiente a través de la extensión del archivo.

Creando tu primer proyecto con Eleventy

Crea una carpeta para el proyecto

Para crear un nuevo proyecto de Eleventy, solo necesita crear una carpeta vacía:

$ mkdir eleventy-01
$ cd eleventy-01

Crear un archivo package.json

Dentro de esta carpeta de proyecto recién creada, debes crear un archivo inicial para json: package.json, de modo que puedas usar la herramienta de Node.js Package Manager (npm) posteriormente, para la administración de las dependencias:

$ npm init -y

Instalación de Eleventy

Habiendo creado el archivo package.json a continuación debemos agregar el paquete de Eleventy ( @11ty/eleventy ) como una dependencia de desarrollo, dentro de nuestro proyecto, usando el comando npm install:

$ npm install --save-dev @11ty/eleventy

Ejecutando Eleventy

Ahora solamente debes probar que Eleventy ya esta instalado. Ejecuta el comando, y la consola te mostrará una respuesta del número de ficheros creados y el tiempo que ha tardado en ello.

$ npx @11/eleventy

Como aún no se han creado archivos adicional a la carpeta del proyecto, el resultado debería ser de 0 archivos. También puedes iniciar Eleventy en modo de recarga en caliente, utilizando la opción –serve:

$ npx @11/eleventy --serve

En este caso, el comando sigue ejecutándose y está atento a cualquier cambio de archivo de los archivos dentro de la plantilla y dentro de la carpeta del proyecto actual. Si el contenido de un archivo se cambia y luego se guarda, Elevanty reconoce ese cambio automáticamente y genera un nuevo archivo de salida.

Adición de plantillas

Ahora es el momento de ver realmente a Eleventy en acción y eso requiere que agreguemos archivos de plantilla a nuestro proyecto.

Crear una plantilla de diseño

En primer lugar, estamos creando un archivo de plantilla especial, una plantilla de diseño. Al utilizar una plantilla de diseño, puedes ajustar el contenido con un diseño común. Para crear dicha plantilla, primero agregamos una nueva carpeta denominada _includes al proyecto:

$ mkdir _includes

Luego, dentro de esta nueva carpeta _includes, creamos un nuevo archivo vacío con el nombre de mylayout.njk e insertamos el siguiente código de plantilla:

site_title: Mi Primer Sitio de Eleventy
---

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    <body>
        <h1></h1>
        <hr/>
        <article class="feature-image" >
  <header id="main" style="">
    <div class="title-padder">
      
      <h1 id="%E2%96%B7+Conociendo+Ct.js%3A+Un+nuevo+editor+de+juegos+2D" class="title"> Conociendo Ct.js: Un nuevo editor de juegos 2D</h1>
      


<div class="post-info"><a href="/quien-soy/" target="_blank">
      <img src="/assets/img/logos/ciberninjas-logo.webp">
    
    <p class="meta">
      Pablo Álvarez Corredera - August 18, 2020
    </p></a></div>

      
    </div>
  </header>

  <section class="post-content">
  
    <div class="bootstrap-iso">
    
      <p>Ct.js es un framework y editor de juegos destinado a la creación de juegos 2D.</p>

<p>Ct.js hace que el aprendizaje de la programación sea divertido y el desarrollo de videojuegos mucho más fácil de lo normal. Gracias a sus herramientas visuales, a su buena documentación y a su biblioteca modular y flexible.</p>

<p>Ct.js, es gratis, de código abierto y querido por sus desarrolladores, profesionales, profesores y estudiantes.</p>

<p>Ct.js está basado en tecnologías web y es compatible con muchas plataformas. El framework está diseñado teniendo en cuenta la modularidad, lo que permite que módulos adicionales amplíen sus posibilidades y faciliten el proceso de desarrollo.</p>

<h2 id="características-principales-de-ctjs"><strong>Características principales de Ct.js</strong></h2>

<p>Flujo de trabajo fluido
Las malas herramientas obstaculizan su desempeño. Ct.js está diseñado para ser como un pincel con el que creas juegos, no para ser un enemigo con el que lucharás.</p>

<p>Apto para principiantes
Los paquetes de ct.js incluyen documentos, tutoriales y demostraciones y ejemplos editables sin conexión. El editor de código resalta los errores y proporciona documentación directamente mientras escribe su código.</p>

<p>Poderoso
ct.js se basa en Pixi.js, funciona en WebGL y proporciona un gran rendimiento en navegadores y entornos de escritorio. Los módulos agregan nuevos poderes, y cuando ct.js no es suficiente, puede agregar cualquier código JS o biblioteca.</p>

<h2 id="qué-te-ofrece-ctjs-para-crear-un-juego"><strong>¿Qué te ofrece ct.js para crear un juego?</strong></h2>

<ul>
  <li>Editor de sala / nivel con soporte para mosaicos.</li>
  <li>Editor de código integrado con manejo de errores.</li>
  <li>Manejo de colisiones complejas y otras bibliotecas.</li>
  <li>Animaciones esqueléticas y enmarcadas.</li>
  <li>Gestor de música y sonido.</li>
  <li>Estilos para reutilizar la configuración de la GUI.</li>
  <li>Notas y documentos en un panel lateral, en cada pantalla.</li>
  <li>Capacidad para utilizar JavaScript personalizado.</li>
  <li>Embalaje y despliegue sencillos.</li>
</ul>

<h2 id="cómo-empezar-con-ctjs"><strong>¿Cómo empezar con Ct.js?</strong></h2>

<p>Completa los tutoriales, que desde la documentación oficial se ofrecen. A través de ellos vas a aprender cómo usar ct.js, cómo funciona su biblioteca, cómo crear funciones básicas para un juego y mucho más.</p>

<p>Luego, puedes investigar los proyectos ya creados, desde <a href="https://ctjs.rocks/madewithctjs/">ctjs/ejemplos</a> y observa cómo se hacen los proyectos más serios.</p>

<h2 id="conceptos-básicos-de-ctjs"><strong>Conceptos básicos de Ct.js</strong></h2>

<p>Ct.js es una biblioteca modular escrita en JavaScript, junto con un editor visual. El editor también se conoce como ct.IDE . Los juegos en ct.js también están escritos en JavaScript: es el lenguaje de programación de la web, es flexible, fácil de aprender e infinitamente profundo.</p>

<p>Cualquier juego de ct.js consta de texturas, copias, tipos y rooms.</p>

<ul>
  <li>Una textura es una imagen que no hace mucho por sí misma, pero es utilizada por copias y se puede dibujar con código. Este activo también se conoce como sprite, pero también puede ser un conjunto de mosaicos, un fondo, etc.</li>
  <li>Una copia es una entidad lógica en tu juego que puede interactuar con las entradas del usuario y otras copias. Enemigos, árboles, balas, gemas, bonificaciones, gatos: todo es una copia. Las copias a menudo se denominan objetos , actores o instancias en otros motores de juegos.
Cada copia corresponde a un tipo específico. Un tipo es una plantilla para nuevas copias con configuraciones y comportamientos comunes. Puede denominarse clase u objeto en otros motores de juego.</li>
  <li>Una room o habitación es un espacio 2D en tu juego donde colocas tus copias. Las rooms pueden tener su propio comportamiento adicional (guiones de nivel). Las rooms también se denominan a menudo niveles o mapas. Una diferencia notable es que las rooms en ct.js son ilimitadas cuando otros motores 2D tienden a establecer un tamaño específico.</li>
</ul>

<p><a href="https://ctjs.rocks/" class="btn btn-outline-dark btn-lg btn-block" target="_blank" rel="nofollow,noreferrer">🎮 Descarga y Prueba a Programar con el Motor Ct.js</a>
<a href="https://docs.ctjs.rocks/" class="btn btn-outline-dark btn-lg btn-block" target="_blank" rel="nofollow,noreferrer">Documentación Oficial de Ct.js</a>
<a href="https://github.com/ct-js/ct-js#support-ctjs-on-product-hunting-sites" class="btn btn-outline-dark btn-lg btn-block" target="_blank" rel="nofollow,noreferrer">🧰 Accede a muchas más herramientas de Ct.js</a>
<!-- https://ctjs.rocks/ , https://news.ycombinator.com/item?id=24176655 --></p>

<h3 id="relacionados-"><strong>Relacionados</strong> <!-- omit in toc --></h3>

<p><a href="https://ciberninjas.com/bevy-motor-videojuegos-rust/">  Bevy: Un motor de videojuegos construido en Rust</a></p>

<p><a href="https://ciberninjas.com/tensorflow-javascript/"> TensorFlow.js una biblioteca para añadir aprendizaje automático a través de JavaScript</a></p>

<p><a href="https://ciberninjas.com/roma-herramienta-javascript/">🔥  Rome, ¿La Mejor Herramienta para Javascript jamás creada?</a></p>

<p><a href="https://ciberninjas.com/la-historia-y-el-legado-de-jquery/">La historia y el legado de jQuery</a></p>

<p><a href="https://www.amazon.es/shop/cibercursos" class="btn btn-dark btn-lg btn-block" target="_blank" rel="nofollow,noreferrer">🎁 Ojea las Mejores Ofertas Ninja, ¡Actualizadas a Diario! 🛒</a></p>

<blockquote>
  <p><strong>Fuente</strong>: <a href="https://ctjs.rocks/" target="_blank" rel="nofollow,noreferrer">Página web Oficial de CT.JS</a> por Kathryn Whitenton de NNGroup.</p>
</blockquote>

    
    </div>
  
  </section>

  <!-- Social media shares -->
  

<div class="share-buttons">
    <ul class="share-buttons">
        <div class="meta">Share</div>
        
        <li>
            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fciberninjas.com%2Feditor-juegos-2d%2F" target="_blank" title=" Facebook">
			<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
			<span class="sr-only">Share on Facebook</span>
		</a>
        </li>
         
        <li>
            <a href="https://twitter.com/intent/tweet?text=%E2%96%B7+Conociendo+Ct.js%3A+Un+nuevo+editor+de+juegos+2D%20https%3A%2F%2Fciberninjas.com%2Feditor-juegos-2d%2F" target="_blank" title="">
			<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
			<span class="sr-only">Tweet</span>
		</a>
        </li>
             
        <li>
            <a href="http://www.linkedin.com/shareArticle?mini=true&url=https://ciberninjas.com/editor-juegos-2d/&title=%E2%96%B7+Conociendo+Ct.js%3A+Un+nuevo+editor+de+juegos+2D%20%7C%20Ciberninjas&summary=&source=https://ciberninjas.com/editor-juegos-2d/" target="_blank" title=" LinkedIn">
			<i class="fa fa-linkedin fa-2x" aria-hidden="true"></i>
			<span class="sr-only">Share on LinkedIn</span>
		</a>
        </li>
          
        <li>
            <a href="mailto:?subject=%E2%96%B7+Conociendo+Ct.js%3A+Un+nuevo+editor+de+juegos+2D%20%7C%20Ciberninjas&body=:%20https://ciberninjas.com/editor-juegos-2d/" target="_blank" title="">
			<i class="fa fa-envelope-square fa-2x" aria-hidden="true"></i>
			<span class="sr-only">Email</span>
		</a>
        </li>
        
    </ul>
</div>




   <!-- Tag list -->
  
  


<footer>
  <div class="tag-list">
    
      <div class="meta">Etiqueta</div>
    

    
    <a class="button" href="/etiqueta#Motor+de+Videojuegos">
      <p><i class="fa fa-tag fa-fw"></i> Motor de Videojuegos</p>
    </a>
    
  </div>
</footer>


</article>

<!-- Disqus -->


<!-- Post navigation -->

  <div id="post-nav">
    
    <div id="previous-post">
        <a alt="▷ Eleventy: Un generador de sitios estáticos muy simple y minimalista" href="/eleventy-ssg/">
            <p> Anterior</p>
             Eleventy: Un generador de sitios estáticos muy simple y minimalista
        </a>
    </div>
    

    
    <div id="next-post">
        <a alt="▷ ZzFXM: Un pequeño renderizador de música JavaScript" href="/zzfxm-libreria-renderizar-musica-js/">
            <p>Siguiente </p>
             ZzFXM: Un pequeño renderizador de música JavaScript
        </a>
    </div>
    
</div>



<!-- To change color of links in the page -->
<style>
  

  header#main {
    background-repeat:no-repeat;
   background-image: url('/assets/img/blog/18-motor-videojuegos-ctjs.webp');
  
  }
</style>

        <hr/>
        <small>by
            <a href="https://ciberninjas.com">Ciberninjas.com</a>
        </small>
    </body>
</html>

Al usar la extensión de archivo njk, estamos indicando que estamos usando el lenguaje de plantillas Nunjucks dentro de este archivo. Si quieres saber más sobre Nunjucks puedes encontrar el sitio web del proyecto y la documentación correspondiente en Mozilla Nunjucks.

El código comienza con una sección preliminar al principio. Dentro de la sección de contenido inicial, puede definir datos que luego se pueden usar en el siguiente código de plantilla. En el ejemplo, estamos usando la sección principal para definir la propiedad site_title que contiene una cadena para el valor del título.

Dentro del código de la plantilla, accedemos a site_title utilizando llaves dobles. El valor de esta propiedad se utiliza para establecer el título de la página.

Creación de plantillas utilizando un diseño

Ahora creemos dos plantillas más (usando Markdown como el lenguaje de la plantilla) usando nuestra plantilla de diseño creada previamente: Cree un nuevo archivo post-01.md en la carpeta del proyecto e inserte el siguiente código de Markdown:

---
layout: mylayout.njk
title: Mi primer post del blog.
---

## 

This is my first blog post! Have much fun using _Eleventy_, an easy and flexible JavaScript-based static site generator.

Estas plantillas, generan una publicación simple sobre un blog, que aún no posee ningun tipo de CSS ni estilo decorativo incluido.

Relacionados

Guía Completa de Generadores de Sitios Estáticos o SSG

🥇 ▷ Jekyll, Aprender desde Cero a Experto en 2020

Generador de Sitios Estáticos

🎁 Ojea las Mejores Ofertas Ninja, ¡Actualizadas a Diario! 🛒

Fuente: Página de ZzFXM por Kathryn Whitenton de NNGroup.