2022-2023/1NSI/00_Projets/doc_pygame.tex

\documentclass[a4paper,12pt]{article}
\usepackage{myXsim}

\usepackage{listings}

\date{Décembre 2022}
\title{Documentation Pygame}
\tribe{ISN}

\definecolor{mygreen}{rgb}{0,0.6,0}
\definecolor{mygray}{rgb}{0.5,0.5,0.5}
\definecolor{mymauve}{rgb}{0.58,0,0.82}

\lstset{ %
  backgroundcolor=\color{white},   % choose the background color
  basicstyle=\footnotesize,        % size of fonts used for the code
  breaklines=true,                 % automatic line breaking only at whitespace
  captionpos=b,                    % sets the caption-position to bottom
  commentstyle=\color{mygreen},    % comment style
  escapeinside={\%*}{*)},          % if you want to add LaTeX within your code
  keywordstyle=\color{blue},       % keyword style
  stringstyle=\color{mymauve},     % string literal style
}

\pagestyle{empty}

\begin{document}

\maketitle

\section{Code minimal}

\lstinputlisting[language=Python, frame=single]{pygame_base.py}

\section{Dessiner sur la fenêtre: Draw}

Dans toute la suite, on supposera que vous avez appelé la fenêtre \texttt{windowSurface}.

Les couleurs se définissent avec leur code RGB:

\begin{lstlisting}[language=Python, frame=single]
BLACK = (0, 0, 0)
WHITE = (255, 255, 255)
RED = (255, 0, 0)
GREEN = (0, 255, 0)
BLUE = (0, 0, 255)
\end{lstlisting}

Tracer de objets géométriques

\begin{itemize}
    \item \textbf{Un segment:} \texttt{(60, 60)} sont les coordonnées du points de départ, \texttt{(120,60)} le point d'arrivé et \texttt{4} est l'épaisseur du trait.
        \begin{lstlisting}[language=Python, frame=single]
    pygame.draw.line(windowSurface, color, (60, 60), (120, 60), 4)
        \end{lstlisting}
    \item \textbf{Un cercle:}  \texttt{(300, 50)} sont les coordonnées du centre, \texttt{50} le rayon et \texttt{0} l'épaisseur du trait (0 signifie que le cercle est entièrement colorié).
        \begin{lstlisting}[language=Python, frame=single]
    pygame.draw.circle(windowSurface, color, (300, 50), 20, 0)
        \end{lstlisting}
    \item \textbf{Une ellipse:} \texttt{300} et \texttt{250} sont les coordonnées du centre, \texttt{40} le rayon horizontal, \texttt{80} le rayon vertical et \texttt{1} l'épaisseur du trait.
        \begin{lstlisting}[language=Python, frame=single]
    pygame.draw.ellipse(windowSurface, color, (300, 250, 40,80), 1)
        \end{lstlisting}
    \item \textbf{Un rectangle:} \texttt{20} et \texttt{30} sont les coordonnées du coin en haut à gauche du rectangle, \texttt{40} est la largeur et \texttt{50} est la hauteur.
        \begin{lstlisting}[language=Python, frame=single]
    pygame.draw.rect(windowSurface, color, (20, 30, 40, 50))
        \end{lstlisting}
    \item \textbf{Un polygone:} \texttt{((146, 0), (291, 106), (236, 277), (56, 277), (0, 106))} sont les coordonnées des sommets du polygone.
        \begin{lstlisting}[language=Python, frame=single]
    pygame.draw.polygon(windowSurface, color,
            ((146, 0), (291, 106), (236, 277), (56, 277), (0, 106))
            )
        \end{lstlisting}
\end{itemize}

Il ne faut pas oublier la ligne suivante après avoir tracé tout ce que vous vouliez, sinon rien ne s'affichera.
\begin{lstlisting}[language=Python, frame=single]
pygame.display.update()
\end{lstlisting}


D'autres fonctions de dessins existent. Voici un exemple de tout ce qui peut être fait en dessin avec pygame.

\lstinputlisting[language=Python, frame=single]{./draw_example.py}

\paragraph{Ajouter une image:} Pygame permet d'ajouter des images ayant les formats suivant: JPG, PNG, GIF (non-animated), BMP. On supposera dans la suite qu'elles sont rangées dans le même dossier que notre programme.
\begin{lstlisting}[language=Python, frame=single]
#Charger l'image
img = pygame.image.load('image.jpg')
# L'afficher sur la surface
windowSurface.blit(img, (0,0))
\end{lstlisting}
Les coordonnées \texttt{(0,0)} sont les coordonnées de l'angle en haut à droit de l'image sur la surface.


\section{Interaction avec les périphériques: Events}

L'interaction avec l'utilisateur se fait dans la boucle des évènements.

\begin{lstlisting}[language=Python, frame=single]
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.KEYUP:
            # choses a faire quand une touche du clavier est relachee
            if event.key == pygame.K_UP:
                # choses a faire quand c'est la touche fleche du haut
            elif event.key == pygame.K_DOWN:
                # choses a faire quand c'est la touche fleche du bas
        elif event.type == pygame.KEYDOWN:
            # choses a faire quand une touche du clavier est pressee
            elif event.key == pygame.K_LEFT:
                # choses a faire quand c'est la touche fleche de gauche
            elif event.key == pygame.K_RIGHT:
                # choses a faire quand c'est la touche fleche de droite
        elif event.type == pygame.MOUSEBUTTONUP:
            # choses a faire quand le bouton de la souris est relache
        elif event.type == pygame.MOUSEBUTTONDOWN:
            # choses a faire quand le bouton de la souris est pressee
\end{lstlisting}

De manière générale, le nom des touches de clavier sont faite sur le même modèle: \texttt{K\_\#\#\#} où on remplace les \texttt{\#} par le nom de la touche.
\begin{itemize}
    \item Touche flèche du haut: \texttt{K\_UP}
    \item Touche E: \texttt{K\_E}
    \item Touche entrée: \texttt{K\_ESCAPE}
\end{itemize}

Quelques méthodes pratiques pour manipuler la souris

\begin{itemize}
    \item \texttt{pygame.mouse.get\_pos()} : connaître la position de la souris sur la fenêtre.
    \item \texttt{pygame.mouse.set\_pos((x,y))}: déplacer la souris à un endroit.
\end{itemize}


\end{document}

%%% Local Variables:
%%% mode: latex
%%% TeX-master: "master"
%%% End: