Como hacer un Instalador PRO con winrar

¡Hola y bienvenidos a un tutorial más! Primeramente, ésto no es un tutorial de RPG Maker, pero les puede servir, para cualquier maker, o para cualquier programa, o virtualmente para cualquier tontería. ¡Sí, exacto caballero, puedes hacerle una instalación hasta a tu presentación de PowerPoint que vas a presentar en clase la próxima semana!
Primero, les muestro MÁS O MENOS lo que se puede conseguir. He de decir que las cosas están puestas como prueba, pero si tienen algo de ingenio pues pueden llegar a algo mejorcito :3.

Ahí tenemos: un archivo autoextraíble de WinRAR, con fondo xD. Y es que la cosa se basa enteramente en la función de creación de autoextraíbles de WinRAR, más un bonus que ya veremos :P.

Pasemos a los ingredientes necesarios (?)...

INGREDIENTES NECESARIOS (?)
1. Tener instalado WinRAR.
2. Tener ResourceHacker, para retocar.
3. Tener Windows.
4. Tener algo que quieras crearle una instalación.
5. Preparar una imagen de fondo. 

• La imagen, al menos para la ventana típica de autoextraíbles de WinRAR, debe medir 521x364px. Con ayuda del ResourceHacker puedes expandir eso, hacer espacio arriba, etc, pero eso es a tu gusto. Más o menos se explicará...

PROCESO DE PREPARACIÓN (?)
Se baten las claras de huevo con el almívar.
1. Primero debes preparar el contenido del archivo autoextraíble. Para ello tienes dos opciones, 

• la interfaz de WinRAR, con la cual puedes manipular y acomodar los contenidos a tu antojo. Y luego 
• O seleccionar lo que vas a comprimir, click derecho, "Añadir al archivo...".

2. Ahora, dependiendo del camino anterior, debemos configurar el autoextraíble.

• Desde WinRAR, presiona Alt+X y ve a "Opciones Avanzadas".
• Desde el cuadro de "Añadir al archivo...", marca la casilla de "Crear un archivo autoextraíble". Ve a la pestaña Avanzado, y presiona el botón "Autoextraíble"

Así en ambos estamos ya en esta ventana, ¿cierto?

3. Configurar el autoejecutable. Hay muchas cosas posibles para hacer con el autoejecutable. En su mayoría, es mejor que las experimentes por tu cuenta xD. Acá un sumario de las que no se tocarán a fondo en éste tutorial, pero que pueden interesarte... (lo que está en paréntesis es la pestaña donde se encuentra). Recuerda que mayoría de cosas en WinRAR tienen un botón "Ayuda", en español, así que puedes guiarte un poco con eso >_<.
Carpeta de Extracción (General): Permite especificar una carpeta predeterminada.
Ejecutar tras/antes de la extracción (Instalación): ¿Qué tal, por ejemplo, ejecutar el juego apenas se instala?
Accesos directos (Avanzado): Aaajajá. Crear accesos directos. Seguro te suena.
Título de la ventana/texto de la licencia (Licencia): En caso que tengas algo qué decir, o algún término especial. Especialmente DISCLAIMERS XDDDD. ¡Los disclaimers son lo más importante! (?).

La pestaña "Texto e ícono" la veremos un poco más de cerca en éste tutorial :3...

TEXTO E ÍCONO

Título de la ventana: Creo es bastante transparente, cambia el texto del título de la ventana. Puedes ponerle "Programa de instalación de LeJuego1" o lo que sea.

Texto a mostrar en la ventana: Veamos de nuevo la ventana de ejemplo del inicio del tutorial...

SPOILER:

Ahí donde yo tiré mis chorradas de "osa mayor" lalala (?), ahí va el texto. Pueden dejar ese campo vacío, y WinRAR lo llenará con el texto default:

• Pulse el botón Extraer para iniciar la extracción.
  
• Use el botón Examinar para seleccionar la carpeta de destino de forma gráfica. Tambien puede especificarla manualmente.
  
• Si la carpeta de destino no existe será creada automáticamente antes de la extracción.

