IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Animation avec JavaScript


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    Octobre 2012
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2012
    Messages : 9
    Points : 9
    Points
    9
    Par défaut Animation avec JavaScript
    Bonjour à tous,

    Alors voila je me met a utiliser le framework kinetic.js pour faire des petit jeux ou tout simplement de l’animation.

    Donc je me suis mis au sprite.
    J'arrive bien a lancer un sprite simplement comme ceci:

    Mais lorsque je veux lancer l'animation lors d'un event keyboard (dans mon cas les flèche directionelle) l'animation est toute moche.

    Quelqu'un aurait il une idée ?

  2. #2
    Membre confirmé

    Profil pro
    Inscrit en
    Octobre 2010
    Messages
    311
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 311
    Points : 545
    Points
    545
    Par défaut
    Salut !
    Je ne connais pas Kinetic, mais je te conseil de séparer l’update de ton entité de la gestion des évènements clavier.
    Pour cela maintient, en mémoire, les états des touches clavier, comme ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    var Keys ={
    	Up   : "38",
    	Down : "40",
    	Left : "37",
    	Right: "39"
    };
     
    window.addEventListener('keydown',
    function( evt )
    {
    	Keys[evt.keyCode]=true;
    }, false);
     
    window.addEventListener('keyup',
    function( evt )
    {
    	Keys[evt.keyCode]=false;
    }, false);
    Pour l’update time tes déplacements et évite d’appeler plusieurs fois les méthodes start et stop ( peut être que celles-ci réinitialisent l’animation)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    sonic.onUpdate = function(deltatime)
    {
    	if(Keys[Keys.Right])
    	{
    		if(!sonic.running)
    			sonic.start();
     
    		sonic.attrs.x += 5*deltatime;
    	}
     
    	if(Keys[Keys.Left])
    	{
    		if(!sonic.running)
    			sonic.start();
     
    		sonic.attrs.x -= 5*deltatime;
    	}
     
    	if(sonic.running && !Keys[Keys.Left] && !Keys[Keys.Right])
    		sonic.stop();
    }
    Si Kinetic lève un évènement Update sur ton entité sonic vérifie que cette librairie utilise bien la fonction requestAnimationFrame, sinon branche-la comme ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var lastTick = Date.now();
    function animate() 
    {
    	requestAnimationFrame(animate);
    	var tick = Date.now();
    	var dt = tick-lastTick;
    	lastTick = tick;
    	sonic.onUpdate(dt);
    }

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    Octobre 2012
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2012
    Messages : 9
    Points : 9
    Points
    9
    Par défaut
    Je vais regarder tout ca demain, histoire de bien comprendre le code que tu me propose. En tout cas merci d'avoir pris de ton temps pour répondre !
    Je te tiens au jus !

Discussions similaires

  1. Animation avec Javascript
    Par L'aigle de Carthage dans le forum jQuery
    Réponses: 7
    Dernier message: 04/07/2014, 15h11
  2. [API HTML5] Animation avec javascript
    Par lolaalol dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 12/12/2012, 22h06
  3. Animations avec différents objet
    Par Mathieu.J dans le forum OpenGL
    Réponses: 6
    Dernier message: 09/06/2004, 14h18
  4. Réponses: 4
    Dernier message: 27/04/2004, 14h45
  5. Réponses: 2
    Dernier message: 14/01/2004, 16h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo