Forums Développement Multimédia

Aller au contenu

Monsieur Spi

Inscrit(e) (le) 10 Mar 2005
Déconnecté Dernière activité Jul 21 2018 19:28 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   35 téléchargement(s)

Fichier joint  metroid-debug.jpg   69.51 Ko   30 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é..... ).

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