También pueden cargar el texto desde fichero. Para guardarlo por ahí, y no tener que reescribir las cosas. Puede ser por ejemplo, un log con los cambios de versión y tal.

Ícono y logotipo: Ésta es la parte bella :333. El logotipo es la imagen que va, normalmente, al costado izquierdo. Sin embargo, no tiene límite de tamaño, y de eso nos podemos aprovechar >8D... Tengan en cuenta que sólo acá pueden importar imágenes con seguridad, de 1,2,4,8,16,32,7000 bits, de 5645486x156761564 de tamaño... en fin, les acepta cualquier tontería en BMP (y sólo BMP). Pero recuerden también que a más grande y mayor cantidad de bits de color, más inmenso se les hace el archivo final. No es mi culpa si de tu juego de 2Mb el instalador termina siendo 60Mb x'D!.

"ACERCA DE ÍCONOS:

Ahora, con todo ésto deberíamos tener... esto.

¿Notan que la imagen está mal posicionada? Ahí es donde entra nuestro amigo el ResourceHacker. Porque así se ve feo, a menos que tu imagen esté pensada para estar así (que puede ser... la gente es creativa ¿no?).

EL RESOURCE HACKER
Ahora entramos en los terrenos del maaaaal (?). En fin, vamos rápido, y no se pierdan, que el camino es peligroso. (?). NAH mentira, si pueden échenle un vistazo a las cosas, es grátis.
1. Abrimos el archivo con Resource Hacker. Si lo han instalado correctamente, debería bastar con dar click-derecho al archivo autoextraíble, y darle a la segunda opción (debería decir "Open with Resource Hacker" o algo así).
2. Al lado izquierdo, vamos a la carpeta "Dialog", donde podemos editar las ventanas.

3. Aquí hay dos lugares que queremos modificar. LICENSEDLG y STARTDLG. Una es la ventana principal, otra es la ventana de licencia. Si no usan licencia, no se preocupen por la de LICENSEDLG xD.
Abrimos la carpeta, y en ambos casos nos saldrá un único "recurso", llamado 1033. Abrimos ese recurso.

• LICENSEDLG: Buscamos ésta línea:

  CÓDIGO: 

    CONTROL "", 102, STATIC, SS_BITMAP | SS_REALSIZEIMAGE | WS_CHILD | WS_VISIBLE, 6, 9, 61, 186

  
  
• 
  Reemplazamos por ésto:

  CÓDIGO: 

    CONTROL "", 102, STATIC, SS_BITMAP | SS_REALSIZEIMAGE | WS_CHILD | WS_VISIBLE, 0, 0, 61, 186

  
  
• 
  Pueden notar, que cambiamos dos números sólamente. 6 y 9. Esas son posiciones X y Y. Los otros dos números, 61 y 186, son ancho y alto.
  
  Presionamos el botón que dice "Compile script"
• STARTDLG: Igual que antes, buscamos la línea:

  CÓDIGO: 

    CONTROL "", 108, STATIC, SS_BITMAP | SS_REALSIZEIMAGE | WS_CHILD | WS_VISIBLE, 6, 9, 61, 186

  
  
• 
  Y reemplazamos...

  CÓDIGO: 

    CONTROL "", 108, STATIC, SS_BITMAP | SS_REALSIZEIMAGE | WS_CHILD | WS_VISIBLE, 0, 0, 61, 186

  
  
• 
  Presionamos "Compile Script".

4. Ahora guardamos. Resource Hacker nos creará un respaldo automáticamente, así que si la cagamos xD, hay vuelta atrás.

Debería entonces ahora quedar bien :DDD.


Ahora, sabiendo eso, ¿qué tal si vamos más allá? Quiero correr el contenido de la ventana STARTDLG por ejemplo hacia abajo, para hacerle campo a un logotipo arriba :3.

A mí nunca me ha funcionado agregar imágenes a un ejecutable con el ResHack, así que haremos un truco nada más, y nos ahorramos espacio además. Simplemente, editen la imagen aquella, vuelvan a crear el autoextraíble ='D, y nos vemos de vuelta acá...

(Después de tres días).

Bien, vamos a hacerlo bien simple. Acá está el "script" que hice para la ventana.

CÓDIGO: 

STARTDLG DIALOG 27, 47, 347, 224
STYLE DS_MODALFRAME | DS_CENTER | WS_MINIMIZEBOX | WS_POPUP | WS_VISIBLE | WS_CAPTION | WS_SYSMENU
CAPTION "WinRAR self-extracting archive"
LANGUAGE LANG_ENGLISH, SUBLANG_ENGLISH_US
FONT 8, "MS Shell Dlg 2"
{
   CONTROL "", 108, STATIC, SS_BITMAP | SS_REALSIZEIMAGE | WS_CHILD | WS_VISIBLE, 0, 0, 61, 186 
  CONTROL "&Destination folder", 101, STATIC, SS_LEFT | SS_PATHELLIPSIS | WS_CHILD | WS_VISIBLE | WS_GROUP, 75, 147, 264, 8 
  CONTROL "", 102, COMBOBOX, CBS_DROPDOWN | CBS_AUTOHSCROLL | WS_CHILD | WS_VISIBLE | WS_VSCROLL | WS_TABSTOP, 75, 157, 196, 24 
  CONTROL "Bro&wse...", 103, BUTTON, BS_PUSHBUTTON | WS_CHILD | WS_VISIBLE | WS_TABSTOP, 278, 156, 60, 14 
  CONTROL "", 104, "RichEdit20W", ES_LEFT | ES_MULTILINE | ES_AUTOVSCROLL | ES_READONLY | WS_CHILD | WS_VISIBLE | WS_BORDER | WS_VSCROLL | WS_TABSTOP, 75, 82, 264, 57 
  CONTROL "", 105, STATIC, SS_ETCHEDHORZ | WS_CHILD, 75, 166, 266, 1 
  CONTROL "Installation progress", 107, STATIC, SS_LEFT | WS_CHILD | WS_VISIBLE | WS_GROUP, 75, 175, 196, 8 
  CONTROL "", 106, "msctls_progress32", PBS_SMOOTH | WS_CHILD | WS_VISIBLE | WS_BORDER, 75, 185, 264, 10 
  CONTROL "", -1, STATIC, SS_ETCHEDHORZ | WS_CHILD | WS_VISIBLE, 0, 201, 349, 1 
  CONTROL "Install", 1, BUTTON, BS_DEFPUSHBUTTON | WS_CHILD | WS_VISIBLE | WS_TABSTOP, 191, 207, 70, 14 
  CONTROL "Cancel", 2, BUTTON, BS_PUSHBUTTON | WS_CHILD | WS_VISIBLE | WS_TABSTOP, 268, 207, 70, 14 
}

La cuestión es que, cada control tiene valores como los que antes dije. Puedes cambiarlos para acomodar los elementos. Acá, por ejemplo, yo hice ésto:

Simplemente achiqué la caja de texto para que se viera el logo.
Pero uno puede ir más allá. Puede agregar textos sin caja. Puede agregar separadores. Puede agrandar la ventana. Todo con eso, y con el menú "Insert control", haciendo uso del previsualizador.
El previsualizador permite además modificar los controles manualmente. Agrandarlos, acomodarlos, etc.

Para agregar un "control" (elemento).
1. Posicionarse en la ventana del previsualizador (asegurarse que está activa), y presionar Ctrl-I. Les saldrá algo como esto:

Arriba vienen los distintos tipos de controles. Para nuestros usos, simplemente dénle click al que deseen agregar, rellenen el campo de caption si es necesario (para labels por ejemplo) y presionen Ok.

Así, tendría yo algo como ésto. Agrandé un poco la ventana, agregué un texto (label), y otra línea divisoria (que copié la línea anterior y la bajé un poco y listo xD.


Y ahí queda, prueben, vayan despacio, probando cosa por cosa porque a veces la cosa se descuageringa y ya xD. Y espero que les sirva

Categories: TUTORIALES