1.2.5 raylib second part

src/config.ts

@@ -61,7 +61,7 @@ export const navBarConfig: NavBarConfig = {
 export const profileConfig: ProfileConfig = {
   avatar: 'assets/images/avatar.jpg',  // Relative to the /src directory. Relative to the /public directory if it starts with '/'
   name: 'Grupo 932 - ISyTE',
-  bio: 'v1.2.3.2 - Gracias por todo',
+  bio: 'v1.2.5',
   links: [
     /*
     {

src/content/posts/how-to-install-raylib/how-to-install-raylib.md

@@ -44,6 +44,10 @@ Copyright (C) 2024 Free Software Foundation, Inc.
 ...entonces tienes una versión reciente de tu compilador.
 
 4. Si tu compilador es viejo, sigue leyendo. Si no, puedes saltarte al [paso 2](#paso-2-descargar-e-instalar-raylib), pero incluso si ya tienes una versión reciente, te recomiendo seguir leyendo por si acaso.
+
+:::warning[ADVERTENCIA]
+Por si acaso, incluso si tienes una versión reciente de tu compilador, te recomiendo que sigas los pasos para instalar **w64devkit** específicamente para **Raylib**. Si no lo haces, es posible que tengas problemas al intentar compilar.
+:::
 ### Instalar compilador de C/C++ reciente
 Antes de comenzar, es importante mencionar que aunque técnicamente puedes mantener MinGW, es recomendable eliminarlo ya que es considerado obsoleto. En su lugar, vamos a instalar un kit de desarrollo llamado **[w64devkit](https://github.com/skeeto/w64devkit)**.
 
@@ -56,13 +60,16 @@ Ahora, para instalar **w64devkit**, sigue estos pasos:
 2. Abre el ejecutable. Deberías ver algo similar a esto:
 ![Imagen 1](./image1.png)
 Haz clic en el botón `...` y selecciona la carpeta donde quieres extraer los archivos. Haz clic en `Extract` después de seleccionar la carpeta. Recomiendo extraerlo en `C:\` o `C:\Users\{tu_usuario}\`.
-3. Ya que hayas extraído los archivos, ahora debes agregar la carpeta `w64devkit` a la variable de entorno `Path`. Para hacerlo, sigue estos pasos:
+3. Ya que hayas extraído los archivos, ahora debes agregar la carpeta `w64devkit\bin` a la variable de entorno `Path`. Para hacerlo, sigue estos pasos:
     1. Abre la barra de búsqueda y escribe `variables de entorno` o `environment variables`.
-    2. Haz clic en `Editar las variables de entorno del sistema` o `Edit environment variables for your account`. Deberías ver algo similar a esto:
+    2. Haz clic en `Editar las variables de entorno de usuario` o `Edit environment variables for your account`. Deberías ver algo similar a esto:
     ![Imagen 2](./image2.png)
     3. En la sección `Variables de usuario para {tu_usuario}` o `User variables for {your_username}`, selecciona la variable `Path` y haz clic en `Editar`.
     ![Imagen 3](./image3.png)
-    4. Haz clic en `Nuevo`, `Buscar` (o `New`, `Browse`) y busca la carpeta `w64devkit` que extrajiste anteriormente, y selecciona `w64devkit\bin`.
+    :::warning[AVISO]
+    Si no te muestra el menú que aparece en la imagen, entonces selecciona la variable `Path` que está en la sección `Variables del sistema` o `System variables`. La diferencia es que si seleccionas la variable de usuario, entonces solo afectará a tu usuario, mientras que si seleccionas la variable del sistema, afectará a todos los usuarios.
+    :::
+    4. Haz clic en `Nuevo`, `Examinar` (o `New`, `Browse`) y busca la carpeta `w64devkit` que extrajiste anteriormente, y selecciona `w64devkit\bin`.
     5. Haz clic en `Aceptar` o `OK` en todas las ventanas.
 :::warning[AVISO]
 Si en tu variable de entorno `Path` ya tienes una dirección que contiene `MinGW`, asegúrate de eliminarla, ya que como se mencionó previamante, **MinGW** es obsoleto, y si no lo eliminas, es posible que cause conflictos con **w64devkit**.
@@ -82,6 +89,15 @@ Como puedes ver, `main.c` muestra errores debido a que no encuentra la bibliotec
 ## Paso 3: Construir y descargar Raylib
 Lo único que debes hacer es ejecutar el archivo `build-MinGW-W64.bat` (ya sea desde la terminal, el explorador de archivos, o **Visual Studio Code**). El proceso de construcción puede tardar aproximadamente 1 o 2 minutos, dependiendo de tu conexión a internet.
 
-Una vez instalando es probable que debas reiniciar **Visual Studio Code** para que los cambios surtan efecto. Si `main.c` o `main.cpp` no muestra errores, entonces has instalado **Raylib** correctamente. ¡Felicidades! Ahora puedes comenzar a programar tus videojuegos en **Raylib**.
+Una vez instalando es muy probable que debas reiniciar **Visual Studio Code** para que los cambios surtan efecto. Si `main.c` o `main.cpp` no muestra errores, entonces has instalado **Raylib** correctamente. ¡Felicidades! Ahora puedes comenzar a programar tus videojuegos en **Raylib**...
+
+**Excepto que no realmente**, ya que la primera vez que escribí este artículo, se me olvidó mencionar que para que **Visual Studio Code** pueda compilar tu juego, la carpeta raíz de tu proyecto debe ser la carpeta `raylib-quickstart` específicamente (puedes cambiar el nombre de la carpeta si quieres). Si no lo haces, entonces **Visual Studio Code** no podrá encontrar la biblioteca de **Raylib**, y te mostrará errores. Asegúrate de que quedé igual como en la última imagen arriba.
+:::tip[SUGERENCIA]
+**Raylib** se instaló correctamente si...
+1. No te muestra errores en `main.c` o `main.cpp`.
+2. Al mantener pulsado `Ctrl` y hacer clic en `#include "raylib.h"`, te lleva a la definición de la biblioteca, que significa que **Visual Studio Code** puede encontrar la biblioteca.
+3. En tu proyecto se encuentra la siguiente carpeta `\build\external\raylib-master\`:
+![Imagen 6](./image6.png)
+:::
 ## Bonus: ¿Cómo usar Raylib?
 Aprender a usar **Raylib** está fuera del alcance de este artículo, pero si deseas aprender a usarlo, te recomiendo que visites la [documentación oficial de Raylib](https://www.raylib.com/cheatsheet/cheatsheet.html). Ahí encontrarás todo lo que necesitas para comenzar a programar. También puedes darle un vistazo a los ejemplos oficiales de Raylib [aquí](https://www.raylib.com/examples.html).

src/content/posts/how-to-start-raylib/how-to-start-raylib.md

@@ -0,0 +1,122 @@
+---
+title: ¿Cómo empezar con Raylib?
+published: 2024-10-28
+description: 'Raylib es considerado una de las bibliotecas de C/C++ más fáciles de usar para crear videojuegos, pero puede ser un poco complicado empezar para algunos. Aquí te enseñaré cómo empezar con Raylib.'
+image: ''
+tags: [guía, raylib, c, c++, videojuegos]
+category: 'Guía'
+draft: false 
+language: ''
+id: 22
+---
+## Tabla de contenido
+- [Compilar y correr](#compilar-y-correr)
+- [Empezar otro proyecto](#empezar-otro-proyecto)
+- [Conceptos básicos](#conceptos-básicos)
+    - [El código más esencial](#el-código-más-esencial)
+    - [Ciclo principal del juego](#ciclo-principal-del-juego)
+- [¿Qué sigue?](#qué-sigue)
+___
+Antes de comenzar, recomiendo bastante que primero leas [¿Cómo instalar Raylib?](/grupo932/posts/how-to-install-raylib/how-to-install-raylib/) si aún no lo has hecho.
+## Compilar y correr
+Para compilar y correr un programa de Raylib, a partir de la plantilla rápida que descargaste en el artículo anterior, sigue estos pasos:
+1. En **Visual Studio Code**, con la carpeta de tu proyecto abierta como raíz, presiona `F5` para compilar y correr el programa. Alternativamente, también puedes presionar seleccionar la opción del menú izquierdo que dice `Run and Debug` (como se muestra en la imagen).
+![Imagen 1](./image1.png)
+También puedes compilar y correr el juego presionando el botón de `Debug C/C++ File` o `Run C/C++ File` en la parte superior derecha de la ventana, y seleccionar cualquiera de las 4 opciones mostradas en la imagen:
+![Imagen 2](./image2.png)
+![Imagen 3](./image3.png)
+:::note[NOTA]
+Si tienes descargada la extensión **Code Runner**, es probable que aparezca la opción `Run Code`. Compilar de esta forma no funcionará, así que asegúrate de usar las opciones mencionadas anteriormente.
+:::
+:::warning[AVISO]
+La primera vez que intentes compilar y correr tu juego, va a tardar alrededor de 1 o 2 minutos en compilar. Esto es normal, y a partir de la segunda vez, debería compilar más rápido.
+:::
+2. Una vez compilado, si no has realizado cambios en el código, puedes volver a correr el archivo ya compilado, o sea, sin necesidad de compilarlo de nuevo, ejecutando el archivo `.exe` que se generó en la carpeta `\bin\Release\` o `\bin\Debug\` (dependiendo de la configuración de compilación que hayas seleccionado).
+## Empezar otro proyecto
+Si quieres empezar otro proyecto, simplemente copia la carpeta de la plantilla rápida de Raylib y renómbrala a lo que quieras. Es por esto que recomiendo bastante que tengas una copia de la plantilla rápida en una carpeta aparte, para que puedas copiarla y renombrarla fácilmente a la hora de empezar un nuevo proyecto.
+## Conceptos básicos
+Si quieres aprender más sobre Raylib, te recomiendo que te dirijas a la [página oficial de Raylib](https://www.raylib.com/), donde encontrarás la documentación oficial, tutoriales y ejemplos de código. Alternativamente, también puedes buscar tutoriales en YouTube.
+
+Dicho esto, puedo darte una pequeña introducción a los conceptos básicos de Raylib.
+### El código más esencial
+Empezamos con el siguiente código base:
+```cpp
+#include "raylib.h"
+int main()
+{
+    InitWindow(800, 450, "Raylib");
+    SetTargetFPS(60);
+    while (!WindowShouldClose())
+    {
+        // Ciclo principal del juego
+    }
+    CloseWindow();
+    return 0;
+}
+```
+Ahora analicemos el código:
+```cpp
+#include "raylib.h"
+```
+Incluye la biblioteca de Raylib.
+```cpp
+InitWindow(800, 450, "Raylib");
+```
+Inicializa la ventana del juego con un ancho de 800 píxeles, un alto de 450 píxeles y un título de "Raylib". Por supuesto, puedes cambiar estos valores a lo que quieras.
+```cpp
+SetTargetFPS(60);
+```
+Establece la cantidad de fotogramas por segundo a 60. Puedes cambiar este valor a lo que quieras, pero es recomendable mantenerlo en 60.
+```cpp
+while (!WindowShouldClose())
+{
+    // Ciclo principal del juego
+}
+```
+Ciclo principal del juego. Mientras la ventana no deba cerrarse (es decir, hasta que el usuario cierre la ventana o presione `Esc`), el programa ejecutará lo que esté dentro del ciclo.
+```cpp
+CloseWindow();
+```
+Finalmente, cierra la ventana y libera la memoria.
+### Ciclo principal del juego
+Dentro del ciclo principal del juego, puedes dibujar cosas en la ventana, actualizar la lógica del juego, y más. Es recomendable primero encargarse de la lógica del juego, y luego dibujar las cosas en la ventana.
+
+Por el momento, solo vamos a aprender a dibujar. Para dibujar, usamos la función `BeginDrawing()` y `EndDrawing()`. Entre estas dos funciones, puedes dibujar cosas en la ventana, llamando a funciones como `DrawRectangle()`, `DrawCircle()`, `DrawText()`, etcétera (puedes encontrar todas las funciones de dibujo en la [documentación oficial de Raylib](https://www.raylib.com/cheatsheet/cheatsheet.html), en la sección del módulo `rshapes`).
+```cpp
+while (!WindowShouldClose())
+{
+    BeginDrawing();
+    ClearBackground(RAYWHITE);
+    DrawText("¡Hola, mundo!", 10, 10, 20, DARKGRAY);
+    EndDrawing();
+}
+```
+Vamos a hablar brevemente de las funciones usadas:
+```cpp
+BeginDrawing();
+```
+Comienza a dibujar en la ventana.
+```cpp
+ClearBackground(RAYWHITE);
+```
+Limpia el fondo de la ventana con el color `RAYWHITE`, que es un color predefinido en **Raylib** muy parecido al blanco. Puedes cambiar el color a alguno de los otros predefinidos (verás una lista de colores predefinidos en la [documentación oficial de Raylib](https://www.raylib.com/cheatsheet/cheatsheet.html), en la sección de `colors`). También puedes crear tu propio color con `(Color){r, g, b, a}`, donde `r`, `g`, `b` y `a` son valores entre 0 y 255, por ejemplo:
+```cpp
+ClearBackground((Color){255, 127, 63, 255});
+```
+:::warning[AVISO]
+Si no usas `ClearBackground()`, entonces los dibujos anteriores se quedarán en la ventana, y muy rápidamente la ventana se verá llena de dibujos y todo se puede salir de control. Es por esto que siempre asegúrate de llamar a esta función, y siempre antes de dibujar algo en la ventana.
+:::
+Puedes usar [este sitio](https://htmlcolorcodes.com/color-picker/) para encontrar el color que quieras y obtener los valores `r`, `g`, `b` y `a` (que son los valores de rojo, verde, azul y alfa, respectivamente).
+```cpp
+DrawText("¡Hola, mundo!", 10, 10, 20, DARKGRAY);
+```
+Dibuja el texto "¡Hola, mundo!" en la posición `(10, 10)` con un tamaño de 20 píxeles y un color de `DARKGRAY`. Puedes cambiar el texto, la posición, el tamaño y el color a lo que quieras.
+:::tip[SUGERENCIA]
+La posición `(0, 0)` es la esquina superior izquierda de la ventana, y no la esquina inferior izquierda como en la mayoría de los sistemas de coordenadas. Esto es común en la mayoría de software de dibujo y videojuegos.
+:::
+```cpp
+EndDrawing();
+```
+Termina de dibujar en la ventana.
+## ¿Qué sigue?
+Si suficiente gente lo pide, puedo expandir este artículo, pero por el momento ando ocupado con otros proyectos. Mi consejo es que vayas a Youtube y busques tutoriales de Raylib, o que vayas a la [documentación oficial de Raylib](https://www.raylib.com/cheatsheet/cheatsheet.html) y empieces a experimentar con el código. ¡Buena suerte!

src/content/posts/i-give-up.md

@@ -5,7 +5,7 @@ description: 'A no ser que una cantidad considerable de personas me pidan lo con
 image: ''
 tags: [anuncio]
 category: 'Anuncio'
-draft: false 
+draft: true 
 language: ''
 id: 20
 ---

src/content/spec/history.md

@@ -10,7 +10,8 @@ ___
         - [1.2.2.1](#1221) (27/09/2024)
     - [1.2.3](#123) (27/09/2024)
         - [1.2.3.1](#1231) (28/09/2024)
-        - [1.2.3.2](#1232) (21/10/2024)
+    - [1.2.4](#124) (21/10/2024)
+    - [1.2.5](#125) (28/10/2024)
 - [1.1](#11) (19/09/2024)
     - [1.1.1](#111) (20/09/2024)
 - [1.0](#10) (13/09/2024)
@@ -61,11 +62,16 @@ Previamente conocida como **1.2.3**, se cambió a **1.2.2.1** debido a que no fu
 (28/09/2024)
 - **Se agregó un nuevo artículo importante**.
     1. [️️️️️🏳️ Me rindo](../posts/i-give-up/)
-#### 1.2.3.2
+### 1.2.4
 (21/10/2024)
 - **Se agregó un nuevo artículo**.
     1. [¿Cómo instalar Raylib?](../posts/how-to-install-raylib/how-to-install-raylib/) 
 - Se cambió el salón de la asignatura de "Programación Estrucuturada" de **E45 - 301** a **E1 - 301** en el horario.
+### 1.2.5
+(28/10/2024)
+- **Se agregó un nuevo artículo**.
+    1. [¿Cómo empezar con Raylib?](../posts/how-to-start-raylib/how-to-start-raylib/) 
+- Se corrigió algunos detalles de [¿Cómo instalar Raylib?](../posts/how-to-install-raylib/how-to-install-raylib/).
 ___
 ## 1.1
 (19/09/2024)