Commits

Philémon Gardet  committed 46f5985

Première partie du TP pong disponible.

  • Participants
  • Parent commits e2746ae

Comments (0)

Files changed (7)

File tp/pong/Makefile

+all:
+	rm -rf tmp/*
+	mkdir -p tmp && pdflatex -output-directory tmp sujet-sup.tex

File tp/pong/gconfs.png

Added
New image

File tp/pong/sujet-sup.tex

+
+\documentclass[a4paper]{article}
+\usepackage[utf8]{inputenc}
+\usepackage[T1]{fontenc}
+\usepackage[french]{babel}
+\usepackage{fixltx2e}
+\usepackage{nth}
+\usepackage{listings}
+\usepackage{tikz}
+\usepackage{fancyhdr}
+\usepackage[margin=1.0in]{geometry}
+\usepackage{hyperref}
+\lstset{language=[objective]caml}
+
+\pagestyle{fancy}
+\lhead{{\sc{OCaml}}\\ {\sc TP-Sup} Application graphique - 11 oct. 2013}
+\rhead{{\small \sc{GConfs}}\\ {\sc Epita}}
+\rfoot{\includegraphics[width=0.15\linewidth]{gconfs.png}}
+
+ \begin{document}
+\begin{center}
+  {\Large {\bf Les applications graphiques avec 
+  \textsc{OCaml} et \bsc{Sdl}}}
+\end{center}
+
+\bigskip
+
+\section*{Introduction}
+
+Ce soir (voir nuit pour les plus téméraires) nous allons nous intéresser au développement d'une application graphique grâce à \bsc{OCaml} et \bsc{Sdl}, et c'est pour cela que vous êtes restés me direz-vous !\par
+Quoi de mieux pour aborder le sujet susnommé que la programmation d'un jeu video. Dans cet optique nous nous concentrons sur Pong (et oui).\par 
+Nous nous concentrerons dans un premier temps sur la balle, son affichage et son déplacement pour arriver au deplacement des raquettes par les joueurs et finir l'affichage du score.
+
+Durant ce tp 2 armes seulement vous seront nécéssaires:
+\begin{itemize}
+\item Les bibliothèques SDL (normalement déjà installés sur vos racks)
+\item La documentation de SDL (\url{http://ocamlsdl.sourceforge.net/doc/html})
+\end{itemize}
+
+\section{Initialisation de SDL}
+Tout le monde a son rack et SDL installé dessus ? Bien on va pouvoir commencer.
+La premiere chose a faire en votre projet est d'initialiser SDL via cette ligne :
+
+\begin{lstlisting}
+  Sdl.init [`EVERYTHING]
+\end{lstlisting}
+
+Étant donné que notre projet touche à tout les aspects d'une application graphique (hors mis sans doute la lecture d'un disque) nous nous permettons de charger tout les moteurs de SDL via 'EVERYTHING.\par
+Nous aborderons la création de la fenêtre en temps voulu.
+
+\section{Où elle est la baballe ?}
+L'élément central d'un jeu de Pong est encore sa balle. Nous concenterons nos effort durant cette partie sur celle-ci.\par\bigskip
+
+\subsection{Chargement d'image}
+\textit{Trouvez ou créez une image de balle, nous en servirons durant toute la duré du TP.}\par\bigskip
+
+La première chose à faire maintenant que nous avons a notre disposition notre image de balle est de la charger dans SDL.\par
+mais comment charger une image pour l'utiliser dans mon code me direz-vous ?
+Et bien c'est très simple, SDL intègre une fonction natif pour charger des images au format bitmap. Attendez ne partez pas ! Avec SDL il est également posible de charger du jpeg, du png voir même du tiff, cela grâce à un sous-module de SDL : Sdlloader.\\\smallskip
+Ainsi les fonctions qui vous aiderons pour charger une image sont :
+
+\begin{lstlisting}
+  val Sdlvideo.load_BMP : string -> surface
+  val Sdlloader.load_image : string -> surface
+\end{lstlisting}
+
+Grâce à ces fonctions vous obtenez une surface qui représente votre balle. Gardez la bien sous la main ;).
+
+\subsection{Ouvrir une fenêtre}
+Notre \textit{précieux} désormet entre nos main il est conpréhensible de vouloir l'affichier au joueur. Ça tombe bien on va voir comment initialiser la fenêtre d'affichage.
+
+SDL représente en memoire la fenêtre par une surface spéciale : Tout modification de celle-ci va être afficher lors de la prochaine frame (contenez un peu votre curiosité, on va l'aborder le propos. C'est promit !). Voici la ligne permettant de créer cette surface au combien utile :
+
+\begin{lstlisting}
+  val set_video_mode : w:int -> h:int -> ?bpp:int -> video_flag list -> 
+    surface
+\end{lstlisting}
+
+Pour utiliser cette fonction renseignez les parametres de dimention (w et h) et le type de surface (video\_flag). Pour ce paramètre nous conseillons ['DOUBLEBUF]\footnote{C'est le type le plus optimisé pour la fenêtre et qui permet d'utiliser un certain nombre de fonctions sympathiques.}. Comme avec la balle pensez à garder cette surface.
+
+\subsection{Afficher une surface}
+Maintenant que nous avons notre balle et notre fenêtre, il s'agit de leur faire faire des choses ensemble. Pour afficher un élément il suffit de le \textit{coller} sur la surface de la fenêtre. À cet effet il existe la fonction blit\_surface :
+
+\begin{lstlisting}
+  val blit_surface : src:surface -> ?src_rect:rect -> dst:surface -> 
+    ?dst_rect:rect -> unit -> unit
+\end{lstlisting}
+
+Parmis les paramètes se trouve ?src\_rect:rect et ?dst\_rect:rect qui sont par ailleurs optionnels.\par
+Le premier indique le morceau de l'image qu'on veut coller (cela sert surtout pour les animation ou les décors sous forme de titles), si on ne le renseigne pas toute la surface sera collé. Le second correspond l'endroit où la surface sera collée sur la surface source, si on le renseigne pas la surface est collée en haut à gauche. En tout cas ces deux paramètres sont du type rect. C'est l'occasion pour en parler.\bigskip
+
+Le type rect est un enregistrement qui représente les données de dimention (largeur et hauteur) et de position (x y) d'une surface. Voici la fonction pour créer une valeur de ce type :
+
+\begin{lstlisting}
+  val rect : x:int -> y:int -> w:int -> h:int -> rect
+\end{lstlisting}
+
+\subsection{Actualisation et boucle d'exécution}
+À partir de ce point il y a de grandes chances que vous ayez lancer votre programme et qu'il s'est fermer imédiatement et plus encore (si vous êtes un ninja de la vision) que rien n'était visible sur la fenêtre... Reposez votre chaise et arrêtez de menacer votre entourage : ce qui se passe est tout à fait normal. Explication.\par
+Nous avons créer la fenêtre et coller la balle dessus. Oui mais nous n'avons pas actualisé la fenêtre. Pour cela il faut utiliser la fonction flip :
+
+\begin{lstlisting}
+  val flip : surface -> unit
+\end{lstlisting}
+
+\noindent
+La fonction flip nous servira à rafraîchir la fenêtre pour passer d'une image à une autre.\bigskip
+
+Nous avons maintenant corrigé le problème de rafraîchisement. Il faut désormet s'occuper du problème de la fenêtre qui se ferme toute seule. Un programme selon votre ordinateur est une suite d'action à faire, une fois celles-ci lues, le programme se termine. C'est notre cas, on a fait un tas de choses déjà énumérées mais à aucun moment on demande à l'ordinateur d'en faire plus. Pour ne plus en être encombré nous allons utiliser une boucle. \par
+
+La boucle d'execution permet au programme de tourner, lire les données de l'utilisateur et calculer la prochaine image à afficher. Une frame correspond donc à un état visuel. Voici un exemple de boucle que vous pouvez adapter au projet :
+
+\begin{lstlisting}
+  let update () =
+    let ticks = (*17ms -> 60fps *)
+      17 + Sdltimer.get_ticks ()
+      in
+        updateEvent();
+        updateDisplay();
+        while (Sdltimer.get_ticks ()) <= ticks do
+          () done
+  ;;
+\end{lstlisting}
+
+À chaque frame il faudra redessiner entièrement la fenêtre utisateur. Pour cela il faut l'effacer (voir fonction donnée ci-dessous) et recoller les éléments visuels avec de nouvelles position afin de créer un mouvellement.\par
+Nous allons aborder maintenant le déplacement de notre balle. Et l'élaboration de notre fonction \textit{updateDisplay()}.
+
+\subsection{Déplacement de la balle}
+
+\textit{
+Dans cette partie il faut que vous imaginer un systeme pour que la balle se déplace dans la fenêtre (exemple pixel par pixel dans une direction) et gérer sa collision avec les bords de celle-ci.
+}\par\smallskip
+\textit{N'hésitez pas à en discuter avec vos camarades et responsable de TP.}
+
+\section{Dans Pong il y a aussi des raquettes !}
+
+
+\end{document}

File tp/tp-sup/Makefile

-all:
-	rm -rf tmp/*
-	mkdir -p tmp && pdflatex -output-directory tmp sujet-sup.tex

File tp/tp-sup/gconfs.png

Removed
Old image

File tp/tp-sup/sujet-sup.tex

-
-\documentclass[a4paper]{article}
-\usepackage[utf8]{inputenc}
-\usepackage[T1]{fontenc}
-\usepackage[french]{babel}
-\usepackage{fixltx2e}
-\usepackage{nth}
-\usepackage{listings}
-\usepackage{tikz}
-\usepackage{fancyhdr}
-\usepackage[margin=1.0in]{geometry}
-\usepackage{hyperref}
-
-\pagestyle{fancy}
-\lhead{{\sc{OCaml}}\\ {\sc TP-Spé} Traitement d'image - 11 oct. 2013}
-\rhead{{\small \sc{GConfs}}\\ {\sc Epita}}
-\rfoot{\includegraphics[width=0.15\linewidth]{gconfs.png}}
-
- \begin{document}
-\begin{center}
-  {\Large {\bf Le traitement d'image en
-  \textsc{OCaml}}}
-\end{center}
-
-\bigskip
-
-\section*{Introduction}
-
-Ce soir (voir nuit pour les plus téméraires) nous allons nous intéresser au traitement d'images en \textsc{OCaml}, et c'est pour cela que 
-vous êtes restés me direz-vous !\\
-Tout d'abord laissez moi vous dire que durant ce TP nous allons principalement vous introduire les
- notions nécéssaire à faire un jeu avec une interface en \textsc{OCaml} avec OcamlSdl.
-Le TP sera découpé en plusieurs étapes/paliers afin que vous puissiez réaliser, dans un premier temps un Pong, puis pour ceux qui avance et qui restent un jeu de plate-forme\\\\
-Durant ce tp 2 armes seulement vous seront nécéssaires:
-\begin{itemize}
-\item Les bibliothèques SDL (normalement déjà installés sur vos racks)
-\item La documentation de SDL (\url{ocamlsdl.sourceforce.net} partie Ressouces, puis Ocamldoc)
-\end{itemize}
-
-\section{Premiers pas avec SDL}
-	\subsection{Le chargement des images}
-		\begin{verbatim}
-		val load_image : string -> Sdlvideo.surface
-		\end{verbatim}
-	\subsection{L'affichage des images et les DOUBLEBUF}
-		\begin{verbatim}
-		val set_video_mode : w:int -> h:int -> video_flag list -> surface
-		val flip : surface -> unit
-		\end{verbatim}
-
-\section{Organisation d'une classe d'affichage}
-\subsection{Utilisation de la fenêtre}
-\subsection{Methodes de modification de la fenêtre}
-
-\section{Boucle de rafraîchissement}
-
-\section{Les récuperations des entrées clavier}
-	\subsection{Récuperation des touches de déplacement}
-	Sdlkey
-	\begin{verbatim}
-	val get_key_state : unit-> (int, Bigarray.int8_unsigned_elt, Bigarray.c_layout) Bigarray.Array1.t
-	val int_of_key
-	\end{verbatim}
-
-	\subsection{Déplacement des raquettes en fonction des touches}
-
-\section{Mise en place du déplacement d'une balle}
-	\subsection{Deplacement aléatoire}
-	\subsection{Rebond sur murs et raquettes}
-	\subsection{Zones de perte}
-
-\end{document}

File tp/tp-sup/sujet-sup.tex~

-
-\documentclass[a4paper]{article}
-\usepackage[utf8]{inputenc}
-\usepackage[T1]{fontenc}
-\usepackage[french]{babel}
-\usepackage{fixltx2e}
-\usepackage{nth}
-\usepackage{listings}
-\usepackage{tikz}
-\usepackage{fancyhdr}
-\usepackage[margin=1.0in]{geometry}
-\usepackage{hyperref}
-
-\pagestyle{fancy}
-\lhead{{\sc{OCaml}}\\ {\sc TP-Spé} Traitement d'image - 11 oct. 2013}
-\rhead{{\small \sc{GConfs}}\\ {\sc Epita}}
-\rfoot{\includegraphics[width=0.15\linewidth]{gconfs.png}}
-
- \begin{document}
-\begin{center}
-  {\Large {\bf Le traitement d'image en
-  \textsc{OCaml}}}
-\end{center}
-
-\bigskip
-
-\section*{Introduction}
-
-Ce soir (voir nuit pour les plus téméraires) nous allons nous intéresser au traitement d'images en \textsc{OCaml}, et c'est pour cela que 
-vous êtes restés me direz-vous !\\
-Tout d'abord laissez moi vous dire que durant ce TP nous allons principalement vous introduire les
- notions nécéssaire à faire un jeu avec une interface en \textsc{OCaml}
-Le TP sera découpé en plusieurs étapes/paliers afin que vous puissiez réaliser, dans un premier temps un Pong, puis pour ceux qui avance et qui restent un jeu de plate-forme\\\\
-Durant ce tp 2 armes seulement vous seront nécéssaires:
-\begin{itemize}
-\item Les bibliothèques SDL (normalement déjà installés sur vos racks)
-\item La documentation de SDL (\url{ocamlsdl.sourceforce.net} partie Ressouces, puis Ocamldoc)
-\end{itemize}
-
-\section{Premiers pas avec SDL}
-	\subsection{Le chargement des images}
-		\begin{verbatim}
-		val load_image : string -> Sdlvideo.surface
-		\end{verbatim}
-	\subsection{L'affichage des images et les DOUBLEBUF}
-		\begin{verbatim}
-		val set_video_mode : w:int -> h:int -> video_flag list -> surface
-		val flip : surface -> unit
-		\end{verbatim}
-
-\section{Organisation d'une classe d'affichage}
-\subsection{Utilisation de la fenêtre}
-\subsection{Methodes de modification de la fenêtre}
-\section{Boucle de rafraîchissement}
-\section{Les récuperations des entrées clavier}
-	\subsection{Récuperation des touches de déplacement}
-	Sdlkey
-	\begin{verbatim}
-	val get_key_state : unit-> (int, Bigarray.int8_unsigned_elt, Bigarray.c_layout) Bigarray.Array1.t
-	val int_of_key
-	\end{verbatim}
-	\subsection{Déplacement des raquettes en fonction des touches}
-\section{Mise en place du déplacement d'une balle}
-	\subsection{Deplacement aléatoire}
-	\subsection{Rebond sur murs et raquettes}
-	\subsection{Zones de perte}
-
-\end{document}