Développez Couché, saison 3 : le topic officiel [Archives]

L-F. Sébum

23/08/2013, 18h38

Vous l'avez lu dans le Canard PC 282, cette année nous allons développer un jeu en HTML5/JavaScript.

Ce post sera étoffé sous peu. En attendant vous pouvez télécharger le "squelette" du code source ici : http://cpc.cx/808

Contenu nécessaire aux leçons :
Introduction (CPC 282) : "Squelette" du code source (http://cpc.cx/808)
Leçon 1 (CPC 283) : joueur.png (https://sites.google.com/site/developpezcouche/joueur.png?attredirects=0&d=1) (à mettre dans le sous-répertoire "media")
Leçon 3 (CPC 285) : ciel0.png (https://sites.google.com/site/developpezcouche/ciel0.png?attredirects=0&d=1), ciel1.png (https://sites.google.com/site/developpezcouche/ciel1.png?attredirects=0&d=1), ciel2.png (https://sites.google.com/site/developpezcouche/ciel2.png?attredirects=0&d=1) (à mettre dans le sous-répertoire "media")
Leçon 4 (CPC 286) : saucisse0.png (https://sites.google.com/site/developpezcouche/saucisse0.png?attredirects=0&d=1), saucisse1.png (https://sites.google.com/site/developpezcouche/saucisse1.png?attredirects=0&d=1) (à mettre dans le sous-répertoire "media")
Leçon 6 (CPC 288) : boing.mp3 (https://sites.google.com/site/developpezcouche/boing.mp3?attredirects=0&d=1), boing.ogg (https://sites.google.com/site/developpezcouche/boing.ogg?attredirects=0&d=1), music.mp3 (https://sites.google.com/site/developpezcouche/music.mp3?attredirects=0&d=1), music.ogg (https://sites.google.com/site/developpezcouche/music.ogg?attredirects=0&d=1), pouet.mp3 (https://sites.google.com/site/developpezcouche/pouet.mp3?attredirects=0&d=1), pouet.ogg (https://sites.google.com/site/developpezcouche/pouet.ogg?attredirects=0&d=1) (à mettre dans le sous-répertoire "media")
Leçon 7 (CPC 289) : panpan.mp3 (https://sites.google.com/site/developpezcouche/panpan.mp3?attredirects=0&d=1), panpan.ogg (https://sites.google.com/site/developpezcouche/panpan.ogg?attredirects=0&d=1), tir.png (https://sites.google.com/site/developpezcouche/tir.png?attredirects=0&d=1) (à mettre dans le sous-répertoire "media")
Leçon 12 (CPC 293) : joueur_hit.png (https://sites.google.com/site/developpezcouche/joueur_hit.png?attredirects=0&d=1) (à mettre dans le sous-répertoire "media")
Leçon 13 (CPC 295) : saucisse2.png (https://sites.google.com/site/developpezcouche/saucisse2.png?attredirects=0&d=1) (à mettre dans le sous-répertoire "media")
Leçon 17 (CPC 299) : bombe.mp3 (https://sites.google.com/site/developpezcouche/bombe.mp3?attredirects=0&d=1), bombe.ogg (https://sites.google.com/site/developpezcouche/bombe.ogg?attredirects=0&d=1), levelup.mp3 (https://sites.google.com/site/developpezcouche/levelup.mp3?attredirects=0&d=1), levelup.ogg (https://sites.google.com/site/developpezcouche/levelup.ogg?attredirects=0&d=1) (à mettre dans le sous-répertoire "media")

Code source des leçons 1 à 6 :
Pour les retardataires et ceux qui auraient raté un épisode, voici le fichier script.js tel qu'il était au terme de la leçon 6 (CPC n°288) : script.js (https://sites.google.com/site/developpezcouche/script.js?attredirects=0&d=1)

Liens :
Les bases du JavaScript : http://www.w3schools.com/js/ (et en français : http://javascript.developpez.com/cours/)
Le site de CreateJS : http://www.createjs.com/#!/CreateJS (www.createjs.com)

n0ra

16/09/2013, 19h12

Je me suis dis "tiens pourquoi ne pas essayer ce Développez Couché, saison 03, ça peut être intéressant et je mourrai moins bête" ...
Bah c'est mal barré, les mots COIN COIN ! ne s'affichent pas sur la page index après avoir recopier bêtement (et surement très mal) le code d'échauffement dans script.js (si c'est bien là, hein?).

J'ai du me tromper dans les espaces et retour à la ligne dans le code ...

Babelfish

16/09/2013, 22h24

J'ai eu le même souci. En relisant le code je me suis aperçu que j'avais oublié les guillemets à

var text = new createjs.Text("COIN COIN!", "36px Arial", "#777777");

Vérifie donc que ce ne soit pas ça qui bloque

devn

17/09/2013, 11h51

Ce sera quel style de jeu?

L-F. Sébum

17/09/2013, 15h33

Un petit jeu d'arcade à la con, un peu comme le Canardage de la saison 1.

n0ra

17/09/2013, 16h02

L-F. Sébum

17/09/2013, 17h07

Cette partie là était bien recopier apparemment ...
Rien à faire, ça veut pas :).

Essaye avec un autre navigateur au pire.

MrShibby

17/09/2013, 17h15

Je conseil d'installer firebug (une extension pour firefox).
Ca permet bien souvent de savoir ce qui cloche quand on fait des trucs en javascript.

https://addons.mozilla.org/fr/firefox/addon/firebug/

Lyanoward

17/09/2013, 17h47

Sous firefox, crtl + maj + I ouvre la console qui a bien évolué. Je ne sais pas si elle est au niveau de firebug, mais elle ne doit pas en être loin. Toutes les fonctionnalités de trace d'erreurs, d'exploration de code, styles, et profilage réseaux sont là.
Et petit plus, la console native de firefox est beaucoup plus légère et réactive que l'usine a gaz firebug

jn1978

17/09/2013, 17h54

Sinon, sous chrome, c'est F12, et pas besoin d'addon. Mais c'est bien de switcher entre les deux pour comparer et vérifier que ce qui marche sur l'un marche aussi sur l'autre.

Karedas

18/09/2013, 19h18

Excellente idée ce développez couché version web.
Juste une petite remarque, bien que n'ayant pas vraiment d'ide clef en main, un netbeans ou éclipse offre un certain confort qu'on a pas avec notepad++
Je découvre create.js ça a l'air surpuissant, je me suis amusé a faire défiler le coin coin façon intro de star wars (la perspective applatie en moins) en quelques lignes, c'est assez jouissif.

RedGuff

22/09/2013, 08h50

Bonjour. :)

Je me suis amusé a faire défiler le coin coin façon intro de Star Wars... Le code, svp !

La perspective applatie en moins. Ce canard est un scandale !

Achille

23/09/2013, 23h30

Bonjour LFS

j'ai décidé de suivre sérieusement la saison 3, l'HTML5 m'intéresse. Aurais-tu des conseils de lectures ou de sites pour s'initier en parallèle ? L'offre ne manque pas en librairies, c'est un peu difficile de s'y retrouver quand on n'y connaît rien... Voilà, si tu as des conseils... Merci ;)

L-F. Sébum

24/09/2013, 14h33

J'ai rajouté quelques liens dans le premier post.

Achille

24/09/2013, 15h21

Merci bien, je n'ai plus qu'à m'y mettre :)

Karedas

26/09/2013, 17h20

Bonjour. :)
Le code, svp !

Voilà, c'est loin d'être parfait, et ça saccade, mais ça m'a amusé 10 minutes

function startGame()
{

var stage = new createjs.Stage(document.getElementById("gameCanvas"));
var text = new createjs.Text("COIN COIN !", "40px Arial", "#777777");
stage.addChild(text);
//on place le texte au milieu et en bas
text.x = 360;
text.y = 400;

//on crée un tick (et tack ranger du risque) qui appelle la fonction tick()
// à une fréquence de 40 fps
createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(40);

//variable pour logger la taille de la police histoire de pas la changer pour rien
sizeLog = 40;

function tick(event) {
//on fait legèrement remonter le texte
text.y -= event.delta/1000*100;
//s'il est trop remonté, on le calme, euh non, on le replace en bas
if (text.y < 0)
{ text.y = 400; }

//on calcule la taille de la police en fonction de la hauteur dans le canvas
//(40px en bas, 1px en haut)
var size = (Math.ceil(text.y / 10));
if (size < 1)
{ size = 1;}

//on ajuste la police si besoin
if (sizeLog != size)
{
sizeLog = size;
text.font = size+"px Arial";
}

//on update le rendu du canva
stage.update();
}
}

SeanRon

27/09/2013, 00h29

devn

27/09/2013, 14h11

Comme, je vis dans les bois, je viens seulement de lire le premier article de cette saison...
A propos de XNA, ce n'est pas plutôt positif si MS a abandonné XNA au profit d'une version OpenSource ( MonoGame ) ?

Il faut voir si l'équipe derrière monogame a les épaules pour tenir face aux autres solutions libres (java et libgdx, C++ et SDL2...).

SeanRon

28/09/2013, 12h59

je suis allé faire un tour sur les demos de createJS.

Ancien flasheur, et même si je comprend les nouveaux avantages du html5 par rapport à flash, je m'interroge sur l’intérêt de passer au html5 pour faire des jeux du point de vue performances.

Parce que, à l'heure actuelle, j'ai l'impression, à la vue des demos techniques, qu'il semble impossible de pouvoir réaliser un jeu utilisant un nombre important de sprites en mouvements sans mettre à genou l'ordinateur générant le script, et provoquer des saccades ou une chute de fps et c'est doit vite être limitant:
Par exemple, pour un shooter avec scrolling + parallax + plein de bullets dans tous les sens.

Bon par contre pour des petits jeux simples et des applications interactives, ça a un potentiel énorme.

http://www.wix.com/flash/infografic/html5-vs-flash-small.jpg

Louck

28/09/2013, 14h05

Parce que, à l'heure actuelle, j'ai l'impression, à la vue des demos techniques, qu'il semble impossible de pouvoir réaliser un jeu utilisant un nombre important de sprites en mouvements sans mettre à genou l'ordinateur générant le script, et provoquer des saccades ou une chute de fps et c'est doit vite être limitant.

Comme le dira ton comic:

Don't brag, it's only a matter of time.

Les premiers moteurs de jeux qui utilisent HTML5 ne semblent pas exploiter cette techno à 100%.

Tomaka17

28/09/2013, 18h09

Parce que, à l'heure actuelle, j'ai l'impression, à la vue des demos techniques, qu'il semble impossible de pouvoir réaliser un jeu utilisant un nombre important de sprites en mouvements sans mettre à genou l'ordinateur générant le script, et provoquer des saccades ou une chute de fps et c'est doit vite être limitant:
Par exemple, pour un shooter avec scrolling + parallax + plein de bullets dans tous les sens.

Je ne sais pas quelles sont les perfs des canvas, mais dans la mesure où tu as accès au WebGL en HTML5 tu es virtuellement sur un pied d'égalité avec les jeux vidéos triple A au niveau du rendu graphique.

SeanRon

29/09/2013, 13h05

Je ne connaissait pas webGL.
ya des trucs deja sympa en webGL :o

http://hexgl.bkcore.com/

http://skycraft.io/

L-F. Sébum

29/09/2013, 17h41

Parce que, à l'heure actuelle, j'ai l'impression, à la vue des demos techniques, qu'il semble impossible de pouvoir réaliser un jeu utilisant un nombre important de sprites en mouvements sans mettre à genou l'ordinateur générant le script, et provoquer des saccades ou une chute de fps et c'est doit vite être limitant.

Hum hum...

http://www.babylonjs.com/

Je ne sais pas quelles sont les perfs des canvas, mais dans la mesure où tu as accès au WebGL en HTML5 tu es virtuellement sur un pied d'égalité avec les jeux vidéos triple A au niveau du rendu graphique.

Voilà.

mithrandir3

29/09/2013, 18h08

Je ne connaissait pas webGL.
ya des trucs deja sympa en webGL :o

http://hexgl.bkcore.com/

http://skycraft.io/
Sur mon PC, avec la dernière version de firefox, skycraft prend 100 Mo et 15 % du CPU en ne faisant quasiment rien, et il y a manifestement de la fuite mémoire quelque part, parce que la RAM consommée augmente régulièrement. Pas très engageant tout ça...

Edit: en supprimant l'onglet, la RAM revient à une valeur "normale", et n'augmente plus.

Et pour info, Don't Starve sur Chrome (la version browser du jeu utilise WebGL) avait de gros problèmes de perfs sur des machines qui n'avaient aucun problème à le faire tourner en version native (Steam).

Louck

29/09/2013, 18h15

Sur mon PC, avec la dernière version de firefox, skycraft prend 100 Mo et 15 % du CPU en ne faisant quasiment rien
Comme n'importe quel jeu en 3D qui met à jour ses entités, ses tests de collisions, et l'affichage....
Et encore 15% de CPU, c'est assez soft pour un jeu. Et la mémoire utilisée semble "normale" (le jeu génère le terrain au fur et à mesure).

mithrandir3

29/09/2013, 18h17

Comme n'importe quel jeu en 3D qui met à jour ses entités, ses tests de collisions, et l'affichage....
Et encore 15% de CPU, c'est assez soft pour un jeu. Et la mémoire utilisée semble "normale" (le jeu génère le terrain au fur et à mesure).
Quand je parle de "sans rien faire", je parle au lancement avec quasiment rien à afficher. Et je pense que Firefox aurait fini par crasher tout seul, si j'avais laissé tourner le jeu sans rien faire. Pour moi ce n'est pas normal. On va m'expliquer que c'est de la faute de Firefox, et pas de WebGL, mais le résultat c'est que c'est encore une technologie instable. Par ailleurs j'ai du mal à comprendre le besoin auquel elle répond, sauf permettre à des boîtes de vendre des jeux directement dans le navigateur.

Parce qu'en l'état, que ce soit dû à WebGL, à son implémentation dans les navigateurs, ou à Javascript, c'est instable et ça consomme bien plus que les mêmes trucs en natif.

Tomaka17

29/09/2013, 18h51

Firefox est connu pour ses memory leaks.
En faisant une petite recherche google, je suis tombé sur un site qui indique que 100 à 150 Mo de mémoire est une consommation "normale" pour ce logiciel.

WebGL n'est pas une technologie instable. C'est juste un "pont" vers OpenGL, le truc qui existe depuis des décennies et qui fait tourner bon nombres de jeux Windows ainsi que 100 % des jeux Mac et Linux (notamment les portages de tous les jeux Blizzard et Valve).
À chaque fois que tu utilises une fonction WebGL, elle est simplement redirigée vers ta carte graphique. Il est extrêmement peu probable y ait un memory leak ou un bug à ce niveau là puisqu'il n'y a normalement aucune surcouche.

En revanche il est plus probable que ce soit le javascript ou la grande quantité de ressources nécessaire au jeu qui produit ce que tu décris. Mais ça on ne peut pas dire que ce soit des technologies naissantes, et on ne peut que blâmer les navigateurs si leur moteur javascript consomme la moitié de ta RAM.

mithrandir3

29/09/2013, 19h01

En revanche il est plus probable que ce soit le javascript ou la grande quantité de ressources nécessaire au jeu qui produit ce que tu décris. Mais ça on ne peut pas dire que ce soit des technologies naissantes, et on ne peut que blâmer les navigateurs si leur moteur javascript consomme la moitié de ta RAM.
Le résultat est le même. Et on revient au problème précédent. Quel intérêt d'exécuter un jeu dans un navigateur si au final on consomme bien plus de ressources que le même jeu en natif ? Tout en ayant les mêmes problèmes potentiels de drivers.

Et ce genre de problèmes n'est pas spécifique à firefox. Les problèmes dont je parlais concernant Don't Starve concernaient Chrome.

Tomaka17

29/09/2013, 19h38

L'intérêt c'est qu'il n'y a rien à installer et que tu gardes tes sauvegardes entre différentes machines. Imagine les jeux via navigateur type Travian, Cookie clicker, etc. mais avec de la 3D, c'est un peu ça le genre de jeu qui serait visé par HTML5.

Effectivement les jeux triple A ne seront jamais portés sur navigateur, parce que c'est plus lent et que je me vois mal télécharger 20 Go à chaque fois que je veux jouer.
Mais on parlait de Flash plus haut, et pour moi HTML5 est largement gagnant niveau perfs par rapport au Flash qui rame dès qu'on utilise une boucle for :trollface:

mithrandir3

29/09/2013, 20h12

Louck

29/09/2013, 20h30

Sinon il y a Unity3D qui utilise la techno WebGL pour son player web, si je ne me trompe pas.

Tomaka17

29/09/2013, 20h36

Il y a emscripten (https://github.com/kripken/emscripten) aussi, le projet un peu fou qui permet de compiler du C++ en Javascript.
Théoriquement si tu prends le code source d'un jeu bien codé, tu peux en quelques heures/jours le convertir en jeu vidéo HTML5 grâce à ça.

SeanRon

29/09/2013, 23h55

Sinon il y a Unity3D qui utilise la techno WebGL pour son player web, si je ne me trompe pas.

d'ailleurs Unity c'est pour bientôt, j'en suis sur. Une fois qu'on se sera fait les pieds sur les bases du javascript, et qu'on va commencer à se la péter, Sébum va nous punir avec une saison 4 de Développez Couché : faites votre mmorpg sous Unity en full Objects, en javascript et en C#. Je le vois venir, le sournois. :ninja:

devn

30/09/2013, 11h33

Je ne sais pas quelles sont les perfs des canvas, mais dans la mesure où tu as accès au WebGL en HTML5 tu es virtuellement sur un pied d'égalité avec les jeux vidéos triple A au niveau du rendu graphique.

Pas vraiment non... Javascript est quand même hyper méga lent et ce n'est pas seulement la faute des navigateurs. Mozilla fait une expérience intéressante avec asm.js (utiliser le javascript avec des annotations pour en faire une sorte de machine virtuelle orienté perf), mais ça ne serait pas au point avant des années.

---------- Post added at 11h33 ---------- Previous post was at 11h32 ----------

Sinon il y a Unity3D qui utilise la techno WebGL pour son player web, si je ne me trompe pas.

Unity, c'est pas plutôt un plugin (comme pour Flash)?

SeanRon

30/09/2013, 12h00

oui Unity et Flash sont des plugins d'applications natives et c'est bien pour ça qu'ils sont performants.

un article comparatif sorti en début d'année sur le sujet : http://www.journaldugeek.com/2013/01/17/applications-natives-contre-les-webapps-forces-et-faiblesses/

Tomaka17

30/09/2013, 12h35

un article comparatif sorti en début d'année sur le sujet : http://www.journaldugeek.com/2013/01/17/applications-natives-contre-les-webapps-forces-et-faiblesses/

Mouai, dans son petit article l'auteur ne prend pas du tout en compte le fait qu'HTML5 est loin d'être terminé. Je suis abonné au flux RSS du w3c, et pendant une période toutes les semaines il y a une nouvelle norme qui sortait, à tel point que je commençais à penser qu'ils allaient dans le mur en voulant faire trop ambitieux.

Je ne sais plus quelle était la situation en janvier dernier, mais là c'est comme si tu pondais un article sur "chercher sur internet vs téléphoner pour trouver des infos" en 1995 en reprochant à internet d'être trop lent et de manquer de contenu. Faut voir un peu les perspectives d'avenir, et pour moi clairement HTML5 pourrait théoriquement remplacer à terme bon nombre de logiciels natifs. Mais en pratique leur succès dépend de trop de choses imprévisibles.

SeanRon

30/09/2013, 18h57

Oui, franchement, j'espère bien qu'on arrivera a ça. Et je pense aussi que c'est une question de temps.

Déjà, les frameworks cités plus haut dépassent largement ce que faisait shockwave à l'époque et rattrapent flash avec tous les avantages que ça comporte pour les développeurs face à une solution propriétaire.
Enfin, les browsers semblent se faire la course à la performance de rendu du javascript, ce qui est également très encourageant.

CanardLaquais

02/10/2013, 22h54

Vous l'avez lu dans le Canard PC 282, cette année nous allons développer un jeu en HTML5/Php.

C'est une erreur ou il y aura du PHP aussi ?

Sinon, un bon outil gratuit pour développer en javascript, c'est Microsoft Visual Studio.

En ajoutant ces lignes au début de script.js

/// <reference path="lib/easeljs-0.6.1.min.js" />
/// <reference path="lib/preloadjs-0.3.1.min.js" />
/// <reference path="lib/soundjs-0.4.1.min.js" />
On beneficie de Intellisense pour les fonctions de CreateJS, c-à-d que ça affiche automatiquement les propriétés et les méthodes d'un objet :

72757276

J'ai testé ça avec Visual Studio 2012 Ultimate ( + Update 3) mais ça doit fonctionner aussi avec les versions Express (gratuites).

Par exemple "Microsoft Visual Studio Express 2013 RC pour le Web". C'est une "release candidate", la version finale est pour mi novembre.
http://www.microsoft.com/visualstudio/fra/2013-downloads#d-2013-express

Je suis un débutant en javascript, j'ai fait une formation Ajax/Javascript il y a 2 ans mais je développe uniquement en C# (et VB.Net) avec Visual Studio.

Arkady

04/10/2013, 11h02

Pour la leçon 1 on a :
function preloadAssets()
{
img_joueur.onload = preloadUpdate();
img_joueur.src = "media/joueur.png";
}

function preloadUpdate();
{
preloadCount++;
if(preloadCount == PRELOADTOTAL)
launchGame();
}

Ne faudrait-t-il pas swapper les deux lignes de la fonction preloadAssets() ? J'ai l'impression qu'au final on lancera lauchGame() avant de loader l'image...

Karedas

04/10/2013, 11h12

Pour la leçon 1 on a :
Ne faudrait-t-il pas swapper les deux lignes de la fonction preloadAssets() ? J'ai l'impression qu'au final on lancera lauchGame() avant de loader l'image...

Non, car la première ligne ordonne de lancer preloadUpdate seulement quand img_joueur se charge (evenement onload).
Le lancement, même s'il se fait au sein d'une fonction déclarée en ligne 1, ne s'effectuera qu'en ligne 2, quand on charge l'image ce qui a pour effet d'effectivement lancer preloadUpdate.

A l'inverse si on swap, lors du chargement de l'image, n'ayant pas défini la fonction à lancer sur le chargement le jeu ne se lancerait pas du tout.

Arkady

04/10/2013, 11h37

Merci pour ta réponse Karedas.
J'ai essayé les deux ordres, les deux fonctionnent. Je suis pas sûr d'avoir bien compris le fonctionnement de .onload du coup. :|

Par contre sauf distraction de ma part il manque dans la version papier un petit
stage.addChild(obj_joueur); dans launchGame().

Karedas

04/10/2013, 12h20

Je viens de vérifier, il y est bien dans mon CPC papier.

Sonny Jim

06/10/2013, 14h03

*toussote*

Une question pour les retardataires de la saison deux (le topic dédié étant fermé) : un espoir de voir une compil des leçons récupérable quelque part?
#airsuppliant

Merci d'avance!

zifox

06/10/2013, 15h31

Je ne sais pas quelles sont les perfs des canvas, mais dans la mesure où tu as accès au WebGL en HTML5 tu es virtuellement sur un pied d'égalité avec les jeux vidéos triple A au niveau du rendu graphique.

Absolument pas pour ce qui est des perfs. Tu as certes accès à des fonctions de la CG, mais tu te retrouves avec un goulot d'étranglement monstrueux parce que tout doit passer par le code qui tourne dans ton navigateur, qui lui restera lent. Ca permet de décharger le proc d'une partie des calculs, mais le rendu d'une scène est loin de se faire uniquement sur CG.

Depuis le début des cartes accélératrices (presque 20 ans !) il y a eu de projets qui ont voulu nous offrir un rendu 3D dans un navigateur. Les performances ont toujours été loin des promesses, c'est pas un hasard.

Aristynax

13/10/2013, 09h27

Bonjour à tous,
Pardonnez l'intrusion un peu hors-sujet dans le débat, mais j'appuie la demande de Sonny Jim !
Ayant découvert CPC après la mort de Joystick (Paix à son âme), en décembre 2012/janvier 2013, je n'ai que la moitié des leçons en magazine ... Bien dommage car le type de jeu m'a paru intéressant ...
Y aurait-il une âme charitable pour scanner (si aimable autorisation de Sebum il y a, bien entendu) la saison complète, ou au moins, la première partie de ces leçons ?
Merci par avance !

Aristynax

19/10/2013, 16h06

Et, pour en revenir à cette saison-ci :
Y a-t-il moyen de centrer la fenêtre 640x480 en tripatouillant dans le fichier index.html du jeu ?
Car, pour l'instant, la fenêtre de jeu est centré en haut à droite de Chrome/Firefox lorsqu'on teste le jeu ...

MrShibby

19/10/2013, 18h06

Tu peux essayer ça:

<canvas height="480" width="640" id="gameCanvas" style="display: block; margin: auto;"></canvas>

Koala77

21/10/2013, 10h15

Hi guys,
Je me suis lancé aussi dans l'aventure, j'avais laché la programmation depuis quelques années, ça fait du bien de s'y remettre. Je compte utiliser les leçons pour développer un projet perso, et histoire de prendre tout de suite les orientations : est-ce qu'il est possible d'utiliser javascript et createjs pour faire de la 3D ? De la 3D très basique je vois rassure, genre des gros polygones tous moches.

Sinon je me rabats sur une vue 2D...

devn

21/10/2013, 11h02

Koala77

21/10/2013, 13h46

Muchas gracias. Y'a plus qu'à mettre le nez la dedans.

devn

23/10/2013, 10h34

Muchas gracias. Y'a plus qu'à mettre le nez la dedans.

Qu'est-ce que tu projettes de faire avec?

Koala77

23/10/2013, 15h00

Arf... petit curieux ! Puisque la mode est aux reboots, je vais refaire le premier jeu que j'ai programmé tout seul comme un grand : une adaptation des courses de moto de Tron. J'avais programmé ça sur mon Amstrad CPC 464 à l'époque (en Basic amstrad, la classe internationale). A l'époque = un temps que les moins de 20 ans ne peuvent pas connaitre.

Mon idée était de faire du multi 4 joueurs (avec bots pour meubler). En v1, une simple vue de dessus en 2D, ça revient à coder un bon vieux Snake, c'est (relativement) facile à faire j'ai l'impression avec ce langage. En v2, un split screen avec une vue FPS ou TPS, et un "instant replay" en vue de dessus des dernières secondes de la partie. Plus compliqué.

Du coup là j'attends avec impatience la leçon ou on va causer des tests de collision entre objets, et de l'ordonnancement génral des taches (faire avancer les ojjets, lire les commandes, traiter les événementS...)

PS : je sais, ce jeu existe déjà en 10000 versions. M'en fous, le mien sera mieux, na.

CanardLaquais

01/11/2013, 03h13

J'ai reçu le Canard PC n° 285 avec la leçon n°3 mais je n'ai pas trouvé les images (ciel0.png, ciel1.png, ciel2.png)sur cpc.cx/809 (c'est à dire sur ce topic).

chuck2kill

01/11/2013, 08h58

oui, je suis dans le meme cas. alors j'attends que les images arrivent sur le forum
:rolleyes:

CanardLaquais

01/11/2013, 13h43

En attendant que le topic soit mis à jour avec les images du ciel ( ciel0.png, ciel1.png, ciel2.png), voici mes images que j'ai bricolées à partir de celles de la saison 1.
[Edit] j'ai retiré mes images maintenant que les images officielles sont disponibles dans le 1er post.

L-F. Sébum

01/11/2013, 14h41

Ça y est, les images sont en ligne. Désolé pour le retard mais le mag est sorti très très en avance par rapport à ce qu'on avait prévu.

CanardLaquais

02/11/2013, 13h58

Pour ceux qui veulent tenter Visual Studio Express for Web, la version finale est dispo:
Anglais: http://www.microsoft.com/visualstudio/eng/downloads
Français: http://www.microsoft.com/visualstudio/fra/downloads

Prendre la version "Express" qui est gratuite et pas la version normale (30 jours à l'essai)
Prérequis: Windows 7 SP1 + Internet Explorer 10 (Ou Windows 8, Windows 8.1)
Un compte Microsoft (live, hotmail ...) est aussi nécessaire pour le téléchargement.
Taille téléchargement : environ 600 Mo
Taille sur le disque dur: environ 2.6 Go

Pour utiliser Intellisense (voir mon message précédent), j'ai effectué les actions suivantes (spécifiques à Visual Studio):
1) Création du fichier _references.js dans le sous dossier Scripts du projet:

/// <reference path="lib/easeljs-0.6.1.min.js" />
/// <reference path="lib/preloadjs-0.3.1.min.js" />
/// <reference path="lib/soundjs-0.4.1.min.js" />

2) Utilisation du mot clef var pour les variables non typées lors de la déclaration:

///<var type="createjs.Bitmap">Player bitmap</var>
var obj_joueur;

///<var type="Array" elementType="createjs.Bitmap">Sky bitmap</var>
var obj_sky = [];

Javascript Intellisense dans Visual Studio:
http://msdn.microsoft.com/en-us/library/vstudio/bb385682.aspx

Utilisation de <var type="ValueType"> :
http://msdn.microsoft.com/en-us/library/vstudio/hh542722.aspx

_references.js:
http://gurustop.net/blog/2012/03/03/javascript-js-intellisense-auto_complete-in-visual-studio-11-beta-the-web-_references-js-file/

Mon projet complet Visual Studio à l'issue de la leçon 3 peut être téléchargé à cette adresse (pendant 30 jours) : http://dl.free.fr/pRtRdrhPH

Sinon Netbeans (https://netbeans.org/downloads/) n'est pas mal non plus (sélectionner une version avec le support HTML5 ou ajouter le plugin "HTML5 kit" après coup) mais l'équivalent de Intellisense (code completion) ne fonctionne que très partiellement.

AlexBessa

03/11/2013, 20h09

Salut a tous j'ai surement du faire une erreur mais je ne la trouve pas si quelqu'un pouvais m'aider. Rien ne se passe quand je lance index, enfin il n'affiche rien. Merci :)

var stage;
var preloadCount = 0;
var PRELOADTOTAL = 1;
var img_joueur = new Image();
var obj_joueur;

function startGame()
{ preloadAssets(); }

function preloadAssets()
{
img_joueur.onload = preloadUpdate();
img_joueur.src = "media/joueur.png";
}

function preloadUpdate()
{
preloadCount++;
if(preloadCount == PRELOADTOTAL)
launchGame();
}

function launchGame()
{
stage = new createjs.Stage(document.getElementById("gameCanvas"));

obj_joueur = new createjs.Bitmap(img_joueur);
stage.addChild(obj_joueur);

createjs.Tickers.setFPS(30);
createjs.Ticker.addEventListener("tick",mainTick);
}

function mainTick()
{stage.update();}

Koala77

03/11/2013, 21h24

@AlexBessa : utilise la console de Chrome (F12 pour l'ouvrir, puis tu vas dans Source pour voir ton script) pour trouver l'instruction qu'il n'arrive pas à exécuter.
Dans ton cas c'est l'instruction "createjs.Tickers.setFPS(30);" dans la function launchGame() qui pose problème => le nom de la méthode c'est Ticker, sans "s" au bout !

@toutlemonde : connaissant un peu le C#, j'essaye de refaire de la POO (Programmation Orientée Objet quoi) en javascript. Et là, c'est le drame... je savais que JS n'était pas fait pour ça, mais c'est vraiment le bowdel.
Concrètement, j'aimerais surcharger l'objet obj_joueur avec un attribut "direction" et une méthode "deplace", dans laquelle je gèrerais son déplacement en fonction des touches appuyées et de sa direction d'avancement. Sachant que notre objet a été défini avec un simple "var" et créé avec la fonction createjs.Bitmap, je cherche comment définir cette surcharge : quelqu'un peut m'aider ?

PS : j'ai trouvé sur le net des explications sur la notion de prototype...... j'ai tenté un truc de ce genre, mais ça marche pas des masses :

function Joueur() {};
Joueur.prototype = new createjs.Bitmap();
Joueur.prototype.deplace = function () {
// Haut = 38, Bas = 40, Gauche = 37, Droite 39
if (38 in touches) this.y -= PLAYERSPEED;
else if (40 in touches) this.y += PLAYERSPEED;
if (37 in touches) this.x -= PLAYERSPEED;
else if (39 in touches) this.x += PLAYERSPEED;

// On ne laisse pas sortir de l'écran
if (this.y < -32) this.y = -32 ;
else if (this.y > 448) this.y = 448 ;
if (this.x < -64) this.x = -64 ;
else if (this.x > 576) this.x = 576 ;
}
var obj_joueur;

Et donc dans function launchGame() :

obj_joueur = new Joueur(img_joueur);

war-p

04/11/2013, 08h39

Heu si je puis le permettre (je suis loin d'être un expert en JavaScript) mais tu essaie d'instancier ton objet joueur avec un paramètre alors que son constructeur n'est pas prévu pour en recevoir. Après sinon oublie toute notion d'héritage tel que tu le connais, en JS, ça n'existe pas, les prototypes ne sont qu'un pis-aller.

Tomaka17

04/11/2013, 09h20

Oublie tous les articles sur le net qui parlent de "faire de la POO en javascript".
Certaines personnes veulent faire de la POO même dans les langages où c'est totalement inapproprié.

devn

04/11/2013, 10h45

connaissant un peu le C#, j'essaye de refaire de la POO (Programmation Orientée Objet quoi) en javascript. Et là, c'est le drame... je savais que JS n'était pas fait pour ça, mais c'est vraiment le bowdel. [/HTML]

Tu as regardé les cadriciels qui génèrent une appli html5 depuis un langage plus sympa? Je connais libgdx ou playn pour Java, emscripten pour C++ et il doit y en avoir d'autre!

Koala77

04/11/2013, 13h37

Oublie tous les articles sur le net qui parlent de "faire de la POO en javascript".
Certaines personnes veulent faire de la POO même dans les langages où c'est totalement inapproprié.

(hop la camarade alsacien) Je vois ce que tu veux dire, c'est comme essayer de faire de la programmation prcoédurale dans un langage objet, c'est con. En fait, je cherche juste un moyen de factoriser proprement mon code. Après tout, je devrais plutôt m'inspirer de ma (très) (vieille) expérience en Turbo Pascal, où j'arrivais très bien à faire du code propre et factoriser sans aucune notion d'objet.

Mais quand même, dans le dév de jeux, la notion d'objets est bien pratique et assez naturelle je trouve. M'enfin, je vais me débrouiller ! Faut déjà que je chope la dernière leçon.

CanardLaquais

04/11/2013, 14h58

Tu as regardé les cadriciels qui génèrent une appli html5 depuis un langage plus sympa? Je connais libgdx ou playn pour Java, emscripten pour C++ et il doit y en avoir d'autre!

Je n'ai pas testé (sauf un Hello World avec Google Web Kit) mais il y a aussi ces outils/langages qui génèrent du javascript (donc compatible avec les navigateurs existants) :

A partir d'un langage existant:
C# : http://scriptsharp.com/ (gratuit) et http://sharpkit.net/ (payant mais gratuit pour des petits projets ou des projets open source)
Java : Google Web Kit http://www.gwtproject.org/

Ou de nouveaux langages qui génèrent aussi du javascript :
Typescript: http://www.typescriptlang.org
CoffeeScript: http://coffeescript.org/
Dart: https://www.dartlang.org/

Pour l'instant, je préfère me familiariser avec javascript mais TypeScript me semble intéressant car cela a de bonnes chances de correspondre au futur javascript (ECMAScript V6) et c'est supporté dans Visual Studio.

ECMAScript (http://en.wikipedia.org/wiki/ECMAScript) est la norme officielle pour javascript (javascript est une implémentation de ECMAScript).

L-F. Sébum

15/11/2013, 15h14

Les fichiers nécessaires à la leçon 4 (CPC 286 du 15 novembre) ont été ajoutés au premier post.

Koala77

21/11/2013, 11h58

Salut m'sieur Sébum. Cimer pour tout ça, c'est l'occasion de le dire. J'ai vu dans l'article que le prochain épisode serait sur les tests de collision : cool, c'est ce que j'attends.

D'ailleurs pour mon projet de snake / courses de moto Tron-like, je m'interroge : il va falloir que tous les murs tracés soient des objets si je veux gérer les collisions motos / murs ? Si oui ça va faire un tableau de mur à taille variable, donc un beau bordel à manipuler...

LaVaBo

21/11/2013, 12h16

D'ailleurs pour mon projet de snake / courses de moto Tron-like, je m'interroge : il va falloir que tous les murs tracés soient des objets si je veux gérer les collisions motos / murs ? Si oui ça va faire un tableau de mur à taille variable, donc un beau bordel à manipuler...

Ca dépend de la gestion des collisions justement. Et il y a plein de façon de gérer.

Si tu utilises un moteur physique, il y aura une représentation de ce "mur" dans le moteur, donc un ou plusieurs objets pour le représenter. Par exemple un seul objet qui contient tout, ou un objet par segment.
Si tu n'as que des virages à 90°, il doit y avoir des formules mathématiques pour calculer les collisions en ne stockant que les virages, pas l'ensemble des points du "mur".
Si tu es ultra chaud du slip, tu peux uniquement dessiner les trajectoires, puis regarder la couleur de chaque pixel à l'écran, et si c'est de couleur x correspondant à une trajectoire, estimer qu'il y a un "mur".

C'est tout l'intérêt de la programmation : tu fais ce que tu veux, selon la situation.
Et tout le problème de la programmation : tu finis très facilement avec un algo bien lourd qui fait ramer ta machine de guerre pour afficher du 640*480.
Mais tout cela a déjà été analysé, décortiqué, synthétisé par d'autre, cherche sur le web, il y aura différentes méthodes avec des critères qui t'aideront à déterminer si c'est ce dont tu as besoin, s'il manque quelque chose ou si tu fais de l'overkill pour un truc simple.

Khayman

22/11/2013, 03h17

olinox14

22/11/2013, 10h21

Salut m'sieurs dames! [crache son tabac à chiquer dans la gamelle du chat, qui l'éborgne d'un coup de griffe pour se venger]

Bon, je développe pas vraiment. En fait si, je suis plutôt bon en VBA... Mais ça compte pas vraiment pas vrai?
Du coup j'y connais rien en html/java et compagnie. Un vrai pied tendre au far net quoi, un de ces innocents attiré par la ruée vers l'or(di), qui n'en ressortira pas indemne. :tired:

Enfin, revenons à nos bisons.

Voilà, je suis abonné à cpc depuis le numéro 284 (je l'achetais à l'occasion avant ça, mais me voilà rangé, aussi régulier que des règles pilulées).
"Donc, tu va recevoir toutes les étapes du développez couché, sans avoir l'intro et la 1ère?" me direz vous...
"Oui" vous répondrai-je sobrement dans la plus pure tradition JackLondonienne, une douloureuse larme d'homme au coin de l’œil. :'(

Voilà, c'est tout, trêve de bêtises: est-ce qu'une âme charitable pourrait me résumer rapidement les 2 premières étapes du développez couché?
Trucs à télécharger et à installer?
Où copier quoi, et où ajouter les quelques lignes magiques (sans lesquelles le jeu est parfait, sans défaut, mais ennuyeux parce que tout blanc)?

Juste de quoi me remettre sur les rails du traineau, faire claquer la lanière du fouet en criant "mush!", et glisser vers la fortune? :cigare:

Merci d'avance!

L-F. Sébum

23/11/2013, 17h29

Rassurez-vous si vous avez manqué les premières leçons, il y aura un "point" pour les retardataires dans quelque temps.

CanardLaquais

24/11/2013, 19h02

est-ce qu'une âme charitable pourrait me résumer rapidement les 2 premières étapes du développez couché?
Trucs à télécharger et à installer?

Tu peux télécharger mon projet ici : http://dl.free.fr/pRtRdrhPH
Il y a des fichiers et des lignes (de commentaire) spécifiques à Visual Studio qui sont donc inutiles pour toi mais ça fonctionnera très bien quand même.
Voir mon message précédent : http://forum.canardpc.com/threads/82175-D%C3%A9veloppez-Couch%C3%A9-saison-3-le-topic-officiel?p=7180423&viewfull=1#post7180423

olinox14

25/11/2013, 11h19

Yep merci à toi, je vais raccrocher mes wagons! pis après, je demande son poste à Bill... bonne journée!

chuck2kill

26/11/2013, 17h15

salut à tous

je suis la leçon depuis le début, mais là je sèche...
pas moyen d'afficher mes saucisses!

D'habitude quand ça ne marche pas c'est juste un problème de saisie, mais cette fois je ne vois pas de faute de frappe. il faut peut-être que je me lave les yeux.

Enfin bref, est ce que vous voulez que je poste mon fichier pour que quelqu'un m'aide à trouver mon erreur?

Olorin

30/11/2013, 11h48

Si tu utilise firefox, installe firebug, ca aide bien pour débugger. (si tu utilise un autre navigateur il doit sûrement y avoir des équivalents...)

CanardLaquais

01/12/2013, 22h16

Un peu de programmation objet en Javascript : j'ai créé une pseudo-classe 'Saucisse' qui hérite de createjs.Bitmap.

Pour encapsuler ça proprement, j'aurai pu utiliser des closures (http://stackoverflow.com/questions/3564238/object-oriented-javascript-with-prototypes-vs-closures) mais je n'ai pas voulu trop compliquer.

// Definition du 'constructor' pour Saucisse.
// C'est un peu comme si on créait une classe 'Saucisse' qui hérite de createjs.Bitmap
function Saucisse() {
createjs.Bitmap.call(this); // appel du 'constructor' parent (pas obligatoire mais recommandé)
this.preparerSaucisse(); // on appelle la méthode preparerSaucisse (pas obligatoire mais autant le faire de suite)
}

//Nécessaire afin que Saucisse hérite de createjs.Bitmap
Saucisse.prototype = new createjs.Bitmap();

// Définition de la méthode preparerSaucisse pour la classe 'Saucisse' (cela remplace la méthode PreparerSaucisse).
Saucisse.prototype.preparerSaucisse = function () {
// this représente l'objet 'Saucisse'
this.x = Math.floor(Math.random() * 448 + 640);
this.y = Math.floor(Math.random() * 448);

this.pourrie = Math.random() < 0.5;

if (this.pourrie)
this.image = img_saucisse[1];
else
this.image = img_saucisse[0];
}

Dans launchGame, remplacer le code qui initialise les saucisses par:

for (var i = 0 ; i < SAUCISSECOUNT ; ++i) {
obj_saucisse[i] = new Saucisse();
stage.addChild(obj_saucisse[i]);
}

Et dans mainTick, modifier l'appel à PreparerSaucisse comme ceci:

if (obj_saucisse[i].x < -64)
obj_saucisse[i].preparerSaucisse();

chuck2kill

01/12/2013, 23h14

@ olorin:
j utilise chrome, et je tape f12 pour voir le code et je n ai aucune erreur de déclarée.

tout marche, sauf que les saucisses n'apparaissent pas. :tired:

wireless wookie

05/12/2013, 22h49

Bonjour à tous.
De mon côté, je flanche et me décide à poster ici... J'arrive à avoir un code fonctionnel jusqu'à la leçon 4. Sur la leçon 5, rien à faire, les collisions ne sont pas détectées.
Aussi, ce qui m'ennuie c'est que ça ne fonctionne que sur Firefox(25) et j'aimerais arriver à le faire fonctionner sur IE(11) aussi. Ce qui est étrange, c'est que sur la leçon 4, j'ai réussi à avoir les saucisse sur IE, puis plus rien.
J'ai récupéré également le code de @CanardLaquais avec l'extension saucisse de ci dessus qui a également marché aussi à un moment donné au niveau de la leçon 4 sur IE et Firefox... Puis en voulant ajouter les collisions, ça ne fonctionne plus, je ne comprends pas. et j'ai perdu la bonne version.
En résumé chez moi :
- le code CPC marche sur Firefox (25) mais pas les collisions (Leçon 5) ;
- le code CPC ne fonctionne pas sur IE (11) : j'ai soit le niveau leçon 3 (avant les saucisse), soit une page blanche sans rien.
- le code @CanardLaquais fonctionne sur IE (11) au niveau leçon 4 (saucisse) mais un seul type de saucisse apparaît...
- le code @CanardLaquais fonctionne sur Firefox avec les deux types de saucisses mais seulement niveau leçon 4.

Les consoles d'exploration DOM type outils de développement natifs sur IE ou Firebug sur Firefox ne révèlent aucune erreur...

Quelqu'un d'autre est il dans mon cas ?

chuck2kill

07/12/2013, 12h44

bon
pour prévenir, j ai réussi a trouver mon erreur.
je vais maintenant pouvoir mettre les collisions.
évidemment, c était encore une erreur de saisie

CanardLaquais

07/12/2013, 14h51

J'ai uploadé mon projet complet à l'issue de la leçon 5 ici : http://dl.free.fr/gJ97Zo7uq
Si vous n'utilisez pas Visual Studio 2013, vous pouvez supprimer les fichiers CPCDev.sln, CPCDev.v12.suo, Web.config et Scripts\_references.js
C'est avec ma variante "programmation objet" (cf. message précédent (http://forum.canardpc.com/threads/82175-D%C3%A9veloppez-Couch%C3%A9-saison-3-le-topic-officiel?p=7279150&viewfull=1#post7279150)).
Testé sous Chrome 31, IE 11 et Firefox 25. Il y a parfois quelques saccades quand on déplace le vaisseau sous Firefox.

CanardLaquais

07/12/2013, 18h30

Afin de détecter les erreurs de saisie, je vous conseille d'utiliser l'outil JSHint (un fork de JSLint).

Disponible en ligne http://www.jshint.com/
Copier-coller votre source javascript à la place du source par défaut.

Je vous conseille d'ajouter ces 2 lignes tout au début de votre source:

/*global createjs */
/*jshint globalstrict:true, browser:true */

Explications:
global createjs
Supprime les avertissements pour les références à createjs

globalstrict:true
Supprime les avertissement pour l'utilisation de "use strict";.
Ce n'est pas dans le source officiel de CanardPC mais je vous conseille de l'utiliser.
Cf. MSDN (http://msdn.microsoft.com/en-us/library/br230269%28v=vs.94%29.aspx) et Mozilla MDN (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode)

browser:true
Supprime avertissement pour l'utilisation de document et addEventListener

Il devrait rester 3 Warnings "i is already defined" et 1 Unused variable "startGame" comme ceci :
http://tof.canardpc.com/preview/e0746414-ffbc-4dff-bd4a-b63a7d29add7.jpg (http://tof.canardpc.com/view/e0746414-ffbc-4dff-bd4a-b63a7d29add7.jpg)

Afin d'éviter les 3 Warnings on pourrait utiliser

/*jshint shadow:true */

Mais il vaut mieux ignorer ces avertissement ou réécrire le code en omettant "var" quand on ré-utilise la même variable dans une fonction:

function preloadAssets()
{
...

for (var i = 0 ; i < 3 ; ++i)
{ ... }

for (i = 0 ; i < SAUCISSECOUNT ; ++i)
{ ... }
}

JSLint/JSHint est aussi disponible sous forme de plugin pour Notepad++.

Installation:
Menu Plugins / Plugin Manager / Show Plugin Manager : sélectionner et installer "JSLint" plugin par Martin Vladic.

Configuration:
Menu Plugins / JSLint / JSLint Options : sélectionner JSHint au lieu de JSLint.

Utilisation:
Menu Plugins / JSLint / JSLint Current File.

wireless wookie

13/12/2013, 18h36

Merci beaucoup Canard Laquais.

La perspective de Visual Studio m'intéresse justement beaucoup. J'ai quelques notions de java script mais ce n'est pas non plus mon cœur de métier, donc je code façon gros sabot me heurtant souvent à la grande variété de syntaxe de ce langage... mais bon une fois que je le vois, je comprends à peu près sa logique.
Mon idée est donc justement de me sensibiliser à un projet visual studio (pour hypothétiquement aller vers du Windows 8/Phone) à partir d'un petit projet comme celui de Développez Couché, comme extension d'un projet web HTML5+JS, bien sûr...

CanardLaquais

14/12/2013, 13h10

La perspective de Visual Studio m'intéresse justement beaucoup. J'ai quelques notions de java script mais ce n'est pas non plus mon cœur de métier, donc je code façon gros sabot me heurtant souvent à la grande variété de syntaxe de ce langage... mais bon une fois que je le vois, je comprends à peu près sa logique.
Mon idée est donc justement de me sensibiliser à un projet visual studio (pour hypothétiquement aller vers du Windows 8/Phone) à partir d'un petit projet comme celui de Développez Couché, comme extension d'un projet web HTML5+JS, bien sûr...

En ce qui concerne les versions gratuites de Visual Studio (Express) (http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx) , il y a 4 versions :

Express 2013 for Web : pour la création de site Web (HTML, ASP.Net, JavaScript). C'est la version qui nous intéresse pour "Développez Couché".

Express 2013 for Windows : pour le magasin d'applications Windows 8.1 - "Metro", "ModernUI" - (WinRT).
Langages: C#, VB.Net, C++ et Javascript

Express 2013 for Windows Desktop : applications pour le bureau classique (Win32).
Langages: C#, VB.Net et C++

Express 1012 for Windows Phone : pour Windows Phone 7.5 et 8.
Langages: C#, VB.Net (C++ / Direct3D)

Je vais m'intéresser à TypeScript (http://fr.wikipedia.org/wiki/TypeScript) (site officiel: http://www.typescriptlang.org (http://www.typescriptlang.org/)) qui est supporté dans Visual Studio Express (2012 et 2013) for Web.
C'est une extension à JavaScript qui apporte:
-typage statique des variables (string, number)
-orientation objet (class, interface)

CanardLaquais

21/12/2013, 19h06

Des nouvelles de TypeScript, le language Open Source qui étend JavaScript et qui est poussé par Microsoft.
Il n'est peut être pas aussi élégant qu'un nouveau langage comme Dart (Google) mais il a l'avantage de rester compatible avec JavaScript.
Tout programme JavaScript est un programme TypeScript valide.
Le code JavaScript qui est généré par le compilateur TypeScript est aussi clair et lisible que si il avait été écrit directement en JavaScript.

On peut donc très facilement utiliser les librairies JS existantes (JQuery, CreateJS ...), cependant il faut utiliser des fichiers des définitions (voir lien en fin de ce message) pour bénéficier des avantages de TypeScript.

Avantages:
-aide à la saisie ("intellisense" dans Visual Studio) et support du "refactoring"(renommage en masse)
-le typage (optionnel) des variables élimine certaines erreurs
-programmation objet : "class" et "module" (encapsulation - équivalent des "closures" en JS)
-nouveautés: enum (comme en Java ou en C#) et types génériques

Inconvénients:
-supporté dans peu d'outils : Visual Studio, Eclipse, IntelliJ IDEA (version payante), Sublime Text
-encore récent ("work in progress") mais la version 1.0 est proche (la version actuelle est 0.9.5)
-avenir incertain (comme Dart et tous les autres) même si certains concepts sont empruntés à la prochaine version de JavaScript (ES6)

J'ai mis un lien en fin de message pour télécharger mon projet Dév. Couché (leçon 6).

Exemple d'aide à la saisie:
http://tof.canardpc.com/preview2/7e3080e6-0ff1-44a4-a431-d11f10289d89.jpg (http://tof.canardpc.com/view/7e3080e6-0ff1-44a4-a431-d11f10289d89.jpg)

Exemple de classe:

class Saucisse extends createjs.Bitmap
{
pourrie: boolean;

constructor()
{
super(img_saucisse[0]); // appel du constructeur de base (obligatoire)
this.preparerSaucisse(); // on appelle la méthode preparerSaucisse (pas obligatoire mais autant le faire de suite)
}

preparerSaucisse()
{
// this représente l'objet 'Saucisse'
this.x = Math.floor(Math.random() * 448 + 640);
this.y = Math.floor(Math.random() * 448);

this.pourrie = Math.random() < 0.5;

if (this.pourrie)
this.image = img_saucisse[1];
else
this.image = img_saucisse[0];
}
}

var obj_saucisse: Saucisse[] = []; // tableau de Saucisse (initialisé à tableau vide)
var obj_joueur: createjs.Bitmap; // createjs.Bitmap (non initialisé)
var obj_sky: createjs.Bitmap[] = []; // tableau de createjs.Bitmap[] (initialisé à tableau vide)

Liens:
Visual Studio Express 2013 for Web: http://www.microsoft.com/visualstudio/eng/downloads
Prérequis: Windows 7 SP1 + Internet Explorer 10 (ou Windows 8, Windows 8.1)
Un compte Microsoft (live, hotmail ...) est aussi nécessaire pour le téléchargement.
Taille téléchargement : environ 600 Mo
Taille sur le disque dur: environ 2.6 Go

Le site officiel de TypeScript : http://www.typescriptlang.org
Le plugin pour VisualStudio : http://www.microsoft.com/en-us/download/details.aspx?id=34790
Le dépot pour les fichiers de définition (JQuery, CreateJS ...) : https://github.com/borisyankov/DefinitelyTyped

Mon projet TypeScript à l'issue de la leçon 6 : http://dl.free.fr/iEZUg4GXq
Bizaremment, il s'agit d'un projet de type csproj (C#), cela génére une DLL dans le répertoire Bin mais elle ne sert à rien.
Attention, j'ai du utiliser des versions de CreateJS plus récentes que celles de Dev. Couché.
Il peut y avoir des différences de comportement; par exemple j'ai du remplacer "loadcomplete" par "fileload" pour SoundJs:
createjs.Sound.addEventListener("fileload", preloadUpdate);

doomeer

26/12/2013, 20h17

Intéressant CanardLaquais, merci pour cette présentation de ce langage. Ça me rappelle un exposé à une conférence où l’orateur expliquait qu’il fallait proposer aux programmeurs une transition douce si on voulait qu’ils passent de leur langage non typé à un langage typé. Il expliquait comment faire un Python avec typage statique optionnel.

CanardLaquais

18/01/2014, 00h02

Pour ceux qui auraient téléchargé mon source typescript, il y a une petite erreur qui fait qu'il n'y a pas la musique de fond.
La ligne correcte (telle que dans le magazine) est :
createjs.Sound.play("music", createjs.Sound.INTERRUPT_NONE, 0, 0, 1, 0.4);

J'avais écrit ceci (volume à 0 donc pas de musique) :
createjs.Sound.play("music", createjs.Sound.INTERRUPT_NONE, 0, 0, 1, 0, 4);

L-F. Sébum

18/01/2014, 14h27

J'ai ajouté tir.png, que j'avais oublié, à la liste des fichiers dans le premier post.

Koala77

25/01/2014, 21h21

Salut les canards,
Je rame sur les héritages multiples en JS. J'ai bien comment créé des classes filles des classes proposée par CreateJS, par exemple pour une classe Joueur héritée createJS.Bitmap je fais :

Joueur = function (param1, param2) {
createjs.Bitmap.call(this);
[bla bla ba]
};

Joueur.prototype = new createjs.Bitmap(); // Pour hériter de hérite de createjs.Bitmap

Et je déclare mes méthodes avec par exemple :

Joueur.prototype.changeDirection = function (variation) {
[bla bla ba]
};

Et ça marche très bien. Problème : j'aimerais maintenant créer une classe fille de Joueur, qui permettrait d'ajouter ou modifier certaines méthodes. Et là je sèche... j'ai cherché sur le Web, mais j'avoue ne pas avoir tout compris.

Please, please help me avant que je craque et que je tourne mon projet vers la combinaison C#/Unity.

James314

26/01/2014, 21h21

Coinc,
Petite après-midi découverte du développement javascript grace à CPC, yabon !
J'ai réussi à faire à l'arrache ce que je voulais : une course contre le temps, la possibilité de débloquer des modifications (une pour l'instant) avec le score (ma version ici (http://ar7dqw.1fichier.com/)).
Pour la suite il faudra que je fasse du ménage, js n'a pas l'air d'être le genre de copain qui range le bordel à ta place... Sans parler des concepts à faire proprement comme les menus.

Hâte de voir la suite !

Rico

13/02/2014, 01h12

Hello all,
comme un bon boulet j'ai raté la lecon 8 (le canard a fini en bouilli) quelqu'un aurai ca en stock?

CanardLaquais

13/02/2014, 21h23

Hello all,
comme un bon boulet j'ai raté la lecon 8 (le canard a fini en bouilli) quelqu'un aurai ca en stock?

Il n'y a pas de leçon 8.
CPC 289 - 15 Janvier - Leçon 7 : projectiles
CPC 290 - 1er Février - Leçon 9 : vies

stadja

16/02/2014, 22h38

Salut les lapins...
de mon coté j'ai passé une aprem' dessus pour m'y mettre...
j'en suis à la leçon 6.

J'ai rajouté la prise en compte de tactile avec du touch event
http://stadja.net/coin/

ça marche sur ma tablette, c'est rigolo :)

Rico

26/02/2014, 12h20

Il n'y a pas de leçon 8.
CPC 289 - 15 Janvier - Leçon 7 : projectiles
CPC 290 - 1er Février - Leçon 9 : vies

Merci pour l'info

ducon

18/03/2014, 09h48

Pour ceux qui veulent développer un petit jeu de labyrinthe en Python :

http://tof.canardpc.com/preview2/61ebbbc9-94dc-4258-a42d-93622482b64c.jpg (http://tof.canardpc.com/view/61ebbbc9-94dc-4258-a42d-93622482b64c.jpg)

L-F. Sébum

18/03/2014, 13h50

Le fichier nécessaire à la leçon 12 (CPC 293 du 15 mars) a été ajouté au premier post.

jn1978

02/04/2014, 15h56

Pas de leçon 13 dans le numéro 294 ? Je l'ai retourné fébrilement dans tous les sens, pas de trace de ma rubrique préférée...

ducon

02/04/2014, 16h42

Non, il va directement passer à la leçon 14. :smile:

L-F. Sébum

03/04/2014, 12h14

Pas de leçon 13 dans le numéro 294 ? Je l'ai retourné fébrilement dans tous les sens, pas de trace de ma rubrique préférée...

Non, on a eu un problème de pages en trop. Mais retour à la normale dans le 295.

jn1978

03/04/2014, 21h31

Merci de l'info ! Je vais patienter en testant tout un tas de trucs bizarroïdes dans mon code...

CanardLaquais

08/05/2014, 17h34

Une petite erreur qui n'a pas de conséquence dans la leçon 14 : on déclare une variable "niveau" mais dans le reste du code on utilise "level"

Il faut remplacer la ligne:
var niveau = 1; var niveauTexte

Par:
var level = 1; var niveauTexte;

Cela n'a en fait pas de conséquence car javascript va considérer que la variable "level" est quand même une variable globale même si elle n'est pas déclarée au niveau global.
Il est cependant chaudement recommandé de déclarer les variables globales au début du code.
Ce genre d'erreur peut être détecté avec JSHint (http://forum.canardpc.com/threads/82175-D%C3%A9veloppez-Couch%C3%A9-saison-3-le-topic-officiel?p=7300107&viewfull=1#post7300107)

jtoutee

20/05/2014, 06h12

Arg il me manque la leçon 6 ! Abonné (et vivant au Québec), je me suis enfin décidé à me lancer, je regroupe tous mes Canard PC, je ne tombe pas dans le piège de la leçon 8 qui manque (merci le forum !) ni dans le piège de la leçon 11 (du 292) qui s'appelle 10 par erreur, ni du Canard PC 294 qui ne contient pas de leçon (merci encore le forum)... mais j'ai perdu le numéro 288 qui contient la leçon 6 :-( Ça doit être un de mes 4 enfants qui l'a perdu, mais ils nient farouchement.
Donc si une bonne âme pouvait me scanner la page de la leçon 6 et me l'envoyer par courriel ce serait sympa ! Sinon, je commanderai le numéro 6 à l'unité mais ça va prendre du temps.
Merci !

CanardLaquais

21/05/2014, 20h29

Donc si une bonne âme pouvait me scanner la page de la leçon 6 et me l'envoyer par courriel ce serait sympa ! Sinon, je commanderai le numéro 6 à l'unité mais ça va prendre du temps.
Merci !

Je ne l'ai pas sous la main, mais je dois pouvoir faire ça vendredi soir (si mon scanner n'est pas en panne).
Je t'enverrai ça en Message Privé. N’hésite pas à me rappeler (par MP) si j'oublie.

En attendant, tu peux essayer le jeu sur mon site http://gilles.veyet.free.fr/canardage (leçon 15)
J'ai fait des petites modifications par rapport au source Canard PC : par exemple c'est du TypeScript (http://www.typescriptlang.org/) qui est transformé en javascript (voir mes messages précédents).
Source TypeScript (gilles.veyet.free.fr/canardage/scripts/main.ts)
Source Javascript (http://gilles.veyet.free.fr/canardage/scripts/main.js)

jtoutee

21/05/2014, 23h45

Merci, c'est sympa ! Comme ça je vais pouvoir commencer à apprendre le codager à ma fille de 15 ans qui est demandeuse

CanardLaquais

16/06/2014, 21h00

Dans la leçon 17 (finale), je pense qu'il manque "|| e.keyCode == 66" dans "addEventListener - keydown" pour intercepter la touche "B" (ou alors j'ai raté ça dans les leçons précédentes).

addEventListener("keydown",
function (e)
{
touches[e.keyCode] = true;
if (e.keyCode >= 37 && e.keyCode <= 40 || e.keyCode == 32 || e.keyCode == 66 || ...
...
...

http://gilles.veyet.free.fr/canardage/

Remarque j'utilise F2 à F4 au lieu de F1 à F3 car Internet Explorer persiste à appeler l'aide quand on appuie sur F1.

Sinon, petit probléme de performance avec Firefox, çà prend 15 à 20% du CPU et ce n'est pas fluide alors qu'avec Chrome ou IE c'est OK (1 à 2 % du CPU).
Mon CPU: Intel Q9550 (2.83 GHz).

le gritche

26/06/2014, 18h20

Bonjour !

Je démarre de 0 en javascript. J'ai recopié le premier chapitre. index m'affiche une page blanche et pas de joueur.png... Je n'arrive pas à trouver mon erreur !

var stage;
var preloadCount = 0; var PRELOADTOTAL = 1;
var img_joueur = new Image(); var obj_joueur;
function startGame() {preloadAssets(); }

{
img_joueur.onload = preloadUpdate();
img_joueur.src = "media/joueur.png";
}

function preloadUpdate()
{
preloadCount++;
if (preloadCount ==PRELOADTOTAL) launchGame();
}
function launchGame()
{
stage = new createjs.Stage(document.getElementById("gameCanvas"));
obj_joueur = new createjs.Bitmap(img_joueur);
stage.addChild(obj_joueur);

createjs.Ticker.setFPS(30)
createjs.Ticker.addEventListener("tick",mainTick);
}
function mainTick() { stage.update();}

Koala77

29/06/2014, 14h38

Juste un mot pour remercier le sieur Sébum ainsi que tous ceux qui ont collaboté à ce forum pour la saison 3 de Développez couché.Ca m'a redonné goût à la programmation. Mon projet de petit jeu de combats spaciaux arrive à son terme, réalisé avec HTML5 / JavaScript / CreateJS. Je publierai le lien ici bientôt pour avoir vos avis / retours. Si d'autres canards ont profité de ces leçons pour réaliser leur propre production, ce serait chouette de le faire partager !

Et vivement la saison 4 !

CanardLaquais

01/07/2014, 22h21

Bonjour !
Je démarre de 0 en javascript. J'ai recopié le premier chapitre. index m'affiche une page blanche et pas de joueur.png... Je n'arrive pas à trouver mon erreur !

Essaie jshint (http://www.jshint.com/) comme je l'ai expliqué ici (http://forum.canardpc.com/threads/82175-D%C3%A9veloppez-Couch%C3%A9-saison-3-le-topic-officiel?p=7300107&viewfull=1#post7300107)

Il manque la fonction preloadAssets
Il manque un ";" à la fin de la ligne createjs.Ticker.setFPS(30)

---------- Post added at 22h21 ---------- Previous post was at 22h18 ----------

Si d'autres canards ont profité de ces leçons pour réaliser leur propre production, ce serait chouette de le faire partager !

J'ai fait le jeu du loup et des agneaux en javascript (TypeScript en fait) : http://gilles.veyet.free.fr/wolf_and_sheep/
C'est un jeu de réflexion et je n'utilise pas createJS.

En anglais,cela s'appelle "Fox and Hounds" or "Wolf and Sheep" cf. http://en.wikipedia.org/wiki/Fox_games

Ce n'est pas terminé mais c'est tout à fait jouable (sur tablette aussi).
Pour l'instant le loup joue comme un pied, les agneaux peuvent perdre alors qu'ils devraient toujours gagner.
C'est un probléme d’optimisation, j'ai du sacrifier un peu sur la profondeur de recherche afin de conserver des temps d’exécution raisonnable.
Je rajouterai plusieurs niveaux de difficulté par la suite.