<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ desarrollo de juegos - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Descubre miles de cursos de programación escritos por expertos. Aprende Desarrollo Web, Ciencia de Datos, DevOps, Seguridad y obtén asesoramiento profesional para desarrolladores. ]]>
        </description>
        <link>https://www.freecodecamp.org/espanol/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ desarrollo de juegos - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/espanol/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Sun, 24 May 2026 19:37:32 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/espanol/news/tag/desarrollo-de-juegos/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ Aprende a programar RPG: Un videojuego de novela visual en el que aprendes conceptos de informática ]]>
                </title>
                <description>
                    <![CDATA[ Artículo original escrito por: Lynn Zheng [https://www.freecodecamp.org/news/author/lynn/] Artículo original: Learn to Code RPG – A Visual Novel Video Game Where you Learn Computer Science Concepts [https://www.freecodecamp.org/news/learn-to-code-rpg/] Traducido y adaptado por: Rafael D. Hernandez [/espanol/news/author/rafael/] Hola a todos, soy Lynn. Es un gran placer para mí anunciar el lanzamiento de  ]]>
                </description>
                <link>https://www.freecodecamp.org/espanol/news/aprende-a-programar-rpg-un-videojuego-de-novela-visual-en-el-que-aprendes-conceptos-de-informatica/</link>
                <guid isPermaLink="false">61c3f6667ff87f092015b71c</guid>
                
                    <category>
                        <![CDATA[ desarrollo de juegos ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Rafael D. Hernandez ]]>
                </dc:creator>
                <pubDate>Thu, 23 Dec 2021 16:07:23 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/espanol/news/content/images/2021/12/Splash-Art.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong>Artículo original escrito por</strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong>:</strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong> </strong></strong><a href="https://www.freecodecamp.org/news/author/lynn/">Lynn Zheng</a><br><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong>Artículo original</strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong>:</strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong> </strong></strong></strong></strong><a href="https://www.freecodecamp.org/news/learn-to-code-rpg/">Learn to Code RPG – A Visual Novel Video Game Where you Learn Computer Science Concepts</a><br><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong><strong>Traducido y adaptado por</strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong>:</strong></strong></strong></strong></strong></strong></strong></strong> </strong></strong></strong></strong></strong></strong></strong></strong><a href="https://www.freecodecamp.org/espanol/news/author/rafael/">Rafael D. Hernandez</a></p><p>Hola a todos, soy Lynn. Es un gran placer para mí anunciar el lanzamiento de <strong>Aprende a Programar</strong> <strong> RPG</strong>, un proyecto que hemos estado desarrollando en secreto durante los últimos ocho meses.</p><p><strong>Aprende a Programar RPG</strong> es un novedoso juego visual interactivo en el que aprenderás a programar, harás amigos en la industria tecnológica y perseguirás tu sueño de convertirte en desarrollador o desarrolladora. ?</p><p>Características del Juego:</p><ul><li>Horas de juego ?</li><li>Arte y música original ? ?</li><li>Más de 600 preguntas de examen de Ciencias de Computación ?</li><li>Más de 50 secretos que puedes descubrir ?</li><li>6 finales diferentes ?</li><li>Personajes simpáticos y un gato adorable ?</li><li>¡Minijuegos! ?</li></ul><p>Esta es la primera versión y esperamos añadir más contenido en el futuro. Los lanzamientos futuros tendrán más <strong>personajes</strong>,<strong> escenarios</strong>, <strong>misiones secundarias</strong>, <strong>arte</strong>, <strong>música</strong> y, sí, <strong>minijuegos</strong>. (Corrida de velocidad de prueba de CS y modo de supervivencia, ¿alguien?) También estamos planeando localizarlo en diferentes idiomas. ? El cielo es el límite aquí. ✈️ </p><h2 id="puedes-descargarlo-y-jugarlo-gratis-en-itch-io-">Puedes descargarlo y jugarlo gratis en <a href="https://freecodecamp.itch.io/learn-to-code-rpg">itch.io</a>.</h2><p>Si deseas obtener más información sobre el juego en sí, mi proceso de desarrollo, etc., siga leyendo. Este es un devlog muy visual (es por eso que nuestro juego es una Novela Visual) y estoy seguro de que lo disfrutarás.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/img_1-1.png" class="kg-image" alt="img_1-1" width="600" height="400" loading="lazy"><figcaption>Aprende a programar RPG: Un juego en el que juegas el rol de aprender a programar</figcaption></figure><h2 id="donde-todo-empez-">Donde todo empezó</h2><p>Empecemos con un poco de información sobre mí.</p><p>Siempre me han gustado los videojuegos ricos en historias desde que era pequeña. ??</p><p>Mi interés en el desarrollo de juegos me inspiró a especializarme en Ciencias de la Computación en la universidad. En junio de 2021, me gradué de la Universidad de Chicago con una Licenciatura y una Maestría conjuntas en Ciencias de la Computación.</p><p>En julio de 2021, mientras planeaba mudarme a San Francisco para comenzar mi carrera como desarrollador de software, Quincy se puso en contacto conmigo sobre esta idea de juego.</p><blockquote>Un juego en el que aprendes a programar, hacer amigos, explorar la cultura tecnológica y, finalmente, entrar en la industria tecnológica. ?</blockquote><p>Aunque me dedico a motores de desarrollo de juegos como Unity y Ren'Py y he creado pequeños proyectos en mi tiempo libre, esta sería la primera vez que construyo un juego desde cero, en un equipo (principalmente) de una sola persona. Es decir, estaba un poco abrumada por esta oportunidad de hacer realidad mi sueño de desarrollo de juegos. ?</p><p>Bueno, ya conoces el dicho: Si te ofrecen un asiento en un cohete ?, ¡no preguntes qué asiento!</p><p>Así que dije que sí y comencé inmediato. </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/Screen-Shot-2021-12-18-at-12.56.15.png" class="kg-image" alt="Screen-Shot-2021-12-18-at-12.56.15" width="600" height="400" loading="lazy"><figcaption>¿Quién soy yo para rechazar una oferta de Cupcake CPU? ?.</figcaption></figure><h2 id="de-cero-a-h-roe-c-mo-construir-un-juego-en-cuatro-meses">De cero a héroe: Cómo construir un juego en cuatro meses</h2><p>La idea de la historia estaba bastante clara desde el principio: El héroe/heroína toma la decisión de aprender a programar, supera los obstáculos a lo largo del viaje, se reúne con aliados y mentores y, finalmente, llega al gran premio, un brillante trabajo de desarrollador.</p><p>Comencé con el marco de escritura clásico <a href="https://en.wikipedia.org/wiki/Hero%27s_journey">Del Viaje del Héroe</a>, o, el monomito de 17 etapas.</p><p>(Desde que empecé a trabajar en este juego, una y otra vez desearía haber tomado al menos una clase de escritura creativa en la universidad. ? )</p><p>He aquí un vistazo a mi esquema para la primera y la tercera etapa de las 17 etapas, directamente desde mi documento de Google:</p><!--kg-card-begin: html--><table style="box-sizing: inherit; margin: 0.5em 0px 2.5em; padding: 0px; border: none; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; line-height: inherit; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-size: 1.6rem; vertical-align: top; border-spacing: 0px; border-collapse: collapse; display: inline-block; overflow-x: auto; max-width: 100%; width: auto; white-space: nowrap; background: radial-gradient(at left center, rgba(0, 0, 0, 0.2) 0px, transparent 75%) 0px center / 10px 100% no-repeat scroll, radial-gradient(at right center, rgba(0, 0, 0, 0.2) 0px, transparent 75%) 100% center / 10px 100% scroll rgb(255, 255, 255); color: rgb(10, 10, 35); letter-spacing: normal; orphans: 2; text-align: start; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><tbody style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 16px; vertical-align: baseline;"><tr style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 16px; vertical-align: baseline; height: 42.75pt;"><td style="box-sizing: inherit; margin: 0px; padding: 2pt; border-width: 0.75pt; border-style: solid; border-color: rgb(0, 0, 0); border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 16px; vertical-align: bottom; background-image: linear-gradient(90deg, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0)); background-size: 20px 100%; background-repeat: no-repeat; overflow: hidden; overflow-wrap: break-word;"><p dir="ltr" style="box-sizing: inherit; margin: 0pt 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.38; font-family: inherit; font-size: 16px; vertical-align: baseline; min-width: 100%;"><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: normal; font-weight: 400; font-stretch: inherit; line-height: inherit; font-family: Arial; font-size: 11pt; vertical-align: baseline; color: rgb(0, 0, 0); background-color: transparent; text-decoration: none; white-space: pre-wrap;">1. La Llamada a la Aventura</span></p></td><td style="box-sizing: inherit; margin: 0px; padding: 2pt; border-width: 0.75pt; border-style: solid; border-color: rgb(0, 0, 0); border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 16px; vertical-align: bottom; overflow: hidden; overflow-wrap: break-word;"><p dir="ltr" style="box-sizing: inherit; margin: 0pt 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.38; font-family: inherit; font-size: 16px; vertical-align: baseline; min-width: 100%;"><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: normal; font-weight: 400; font-stretch: inherit; line-height: inherit; font-family: Arial; font-size: 11pt; vertical-align: baseline; color: rgb(0, 0, 0); background-color: transparent; text-decoration: none; white-space: pre-wrap;">la primera etapa del viaje del héroe a menudo presenta a la audiencia la existencia actual (y a veces bastante mundana) del protagonista.</span></p></td><td style="box-sizing: inherit; margin: 0px; padding: 2pt; border-width: 0.75pt; border-style: solid; border-color: rgb(0, 0, 0); border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 16px; vertical-align: bottom; background-image: linear-gradient(270deg, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0)); background-position: 100% 0px; background-size: 20px 100%; background-repeat: no-repeat; overflow: hidden; overflow-wrap: break-word;"><p dir="ltr" style="box-sizing: inherit; margin: 0pt 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.38; font-family: inherit; font-size: 16px; vertical-align: baseline; min-width: 100%;"><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: normal; font-weight: 700; font-stretch: inherit; line-height: inherit; font-family: Arial; font-size: 11pt; vertical-align: baseline; color: rgb(0, 0, 0); background-color: transparent; text-decoration: none; white-space: pre-wrap;">Personaje principal (abreviado MC) </span><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: normal; font-weight: 400; font-stretch: inherit; line-height: inherit; font-family: Arial; font-size: 11pt; vertical-align: baseline; color: rgb(0, 0, 0); background-color: transparent; text-decoration: none; white-space: pre-wrap;">se gradúa y se muda con sus padres. No está muy segura de cómo se verá su carrera, así que pasa sus días trabajando en conciertos y buscando vacantes de trabajo. Ha solicitado algunos trabajos de ventas y consultoría, pero la rechazaron.</span></p></td></tr></tbody></table><!--kg-card-end: html--><!--kg-card-begin: html--><table style="box-sizing: inherit; margin: 0.5em 0px 2.5em; padding: 0px; border: none; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; line-height: inherit; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen, Ubuntu, Cantarell, &quot;Open Sans&quot;, &quot;Helvetica Neue&quot;, sans-serif; font-size: 1.6rem; vertical-align: top; border-spacing: 0px; border-collapse: collapse; display: inline-block; overflow-x: auto; max-width: 100%; width: auto; white-space: nowrap; background: radial-gradient(at left center, rgba(0, 0, 0, 0.2) 0px, transparent 75%) 0px center / 10px 100% no-repeat scroll, radial-gradient(at right center, rgba(0, 0, 0, 0.2) 0px, transparent 75%) 100% center / 10px 100% scroll rgb(255, 255, 255); color: rgb(10, 10, 35); letter-spacing: normal; orphans: 2; text-align: start; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><colgroup style="box-sizing: inherit;"><col width="73" style="box-sizing: inherit;"><col width="264" style="box-sizing: inherit;"><col width="264" style="box-sizing: inherit;"></colgroup><tbody style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 16px; vertical-align: baseline;"><tr style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 16px; vertical-align: baseline; height: 42.75pt;"><td style="box-sizing: inherit; margin: 0px; padding: 2pt; border-width: 0.75pt; border-style: solid; border-color: rgb(0, 0, 0); border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 16px; vertical-align: bottom; background-image: linear-gradient(90deg, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0)); background-size: 20px 100%; background-repeat: no-repeat; overflow: hidden; overflow-wrap: break-word;"><p dir="ltr" style="box-sizing: inherit; margin: 0pt 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.38; font-family: inherit; font-size: 16px; vertical-align: baseline; min-width: 100%;"><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: normal; font-weight: 400; font-stretch: inherit; line-height: inherit; font-family: Arial; font-size: 11pt; vertical-align: baseline; color: rgb(0, 0, 0); background-color: transparent; text-decoration: none; white-space: pre-wrap;">3. Supernatural Aid</span></p></td><td style="box-sizing: inherit; margin: 0px; padding: 2pt; border-width: 0.75pt; border-style: solid; border-color: rgb(0, 0, 0); border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 16px; vertical-align: bottom; overflow: hidden; overflow-wrap: break-word;"><p dir="ltr" style="box-sizing: inherit; margin: 0pt 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.38; font-family: inherit; font-size: 16px; vertical-align: baseline; min-width: 100%;"><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: normal; font-weight: 400; font-stretch: inherit; line-height: inherit; font-family: Arial; font-size: 11pt; vertical-align: baseline; color: rgb(0, 0, 0); background-color: transparent; text-decoration: none; white-space: pre-wrap;">en esta etapa del viaje, el protagonista busca una figura parecida a un sabio y posiblemente obtenga un objeto o habilidad especial en el proceso.abajo.</span></p></td><td style="box-sizing: inherit; margin: 0px; padding: 2pt; border-width: 0.75pt; border-style: solid; border-color: rgb(0, 0, 0); border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 16px; vertical-align: bottom; background-image: linear-gradient(270deg, rgb(255, 255, 255) 50%, rgba(255, 255, 255, 0)); background-position: 100% 0px; background-size: 20px 100%; background-repeat: no-repeat; overflow: hidden; overflow-wrap: break-word;"><p dir="ltr" style="box-sizing: inherit; margin: 0pt 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.38; font-family: inherit; font-size: 16px; vertical-align: baseline; min-width: 100%;"><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: normal; font-weight: 700; font-stretch: inherit; line-height: inherit; font-family: Arial; font-size: 11pt; vertical-align: baseline; color: rgb(0, 0, 0); background-color: transparent; text-decoration: none; white-space: pre-wrap;">Annika, </span><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: normal; font-weight: 400; font-stretch: inherit; line-height: inherit; font-family: Arial; font-size: 11pt; vertical-align: baseline; color: rgb(0, 0, 0); background-color: transparent; text-decoration: none; white-space: pre-wrap;">El mejor amiga de MC en la universidad, llama a MC un día. Annika está emocionada porque acaba de conseguir un puesto de desarrollo web de nivel básico, después de pasar 6 meses repasamdo sus habilidades de CS oxidadas (de auditar algunas clases de CS en la universidad). Annika pregunta cómo le está yendo a MC; está encantada de que MC también esta considerando aprender a programar; y anima a MC que lo puede hacer si tiene el método de estudio y los recursos adecuados.</span><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: normal; font-weight: 400; font-stretch: inherit; line-height: inherit; font-family: Arial; font-size: 11pt; vertical-align: baseline; color: rgb(0, 0, 0); background-color: transparent; text-decoration: none; white-space: pre-wrap;"><br style="box-sizing: inherit;"></span><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant: normal; font-weight: 400; font-stretch: inherit; line-height: inherit; font-family: Arial; font-size: 11pt; vertical-align: baseline; color: rgb(0, 0, 0); background-color: transparent; text-decoration: none; white-space: pre-wrap;">Annika le presenta a MC los recursos que usa.</span></p></td></tr></tbody></table><!--kg-card-end: html--><h2 id="los-personajes">Los personajes</h2><p>Incluyendo el personaje principal que controla el jugador, tenemos cuatro personajes principales en el juego:</p><ul><li>La protagonista, <strong>Lydia</strong>, recién graduada de la universidad. (En futuras versiones del juego, es posible que podamos presentar algunos personajes principales diferentes entre los que el jugador puede elegir.)</li><li><strong>Annika</strong>, la mejor amiga de la universidad del personaje principal</li><li><strong>Marco</strong>, que se convierte en el mentor del personaje principal</li><li><strong>Layla</strong>, la compañera de incorporación del personaje principal en su primer trabajo de desarrollo</li></ul><p>Empecé a diseñar los personajes recopilando imágenes en Pinterest. Luego Quincy y yo encargamos a un artista en línea que creara los sprites de personajes y la imagen de bienvenida.</p><p>En las imágenes de abajo, puedes ver las inspiraciones de los personajes de Pinterest (los derechos de autor pertenecen a sus artistas originales) y el diseño final lado a lado.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/Untitled265_20211217211947.PNG" class="kg-image" alt="Untitled265_20211217211947" width="600" height="400" loading="lazy"><figcaption>Arte de inspiración para Lydia + tarjeta de personaje final</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/Untitled265_20211217212148.PNG" class="kg-image" alt="Untitled265_20211217212148" width="600" height="400" loading="lazy"><figcaption>Arte de inspiración para Annika + tarjeta de personaje final</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/Untitled265_20211217211928.PNG" class="kg-image" alt="Untitled265_20211217211928" width="600" height="400" loading="lazy"><figcaption>Arte de inspiración para Layla + tarjeta de personaje final</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/Untitled265_20211217211832.PNG" class="kg-image" alt="Untitled265_20211217211832" width="600" height="400" loading="lazy"><figcaption>Arte de inspiración para Marco + tarjeta de personaje final</figcaption></figure><p>Ahora que tenemos el elenco principal, ¿qué más necesitamos para agregar más profundidad de personaje a <strong>Lydia</strong>, para que no esté sentada sola en su habitación todo el día practicando código? ¿Tal vez le vendría bien un gato en su habitación? ?</p><p>Y entra <strong>Mint</strong>, el gato de Lydia. (Arte mío como artista improvisado para que nuestro artista pudiera centrarse en los personajes. El arte digital ? es mi segundo pasatiempo más grande después de desarrollo de juegos.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/mint.gif" class="kg-image" alt="mint" width="600" height="400" loading="lazy"><figcaption>¡Mint te manda saludos!</figcaption></figure><h2 id="las-graficas">Las graficas</h2><p>Con las gráficas de los personajes hechos, puedes pensar que concluye la mayor parte de las gráficas. ¡Pero no tan rápido! Una novela visual es, como su nombre indica, visual, por lo que necesita muchas más gráficas para contar una historia atractiva.</p><p>Por ejemplo, en esta imagen de abajo, además de los sprites de caracteres, está la imagen de fondo y algunos componentes GUI como el cuadro de texto.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/Screen-Shot-2021-12-18-at-12.40.00.png" class="kg-image" alt="Screen-Shot-2021-12-18-at-12.40.00" width="600" height="400" loading="lazy"><figcaption>Componentes gráficos básicos: GUI, sprites de caracteres, fondo</figcaption></figure><p>Para crear las imágenes de fondo, apliqué filtros de efectos especiales a las imágenes de archivo para agregar una textura similar a la acuarela. De esta manera, el esquema de colores de nuestros personajes se integra perfectamente con el del fondo.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/Untitled266_20211217213638.PNG" class="kg-image" alt="Untitled266_20211217213638" width="600" height="400" loading="lazy"><figcaption>Arriba: imagen de archivo. Parte inferior: con filtros</figcaption></figure><p>Para ilustrar el paso del tiempo en un solo día, cambié la iluminación de las imágenes de fondo aplicando la manipulación del color mediante programación. (¡Echa un vistazo a <a href="https://github.com/freeCodeCamp/LearnToCodeRPG">nuestro repositorio de GitHub</a> si estás interesado en los detalles de implementación!)</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/color.png" class="kg-image" alt="color" width="600" height="400" loading="lazy"><figcaption>Cuatro modos de iluminación</figcaption></figure><p>Para aumentar la motivación, cada vez que tengo ganas de postergar, cambio mis engranajes creativos y garabateo elementos diversos que aparecen a lo largo del juego. ?</p><p>Y así es como conseguimos galletas en el juego, tostadas, pizza, pollo frito y más.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/ezgif.com-gif-maker-7-.gif" class="kg-image" alt="ezgif.com-gif-maker-7-" width="600" height="400" loading="lazy"><figcaption>¡Delicioso!</figcaption></figure><h2 id="el-c-digo">El código</h2><p>Usé el motor de juego con el que estoy más familiarizado, <a href="https://www.renpy.org/">el Motor de Novela Visual Ren'Py</a>. Reutilicé mucho código de mis antiguos proyectos, por ejemplo, <a href="https://gist.github.com/RuolinZheng08/b845f416ebda5b02ebc6b62379105564">sprites de personajes parpadeantes</a> y <a href="https://github.com/RuolinZheng08/renpy-rhythm">un minijuego de ritmo</a>.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/blink2.gif" class="kg-image" alt="blink2" width="600" height="400" loading="lazy"><figcaption>Personajes parpadeantes ?</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/Screen-Shot-2021-12-17-at-19.33.39-1.png" class="kg-image" alt="Screen-Shot-2021-12-17-at-19.33.39-1" width="600" height="400" loading="lazy"><figcaption>Minijuego de Ritmo. ¿Crees que puedas conseguir una puntuación perfecta?</figcaption></figure><p>También incorporé código Ren'Py de código abierto, como <a href="https://wattson.itch.io/kinetic-text-tags">el código para etiquetas de texto cinético</a> y <a href="https://tacoen.itch.io/feather-icon">el código para texto de iconos de plumas</a>.<br></p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/awesome.gif" class="kg-image" alt="awesome" width="600" height="400" loading="lazy"><figcaption>Etiqueta de texto cinético, que se puede desactivar para facilitar la accesibilidad</figcaption></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/Screen-Shot-2021-12-17-at-22.05.37.png" class="kg-image" alt="Screen-Shot-2021-12-17-at-22.05.37" width="600" height="400" loading="lazy"><figcaption>Los iconos de plumas son increíbles para crear una interfaz gráfica de usuario nítida y simplista</figcaption></figure><p>Me abstendré de profundizar en el código base aquí (porque no sabré cuándo parar entonces ?). Solo debes saber que es mucho código, tanto para la lógica como para la interfaz gráfica de usuario. Ve el informe de pelusa Ren'Py a continuación.</p><p>Uf... ¿Podemos pasar ahora a algo más visual?</p><pre><code>Ren'Py 7.4.8.1895 lint report, generated at: Fri Dec 17 22:11:43 2021
Statistics:
The game contains 1,335 dialogue blocks, containing 15,390 words and 85,105 characters, for an average of 11.5 words and 64 characters per block.
The game contains 40 menus, 20 images, and 49 screens.</code></pre><h2 id="el-rastreador-de-progreso">El rastreador de progreso</h2><p>Incluso un proyecto de una sola persona necesita un gerente de proyecto, así que ¿por qué no ser mi propio gerente de proyecto?</p><p>Usé Trello para rastrear mi proceso y colaborar con otros. Incluso codifiqué etiquetas por colores para diferentes categorías de tareas, como codificación, UI/UX, escritura, etc., como se muestra en la imagen de abajo en la primera tarjeta de la columna <strong>Backlog</strong>.</p><p>Y wow, ¿no es un largo pergamino de tareas hechas? ?</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/trello.gif" class="kg-image" alt="trello" width="600" height="400" loading="lazy"><figcaption>Mi tablero de Trello</figcaption></figure><p>Todo en la columna <strong>TODO</strong> y <strong>Doing</strong> se mueve a <strong>Done</strong>, y eso nos lleva a...</p><h2 id="lo-que-aprend-">Lo que aprendí</h2><p>¡Hurra! Después de ocho meses (cuatro meses de elaboración de la idea, más cuatro meses de intensa programación, escritura y creación de arte), te presentamos <strong>Aprende a Programar</strong> <strong>RPG</strong>. ?</p><p>En cuatro meses en el juego, <strong>Lydia</strong> ha pasado de ser <em>una aspirante a ingeniera</em> a <em>una ingeniera con un trabajo de desarrollo</em>. ?</p><p>En cuatro meses del mundo real, he pasado de ser <strong>un aspirante a desarrollador de juegos</strong> a <strong>una desarrolladora de juegos que ha creado un juego</strong>. ?</p><p>Naturalmente, aquí viene la pregunta del millón de dólares: ¿Cuál es mi conclusión de todo este proceso?</p><p>Bueno, como cualquier proceso creativo, el desarrollo de juegos no es fácil. Soy extremadamente afortunada de tener un equipo que me apoya: nuestra artista Noa, que creó el arte de los personajes, Quincy, que creó las increíbles pistas de música originales, y correctores y personal de freeCodeCamp que probo el juego.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/Screen-Shot-2021-12-17-at-22.26.07.png" class="kg-image" alt="Screen-Shot-2021-12-17-at-22.26.07" width="600" height="400" loading="lazy"><figcaption>Mis contribuciones en GitHub distinguen los días en que codifico contra los días en que hago lluvia de ideas, escribo o dibujo ?</figcaption></figure><p>He crecido tanto en términos de habilidades técnicas (al encontrar formas creativas de construir cosas en Ren'Py), habilidades no técnicas (al actuar como mi propio gerente de proyectos) y más (al manejar las expectativas, superar el síndrome de impostor y buscar un equilibrio entre el trabajo y la vida personal).</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://www.freecodecamp.org/news/content/images/2021/12/Screen-Shot-2021-12-18-at-12.33.25.png" class="kg-image" alt="Screen-Shot-2021-12-18-at-12.33.25" width="600" height="400" loading="lazy"><figcaption>¿Sabes qué es el síndrome de impostor? - ¡Claro que sí!</figcaption></figure><p>De ninguna manera fue un viaje fácil, pero el resultado vale la pena cada segundo de trabajo duro. Y lo que es más importante, espero con interés que juegues al juego y me hagas llegar tus comentarios para que pueda mejorar el juego en futuras versiones.</p><p>Espero que disfrutes jugando a <strong>Aprende a Programar RPG</strong> tanto como yo he disfrutado creándolo. ?</p><h2 id="enlaces-de-learntocoderpg">Enlaces de LearnToCodeRPG</h2><p>Puedes encontrar el juego en itch.io aquí:</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://freecodecamp.itch.io/learn-to-code-rpg"><div class="kg-bookmark-content"><div class="kg-bookmark-title">Learn to Code RPG by freeCodeCamp.org</div><div class="kg-bookmark-description">Learn to code and get a dev job ?</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://img.itch.zone/aW1nLzc3MTM5MzYucG5n/32x32%23/E7o8zJ.png" width="32" height="32" alt="E7o8zJ" loading="lazy"><span class="kg-bookmark-publisher">itch.io</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://img.itch.zone/aW1nLzc2OTc2ODcucG5n/original/KGkTTn.png" width="1920" height="1080" alt="KGkTTn" loading="lazy"></div></a></figure><p><a href="https://github.com/freeCodeCamp/LearnToCodeRPG">Y aquí está el repositorio de GitHub con todo el código.</a></p><p>También puedes ver el Tráiler del juego en YouTube y compartirlo con tus amigos:</p><figure class="kg-card kg-embed-card" data-test-label="fitted">
        <div class="fluid-width-video-container">
          <div style="padding-top: 56.17977528089888%;" class="fluid-width-video-wrapper">
            <iframe width="356" height="200" src="https://www.youtube.com/embed/vLK4fOeiIEk?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="fitvid0"></iframe>
          </div>
        </div>
      </figure><p>¿Quieres ver cómo es el juego? Mira el <a href="https://www.youtube.com/watch?v=b_IDdQzPRR4">Let's Play with Ania and Lynn</a>.</p><figure class="kg-card kg-embed-card" data-test-label="fitted">
        <div class="fluid-width-video-container">
          <div style="padding-top: 56.17977528089888%;" class="fluid-width-video-wrapper">
            <iframe width="356" height="200" src="https://www.youtube.com/embed/b_IDdQzPRR4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="fitvid1"></iframe>
          </div>
        </div>
      </figure><p>Y <a href="https://www.freecodecamp.org/news/learn-to-code-rpg-press-kit/">aquí está el kit de prensa oficial para el juego</a>.</p><p>Si estás interesado/a en construir un Juego de Novela Visual, echa un vistazo a mi artículo:</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://www.freecodecamp.org/news/use-python-to-create-a-visual-novel/"><div class="kg-bookmark-content"><div class="kg-bookmark-title">How to Make a Visual Novel Game in 10 Minutes – Python Ren’Py Tutorial</div><div class="kg-bookmark-description">Do you have a story idea that you’d like to turn into a novel? How about addingvisual appeal and interactivity to that novel? A Visual Novel [https://en.wikipedia.org/wiki/Visual_novel] might be the gamegenre you are looking for. And this tutorial is here to help set you up in 10minutes, with m…</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://www.freecodecamp.org/news/favicon.png" width="600" height="400" alt="favicon" loading="lazy"><span class="kg-bookmark-author">Lynn Zheng</span><span class="kg-bookmark-publisher">freeCodeCamp.org</span></div></div><div class="kg-bookmark-thumbnail"><img src="https://www.freecodecamp.org/news/content/images/2021/06/Screen-Shot-2021-06-21-at-14.23.10-1.png" width="600" height="400" alt="Screen-Shot-2021-06-21-at-14.23.10-1" loading="lazy"></div></a></figure> ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
