diff --git a/ISN/doc_pygame.pdf b/ISN/doc_pygame.pdf new file mode 100644 index 0000000..b161488 Binary files /dev/null and b/ISN/doc_pygame.pdf differ diff --git a/ISN/doc_pygame.tex b/ISN/doc_pygame.tex new file mode 100644 index 0000000..8ee79b0 --- /dev/null +++ b/ISN/doc_pygame.tex @@ -0,0 +1,141 @@ +\documentclass[a4paper,12pt]{article} +\usepackage{myXsim} + +\usepackage{listings} + +\date{Novembre 2017} +\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 +} + +\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: + diff --git a/ISN/draw.py b/ISN/draw.py index ffc2ed3..c3cb67f 100644 --- a/ISN/draw.py +++ b/ISN/draw.py @@ -2,7 +2,7 @@ import pygame, sys pygame.init() -windowSurface = pygame.display.set_mode((500, 400), 0,32) +windowSurface = pygame.display.set_mode((500, 400)) pygame.display.set_caption('Hello world!') BLACK = (0, 0, 0) diff --git a/ISN/draw_example.py b/ISN/draw_example.py new file mode 100644 index 0000000..8fb4f8b --- /dev/null +++ b/ISN/draw_example.py @@ -0,0 +1,83 @@ +# Import a library of functions called 'pygame' +import pygame +from math import pi + +# Initialize the game engine +pygame.init() + +# Define the colors we will use in RGB format +BLACK = ( 0, 0, 0) +WHITE = (255, 255, 255) +BLUE = ( 0, 0, 255) +GREEN = ( 0, 255, 0) +RED = (255, 0, 0) + +# Set the height and width of the screen +size = [400, 300] +screen = pygame.display.set_mode(size) + +pygame.display.set_caption("Example code for the draw module") + +#Loop until the user clicks the close button. +done = False +clock = pygame.time.Clock() + +while not done: + + # This limits the while loop to a max of 10 times per second. + # Leave this out and we will use all CPU we can. + clock.tick(10) + + for event in pygame.event.get(): # User did something + if event.type == pygame.QUIT: # If user clicked close + done=True # Flag that we are done so we exit this loop + + # All drawing code happens after the for loop and but + # inside the main while done==False loop. + + # Clear the screen and set the screen background + screen.fill(WHITE) + + # Draw on the screen a GREEN line from (0,0) to (50.75) + # 5 pixels wide. + pygame.draw.line(screen, GREEN, [0, 0], [50,30], 5) + + # Draw on the screen a GREEN line from (0,0) to (50.75) + # 5 pixels wide. + pygame.draw.lines(screen, BLACK, False, [[0, 80], [50, 90], [200, 80], [220, 30]], 5) + + # Draw on the screen a GREEN line from (0,0) to (50.75) + # 5 pixels wide. + pygame.draw.aaline(screen, GREEN, [0, 50],[50, 80], True) + + # Draw a rectangle outline + pygame.draw.rect(screen, BLACK, [75, 10, 50, 20], 2) + + # Draw a solid rectangle + pygame.draw.rect(screen, BLACK, [150, 10, 50, 20]) + + # Draw an ellipse outline, using a rectangle as the outside boundaries + pygame.draw.ellipse(screen, RED, [225, 10, 50, 20], 2) + + # Draw an solid ellipse, using a rectangle as the outside boundaries + pygame.draw.ellipse(screen, RED, [300, 10, 50, 20]) + + # This draws a triangle using the polygon command + pygame.draw.polygon(screen, BLACK, [[100, 100], [0, 200], [200, 200]], 5) + + # Draw an arc as part of an ellipse. + # Use radians to determine what angle to draw. + pygame.draw.arc(screen, BLACK,[210, 75, 150, 125], 0, pi/2, 2) + pygame.draw.arc(screen, GREEN,[210, 75, 150, 125], pi/2, pi, 2) + pygame.draw.arc(screen, BLUE, [210, 75, 150, 125], pi,3*pi/2, 2) + pygame.draw.arc(screen, RED, [210, 75, 150, 125], 3*pi/2, 2*pi, 2) + + # Draw a circle + pygame.draw.circle(screen, BLUE, [60, 250], 40) + + # Go ahead and update the screen with what we've drawn. + # This MUST happen after all the other drawing commands. + pygame.display.update() + +# Be IDLE friendly +pygame.quit() diff --git a/ISN/index.rst b/ISN/index.rst index f002917..7f5a0a0 100644 --- a/ISN/index.rst +++ b/ISN/index.rst @@ -2,7 +2,7 @@ Quelques cours d'ISN pour la validation ####################################### :date: 2017-10-19 -:modified: 2017-10-22 +:modified: 2017-11-08 :authors: Bertrand Benjamin :category: ISN :tags: Progression @@ -25,14 +25,15 @@ On donne `un code pas commenté <./draw.py>`_. Les élèves doivent par eux mêm Étape 2: Création du jeu Snake ------------------------------ -À partir d'un fichier structure et de la description d'étape, les élèves codent le jeu snake. +À partir d'un `fichier de base pour pygame <./pygame_base.py>`_ et de la `description des étapes <./snake.pdf>`_, les élèves codent le jeu snake. -Librairie OpenCV +Chaque début de séance est consacrée au commentaire de ce qui avait été codé à la séance précédente. + +À la fin de la séquence, une documentation sur les `fonctionnalités de bases de Pygame <./doc_pygame.pdf>`_ est distribuée. + +Librairie Bottle ================ -Librairie Flask -=============== - Initiation à javascript ======================= diff --git a/ISN/pygame_base.py b/ISN/pygame_base.py index bf672fd..acb65d6 100644 --- a/ISN/pygame_base.py +++ b/ISN/pygame_base.py @@ -1,16 +1,30 @@ +# Importation de pygame import pygame pygame.init() +# Initialisation de la fenetre largeur = 600 hauteur = 400 windowSurface = pygame.display.set_mode((largeur, hauteur), 0,32) +# Initialisation des parametres + + +# Boucle de jeu +clock = pygame.time.Clock() running = True while running: - + # Limitation du nombre de tours de boucle par seconde. + clock.tick(10) + # Boucle des evenements for event in pygame.event.get(): if event.type == pygame.QUIT: running = False + # Elements a tracer + + pygame.display.update() + + pygame.quit()