\documentclass{beamer}

% Metropolis + barre de progression + numéro de page
\usetheme[progressbar=frametitle, numbering=fraction]{metropolis}

\setbeamertemplate{frame footer}{\insertsection \hfill\hspace{-4em} \insertshorttitle} % texte footer
\setbeamerfont{page number in head/foot}{size=\tiny} % taille police footer
\setbeamercolor{footline}{fg=gray} % couleur footer

\setbeamertemplate{section in toc}[sections numbered] % enumerate au lieu d'itemize

\usepackage[T1]{fontenc} % encodage
\usepackage[french]{babel} % langue

\usepackage{etoolbox} % on inverse le titre court et le titre long dans le plan
\makeatletter
\patchcmd{\beamer@section}{{#2}{\the\c@page}}{{#1}{\the\c@page}}{}{}
\patchcmd{\beamer@section}{{\the\c@section}{\secname}}{{\the\c@section}{#1}}{}{}
\makeatother

\usepackage{hyperref} % liens cliquable
\usepackage{multicol} % liste sur plusieurs colonnes
\usepackage[figurename=]{caption} % nom des images

\title[GeometryDash 3D]{Projet - GeometryDash 3D}
\author{\href{mailto:anri.kennel@etud.univ-paris8.fr}{Anri Kennel} | L3-A}
\institute{Moteurs de jeu $\cdot$ Université Paris 8}
\date{Année universitaire 2022-2023}

\begin{document}

\maketitle

\begin{frame}[t,plain]{Plan}
    \tableofcontents
\end{frame}

\section{Projet}
\subsection*{Explication code}
\begin{frame}{Explication code}
    \only<1>{
        \begin{columns}[onlytextwidth]
            \def\sizecolumn{53mm}
            \column{\dimexpr\linewidth-\sizecolumn-5mm} % colonne de gauche
            \begin{figure}
                \includegraphics[width=\sizecolumn]{imgs/explications.png}
            \end{figure}

            \column{\sizecolumn} % colonne de droite
            \begin{figure}
                \includegraphics[width=\sizecolumn]{imgs/explications2.png}
            \end{figure}
        \end{columns}
    }
    \only<2>{
        \begin{figure}
            \includegraphics[width=\textwidth]{imgs/explications.png}
        \end{figure}
    }
    \only<3>{
        \begin{figure}
            \includegraphics[width=\textwidth]{imgs/explications2.png}
        \end{figure}
    }
\end{frame}

\section[Logique du jeu]{Logique}
\subsection*{Génération procédurale}
\begin{frame}{Génération procédurale}
    Placement des piques générer de façon procédurale.
    \begin{figure}
        \includegraphics[width=\textwidth]{imgs/gen_proc.jpg}
    \end{figure}
\end{frame}

\subsection*{Saut}
\begin{frame}{Saut}
    Les sauts, démo ou non, sont gérer via événements JS
    \begin{figure}
        \includegraphics[width=0.7\textwidth]{imgs/jump.jpg}
    \end{figure}
\end{frame}

\subsection*{Collisions}
\begin{frame}{Collisions}
    Collisions gérer via Raycasting (depuis les vertex des formes)
    \begin{figure}
        \includegraphics[width=0.4\textwidth]{imgs/coll.jpg}
    \end{figure}
\end{frame}

\appendix
\section{\hspace{3cm} Merci}

\end{document}