Instalar Y Configurar Retropie En Debian

<blockquote style="padding-top: 1em; font-size: 1.2em; line-height: 1.4em;">Instalación y configuración de <strong>RetroPie en sistemas basados en Debian</strong>.</blockquote>
<p style="text-align: left;">
    Por <strong>@mcherrera</strong> |
    <a href="//mcherrera.dev" target="_blank">mcherrera.dev</a>
</p>
</div>
</div>

Presiona <kbd class="pixel-key" onclick="Reveal.next(); return false;">→</kbd> para continuar

---

<h2 class="r-fit-text">Tener una Distribución basada en Debian</h2>

.pixel-logo{
    image-rendering:pixelated;
    image-rendering:crisp-edges;
    width:100px;
    filter:contrast(1.15) saturate(1.2);
    transition:inherit;
}

.pixel-card p{
    margin:.4em 0 0;
}

.pixel-card:hover{
    transform:translateY(-8px) scale(1.12);
    filter:brightness(1.25);
    animation:pixelSelect .18s steps(2) infinite alternate;
}

.pixel-card:hover .pixel-logo{
    filter:
        brightness(1.35)
        contrast(1.6)
        saturate(1.6)
        drop-shadow(4px 4px 0 #000);
}

.pixel-card:hover,
.pixel-card:hover p,
.pixel-card:hover span{
    text-shadow:
        2px 2px 0 #000,
        0 0 8px rgba(255,255,255,.25);
}

@keyframes pixelSelect{
    from{
        transform:translateY(-6px) scale(1.10);
    }
    to{
        transform:translateY(-10px) scale(1.14);
    }
}
</style>

<div style="display: flex; justify-content: center; gap: 1.6em; margin-top: 1em">
<a href="/slides/instalacion-lubuntu20.html" data-preview-link>
<div class="pixel-card">
  <img src="/assets/media/pixels/lubuntu.webp" alt="logo lubuntu" class="pixel-logo">
  Lubuntu
  <p><span style="color: #fefefe;">20.04 LTS</span> +</p>
</div>
</a>
<a href="https://releases.ubuntu.com/18.04/" target="_blank">
<div class="pixel-card">
  <img src="/assets/media/pixels/ubuntu.webp" alt="logo ubuntu" class="pixel-logo">
  Ubuntu
  <p><span style="color: #fefefe;">20.04 LTS</span> +</p>
</div>
</a>
<a href="https://www.linuxmint.com/rel_ulyana_cinnamon.php" target="_blank">
<div class="pixel-card">
  <img src="/assets/media/pixels/linux-mint.webp" alt="logo linux mint" class="pixel-logo">
  Linux Mint
  <p><span style="color: #fefefe;">20 LTS</span> +</p>
</div>
</a>
</div>

> __Con cualquiera de estas distribuciones instaladas__, ya podemos continuar con la instalación de RetroPie.

Presiona <kbd class="pixel-key" onclick="Reveal.next(); return false;">→</kbd> para continuar

---

> **Ojo**: El script de RetroPie para Debian **solo funciona en sistemas x86** (**32** y **64 bits**). Si usas un equipo ARM, deberás ejecutar una máquina virtual **x86**; en una máquina virtual ARM no funcionará.

</div>

---

<h2 class="r-fit-text">Realiza los siguientes pasos en la Terminal</h2>

> Recuerda abrir la Terminal con:
>
> <kbd class="pixel-key">Ctrl</kbd> + <kbd class="pixel-key">Alt</kbd> + <kbd class="pixel-key">T</kbd>

Presiona <kbd class="pixel-key" onclick="Reveal.next(); return false;">→</kbd> para continuar

---

<font size="5"><span style="color: rgb(171, 0, 0);">1.</span> Actualiza el sistema</font>
<style>
.rp-terminal{
    margin:2rem 0;
    background:#252525;
    border:2px solid #565656;
    overflow:hidden;
    box-shadow:
        0 0 0 2px #1a1a1a,
        6px 6px 0 rgba(0,0,0,.35);
    position:relative;
}

.rp-terminal-body{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#1d1d1d;
    gap:.5rem;
    position:relative;
    padding: .2em .6em;
    z-index:2;
    overflow-x:auto;
}

.rp-terminal-body code{
    display:block;

flex:1;
    margin:0;

font-size:1.45rem;
    line-height:1;

white-space:nowrap;
    overflow-x:auto;

color:#ececec;
}

.rp-copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;

width:34px;
    height:34px;

padding:0;

border:none;
    background:transparent;

cursor:pointer;

flex-shrink:0;
}

.rp-copy-btn img{
    width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-copy-btn:hover img{
    transform:scale(1.5);
}

.rp-copy-btn img{

width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-user{
    color:#6cb6ff;
}

.rp-path{
    color:#ffffff;
}
/* efecto CRT retro */

.rp-terminal::before{

content:"";

position:absolute;

inset:0;

z-index:4;
    pointer-events:none;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.04) 0px,
            rgba(255,255,255,.04) 1px,
            transparent 2px,
            transparent 4px
        );
}

/* brillo interior */
.rp-terminal::after{

content:"";

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

background:
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0,0,0,.45) 100%
        );

}
/* scrollbar retro pixel */
.rp-terminal-body::-webkit-scrollbar{
    height:12px;
}

.rp-terminal-body::-webkit-scrollbar-track{
    background:#111;
    border-top:2px solid #333;
}

.rp-terminal-body::-webkit-scrollbar-thumb{
    background:#666;
    border:2px solid #aaa;
}

.rp-terminal-body::-webkit-scrollbar-thumb:hover{
    background:#888;
}

/* Firefox */
.rp-terminal-body{
    scrollbar-width:thin;
    scrollbar-color:#666 #111;
}
</style>

<div class="rp-terminal">
<div class="rp-terminal-body">
<code class="pixel-font"><span class="rp-user">user@debian</span><span class="rp-path">:~</span>$ sudo apt update && sudo apt upgrade -y</code>
<button class="rp-copy-btn" data-command="sudo apt update && sudo apt upgrade -y" title="Copiar comando">
<img src="/assets/media/pixels/clipboard.webp" alt="copy">
</button>
</div>
</div>

<font size="5"><span style="color: rgb(171, 0, 0);">2.</span> Instala los paquetes necesarios</font>

.rp-terminal-body code{
    display:block;

flex:1;
    margin:0;

font-size:1.45rem;
    line-height:1;

white-space:nowrap;
    overflow-x:auto;

color:#ececec;
}

.rp-copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;

width:34px;
    height:34px;

padding:0;

border:none;
    background:transparent;

cursor:pointer;

flex-shrink:0;
}

.rp-copy-btn img{
    width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-copy-btn:hover img{
    transform:scale(1.5);
}

.rp-copy-btn img{

width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-user{
    color:#6cb6ff;
}

.rp-path{
    color:#ffffff;
}
/* efecto CRT retro */

.rp-terminal::before{

content:"";

position:absolute;

inset:0;

/* brillo interior */
.rp-terminal::after{

content:"";

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

background:
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0,0,0,.45) 100%
        );

}
/* scrollbar retro pixel */
.rp-terminal-body::-webkit-scrollbar{
    height:12px;
}

.rp-terminal-body::-webkit-scrollbar-track{
    background:#111;
    border-top:2px solid #333;
}

.rp-terminal-body::-webkit-scrollbar-thumb{
    background:#666;
    border:2px solid #aaa;
}

.rp-terminal-body::-webkit-scrollbar-thumb:hover{
    background:#888;
}

/* Firefox */
.rp-terminal-body{
    scrollbar-width:thin;
    scrollbar-color:#666 #111;
}
</style>

<div class="rp-terminal">
<div class="rp-terminal-body">
<code class="pixel-font"><span class="rp-user">user@debian</span><span class="rp-path">:~</span>$ sudo apt install -y git dialog unzip xmlstarlet</code>
<button class="rp-copy-btn" data-command="sudo apt install -y git dialog unzip xmlstarlet" title="Copiar comando">
<img src="/assets/media/pixels/clipboard.webp" alt="copy">
</button>
</div>
</div>

<font size="5"><span style="color: rgb(171, 0, 0);">3.</span> Descarga el script de configuración de RetroPie</font>

.rp-terminal-body code{
    display:block;

flex:1;
    margin:0;

font-size:1.45rem;
    line-height:1;

white-space:nowrap;
    overflow-x:auto;

color:#ececec;
}

.rp-copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;

width:34px;
    height:34px;

padding:0;

border:none;
    background:transparent;

cursor:pointer;

flex-shrink:0;
}

.rp-copy-btn img{
    width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-copy-btn:hover img{
    transform:scale(1.5);
}

.rp-copy-btn img{

width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-user{
    color:#6cb6ff;
}

.rp-path{
    color:#ffffff;
}
/* efecto CRT retro */

.rp-terminal::before{

content:"";

position:absolute;

inset:0;

/* brillo interior */
.rp-terminal::after{

content:"";

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

background:
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0,0,0,.45) 100%
        );

}
/* scrollbar retro pixel */
.rp-terminal-body::-webkit-scrollbar{
    height:12px;
}

.rp-terminal-body::-webkit-scrollbar-track{
    background:#111;
    border-top:2px solid #333;
}

.rp-terminal-body::-webkit-scrollbar-thumb{
    background:#666;
    border:2px solid #aaa;
}

.rp-terminal-body::-webkit-scrollbar-thumb:hover{
    background:#888;
}

/* Firefox */
.rp-terminal-body{
    scrollbar-width:thin;
    scrollbar-color:#666 #111;
}
</style>

<div class="rp-terminal">
<div class="rp-terminal-body">
<code class="pixel-font"><span class="rp-user">user@debian</span><span class="rp-path">:~</span>$ git clone --depth=1 https://github.com/RetroPie/RetroPie-Setup.git</code>
<button class="rp-copy-btn" data-command="git clone --depth=1 https://github.com/RetroPie/RetroPie-Setup.git" title="Copiar comando">
<img src="/assets/media/pixels/clipboard.webp" alt="copy">
</button>
</div>
</div>

<font size="5"><span style="color: rgb(171, 0, 0);">4.</span> Ingresa a la carpeta y ejecuta el instalador</font>

.rp-terminal-body code{
    display:block;

flex:1;
    margin:0;

font-size:1.45rem;
    line-height:1;

white-space:nowrap;
    overflow-x:auto;

color:#ececec;
}

.rp-copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;

width:34px;
    height:34px;

padding:0;

border:none;
    background:transparent;

cursor:pointer;

flex-shrink:0;
}

.rp-copy-btn img{
    width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-copy-btn:hover img{
    transform:scale(1.5);
}

.rp-copy-btn img{

width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-user{
    color:#6cb6ff;
}

.rp-path{
    color:#ffffff;
}
/* efecto CRT retro */

.rp-terminal::before{

content:"";

position:absolute;

inset:0;

/* brillo interior */
.rp-terminal::after{

content:"";

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

background:
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0,0,0,.45) 100%
        );

}
/* scrollbar retro pixel */
.rp-terminal-body::-webkit-scrollbar{
    height:12px;
}

.rp-terminal-body::-webkit-scrollbar-track{
    background:#111;
    border-top:2px solid #333;
}

.rp-terminal-body::-webkit-scrollbar-thumb{
    background:#666;
    border:2px solid #aaa;
}

.rp-terminal-body::-webkit-scrollbar-thumb:hover{
    background:#888;
}

/* Firefox */
.rp-terminal-body{
    scrollbar-width:thin;
    scrollbar-color:#666 #111;
}
</style>

<div class="rp-terminal">
<div class="rp-terminal-body">
<code class="pixel-font"><span class="rp-user">user@debian</span><span class="rp-path">:~</span>$ cd RetroPie-Setup && sudo ./retropie_setup.sh</code>
<button class="rp-copy-btn" data-command="cd RetroPie-Setup && sudo ./retropie_setup.sh" title="Copiar comando">
<img src="/assets/media/pixels/clipboard.webp" alt="copy">
</button>
</div>
</div>

Presiona <kbd class="pixel-key" onclick="Reveal.next(); return false;">→</kbd> para continuar

---

> El script comenzará a ejecutarse e instalará paquetes adicionales, tras unos breves momentos, aparecerá el menú como se muestra a continuación.

> El proceso puede tardar entre 20 y 30 minutos, dependiendo del hardware y la conexión a internet.

Presiona <kbd class="pixel-key" onclick="Reveal.next(); return false;">→</kbd> para continuar

---

<h2 class="r-fit-text">Ejecutar EmulationStation por primera vez</h2>

> Una vez finalizada la instalación, el sistema regresará al menú principal del script. En ese momento, simplemente cierra la ventana y busca __rpie__ (o ejecuta __emulationstation__ desde la terminal).

<font size="5"><span style="color: rgb(171, 0, 0);">1.</span> Ejecuta desde la Terminal <strong>EmulationStation</strong>:</font>

.rp-terminal-body code{
    display:block;

flex:1;
    margin:0;

font-size:1.45rem;
    line-height:1;

white-space:nowrap;
    overflow-x:auto;

color:#ececec;
}

.rp-copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;

width:34px;
    height:34px;

padding:0;

border:none;
    background:transparent;

cursor:pointer;

flex-shrink:0;
}

.rp-copy-btn img{
    width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-copy-btn:hover img{
    transform:scale(1.5);
}

.rp-copy-btn img{

width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-user{
    color:#6cb6ff;
}

.rp-path{
    color:#ffffff;
}
/* efecto CRT retro */

.rp-terminal::before{

content:"";

position:absolute;

inset:0;

/* brillo interior */
.rp-terminal::after{

content:"";

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

background:
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0,0,0,.45) 100%
        );

}
/* scrollbar retro pixel */
.rp-terminal-body::-webkit-scrollbar{
    height:12px;
}

.rp-terminal-body::-webkit-scrollbar-track{
    background:#111;
    border-top:2px solid #333;
}

.rp-terminal-body::-webkit-scrollbar-thumb{
    background:#666;
    border:2px solid #aaa;
}

.rp-terminal-body::-webkit-scrollbar-thumb:hover{
    background:#888;
}

/* Firefox */
.rp-terminal-body{
    scrollbar-width:thin;
    scrollbar-color:#666 #111;
}
</style>

<div class="rp-terminal">
<div class="rp-terminal-body">
<code class="pixel-font"><span class="rp-user">user@debian</span><span class="rp-path">:~</span>$ emulationstation</code>
<button class="rp-copy-btn" data-command="emulationstation" title="Copiar comando">
<img src="/assets/media/pixels/clipboard.webp" alt="copy">
</button>
</div>
</div>

---

<h2 class="r-fit-text">Configurar control al iniciar EmulationStation</h2>

> Al iniciar **EmulationStation** por primera vez, se te pedirá configurar un dispositivo de entrada. Por ahora puedes configurar el teclado y, más adelante, conectar y configurar un control.

---

<h2 class="r-fit-text">Cargar juegos en RetroPie</h2>

> Las ROMs deben copiarse en el directorio del usuario en la siguiente ruta. Por ejemplo:
> __`📁 /home/user/RetroPie/roms`__

---

image-rendering: pixelated;
    image-rendering: crisp-edges;

opacity: .95;

filter:
        drop-shadow(0 0 10px rgba(0, 255, 255, .45))
        drop-shadow(0 15px 25px rgba(0,0,0,.75));

transition:
        transform .35s ease,
        filter .35s ease;

animation: gamepadFloat 4s ease-in-out infinite;
}

.pixel-gamepad:hover {
    transform: scale(1.08) rotate(-4deg);

filter:
        drop-shadow(0 0 18px rgba(0,255,255,.85))
        drop-shadow(0 20px 35px rgba(0,0,0,.9));
}

@keyframes gamepadFloat {
    0%, 100% {
        transform: translateY(0);
    }

50% {
        transform: translateY(-10px);
    }
}
</style>

<h2 class="r-fit-text">Configurar controles inalambrico en Retropie</h2>

> Configura tu gamepad inalámbrico favorito en RetroPie vía Bluetooh y prepáralo para disfrutar tus juegos clásicos con total libertad.

<br>

<a href="/slides/rpie/configurar-dualshock4.html" data-preview-link>
<div class="pixel-card">
  <img src="/assets/media/pixels/ps4-gamepad.webp" alt="ps4 gamepad" class="pixel-gamepad">
  ps4
  <p><span style="color: #fefefe;">gamepad</span> ⚙</p>
</div>
</a>
<a data-preview-image="https://cloud.githubusercontent.com/assets/10035308/22185415/f12ff342-e099-11e6-8adb-d18e9c638e94.png">
<div class="pixel-card">
  <img src="/assets/media/pixels/xbox-controller.webp" alt="ps4 gamepad" class="pixel-gamepad">
  Xbox
  <p><span style="color: #fefefe;">controller</span> ⚙</p>
</div>
</a>
</div>