Forums Développement Multimédia

Aller au contenu

Monsieur Spi

Inscrit(e) (le) 10 Mar 2005
Connecté Dernière activité aujourd'hui, 14:29 PM
*****

Sujets que j'ai initiés

Ellipses dans une grille

09 July 2017 - 16:48 PM

Bonjour,

C'est dimanche, je suis à plat...
Je cherche à dessiner des ellipses dans une grille en 2D.

Je suis parti de l'algorithme de Bresenham : http://rosettacode.o...ircle_algorithm
J'arrive à tracer des cercles, mais pas des ellipses, si vous avez une idée à propos d'un truc que j'aurai pu oublier...

Je calcule le radius avec une formule de calcul de la distance entre (x0,y0) centre du cercle et (x1,y1) position de la souris.

Je n'ai pas d'exemple de code de ce que j'ai fait à vous envoyer, c'est intégré dans un truc plus gros et j'ai trop la flemme de créer un exemple complet et fonctionnel.

Voilà néanmoins mon bout de code qui concerne cette partie :

// souris
let mx = e.pageX;
let my = e.pageY;

let that = this;

// centre du cercle
let x0 = this.rectTool.x;
let y0 = this.rectTool.y;
let radius = parseInt(Math.sqrt((my-y0)*(my-y0)+(mx-x0)*(mx-x0)));

// l'algo commence ici
var px = radius-1;
var py = 0;
var dx = 1;
var dy = 1;
var decisionOver2 = dx - (radius << 1);   // Decision criterion divided by 2 evaluated at x=r, y=0

// écriture dans la grille
var drawPixel = function (ppx,ppy) {
        that.toolcanvasgrid[ppx+ppy*C] = tileSelected.id;
};

while (px >= py) {
        drawPixel(px + x0, py + y0);
        drawPixel(py + x0, px + y0);
        drawPixel(-px + x0, py + y0);
        drawPixel(-py + x0, px + y0);
        drawPixel(-px + x0, -py + y0);
        drawPixel(-py + x0, -px + y0);
        drawPixel(px + x0, -py + y0);
        drawPixel(py + x0, -px + y0);
        if (decisionOver2 <= 0) {
                py++;
                decisionOver2 += dy; // Change in decision criterion for y -> y+1
                dy += 2;
        }
        if (decisionOver2 > 0) {
                px--;
                dx += 2;
                decisionOver2 += (-radius << 1) + dx; // Change for y -> y+1, x -> x-1
        }
}

Merci :)



EDIT : bah en l'écrivant je pense avoir mis le doigt sur le problème, c'est le radius qui semble poser souci, calculé comme je l'ai fait ca donne un cercle, il est égal partout...


EDIT 2 : je crois avoir trouvé la réponse ici : https://sites.google...awing-algorithm


EDIT 3 : bon ça marche, y a mieux comme infos ici : http://enchantia.com...h/ellipses.html

[Tuto - Metroïd]Platformer Javascript

24 December 2016 - 16:39 PM

Bonjour,

Tout d'abord, bonnes fêtes :)

Comme il est d'usage d'apporter un petit cadeau, un moteur de jeux de plateforme en javascript ça vous tente ?

Fichier joint  metroid.jpg   62.86 Ko   24 téléchargement(s)

Fichier joint  metroid-debug.jpg   69.51 Ko   20 téléchargement(s)

Avec quelques ajouts, le moteur devrait finir par convenir à pas mal de jeu à base tuiles, avec plusieurs rendus et placement de caméra possibles. Mais pour le moment je suis parti d'une base de Metroïd que j'ai trouvé sur la toile pour ne pas perdre de temps avec la map et les assets, et j'ai construit mon moteur autour, ça sera donc de la plateforme ^_^

Pas grand chose à dire de plus, chaque ligne de code est commentée, c'est en cours de développement, c'est fait pour le fun sans but commercial ni professionnel, c'est gratuit et vous pouvez en faire ce que vous voulez (tant que vous ne le vendez pas).

Si vous trouvez des bugs, avez des pistes d'optimisation ou voulez participer, n'hésitez pas ;)
Vous avez la source, il vous suffit de tester vos modifs, si ça marche proposez-les ici :P

Reste à vous donner quelques clés de base pour la prise en main.

La page HTML doit contenir le code suivant :

<div id="game">
         <script src="js/game.js"></script>
</div>

Ensuite le moteur se débrouille tout seul pour créer et charger dans cette balise ce dont il à besoin.

Tout le jeu moteur est dans le dossier "js" :

settings.js :
Pour le moment pas grand chose mais c'est ici qu'il faudra placer tous les paramètres généraux qui n'entrent pas logiquement dans les maps (résolution, musiques, bruitages, interface, ...).

game.js :
Initialisation du jeu :
  • charge les scripts du moteur,
  • charge les spritesheets
  • crée les éléments HTML,
  • initialise la gestion de l'audio,
  • construit le premier level,
  • contrôle les mises à jour (level, rendu graphique, debug, ...).
buildlevel.js :
Construit le level d'après la map.
  • charge la map
  • initialise l'objet "appData"
  • liste les animations
  • crée l'écran d'affichage (screen)
  • génère le monde (world)
L'objet "appData" contient tous les paramètres du level, le moteur y fait référence dès qu'il a besoin d'une information.

Concernant le cœur de l'appli (core) tout est commenté directement dans les fichiers.
Par contre il peut être utile de dire quelques mots sur le dossier "entities".

