diff --git a/src/config.ts b/src/config.ts index d8bec05..c72f1ac 100644 --- a/src/config.ts +++ b/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: [ /* { diff --git a/src/content/posts/how-to-install-raylib/how-to-install-raylib.md b/src/content/posts/how-to-install-raylib/how-to-install-raylib.md index ce27cd9..6c9a32f 100644 --- a/src/content/posts/how-to-install-raylib/how-to-install-raylib.md +++ b/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). diff --git a/src/content/posts/how-to-install-raylib/image6.png b/src/content/posts/how-to-install-raylib/image6.png new file mode 100644 index 0000000..0b89b4e Binary files /dev/null and b/src/content/posts/how-to-install-raylib/image6.png differ diff --git a/src/content/posts/how-to-start-raylib/how-to-start-raylib.md b/src/content/posts/how-to-start-raylib/how-to-start-raylib.md new file mode 100644 index 0000000..1136d02 --- /dev/null +++ b/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! \ No newline at end of file diff --git a/src/content/posts/how-to-start-raylib/image1.png b/src/content/posts/how-to-start-raylib/image1.png new file mode 100644 index 0000000..4c2c33d Binary files /dev/null and b/src/content/posts/how-to-start-raylib/image1.png differ diff --git a/src/content/posts/how-to-start-raylib/image2.png b/src/content/posts/how-to-start-raylib/image2.png new file mode 100644 index 0000000..1192531 Binary files /dev/null and b/src/content/posts/how-to-start-raylib/image2.png differ diff --git a/src/content/posts/how-to-start-raylib/image3.png b/src/content/posts/how-to-start-raylib/image3.png new file mode 100644 index 0000000..9ae194b Binary files /dev/null and b/src/content/posts/how-to-start-raylib/image3.png differ diff --git a/src/content/posts/i-give-up.md b/src/content/posts/i-give-up.md index 1c946e2..dda2b78 100644 --- a/src/content/posts/i-give-up.md +++ b/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 --- diff --git a/src/content/spec/history.md b/src/content/spec/history.md index 7144c2a..70879b8 100644 --- a/src/content/spec/history.md +++ b/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)