Développez Couché, saison 3 : le topic officiel

**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 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

Envoyé par lucskywalker

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.

**devn** · 30/09/2013, 11h33

Envoyé par Tomaka17

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 ----------

Envoyé par lucskywalker

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...et-faiblesses/

**Tomaka17** · 30/09/2013, 12h35

Envoyé par SeanRon

un article comparatif sorti en début d'année sur le sujet : http://www.journaldugeek.com/2013/01...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

Envoyé par L-F. Sébum

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

Code:

/// <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 :

Pièce jointe 7275

Intellisense Javascript.jpg

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/visualstudi...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

Envoyé par Arkady

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

Envoyé par Tomaka17

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:

Code:

<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

Envoyé par Koala77

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...

Pour la 3d, via javascript/webgl, il y a des moteurs assez simples comme http://threejs.org/ ou http://www.x3dom.org/

**Koala77** · 21/10/2013, 13h46

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

**devn** · 23/10/2013, 10h34

Envoyé par Koala77

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, 04h13

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, 09h58

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

**CanardLaquais** · 01/11/2013, 14h43

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, 15h41

Ç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, 14h58

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:

Code:

/// <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:

Code:

///<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/libr.../bb385682.aspx

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

_references.js:
http://gurustop.net/blog/2012/03/03/...ences-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 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, 21h09

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

Code HTML:

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, 22h24

@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 :

Code HTML:

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() :

Code HTML:

	obj_joueur = new Joueur(img_joueur);

**war-p** · 04/11/2013, 09h39

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.

Discussion: Développez Couché, saison 3 : le topic officiel

Outils de la discussion

Règles de messages