Tous les objets du jeu sont des entités, il y a donc une classe "core/entity.js" qui décrit le comportement général de tous les objets. Chaque objet en hérite et la spécialise en y ajoutant ses propres comportements (qui s’appuient généralement sur les méthodes de "core/entity.js" mais pas toujours). Pour ajouter de nouveaux "acteurs" à votre jeu il suffit donc de coder un objet qui hérite de "core/entity.js". C'est ce que vous trouverez dans le dossier "entites", des portes, ennemis, items, missiles, plateformes, et joueur.

Si tout va bien vous n'aurez normalement pas à toucher au cœur du moteur pour faire un jeu, les trois fichiers JS au dessus suffisent pour le paramétrage, la map est en Json, et les objets sont dans le dossier "entities".

Voilà, c'est un début :)

Have fun !
Passez de bonnes fêtes.

PS : J'oubliai... utilisez la touche D pour afficher le débug, la touche CTRL pour viser, la touche ESPACE pour tirer, et la touche C pour ouvrir la porte (si vous avez trouvé la clé..... ).

Cordes en JS

27 November 2016 - 14:56 PM

Bonjour,

D'habitude je cherche un peu tout seul, mais c'est pour un truc perso pour lequel j'ai peu de temps et je me suis dit que ça pouvait intéresser du monde de réfléchir sur un petit truc... alors je vais vous mettre à contribution :)

Voilà, je suis en train de monter un petit moteur de jeux à base de tuiles (oui, encore !) en Javascript. Je me suis dit qu'il était temps de me faire une petite lib sympa et perso pour monter ce que je voulais, j'y suis presque mais il me manque quelques petites choses pour parfaire le tout.

Un des trucs qui me manque c'est la création de cordes auxquelles le joueur peut s'agripper pour éviter un obstacle ou traverser un ravin. Je sais comment faire, je le faisait avec AS3, mais je cherche une solution plus optimisée, même si elle passe par des méthodes plus complexes.

Fichier joint  prototype-rope.gif   759.39 Ko   20 téléchargement(s)

La méthode classique passe par un ensemble de segments utilisant de la cinématique inverse, chaque segment possédant une hitbox, le tout étant animé via un peu de physique élémentaire. Ce n'est pas super compliqué à coder, mais ça me semble peu optimisé si pour chaque corde je dois gérer un ensemble d'objets reliés avec chacun sa hitbox.

Fichier joint  051.png   38.07 Ko   22 téléchargement(s)

Dans un autre genre on peut aussi utiliser des cercles au lieu de segments, ceci permet d'obtenir un peu plus de précision, mais demande d'ajouter des collisions Cercles/AABB, pas très complexe, mais là encore je trouve que ça fait beaucoup d'objets à gérer pour une simple corde.

Fichier joint  gravitus.png   7.38 Ko   20 téléchargement(s)

Je suis donc parti sur l'idée d'un pendule simple avec une animation orientée en fonction du déplacement du pendule, ceci pour conserver une hitbox unique et assez grande pour faciliter les actions du joueur (s'y agripper, monter, descendre, tirer, sauter de corde en corde, ect...). Mais le problème, oui il y en a sinon ce serait trop beau, c'est que je ne suis du coup plus dans le cas de collisions AABB (Axis Aligned Bounding Box), ce qui m'oblige à composer une détection de collision spéciale pour les cordes et je perds l'optimisation que m'apporte l'idée du pendule...

Fichier joint  Moving-animated-clip-art-picture-of-pendulum-x-bpm-1.gif   141.36 Ko   21 téléchargement(s)

Mon moteur est basé pour le moment sur des collisions simples entre AABB (et à la limite de Cercles/AABB).

Fichier joint  400px-Aabb.png   29.96 Ko   22 téléchargement(s)

J'aimerai donc trouver une astuce qui m'évite d'avoir à coder des collisions plus complexes que des AABB et utiliser de nombreux objets pour une simple corde. Si je ne trouve pas je coderai ma corde avec les méthodes classiques, je penche pour celle avec des cercles qui me semble être la plus souple, mais j'essaye de trouver une solution plus maline.

Des idées, des bouts de code ?

Je vais continuer à réfléchir de mon côté mais si vous avez des infos ça peut m'intéresser et me faire gagner du temps.

Ouverture Acrobat X

20 May 2016 - 17:29 PM

Bonjour,

C'est pas souvent que je demande ce genre de choses, mais là j'ai la flemme de chercher...
J'ai un souci avec Acrobat X pro (cs6) et Acrobat Distiller X (cs6).
Je ne les utilises pas souvent (pour ne pas dire jamais), mais exceptionnellement j'ai besoin de faire une retouche sur un PDF pour un client, et bien sûr c'est toujours à ce moment qu'il y a bug (putain de loi de Murphy.....), bref...

Quand je veux lancer l'un ou l'autre il ne se passe absolument rien.
Aucun process de lancé (sur Windows 7), pas de réaction de l'OS, rien vous dis-je.
C'est une version CS6 avec licence, donc sensée être propre.
J'ai raté une mise à jour ?
Quelqu'un a un patch correctif ?

Mandrake, JRB, vous qui êtes les pro de la chose, vous avez sûrement déjà croisé le problème, vous auriez une info qui va m'éviter de galérer pendant 8 ans pour juste changer deux mots sur un PDF ?

Merci, bonne soirée, bon apéro, bon début de weekend, bonne fête du porcher, et méfiez-vous de la fée des dents.
Pouet !

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP